Merge pull request #121 from CivicDataLab/120-fix-access-model-issues

Fix access model issues

Author: bhavabhuthi

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

@@ -257,13 +257,15 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
     handleSave({ ...accessModelData, resources: updatedResources });
   };
-
   const handleSelectAll = () => {
     const allResources =
       data?.datasetResources.map((resource: any) => ({
         label: resource.name,
         value: resource.id,
-        schema: resource.schema,
+        schema: resource.schema.map((field: any) => ({
+          label: field.fieldName,
+          value: field.id.toString(), // Ensure ID is a string for Combobox
+        })),
       })) || [];
 
     setSelectedFields(allResources);
@@ -272,15 +274,16 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
     const updatedResources = allResources.map((resource: any) => ({
       resource: resource.value,
-      fields: resource.schema.map((option: any) => option.value),
+      fields: resource.schema.map((option: any) => parseInt(option.value, 10)), // Convert to integer
     }));
 
-    setAccessModelData((prevData) => ({
-      ...prevData,
+    const updatedData = {
+      ...accessModelData,
       resources: updatedResources,
-    }));
+    };
 
-    handleSave({ ...accessModelData, resources: updatedResources });
+    setAccessModelData(updatedData);
+    handleSave(updatedData);
   };
 
   const { mutate, isLoading: editMutationLoading } = useMutation(
@@ -460,10 +463,11 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
           <div className="flex items-end gap-6">
             <div className={cn(' w-3/4', styles.combobox)}>
               <Combobox
-                displaySelected
+                // displaySelected
                 label={'Select Fields of the Resource'}
                 list={availableResources}
                 selectedValue={selectedFields}
+                placeholder={`${selectedResources.length} resources selected`}
                 name={''}
                 helpText={
                   'Only Resources added will be part of this Access Type. After adding select the Fields and Rows to be included'

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

@@ -1,10 +1,18 @@
 import { UUID } from 'crypto';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { Button, DataTable, IconButton, Spinner, Text, toast } from 'opub-ui';
+import {
+  Button,
+  DataTable,
+  IconButton,
+  SearchInput,
+  Spinner,
+  Text,
+  toast,
+} from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import { formatDate, toTitleCase } from '@/lib/utils';
@@ -54,11 +62,16 @@ const AccessModelList: React.FC<AccessModelListProps> = ({
       })
   );
 
+  const [filteredRows, setFilteredRows] = useState<any[]>([]);
+
   useEffect(() => {
     refetch();
-  }, [list]);
+    if (data?.accessModelResources) {
+      setFilteredRows(data.accessModelResources);
+    }
+  }, [data, list]);
 
-  const { mutate } = useMutation(
+  const { mutate, isLoading: deleteLoading } = useMutation(
     (data: { accessModelId: UUID }) => GraphQL(deleteAccessModel, data),
     {
       onSuccess: () => {
@@ -126,24 +139,39 @@ const AccessModelList: React.FC<AccessModelListProps> = ({
     }));
   };
 
+  const handleSearchChange = (e: string) => {
+    const searchTerm = e.toLowerCase();
+    const filtered = data?.accessModelResources.filter((row: any) =>
+      row.name.toLowerCase().includes(searchTerm)
+    );
+    setFilteredRows(filtered || []);
+  };
+
   return (
     <div>
-      {!data || isLoading ? (
+      {!data || isLoading || deleteLoading ? (
         <div className=" mt-8 flex justify-center">
           <Spinner />
         </div>
       ) : (
         <>
-          <div className=" my-6 flex items-center justify-between px-3 py-4">
+          <div className=" my-6 flex flex-wrap items-center justify-between px-3 py-4">
             <Text>
-              Showing {data.accessModelResources?.length} Access Types
+              Showing {data?.accessModelResources?.length || 0} Access Types
             </Text>
+            <SearchInput
+              className="w-1/2 "
+              placeholder="Search in Resources"
+              label="Search"
+              name="Search"
+              onChange={(e) => handleSearchChange(e)}
+            />
             <Button onClick={(e) => setList(false)}>Add Access Type</Button>
           </div>
 
           <DataTable
             columns={generateColumnData()}
-            rows={generateTableData(data.accessModelResources)}
+            rows={generateTableData(filteredRows)}
             hideSelection
             truncate
             hideFooter

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

@@ -132,7 +132,7 @@ export function EditLayout({ children, params }: LayoutProps) {
             organization={routerParams.organizationId.toString()}
           />
         </div>
-        <div className="bg-surface shadow-card border-l-divider rounded-tl-none  flex-grow py-4">
+        <div className="bg-surface shadow-card border-l-divider rounded-tl-none  my-6  flex-grow">
           {children}
         </div>
       </div>