Merge pull request #245 from CivicDataLab/243-revamp-resource-page-in-dataset-creation

243 revamp resource page in dataset creation

Author: bhavabhuthi

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx

@@ -1,13 +1,43 @@
-import React from 'react'
+import { DataTable } from 'opub-ui';
 
-interface EditProps{
-    isPreview:boolean
+interface EditProps {
+  isPreview: boolean;
+  previewData: {
+    columns: string[];
+    rows: any[];
+  };
 }
 
-const PreviewData=({isPreview}: EditProps)=> {
+const PreviewData = ({ isPreview, previewData }: EditProps) => {
+  const previewColumns =
+    previewData?.columns?.map((column: string) => ({
+      accessorKey: column,
+      header: column,
+      cell: ({ cell }: any) => {
+        const value = cell.getValue();
+        return <span>{value !== null ? value.toString() : 'N/A'}</span>;
+      },
+    })) || [];
+
+  // Transform rows data to match column structure
+  const previewRows =
+    previewData?.rows?.map((row: any[]) => {
+      const rowData: Record<string, any> = {};
+      previewData.columns.forEach((column: string, index: number) => {
+        rowData[column] = row[index];
+      });
+      return rowData;
+    }) || [];
   return (
-    <div>PreviewData</div>
-  )
-}
+    <div className="md:max-w-[75vh] lg:max-w-[96vh]">
+      <DataTable
+        columns={previewColumns}
+        hideFooter
+        hideSelection
+        rows={previewRows}
+      />
+    </div>
+  );
+};
 
-export default PreviewData
+export default PreviewData;

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/PreviewData.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-import { useParams, useSearchParams } from 'next/navigation';
-import { graphql } from '@/gql';
 import { CreateFileResourceInput } from '@/gql/generated/graphql';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { parseAsString, useQueryState } from 'next-usequerystate';
-import { Button, DropZone, Text } from 'opub-ui';
+import { useParams } from 'next/navigation';
+import { Button, DropZone, Text, toast } from 'opub-ui';
+import React from 'react';
 
 import { GraphQL } from '@/lib/api';
-import { bytesToSize } from '@/lib/utils';
 import { createResourceFilesDoc } from './query';
 
 export const ResourceDropzone = ({ reload }: { reload: () => void }) => {
@@ -36,7 +34,8 @@ export const ResourceDropzone = ({ reload }: { reload: () => void }) => {
         setResourceId(data.createFileResources[0].id);
       },
       onError: (err: any) => {
-        console.log('Error ::: ', err);
+        toast(err.message);
+        setFile([]);
       },
     }
   );

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceDropzone.tsx

@@ -72,7 +72,7 @@ const ResourceHeader = ({
                   </Button>
                 </div>
               </div>
-              {list.map((item, index) => (
+              {list?.map((item, index) => (
                 <div
                   key={index}
                   className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${resourceId === item.value ? ' bg-baseGraySlateSolid5' : ''}`}

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { CreateFileResourceInput } from '@/gql/generated/graphql';
 import { useMutation } from '@tanstack/react-query';
@@ -43,6 +43,11 @@ export const ResourceListView = ({ data, refetch }: ResourceListProps) => {
     id: string;
   }>();
 
+
+  useEffect(() => {
+    refetch();
+  }, [resourceId]);
+
   const updateResourceMutation = useMutation(
     (data: { resourceId: string }) =>
       GraphQL(
@@ -67,11 +72,12 @@ export const ResourceListView = ({ data, refetch }: ResourceListProps) => {
         });
       },
       onError: (err: any) => {
-        console.log('Error ::: ', err);
+        toast(err);
       },
     }
   );
 
+  
   const createResourceMutation = useMutation(
     (data: { fileResourceInput: CreateFileResourceInput }) =>
       GraphQL(
@@ -109,10 +115,9 @@ export const ResourceListView = ({ data, refetch }: ResourceListProps) => {
         );
       },
       onError: (err: any) => {
-        toast(err.message || String(err));
-        setFile([])
-      }
-      
+        toast(err);
+        setFile([]);
+      },
     }
   );
 
@@ -182,6 +187,20 @@ export const ResourceListView = ({ data, refetch }: ResourceListProps) => {
     table.rows
   );
 
+
+  useEffect(() => {
+    const updatedRows =
+      data.map((item: any) => ({
+        name_of_resource: item.name,
+        type: item.type,
+        date_added: formatDate(item.created),
+        id: item.id,
+      })) || [];
+  
+    setFilteredRows(updatedRows);
+  }, [data]);
+  
+
   const handleSearchChange = (e: string) => {
     const searchTerm = e.toLowerCase();
     const filtered = table.rows.filter((row: any) =>

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceListView.tsx

@@ -1,10 +1,5 @@
-import {
-  DataTable,
-  Select,
-  TextField
-} from 'opub-ui';
 import React from 'react';
-
+import { DataTable, Select, TextField } from 'opub-ui';
 
 const DescriptionCell = ({
   value,
@@ -17,7 +12,7 @@ const DescriptionCell = ({
 }) => {
   const [description, setDescription] = React.useState(value || '');
 
-  const handleChange = (e:any) => {
+  const handleChange = (e: any) => {
     setDescription(e?.target?.value);
     handleFieldChange('description', e?.target?.value, rowIndex);
   };
@@ -34,8 +29,12 @@ const DescriptionCell = ({
   );
 };
 
-export const ResourceSchema = ({ setSchema, data }: any) => {
-
+export const ResourceSchema = ({
+  setSchema,
+  data,
+  mutate,
+  resourceId,
+}: any) => {
   const [updatedData, setUpdatedData] = React.useState<any>(data);
 
   React.useEffect(() => {
@@ -49,17 +48,32 @@ export const ResourceSchema = ({ setSchema, data }: any) => {
     newValue: string,
     rowIndex: any
   ) => {
-    setUpdatedData((prev: any) => {
-      const newData = [...prev];
-      newData[rowIndex] = {
-        ...newData[rowIndex],
-        [field]: newValue,
-      };
-      return newData;
-    });
+    const newData = [...updatedData];
+    newData[rowIndex] = {
+      ...newData[rowIndex],
+      [field]: newValue,
+    };
+    
+    setUpdatedData(newData);
+    setSchema(newData);
+    handleSave(newData);
+  };
+
+  const handleSave = (newdata: any) => {
+    const isSchemaChanged = JSON.stringify(newdata) !== JSON.stringify(data);
+    if (isSchemaChanged) {
+      mutate({
+        schemaUpdateInput: {
+          resource: resourceId,
+          updates: newdata?.map((item: any) => {
+            const { fieldName, ...rest } = item;
+            return rest;
+          }),
+        },
+      });
+    }
   };
 
-  setSchema(updatedData);
   const options = [
     {
       label: 'Integer',
@@ -127,11 +141,13 @@ export const ResourceSchema = ({ setSchema, data }: any) => {
         {data && data.length > 0 ? (
           <DataTable
             columns={generateColumnData()}
-            rows={generateTableData(data)}
+            rows={generateTableData(updatedData)}
             hideFooter={false}
             hideSelection
           />
-        ):<div className="mt-8 flex justify-center">Click on Reset Fields</div>}
+        ) : (
+          <div className="mt-8 flex justify-center">Click on Reset Fields</div>
+        )}
       </div>
     </>
   );

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx

@@ -9,20 +9,14 @@ import { GraphQL } from '@/lib/api';
 import { EditResource } from './components/EditResource';
 import { ResourceDropzone } from './components/ResourceDropzone';
 import { ResourceListView } from './components/ResourceListView';
-import { getReourceDoc } from './query';
+import { getResourceDoc } from './query';
 
 export interface TListItem {
   label: string;
   value: string;
   description: string;
   dataset: any;
   fileDetails: any;
-  previewEnabled: boolean
-  previewDetails: {
-    startEntry: 0,
-    endEntry: 0,
-    isAllEntries: boolean
-  }
 }
 
 export function DistibutionPage({
@@ -34,16 +28,12 @@ export function DistibutionPage({
     [`fetch_resources_${params.id}`],
     () =>
       GraphQL(
-        getReourceDoc,
+        getResourceDoc,
         {
           [params.entityType]: params.entitySlug,
         },
         { filters: { id: params.id } }
       ),
-    {
-      refetchOnMount: true,
-      refetchOnReconnect: true,
-    }
   );
 
   const ResourceList: TListItem[] =
@@ -54,12 +44,7 @@ export function DistibutionPage({
         description: item.description,
         dataset: item.dataset?.pk,
         fileDetails: item.fileDetails,
-        previewEnabled: item.previewEnabled,
-        previewDetails: {
-          startEntry: item.previewDetails?.startEntry,
-          endEntry: item.previewDetails?.endEntry,
-          isAllEntries: item.previewDetails?.isAllEntries
-        }
+       
       }))) ||
     [];
 
@@ -78,7 +63,7 @@ export function DistibutionPage({
             {data && ResourceList.length > 0 ? (
               <>
                 {resourceId ? (
-                  <EditResource refetch={refetch} list={ResourceList} />
+                  <EditResource refetch={refetch} allResources={ResourceList}/>
                 ) : (
                   <ResourceListView
                     refetch={refetch}

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx

@@ -1,29 +1,13 @@
 import { graphql } from '@/gql';
 
-export const getReourceDoc = graphql(`
+export const getResourceDoc = graphql(`
   query getResources($filters: DatasetFilter) {
     datasets(filters: $filters) {
       resources {
         id
         dataset {
           pk
         }
-        previewData {
-          columns
-          rows
-        }
-        previewDetails {
-          endEntry
-          isAllEntries
-          startEntry
-        }
-        previewEnabled
-        schema {
-          id
-          fieldName
-          format
-          description
-        }
         type
         name
         description