Merge pull request #117 from CivicDataLab/112-implement-auto-save-in-dam

Implement Auto Save Mechanism in access model creation

Author: bhavabhuthi

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx

@@ -17,7 +17,9 @@ import {
 } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { cn } from '@/lib/utils';
 import { Icons } from '@/components/icons';
+import styles from '../edit.module.scss';
 import ResourceSelector from './ResourceSelector';
 
 interface AccessModelProps {
@@ -131,6 +133,9 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     resources: [],
     accessModelId: '',
   });
+  const [previousAccessModelData, setPreviousAccessModelData] =
+    useState(accessModelData);
+
   const [selectedResources, setSelectedResources] = useState<string[]>([]);
   const [showSelectAll, setShowSelectAll] = useState(false);
 
@@ -161,7 +166,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
       accessModelDetailsRefetch();
       // Update accessModelData with the received data
-      setAccessModelData({
+      const newData = {
         dataset: params.id,
         name: name,
         description: description,
@@ -171,7 +176,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
           resource: resource.resource.id,
           fields: resource.fields.map((field: any) => +field.id),
         })),
-      });
+      };
+
+      setAccessModelData(newData);
+      setPreviousAccessModelData(newData);
 
       // Update selectedResources and selectedFields based on modelResources
       const selectedResourcesIds = modelResources.map((resource: any) => ({
@@ -203,13 +211,14 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     setSelectedFields(resourceDetails);
     const newResources = resourceDetails.map((resource: any) => ({
       resource: resource.value,
-      fields: resource.schema.map((field: any) => field.id),
+      fields: resource.schema.map((field: any) => +field.id),
     }));
 
     setAccessModelData((prevData: any) => ({
       ...prevData,
       resources: newResources,
     }));
+
     if (resourceDetails.length === 0) {
       setAccessModelData((prevData: any) => ({
         ...prevData,
@@ -221,6 +230,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         resources: [...prevData.resources],
       }));
     }
+
+    handleSave({ ...accessModelData, resources: newResources });
   };
 
   const handleRemoveResource = (resourceId: any) => {
@@ -235,12 +246,16 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     );
 
     // Remove the corresponding resource from accessModelData.resources
+    const updatedResources = accessModelData.resources.filter(
+      (resource: any) => resource.resource !== resourceId
+    );
+
     setAccessModelData((prevData: any) => ({
       ...prevData,
-      resources: prevData.resources.filter(
-        (resource: any) => resource.resource !== resourceId
-      ),
+      resources: updatedResources,
     }));
+
+    handleSave({ ...accessModelData, resources: updatedResources });
   };
 
   const handleSelectAll = () => {
@@ -255,26 +270,29 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     setSelectedResources(allResources);
     setShowSelectAll(false);
 
+    const updatedResources = allResources.map((resource: any) => ({
+      resource: resource.value,
+      fields: resource.schema.map((option: any) => option.value),
+    }));
+
     setAccessModelData((prevData) => ({
       ...prevData,
-      resources: allResources.map((resource: any) => ({
-        resource: resource.value,
-        fields: resource.schema.map((option: any) => option.value),
-      })),
+      resources: updatedResources,
     }));
+
+    handleSave({ ...accessModelData, resources: updatedResources });
   };
 
   const { mutate, isLoading: editMutationLoading } = useMutation(
     (data: { accessModelInput: EditAccessModelInput }) =>
       GraphQL(editaccessModel, data),
     {
       onSuccess: (res: any) => {
-        toast('Access Model Saved');
+        // toast('Access Model Saved');
         accessModelDetailsRefetch();
         accessModelListRefetch();
         setAccessModelId(res?.editAccessModel?.id);
-
-        // setList(true);
+        setPreviousAccessModelData(accessModelData);
       },
       onError: (err: any) => {
         toast(`Received ${err} during access model saving`);
@@ -284,6 +302,28 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
+  const handleSave = (updatedData: any) => {
+    if (
+      JSON.stringify(updatedData) !== JSON.stringify(previousAccessModelData)
+    ) {
+      mutate({
+        accessModelInput: {
+          name: updatedData.name,
+          dataset: params.id,
+          description: updatedData.description,
+          type: updatedData.type as AccessTypes,
+          resources: updatedData.resources,
+          accessModelId: accessModelId || null,
+        },
+      });
+    }
+  };
+
+  const handleChange = (field: string, value: any) => {
+    const updatedData = { ...accessModelData, [field]: value };
+    setAccessModelData(updatedData);
+  };
+
   return (
     <div className="rounded-2 border-2 border-solid border-baseGraySlateSolid6 px-6 py-8">
       <div className="mb-6 flex flex-wrap items-center justify-between gap-6">
@@ -343,11 +383,12 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 (item: any, index: any) => (
                   <div
                     key={index}
-                    className="  rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6  py-3  "
+                    className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${accessModelId === item.id ? ' bg-baseGraySlateSolid5' : ''}`}
                   >
                     <Button
                       kind={'tertiary'}
                       className="flex w-full justify-start"
+                      disabled={accessModelId === item.id}
                       onClick={() => {
                         setAccessModelId(item.id);
                         setIsSheetOpen(false);
@@ -363,41 +404,27 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         </Sheet>
       </div>
       <Divider />
-      {isLoading ||
-      editMutationLoading ||
-      accessModelDetailsLoading ||
-      accessModelListLoading ? (
+      {isLoading ? (
         <div className="mt-8 flex justify-center">
           <Spinner />
         </div>
       ) : (
         <div className="mt-6 flex flex-col gap-8">
-          <div className="text-center">
-            <Button
-              onClick={() =>
-                mutate({
-                  accessModelInput: {
-                    name: accessModelData.name,
-                    dataset: accessModelData.dataset,
-                    description: accessModelData.description,
-                    type: accessModelData.type as AccessTypes,
-                    accessModelId: accessModelId || null,
-                    resources: accessModelData.resources,
-                  },
-                })
-              }
-            >
-              Save Access Type
-            </Button>
+          <div className="flex justify-end gap-2">
+            <Text color="highlight">Auto Save </Text>
+            {editMutationLoading ? (
+              <Spinner />
+            ) : (
+              <Icon source={Icons.checkmark} />
+            )}
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex  gap-6">
               <div className=" w-4/5">
                 <TextField
                   value={accessModelData.name}
-                  onChange={(e) =>
-                    setAccessModelData({ ...accessModelData, name: e })
-                  }
+                  onChange={(e) => handleChange('name', e)}
+                  onBlur={() => handleSave(accessModelData)}
                   label="Access Type Name"
                   name="name"
                   required
@@ -416,27 +443,22 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 defaultValue={'PUBLIC'}
                 value={accessModelData.type}
                 placeholder="Select"
-                onChange={(e) =>
-                  setAccessModelData({ ...accessModelData, type: e })
-                }
+                onChange={(e) => handleChange('type', e)}
+                onBlur={() => handleSave(accessModelData)}
               />
             </div>
             <TextField
               value={accessModelData.description}
-              onChange={(e) =>
-                setAccessModelData({
-                  ...accessModelData,
-                  description: e,
-                })
-              }
+              onChange={(e) => handleChange('description', e)}
+              onBlur={() => handleSave(accessModelData)}
               label="Description"
               name="description"
               multiline={4}
             />
           </div>
 
           <div className="flex items-end gap-6">
-            <div className="w-3/4">
+            <div className={cn(' w-3/4', styles.combobox)}>
               <Combobox
                 displaySelected
                 label={'Select Fields of the Resource'}
@@ -479,6 +501,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 handleRemoveResource={handleRemoveResource}
                 accessModelData={accessModelData}
                 setAccessModelData={setAccessModelData}
+                handleSave={handleSave}
               />
             );
           })}

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx

@@ -10,13 +10,15 @@ interface ResourceSelectorProps {
   handleRemoveResource: (resourceId: string) => void;
   accessModelData: any;
   setAccessModelData: (data: any) => void;
+  handleSave: (updatedData: any) => void;
 }
 
 const ResourceSelector: React.FC<ResourceSelectorProps> = ({
   selectedResource,
   handleRemoveResource,
   accessModelData,
   setAccessModelData,
+  handleSave,
 }) => {
   const [selectAllFields, setSelectAllFields] = useState(true);
   const [options, setOptions] = useState<{ label: string; value: string }[]>(
@@ -57,10 +59,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
       );
     } else if (selectAllFields) {
       setSelectedFields(initialOptions);
-      setAccessModelData((prevData: any) => ({
-        ...prevData,
+      const updatedData = {
+        ...accessModelData,
         resources: [
-          ...prevData.resources.filter(
+          ...accessModelData.resources.filter(
             (resource: any) => resource.resource !== selectedResource.id
           ),
           {
@@ -70,9 +72,17 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
             ), // Convert to integer
           },
         ],
-      }));
+      };
+      setAccessModelData(updatedData);
+      handleSave(updatedData);
     }
-  }, [selectedResource, accessModelData, selectAllFields]);
+  }, [
+    selectedResource,
+    accessModelData,
+    selectAllFields,
+    setAccessModelData,
+    handleSave,
+  ]);
 
   const handleFieldSelection = (selectedOptions: any) => {
     const updatedFields = selectedOptions.map((option: any) => ({
@@ -82,18 +92,21 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
 
     setSelectedFields(updatedFields);
 
-    setAccessModelData((prevData: any) => ({
-      ...prevData,
+    const updatedData = {
+      ...accessModelData,
       resources: [
-        ...prevData.resources.filter(
+        ...accessModelData.resources.filter(
           (resource: any) => resource.resource !== selectedResource.id
         ),
         {
           resource: selectedResource.id,
           fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
         },
       ],
-    }));
+    };
+
+    setAccessModelData(updatedData);
+    handleSave(updatedData);
 
     setSelectAllFields(updatedFields.length === options.length);
   };
@@ -103,18 +116,21 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
     setSelectAllFields(!selectAllFields);
     setSelectedFields(updatedFields);
 
-    setAccessModelData((prevData: any) => ({
-      ...prevData,
+    const updatedData = {
+      ...accessModelData,
       resources: [
-        ...prevData.resources.filter(
+        ...accessModelData.resources.filter(
           (resource: any) => resource.resource !== selectedResource.id
         ),
         {
           resource: selectedResource.id,
           fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
         },
       ],
-    }));
+    };
+
+    setAccessModelData(updatedData);
+    handleSave(updatedData);
   };
 
   return (
@@ -132,9 +148,9 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
         </Button>
       </div>
       <div className="flex flex-wrap gap-6 px-8">
-        <div className="flex w-3/5 flex-col gap-4">
+        <div className="flex w-full flex-col gap-4 2xl:w-3/5">
           <div className="relative mr-4 flex items-center">
-            <div>
+            <div className={cn('mt-1 w-full', styles.combobox)}>
               <Combobox
                 displaySelected
                 label="Select Fields of the Resource"
@@ -145,7 +161,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
                 onChange={(e: any) => handleFieldSelection(e)}
               />
             </div>
-            <div className="absolute right-0" style={{ top: '-4px' }}>
+            <div className="absolute right-0" style={{ top: '1px' }}>
               <Checkbox
                 name="Select All Fields"
                 checked={selectAllFields}

app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/edit.module.scss

@@ -9,3 +9,9 @@
     width: 140px;
   }
 }
+
+.combobox {
+  [role='presentation'] {
+    z-index: 1000 !important;
+  }
+}