From ac7196abf6a3bc6a973b571974fa8ab0af0aec34 Mon Sep 17 00:00:00 2001
From: aashimgarg <aashim1garg@gmail.com>
Date: Wed, 8 May 2024 23:36:52 +0530
Subject: [PATCH 1/4] allow multiple files in dropzone

---
 .../[id]/edit/components/DistributionList.tsx | 69 +++++++++----------
 1 file changed, 31 insertions(+), 38 deletions(-)

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
index e082f3db..efbfa1fa 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
+import Link from 'next/link';
+import router from 'next/router';
 import {
   Button,
   ButtonGroup,
+  Combobox,
   Divider,
   DropZone,
   Icon,
@@ -40,21 +43,19 @@ const NoList = ({
   const fileTypes = ['PDF', 'CSV', 'XLS', 'XLSX', 'TXT'];
 
   const [fileSelected, setFileSelected] = React.useState(false);
-
-  const [file, setFile] = React.useState<File>();
+  const [file, setFile] = React.useState<File[]>([]);
 
   const handleDropZoneDrop = React.useCallback(
     (_dropFiles: File[], acceptedFiles: File[]) => {
-      setFile(acceptedFiles[0]);
+      setFile((files) => [...files, ...acceptedFiles]);
       setFileSelected(true);
     },
     []
   );
 
-  function handleFileDelete(props: React.MouseEvent<HTMLButtonElement>) {
-    props.stopPropagation();
-    setFileSelected(false);
-    setFile(undefined);
+  function handleFileDelete(index: any) {
+    const updatedFiles = [...file.slice(0, index), ...file.slice(index + 1)];
+    setFile(updatedFiles);
   }
 
   const hint = (
@@ -76,42 +77,34 @@ const NoList = ({
     </>
   );
 
-  const fileUpload = !file && <DropZone.FileUpload actionHint={hint} />;
-  const uploadedFile = file && (
-    <div className="flex h-full items-center justify-center py-16">
-      <div className="surfaceDefault flex items-center gap-3 rounded-05 px-3 py-2">
-        <Icon source={Icons.check} size={24} color="success" />
-        <div className="flex flex-col">
-          <div className="max-w-[180px]">
-            <Text variant="headingMd" truncate>
-              {file.name}
-            </Text>
-          </div>
-          <Text variant="bodyMd" color="subdued">
-            {bytesToSize(file.size)}
-          </Text>
+  const fileUpload = file.length === 0 && (
+    <DropZone.FileUpload actionHint={hint} />
+  );
+  const uploadedFile = file.length > 0 && (
+    <div className="flex h-full items-center justify-center px-2 py-14">
+      <div className="flex-col">
+        <div>
+          <Icon source={Icons.check} size={24} color="success" />
+          <div className="flex">{file[0].name.substring(0, 15) + ' ...'} </div>
+          <Text variant="bodySm">{file[0].size} bytes</Text>
         </div>
-        <Button
-          size="slim"
-          icon={<Icon source={Icons.delete} size={24} />}
-          kind="tertiary"
-          accessibilityLabel="delete resource"
-          onClick={handleFileDelete}
-        />
       </div>
     </div>
   );
 
   return (
-    <DropZone
-      name="file_details"
-      label="Upload"
-      onDrop={handleDropZoneDrop}
-      labelHidden
-      className="min-h-[70vh] bg-baseGraySlateSolid5"
-    >
-      {uploadedFile}
-      {fileUpload}
-    </DropZone>
+    <>
+      <DropZone
+        name="file_details"
+        label="Upload"
+        allowMultiple={true}
+        onDrop={handleDropZoneDrop}
+        labelHidden
+        className="min-h-[70vh] bg-baseGraySlateSolid5"
+      >
+        {uploadedFile}
+        {fileUpload}
+      </DropZone>
+    </>
   );
 };

From 5350a3fd1f32f6223d04006c15975648d248afe6 Mon Sep 17 00:00:00 2001
From: aashimgarg <aashim1garg@gmail.com>
Date: Wed, 8 May 2024 23:56:02 +0530
Subject: [PATCH 2/4] add edit resource component

---
 .../[id]/edit/components/DistributionList.tsx |  31 ++-
 .../[id]/edit/components/EditResource.tsx     | 190 ++++++++++++++++++
 2 files changed, 210 insertions(+), 11 deletions(-)
 create mode 100644 app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx

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
index efbfa1fa..9b52784b 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/DistributionList.tsx
@@ -15,6 +15,7 @@ import { bytesToSize } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { LinkButton } from '@/components/Link';
 import { EditDistribution } from './EditDistribution';
+import { EditResource } from './EditResource';
 
 export function DistributionList({
   setPage,
@@ -94,17 +95,25 @@ const NoList = ({
 
   return (
     <>
-      <DropZone
-        name="file_details"
-        label="Upload"
-        allowMultiple={true}
-        onDrop={handleDropZoneDrop}
-        labelHidden
-        className="min-h-[70vh] bg-baseGraySlateSolid5"
-      >
-        {uploadedFile}
-        {fileUpload}
-      </DropZone>
+      {fileSelected ? (
+        <EditResource
+          uploadedFile={uploadedFile}
+          handleDropZoneDrop={handleDropZoneDrop}
+          file={file}
+         />
+      ) : (
+        <DropZone
+          name="file_details"
+          label="Upload"
+          allowMultiple={true}
+          onDrop={handleDropZoneDrop}
+          labelHidden
+          className="min-h-[70vh] bg-baseGraySlateSolid5"
+        >
+          {uploadedFile}
+          {fileUpload}
+        </DropZone>
+      )}
     </>
   );
 };
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
new file mode 100644
index 00000000..a4cbf048
--- /dev/null
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import Link from 'next/link';
+import GraphqlTable from '@/app/[locale]/dashboard/components/GraphqlTable/graphqlTable';
+import { IconTrash } from '@tabler/icons-react';
+import {
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Combobox,
+  DataTable,
+  Divider,
+  DropZone,
+  Icon,
+  IconButton,
+  Text,
+  TextField,
+} from 'opub-ui';
+
+import { Icons } from '@/components/icons';
+
+export const EditResource = ({
+  uploadedFile,
+  handleDropZoneDrop,
+  file,
+}: any) => {
+  const fileUpload = file.length === 0 && <DropZone.FileUpload />;
+
+  return (
+    <div className=" bg-basePureWhite px-6 py-8">
+      <div className="flex items-center gap-2">
+        <Text>Resource Name :</Text>
+        <div className=" w-3/6">
+          <Combobox
+            name="geo_list"
+            label="Resource"
+            labelHidden
+            placeholder="Search Locations"
+            list={[
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+            ]}
+            displaySelected
+            required
+            error="This field is required"
+          />
+        </div>
+        <Button className="mx-5">ADD NEW RESOURCE</Button>
+        <Link href="/" className="flex w-1/6 items-center justify-end gap-2">
+          <Text color="interactive">
+            Go back to <br />
+            Resource List
+          </Text>
+          <Icon source={Icons.cross} color="interactive" />
+        </Link>
+      </div>
+      <Divider className="mb-8 mt-6" />
+      <div className="flex justify-center">
+        <Button className="w-1/3">SAVE RESOURCE</Button>
+      </div>
+      <div className="mt-8 flex items-stretch gap-10">
+        <div className="flex w-3/4 flex-col">
+          <div className="mb-10 flex gap-6 ">
+            <div className="w-2/3">
+              <TextField
+                label="Resource Name"
+                name="error"
+                required
+                helpText="To know about best practices for naming Resources go to our User Guide"
+              />
+            </div>
+            <div className="w-1/3">
+              <Combobox
+                name="geo_list"
+                label="Data Standard Followed"
+                placeholder="Search Locations"
+                list={[
+                  {
+                    label:
+                      'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                    value:
+                      'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                  },
+                  {
+                    label:
+                      'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                    value:
+                      'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                  },
+                ]}
+                displaySelected
+                required
+                error="This field is required"
+              />
+            </div>
+          </div>
+          <TextField
+            defaultValue=""
+            label="Description"
+            multiline={4}
+            name="multi-line"
+          />
+        </div>
+        <div className="w-1/4 items-stretch ">
+          <DropZone
+            name="file_details"
+            label="Change file for this Resource"
+            onDrop={handleDropZoneDrop}
+            className=" bg-basePureWhite"
+          >
+            {uploadedFile}
+            {fileUpload}
+          </DropZone>
+        </div>
+      </div>
+      <div className=" my-8 flex items-center gap-4 border-1 border-solid border-baseGraySlateSolid7 px-7 py-4 ">
+        <div className="flex w-1/6 items-center justify-center gap-1">
+          <Checkbox name="checkbox" onChange={() => console.log('hi')}>
+            Enabel Preview
+          </Checkbox>
+          <Icon source={Icons.info} />
+        </div>
+
+        <div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
+        <div className="flex items-center gap-5 px-8">
+          <Text>
+            Select Rows to be <br /> shown in the Preview
+          </Text>
+          <Combobox
+            name="geo_list"
+            label="From Row Number"
+            placeholder="Search Locations"
+            list={[
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+            ]}
+            displaySelected
+            required
+            error="This field is required"
+          />
+          <Combobox
+            name="to_row_number"
+            label="To Row Number"
+            placeholder="Search Locations"
+            list={[
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+              {
+                label:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+                value:
+                  'Temperature and Precipitation (2011) Shimla Himachal Pradesh.xls',
+              },
+            ]}
+            displaySelected
+            required
+            error="This field is required"
+          />
+        </div>
+        <div className="h-[70px] w-[2px] bg-baseGraySlateSolid7"></div>
+        <div className="flex w-1/6 justify-center ">
+          <Text>See Preview</Text>
+        </div>
+      </div>
+    </div>
+  );
+};

From 51a46801798f66fa7e23964fd92a17c364c5b393 Mon Sep 17 00:00:00 2001
From: aashimgarg <aashim1garg@gmail.com>
Date: Thu, 9 May 2024 00:00:12 +0530
Subject: [PATCH 3/4] add DATA_TABLE with rowActions

---
 .../[id]/edit/components/EditResource.tsx     | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
index a4cbf048..0f47c451 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
@@ -25,6 +25,58 @@ export const EditResource = ({
 }: any) => {
   const fileUpload = file.length === 0 && <DropZone.FileUpload />;
 
+  const table = {
+    columns: [
+      {
+        accessorKey: 'field_key',
+        header: 'FIELD KEY',
+      },
+      {
+        accessorKey: 'display_name',
+        header: 'DISPLAY NAME',
+      },
+      {
+        accessorKey: 'description',
+        header: 'DESCRIPTION',
+      },
+      {
+        accessorKey: 'format',
+        header: 'FORMAT',
+      },
+    ],
+    rows: [
+      {
+        field_key: 'date',
+        display_name: 'Date',
+        description: 'Date on which measurements are taken',
+        format: 'Date',
+      },
+      {
+        field_key: 'date',
+        display_name: 'Date',
+        description: 'Date on which measurements are taken',
+        format: 'Date',
+      },
+      {
+        field_key: 'date',
+        display_name: 'Date',
+        description: 'Date on which measurements are taken',
+        format: 'Date',
+      },
+    ],
+  };
+
+  const rowActions = [
+    {
+      content: 'Delete',
+      destructive: true,
+      icon: IconTrash,
+      onAction: (e: any) => {
+        console.log(e, ' deleted');
+      },
+    },
+  ];
+
   return (
     <div className=" bg-basePureWhite px-6 py-8">
       <div className="flex items-center gap-2">
@@ -185,6 +237,32 @@ export const EditResource = ({
           <Text>See Preview</Text>
         </div>
       </div>
+      <div className="flex justify-between">
+        <Text>Fields in the Resource</Text>
+        <div className="flex">
+          <Link className="mx-4 flex items-center gap-1" href="/">
+            <Text>Refetch Fields</Text>{' '}
+            <Icon source={Icons.info} color="interactive" />
+          </Link>
+          <Link className="flex items-center gap-1" href="/">
+            <Text> Reset Fields </Text>{' '}
+            <Icon source={Icons.info} color="interactive" />
+          </Link>
+        </div>
+      </div>
+      <Text variant="headingXs" as="span" fontWeight="regular">
+        The Field settings apply to the Resource on a master level and can not
+        be changed in Access Models.
+      </Text>
+      <div className="mt-3">
+        <DataTable
+          rowActions={rowActions}
+          columns={table.columns}
+          rows={table.rows}
+          hideFooter={true}
+          defaultRowCount={10}
+        />
+      </div>
     </div>
   );
 };

From 1f2ec91ab2a55c139998240020b4e73c76babd72 Mon Sep 17 00:00:00 2001
From: aashimgarg <aashim1garg@gmail.com>
Date: Thu, 9 May 2024 00:14:46 +0530
Subject: [PATCH 4/4] add custom column action to data table

---
 .../[id]/edit/components/EditResource.tsx     | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
index 0f47c451..7d6bd2a0 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditResource.tsx
@@ -43,6 +43,19 @@ export const EditResource = ({
         accessorKey: 'format',
         header: 'FORMAT',
       },
+      {
+        header: 'DELETE',
+        cell: ({ row }: any) => (
+          <IconButton
+          size="medium"
+          icon={Icons.delete}
+          color='interactive'
+          onClick={(e) =>console.log(row.original) }
+        >
+          Delete
+        </IconButton>
+        ),
+      },
     ],
     rows: [
       {
@@ -66,17 +79,6 @@ export const EditResource = ({
     ],
   };
 
-  const rowActions = [
-    {
-      content: 'Delete',
-      destructive: true,
-      icon: IconTrash,
-      onAction: (e: any) => {
-        console.log(e, ' deleted');
-      },
-    },
-  ];
-
   return (
     <div className=" bg-basePureWhite px-6 py-8">
       <div className="flex items-center gap-2">
@@ -256,7 +258,6 @@ export const EditResource = ({
       </Text>
       <div className="mt-3">
         <DataTable
-          rowActions={rowActions}
           columns={table.columns}
           rows={table.rows}
           hideFooter={true}