Merge pull request #83 from CivicDataLab/ResourceListView-Search

bhavabhuthi · web-flow · commit 1fcc70cd68e9 · 2024-05-20T13:55:46.000+05:30
fix: modal and search input for ResourceListView
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
@@ -119,6 +119,7 @@ export const createResourceFilesDoc: any = graphql(`
       id
       created
       name
+      type
     }
   }
 `);
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceListView.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceListView.tsx
@@ -14,10 +14,12 @@ import {
   DataTable,
   Dialog,
   DropZone,
+  Icon,
   IconButton,
   SearchInput,
   Spinner,
   Text,
+  TextField,
   toast,
 } from 'opub-ui';
 
@@ -26,6 +28,13 @@ import { formatDate } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { createResourceFilesDoc } from './DistributionList';
 
+type FilteredRow = {
+  name_of_resource: string;
+  type: string;
+  date_added: string;
+  id: string;
+};
+
 export const ResourceListView = ({ data, refetch }: any) => {
   const updateResourceList: any = graphql(`
     mutation deleteFileResource($resourceId: UUID!) {
@@ -35,10 +44,14 @@ export const ResourceListView = ({ data, refetch }: any) => {
 
   const [resourceId, setResourceId] = useQueryState('id', parseAsString);
 
-  const { mutate, isLoading } = useMutation(
+  const { mutate } = useMutation(
     (data: { resourceId: string }) => GraphQL(updateResourceList, data),
     {
-      onSuccess: () => {
+      onSuccess: (data, variables) => {
+        const updatedFilteredRows = filteredRows.filter(
+          (row: any) => row.id !== variables.resourceId
+        );
+        setFilteredRows(updatedFilteredRows);
         refetch();
         toast('Resource Deleted Successfully', {
           action: {
@@ -58,6 +71,18 @@ export const ResourceListView = ({ data, refetch }: any) => {
       GraphQL(createResourceFilesDoc, data),
     {
       onSuccess: (data: any) => {
+        const updatedRows = data.createFileResources.map((item: any) => ({
+          name_of_resource: item.name,
+          type: item.type,
+          date_added: formatDate(item.created),
+          id: item.id,
+        }));
+
+        setFilteredRows((prevRows: FilteredRow[]) => [
+          ...prevRows,
+          ...updatedRows,
+        ]);
+
         refetch();
         toast('Resource Added Successfully', {
           action: {
@@ -136,16 +161,17 @@ export const ResourceListView = ({ data, refetch }: any) => {
         })) || [],
   };
 
-  //const [filteredRows, setFilteredRows] = React.useState(table.rows);
+  const [filteredRows, setFilteredRows] = React.useState<FilteredRow[]>(
+    table.rows
+  );
 
-  // const handleSearchChange = (e:string) => {
-  //   console.log(e, 'e');
-  //   const searchTerm = e.toLowerCase();
-  //   const filtered = table.rows.filter((row:any) =>
-  //     row.name_of_resource.toLowerCase().includes(searchTerm)
-  //   );
-  //   setFilteredRows(filtered);
-  // };
+  const handleSearchChange = (e: string) => {
+    const searchTerm = e.toLowerCase();
+    const filtered = table.rows.filter((row: any) =>
+      row.name_of_resource.toLowerCase().includes(searchTerm)
+    );
+    setFilteredRows(filtered);
+  };
 
   const filteredColumns = table.columns.filter(
     (column) => column.accessorKey !== 'id'
@@ -177,38 +203,33 @@ export const ResourceListView = ({ data, refetch }: any) => {
   return (
     <div className="mt-3">
       <div className="my-8 flex items-center gap-6 px-4">
-        {/* <Text>
-          Showing {table.rows.length} of {table.rows.length} resources
-        </Text> */}
-        {/* <SearchInput
+        <Text>
+          Showing {filteredRows.length} of {filteredRows.length} resources
+        </Text>
+        <SearchInput
           className="w-1/2 "
           placeholder="Search in Resources"
           label="Search"
           name="Search"
-          onChange={function Ga() {} }
-        /> */}
-        {/* <Dialog>
+          onChange={(e) => handleSearchChange(e)}
+        />
+        <Dialog>
           <Dialog.Trigger>
             <Button size="medium" className=" mx-5">
               ADD NEW RESOURCE
             </Button>
           </Dialog.Trigger>
           <Dialog.Content title={'Add New Resource'}>
-            <DropZone
-              name="file_upload"
-              allowMultiple={true}
-              onDrop={dropZone}
-            >
+            <DropZone name="file_upload" allowMultiple={true} onDrop={dropZone}>
               {uploadedFile}
               {file.length === 0 && <DropZone.FileUpload />}
             </DropZone>
           </Dialog.Content>
-        </Dialog> */}
+        </Dialog>
       </div>
       <DataTable
-        addToolbar
         columns={filteredColumns}
-        rows={table.rows}
+        rows={filteredRows}
         hideFooter={true}
         hideSelection={true}
         defaultRowCount={10}
diff --git a/gql/generated/gql.ts b/gql/generated/gql.ts
@@ -20,7 +20,7 @@ const documents = {
     "\n  mutation createAccessModel($accessModelInput: AccessModelInput!) {\n    createAccessModel(accessModelInput: $accessModelInput) {\n      __typename\n      ... on TypeAccessModel {\n        id\n        description\n        name\n        type\n      }\n    }\n  }\n": types.CreateAccessModelDocument,
     "\n  query accessModelResources($datasetId: UUID!) {\n    accessModelResources(datasetId: $datasetId) {\n      modelResources {\n        resource {\n          name\n          description\n          id\n        }\n      }\n      id\n      name\n      description\n      type\n      created\n      modified\n    }\n  }\n": types.AccessModelResourcesDocument,
     "\n  query getResources($filters: DatasetFilter) {\n    datasets(filters: $filters) {\n      resources {\n        id\n        dataset {\n          pk\n        }\n        type\n        name\n        description\n        created\n        fileDetails {\n          id\n          resource {\n            pk\n          }\n          file {\n            name\n            path\n            url\n          }\n          size\n          created\n          modified\n        }\n      }\n    }\n  }\n": types.GetResourcesDocument,
-    "\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n    }\n  }\n": types.ReadFilesDocument,
+    "\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n      type\n    }\n  }\n": types.ReadFilesDocument,
     "\n  query datasetTitleQuery($filters: DatasetFilter) {\n    datasets(filters: $filters) {\n      id\n      title\n      created\n    }\n  }\n": types.DatasetTitleQueryDocument,
     "\n  mutation SaveTitle($updateDatasetInput: UpdateDatasetInput!) {\n    updateDataset(updateDatasetInput: $updateDatasetInput) {\n      __typename\n      ... on TypeDataset {\n        id\n        title\n        created\n      }\n      ... on OperationInfo {\n        messages {\n          kind\n          message\n        }\n      }\n    }\n  }\n": types.SaveTitleDocument,
     "\n  query MetaDataQuery {\n    metadata {\n      id\n      label\n      dataStandard\n      urn\n      dataType\n      options\n      validator\n      type\n      model\n      enabled\n    }\n  }\n": types.MetaDataQueryDocument,
@@ -78,7 +78,7 @@ export function graphql(source: "\n  query getResources($filters: DatasetFilter)
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n    }\n  }\n"): (typeof documents)["\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n    }\n  }\n"];
+export function graphql(source: "\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n      type\n    }\n  }\n"): (typeof documents)["\n  mutation readFiles($fileResourceInput: CreateFileResourceInput!) {\n    createFileResources(fileResourceInput: $fileResourceInput) {\n      id\n      created\n      name\n      type\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/gql/generated/graphql.ts b/gql/generated/graphql.ts
@@ -625,7 +625,7 @@ export type ReadFilesMutationVariables = Exact<{
 }>;
 
 
-export type ReadFilesMutation = { __typename?: 'Mutation', createFileResources: Array<{ __typename?: 'TypeResource', id: any, created: any, name: string }> };
+export type ReadFilesMutation = { __typename?: 'Mutation', createFileResources: Array<{ __typename?: 'TypeResource', id: any, created: any, name: string, type: ApiResourceTypeEnum }> };
 
 export type DatasetTitleQueryQueryVariables = Exact<{
   filters?: InputMaybe<DatasetFilter>;
@@ -701,7 +701,7 @@ export const ResourcesDocument = {"kind":"Document","definitions":[{"kind":"Oper
 export const CreateAccessModelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createAccessModel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"accessModelInput"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AccessModelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createAccessModel"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"accessModelInput"},"value":{"kind":"Variable","name":{"kind":"Name","value":"accessModelInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TypeAccessModel"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}}]}}]}}]} as unknown as DocumentNode<CreateAccessModelMutation, CreateAccessModelMutationVariables>;
 export const AccessModelResourcesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"accessModelResources"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"datasetId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UUID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"accessModelResources"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"datasetId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"datasetId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"modelResources"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resource"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"modified"}}]}}]}}]} as unknown as DocumentNode<AccessModelResourcesQuery, AccessModelResourcesQueryVariables>;
 export const GetResourcesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getResources"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"DatasetFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"datasets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"resources"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"dataset"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pk"}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"fileDetails"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"resource"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pk"}}]}},{"kind":"Field","name":{"kind":"Name","value":"file"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}},{"kind":"Field","name":{"kind":"Name","value":"size"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"modified"}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetResourcesQuery, GetResourcesQueryVariables>;
-export const ReadFilesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"readFiles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"fileResourceInput"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateFileResourceInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createFileResources"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"fileResourceInput"},"value":{"kind":"Variable","name":{"kind":"Name","value":"fileResourceInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode<ReadFilesMutation, ReadFilesMutationVariables>;
+export const ReadFilesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"readFiles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"fileResourceInput"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateFileResourceInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createFileResources"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"fileResourceInput"},"value":{"kind":"Variable","name":{"kind":"Name","value":"fileResourceInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"created"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}}]}}]} as unknown as DocumentNode<ReadFilesMutation, ReadFilesMutationVariables>;
 export const DatasetTitleQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"datasetTitleQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"DatasetFilter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"datasets"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}}]}}]}}]} as unknown as DocumentNode<DatasetTitleQueryQuery, DatasetTitleQueryQueryVariables>;
 export const SaveTitleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SaveTitle"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"updateDatasetInput"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdateDatasetInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateDataset"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"updateDatasetInput"},"value":{"kind":"Variable","name":{"kind":"Name","value":"updateDatasetInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TypeDataset"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"created"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"OperationInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"kind"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]}}]} as unknown as DocumentNode<SaveTitleMutation, SaveTitleMutationVariables>;
 export const MetaDataQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MetaDataQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"metadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"dataStandard"}},{"kind":"Field","name":{"kind":"Name","value":"urn"}},{"kind":"Field","name":{"kind":"Name","value":"dataType"}},{"kind":"Field","name":{"kind":"Name","value":"options"}},{"kind":"Field","name":{"kind":"Name","value":"validator"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"model"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<MetaDataQueryQuery, MetaDataQueryQueryVariables>;

Original file line number	Diff line number	Diff line change
@@ -119,6 +119,7 @@ export const createResourceFilesDoc: any = graphql(`
`119`	`119`	`id`
`120`	`120`	`created`
`121`	`121`	`name`
	`122`	`+ type`
`122`	`123`	`}`
`123`	`124`	`}`
`124`	`125`	`);