chore: update entity option added

This commit is contained in:
Aaryan Khandelwal 2023-09-19 18:09:36 +05:30
parent 3b682c2124
commit dc908d21bb
2 changed files with 80 additions and 35 deletions

View File

@ -30,19 +30,12 @@ export const ObjectModal: React.FC<Props> = observer(
description: "", description: "",
}); });
const [isCreatingObject, setIsCreatingObject] = useState(false); const [isCreatingObject, setIsCreatingObject] = useState(false);
const [isUpdatingObject, setIsUpdatingObject] = useState(false);
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
const { customAttributes: customAttributesStore } = useMobxStore(); const { customAttributes } = useMobxStore();
const {
createEntity,
createEntityAttribute,
createEntityAttributeLoader,
entityAttributes,
fetchEntityDetails,
fetchEntityDetailsLoader,
} = customAttributesStore;
const handleClose = () => { const handleClose = () => {
onClose(); onClose();
@ -52,7 +45,7 @@ export const ObjectModal: React.FC<Props> = observer(
}, 300); }, 300);
}; };
const handleCreateEntity = async () => { const handleCreateObject = async () => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
setIsCreatingObject(true); setIsCreatingObject(true);
@ -64,7 +57,8 @@ export const ObjectModal: React.FC<Props> = observer(
type: "entity", type: "entity",
}; };
await createEntity(workspaceSlug.toString(), payload) await customAttributes
.createEntity(workspaceSlug.toString(), payload)
.then((res) => { .then((res) => {
setObject((prevData) => ({ ...prevData, ...res })); setObject((prevData) => ({ ...prevData, ...res }));
if (onSubmit) onSubmit(); if (onSubmit) onSubmit();
@ -72,6 +66,21 @@ export const ObjectModal: React.FC<Props> = observer(
.finally(() => setIsCreatingObject(false)); .finally(() => setIsCreatingObject(false));
}; };
const handleUpdateObject = async () => {
if (!workspaceSlug || !object || !object.id) return;
setIsUpdatingObject(true);
const payload: Partial<ICustomAttribute> = {
description: object.description ?? "",
display_name: object.display_name ?? "",
};
await customAttributes
.updateEntity(workspaceSlug.toString(), object.id, payload)
.finally(() => setIsUpdatingObject(false));
};
const handleCreateEntityAttribute = async (type: TCustomAttributeTypes) => { const handleCreateEntityAttribute = async (type: TCustomAttributeTypes) => {
if (!workspaceSlug || !object || !object.id) return; if (!workspaceSlug || !object || !object.id) return;
@ -83,21 +92,24 @@ export const ObjectModal: React.FC<Props> = observer(
...typeMetaData.initialPayload, ...typeMetaData.initialPayload,
}; };
await createEntityAttribute(workspaceSlug.toString(), { ...payload, parent: object.id }); await customAttributes.createEntityAttribute(workspaceSlug.toString(), {
...payload,
parent: object.id,
});
}; };
// fetch the object details if object state has id // fetch the object details if object state has id
useEffect(() => { useEffect(() => {
if (!object.id || object.id === "") return; if (!object.id || object.id === "") return;
if (!entityAttributes[object.id]) { if (!customAttributes.entityAttributes[object.id]) {
if (!workspaceSlug) return; if (!workspaceSlug) return;
fetchEntityDetails(workspaceSlug.toString(), object.id).then((res) => { customAttributes.fetchEntityDetails(workspaceSlug.toString(), object.id).then((res) => {
setObject({ ...res }); setObject({ ...res });
}); });
} }
}, [object.id, workspaceSlug, fetchEntityDetails, entityAttributes]); }, [customAttributes, object.id, workspaceSlug]);
// update the object state if objectIdToEdit is present // update the object state if objectIdToEdit is present
useEffect(() => { useEffect(() => {
@ -163,30 +175,40 @@ export const ObjectModal: React.FC<Props> = observer(
setObject((prevData) => ({ ...prevData, description: e.target.value })) setObject((prevData) => ({ ...prevData, description: e.target.value }))
} }
/> />
{object.id && (
<div className="text-right">
<PrimaryButton onClick={handleUpdateObject} loading={isUpdatingObject}>
{isUpdatingObject ? "Saving..." : "Save changes"}
</PrimaryButton>
</div>
)}
</div> </div>
{object.id && ( {object.id && (
<div className="px-6 pb-5"> <div className="px-6 pb-5">
<h4 className="font-medium">Attributes</h4> <h4 className="font-medium">Attributes</h4>
<div className="mt-2 space-y-2"> <div className="mt-2 space-y-2">
{fetchEntityDetailsLoader ? ( {customAttributes.fetchEntityDetailsLoader ? (
<Loader> <Loader>
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </Loader>
) : ( ) : (
Object.keys(entityAttributes[object.id] ?? {})?.map((attributeId) => { Object.keys(customAttributes.entityAttributes[object.id] ?? {})?.map(
const attribute = entityAttributes[object.id ?? ""][attributeId]; (attributeId) => {
const attribute =
customAttributes.entityAttributes[object.id ?? ""][attributeId];
return ( return (
<AttributeForm <AttributeForm
key={attributeId} key={attributeId}
attributeDetails={attribute} attributeDetails={attribute}
objectId={object.id ?? ""} objectId={object.id ?? ""}
type={attribute.type} type={attribute.type}
/> />
); );
}) }
)
)} )}
{createEntityAttributeLoader && ( {customAttributes.createEntityAttributeLoader && (
<Loader> <Loader>
<Loader.Item height="40px" /> <Loader.Item height="40px" />
</Loader> </Loader>
@ -200,13 +222,11 @@ export const ObjectModal: React.FC<Props> = observer(
</div> </div>
<div className="flex items-center justify-end gap-3 px-6 py-5 border-t border-custom-border-200"> <div className="flex items-center justify-end gap-3 px-6 py-5 border-t border-custom-border-200">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton onClick={handleCreateEntity} loading={isCreatingObject}> {!object.id && (
{object.id <PrimaryButton onClick={handleCreateObject} loading={isCreatingObject}>
? "Save changes" {isCreatingObject ? "Creating..." : "Create Object"}
: isCreatingObject </PrimaryButton>
? "Creating..." )}
: "Create Object"}
</PrimaryButton>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

View File

@ -27,6 +27,7 @@ class CustomAttributesStore {
fetchEntities: action, fetchEntities: action,
fetchEntityDetails: action, fetchEntityDetails: action,
createEntity: action, createEntity: action,
updateEntity: action,
deleteEntity: action, deleteEntity: action,
createEntityAttribute: action, createEntityAttribute: action,
updateEntityAttribute: action, updateEntityAttribute: action,
@ -112,6 +113,30 @@ class CustomAttributesStore {
} }
}; };
updateEntity = async (
workspaceSlug: string,
objectId: string,
data: Partial<ICustomAttribute>
) => {
try {
const response = await customAttributesService.patchProperty(workspaceSlug, objectId, data);
const newEntities = [...(this.entities ?? [])].map((entity) =>
entity.id === objectId ? { ...entity, ...response } : entity
);
runInAction(() => {
this.entities = newEntities;
});
return response;
} catch (error) {
runInAction(() => {
this.error = error;
});
}
};
deleteEntity = async (workspaceSlug: string, propertyId: string) => { deleteEntity = async (workspaceSlug: string, propertyId: string) => {
try { try {
await customAttributesService.deleteProperty(workspaceSlug, propertyId); await customAttributesService.deleteProperty(workspaceSlug, propertyId);