fix prefill issue

Author: sanjaypinna

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

@@ -116,7 +116,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
   );
   const {
     data: accessModelDetails,
-    refetch,
+    refetch: accessModelDetailsRefetch,
     isLoading: accessModelDetailsLoading,
   }: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`accessModelDetails${params.id}`],
@@ -158,7 +158,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     if (accessModelDetails && accessModelDetails.accessModel && accessModelId) {
       const { name, description, type, modelResources } =
         accessModelDetails.accessModel;
-      refetch();
+
+      accessModelDetailsRefetch();
       // Update accessModelData with the received data
       setAccessModelData({
         dataset: params.id,
@@ -196,11 +197,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     }
   }, [accessModelDetails, accessModelId]);
 
-  const [resId, setResId] = useState('');
-
   const handleAddResource = (resourceDetails: any) => {
     setSelectedResources(resourceDetails);
-    setResId('');
     setAvailableResources(resourceDetails); // Filter out the selected resource
     setSelectedFields(resourceDetails);
     const newResources = resourceDetails.map((resource: any) => ({
@@ -272,10 +270,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     {
       onSuccess: () => {
         toast('Access Model Saved');
-        // refetch();
-        // accessModelListRefetch();
+        accessModelDetailsRefetch();
+        accessModelListRefetch();
 
-        setList(true);
+        // setList(true);
       },
       onError: (err: any) => {
         toast(`Received ${err} during access model saving`);
@@ -373,11 +371,11 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 mutate({
                   accessModelInput: {
                     name: accessModelData.name,
-                    resources: accessModelData.resources,
                     dataset: accessModelData.dataset,
                     description: accessModelData.description,
                     type: accessModelData.type as AccessTypes,
                     accessModelId: accessModelId || null,
+                    resources: accessModelData.resources,
                   },
                 })
               }

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

@@ -29,12 +29,34 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
   useEffect(() => {
     const initialOptions = selectedResource.schema.map((field: any) => ({
       label: field.fieldName,
-      value: +field.id,
+      value: field.id.toString(), // Ensure ID is a string for Combobox
     }));
     setOptions(initialOptions);
-    if (selectAllFields) {
+
+    const selectedResourceData = accessModelData.resources.find(
+      (resource: any) => resource.resource === selectedResource.id
+    );
+
+    if (selectedResourceData) {
+      const initialSelectedFields = selectedResourceData.fields
+        .map((fieldId: any) => {
+          const field = selectedResource.schema.find(
+            (f: any) => f.id.toString() === fieldId.toString()
+          );
+          return field
+            ? {
+                label: field.fieldName,
+                value: field.id.toString(), // Ensure ID is a string for Combobox
+              }
+            : null;
+        })
+        .filter((field: any) => field !== null); // Filter out null values
+      setSelectedFields(initialSelectedFields);
+      setSelectAllFields(
+        initialSelectedFields.length === initialOptions.length
+      );
+    } else if (selectAllFields) {
       setSelectedFields(initialOptions);
-      // Update accessModelData with all options selected
       setAccessModelData((prevData: any) => ({
         ...prevData,
         resources: [
@@ -43,33 +65,23 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
           ),
           {
             resource: selectedResource.id,
-            fields: initialOptions.map((option: any) => option.value),
+            fields: initialOptions.map((option: any) =>
+              parseInt(option.value, 10)
+            ), // Convert to integer
           },
         ],
       }));
-    } else {
-      // Update accessModelData to remove this resource
-      setAccessModelData((prevData: any) => ({
-        ...prevData,
-        resources: prevData.resources.filter(
-          (resource: any) => resource.resource !== selectedResource.id
-        ),
-      }));
     }
-  }, [selectedResource.schema, selectAllFields]);
+  }, [selectedResource, accessModelData, selectAllFields]);
 
-  const handleFieldSelection = (selectedOptions: []) => {
-    setSelectedFields(
-      selectedOptions.map((option: any) => ({
-        label: option?.label || '',
-        value: option?.value,
-      }))
-    );
+  const handleFieldSelection = (selectedOptions: any) => {
+    const updatedFields = selectedOptions.map((option: any) => ({
+      label: option.label,
+      value: option.value,
+    }));
 
-    // Check if all options are selected
-    const allOptionsSelected = selectedOptions.length === options.length;
+    setSelectedFields(updatedFields);
 
-    // Update accessModelData with the selected fields
     setAccessModelData((prevData: any) => ({
       ...prevData,
       resources: [
@@ -78,18 +90,36 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
         ),
         {
           resource: selectedResource.id,
-          fields: selectedOptions.map((option: any) => option.value),
+          fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
         },
       ],
     }));
 
-    // Update selectAllFields state based on whether all options are selected or not
-    setSelectAllFields(allOptionsSelected);
+    setSelectAllFields(updatedFields.length === options.length);
+  };
+
+  const handleSelectAllFields = () => {
+    const updatedFields = selectAllFields ? [] : options;
+    setSelectAllFields(!selectAllFields);
+    setSelectedFields(updatedFields);
+
+    setAccessModelData((prevData: any) => ({
+      ...prevData,
+      resources: [
+        ...prevData.resources.filter(
+          (resource: any) => resource.resource !== selectedResource.id
+        ),
+        {
+          resource: selectedResource.id,
+          fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
+        },
+      ],
+    }));
   };
 
   return (
     <div>
-      <div className=" mb-4">
+      <div className="mb-4">
         <Text>{selectedResource.name}</Text>
       </div>
       <div className="flex flex-wrap justify-start gap-6 px-8">
@@ -98,47 +128,44 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
             <div className="w-full">
               <Combobox
                 displaySelected
-                label={'Select Fields of the Resource'}
+                label="Select Fields of the Resource"
                 list={options}
                 selectedValue={selectedFields}
-                name={''}
-                helpText={'Use the dropdown to add specific fields'}
+                name=""
+                helpText="Use the dropdown to add specific fields"
                 onChange={(e: any) => handleFieldSelection(e)}
               />
             </div>
-            <div className="absolute right-0 top-0 " style={{ top: '-4px' }}>
+            <div className="absolute right-0" style={{ top: '-4px' }}>
               <Checkbox
-                name={'Select All Fields'}
-                defaultChecked={true}
+                name="Select All Fields"
                 checked={selectAllFields}
-                onChange={() => setSelectAllFields(!selectAllFields)}
+                onChange={handleSelectAllFields}
               >
                 Select All
               </Checkbox>
             </div>
           </div>
         </div>
         <div className="flex gap-6">
-          <hr className=" m-0" />
+          <hr className="m-0" />
           <div className="flex w-fit flex-col items-center justify-center gap-1">
-            <div className="flex w-full items-center justify-between gap-2 ">
+            <div className="flex w-full items-center justify-between gap-2">
               <Text>Select Rows of the Resource</Text>
               <Checkbox
-                name={'Select All Rows'}
+                name="Select All Rows"
                 defaultChecked={false}
                 onChange={(e) => console.log(e)}
               >
                 Select All
               </Checkbox>
             </div>
-            <div
-              className={cn('flex  flex-wrap gap-6', styles.accessModelEdit)}
-            >
-              <TextField type="number" label="From Row Number" name="name" />
-              <TextField type="number" label="From Row Number" name="name" />
+            <div className={cn('flex flex-wrap gap-6', styles.accessModelEdit)}>
+              <TextField type="number" label="From Row Number" name="fromRow" />
+              <TextField type="number" label="To Row Number" name="toRow" />
             </div>
           </div>
-          <hr className=" m-0" />
+          <hr className="m-0" />
         </div>
         <Button
           className="my-auto h-fit w-fit items-center"