add editable fields with mutations

Author: aashimgarg

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

@@ -1,29 +1,39 @@
 import { graphql } from '@/gql';
 import {
   CreateFileResourceInput,
+  SchemaUpdateInput,
   UpdateFileResourceInput,
 } from '@/gql/generated/graphql';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { parseAsString, useQueryState } from 'next-usequerystate';
-import { useParams, useRouter } from 'next/navigation';
+import { IconTrash } from '@tabler/icons-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  parseAsBoolean,
+  parseAsString,
+  useQueryState,
+} from 'next-usequerystate';
 import {
   Button,
+  ButtonGroup,
+  Checkbox,
   Combobox,
+  DataTable,
   Dialog,
   Divider,
   DropZone,
   Icon,
+  IconButton,
   Select,
   Text,
   TextField,
-  toast
+  toast,
 } from 'opub-ui';
-import React from 'react';
 
-import { Icons } from '@/components/icons';
 import { GraphQL } from '@/lib/api';
+import { Icons } from '@/components/icons';
 import { createResourceFilesDoc } from './ResourceDropzone';
-import { ResourceSchema } from './ResourceSchema';
+import { ResourceSchema, updateSchema } from './ResourceSchema';
+import { useParams } from 'next/navigation';
+import React from 'react';
 
 interface TListItem {
   label: string;
@@ -50,6 +60,7 @@ export const EditResource = ({ reload, data }: any) => {
   `);
 
   const [resourceId, setResourceId] = useQueryState<any>('id', parseAsString);
+  const [schema, setSchema] = React.useState([]);
 
   const { mutate, isLoading } = useMutation(
     (data: { fileResourceInput: UpdateFileResourceInput }) =>
@@ -92,6 +103,18 @@ export const EditResource = ({ reload, data }: any) => {
     }
   `);
 
+  const { mutate: modify } = useMutation(
+    (data: { input: SchemaUpdateInput }) => GraphQL(updateSchema, data),
+    {
+      onSuccess: (data) => {
+        console.log(data);
+      },
+      onError: (err: any) => {
+        console.log('Error ::: ', err);
+      },
+    }
+  );
+  
   const { mutate: transform } = useMutation(
     (data: { fileResourceInput: CreateFileResourceInput }) =>
       GraphQL(createResourceFilesDoc, data),
@@ -112,8 +135,6 @@ export const EditResource = ({ reload, data }: any) => {
     }
   );
 
-  const router = useRouter();
-
   const ResourceList: TListItem[] =
     data.map((item: any) => ({
       label: item.name,
@@ -215,6 +236,14 @@ export const EditResource = ({ reload, data }: any) => {
         file: resourceFile,
       },
     });
+    if (schema.length > 0) {
+      modify({
+        input: {
+          resource: resourceId,
+          updates: schema,
+        },
+      });
+    }
   };
 
   return (
@@ -384,6 +413,7 @@ export const EditResource = ({ reload, data }: any) => {
       </div>*/}
       {resourceId && payload && Object.keys(payload).length > 0 ? (
         <ResourceSchema
+          setSchema={setSchema}
           resourceId={resourceId}
           isPending={isPending}
           refetch={refetch}

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

@@ -1,19 +1,98 @@
 import React from 'react';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
+import { SchemaUpdateInput } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { Button, DataTable, Icon, IconButton, Spinner, Text } from 'opub-ui';
+import {
+  Button,
+  DataTable,
+  Icon,
+  Select,
+  Spinner,
+  Text,
+  TextField,
+} from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
 
+export const updateSchema: any = graphql(`
+  mutation updateSchema($input: SchemaUpdateInput!) {
+    updateSchema(input: $input) {
+      __typename
+      ... on TypeResource {
+        id
+      }
+    }
+  }
+`);
+
+const DescriptionCell = ({
+  value,
+  rowIndex,
+  handleFieldChange,
+}: {
+  value: string;
+  rowIndex: any;
+  handleFieldChange: any;
+}) => {
+  const [description, setDescription] = React.useState(value || '');
+
+  const handleChange = (text: string) => {
+    setDescription(text);
+    handleFieldChange('description', text, rowIndex);
+  };
+
+  return (
+    <TextField
+      label="Description"
+      labelHidden
+      name="description"
+      type="text"
+      value={description}
+      onChange={(e: any) => handleChange(e)}
+    />
+  );
+};
+
 export const ResourceSchema = ({
+  setSchema,
   resourceId,
   isPending,
   data,
   refetch,
 }: any) => {
-  
+
+  const transformedData = data.map((item: any) => ({
+    schemaId: parseInt(item.id, 10),
+    format: item.format,
+    description: item.description,
+  }));
+  const [updatedData, setUpdatedData] = React.useState<any>(transformedData);
+
+  React.useEffect(() => {
+    if (data && data.length > 0) {
+      setUpdatedData(transformedData);
+    }
+  }, [data]);
+
+  const handleFieldChange = (
+    field: string,
+    newValue: string,
+    rowIndex: any
+  ) => {
+    setUpdatedData((prev: any) => {
+      const newData = [...prev];
+      newData[rowIndex] = {
+        ...newData[rowIndex],
+        [field]: newValue,
+      };
+      return newData;
+    });
+  };
+
+  setSchema(updatedData);
+
   const resetSchema: any = graphql(`
     mutation resetFileResourceSchema($resourceId: UUID!) {
       resetFileResourceSchema(resourceId: $resourceId) {
@@ -42,6 +121,17 @@ export const ResourceSchema = ({
     }
   );
 
+  const options = [
+    {
+      label: 'Integer',
+      value: 'INTEGER',
+    },
+    {
+      label: 'String',
+      value: 'STRING',
+    },
+  ];
+
   const generateColumnData = () => {
     return [
       {
@@ -51,16 +141,41 @@ export const ResourceSchema = ({
       {
         accessorKey: 'description',
         header: 'DESCRIPTION',
+        cell: (info: any) => {
+          const rowIndex = info.row.index;
+          const description = updatedData[rowIndex]?.description || '';
+          return (
+            <DescriptionCell
+              value={description}
+              rowIndex={rowIndex}
+              handleFieldChange={handleFieldChange}
+            />
+          );
+        },
       },
       {
         accessorKey: 'format',
         header: 'FORMAT',
+        cell: (info: any) => {
+          const rowIndex = info.row.index;
+          const format = updatedData[rowIndex]?.format || '';
+          return (
+            <Select
+              label="Resource List"
+              labelHidden
+              options={options}
+              value={format}
+              onChange={(e) => handleFieldChange('format', e, rowIndex)}
+              name="Select format"
+            />
+          );
+        },
       },
     ];
   };
 
-  const generateTableData = (data: any[]) => {
-    return data.map((item: any) => ({
+  const generateTableData = (updatedData: any[]) => {
+    return updatedData.map((item: any) => ({
       fieldName: item.fieldName,
       description: item.description,
       format: item.format,
@@ -108,7 +223,7 @@ export const ResourceSchema = ({
             hideSelection
           />
         ) : (
-          <div className="flex justify-center mt-8">Click on Reset Fields</div>
+          <div className="mt-8 flex justify-center">Click on Reset Fields</div>
         )}
       </div>
     </>