From ab37cb79440cb0d86fd5d2a367e5f16c656d2852 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 14 Mar 2025 13:38:58 +0530 Subject: [PATCH 1/6] enable pagination --- .../edit/resources/components/ResourceSchema.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx index ed26d145..cda3ce22 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/ResourceSchema.tsx @@ -1,20 +1,10 @@ -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, Select, - Spinner, - Text, - TextField, + TextField } from 'opub-ui'; +import React from 'react'; -import { GraphQL } from '@/lib/api'; -import { Icons } from '@/components/icons'; const DescriptionCell = ({ value, @@ -138,7 +128,7 @@ export const ResourceSchema = ({ setSchema, data }: any) => { ):
Click on Reset Fields
} From 1cdd121f091d4fe71003fbe89e8f52f5ec6e92f4 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 17 Mar 2025 13:22:34 +0530 Subject: [PATCH 2/6] add preview of data --- .../resources/components/EditResource.tsx | 167 ++++++++++-------- .../[id]/edit/resources/page-layout.tsx | 12 ++ .../dataset/[id]/edit/resources/query.ts | 10 ++ 3 files changed, 112 insertions(+), 77 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx index 6594a5eb..251af78d 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx @@ -1,29 +1,20 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useParams } from 'next/navigation'; -import { graphql } from '@/gql'; import { CreateFileResourceInput, SchemaUpdateInput, UpdateFileResourceInput, } from '@/gql/generated/graphql'; -import { IconTrash } from '@tabler/icons-react'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { - parseAsBoolean, - parseAsString, - useQueryState, -} from 'next-usequerystate'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { parseAsString, useQueryState } from 'next-usequerystate'; import { Button, - ButtonGroup, Checkbox, Combobox, - DataTable, Dialog, Divider, DropZone, Icon, - IconButton, Select, Spinner, Text, @@ -178,10 +169,24 @@ export const EditResource = ({ refetch, list }: EditProps) => { const [resourceDesc, setResourceDesc] = React.useState( getResourceObject(resourceId)?.description ); + const [previewEnable, setPreviewEnable] = useState(true); + + const [previewDetails, setPreviewDetails] = useState({ + startEntry: 0, + endEntry: 0, + isAllEntries: true, + }); React.useEffect(() => { setResourceName(getResourceObject(resourceId)?.label); setResourceDesc(getResourceObject(resourceId)?.description); + setPreviewEnable(getResourceObject(resourceId)?.previewEnable ?? true); + setPreviewDetails({ + startEntry: getResourceObject(resourceId)?.previewDetails.startEntry ?? 0, + endEntry: getResourceObject(resourceId)?.previewDetails.endEntry ?? 0, + isAllEntries: + getResourceObject(resourceId)?.previewDetails.isAllEntries ?? true, + }); //fix this later }, [JSON.stringify(list), resourceId]); @@ -230,7 +235,7 @@ export const EditResource = ({ refetch, list }: EditProps) => { const fileInput = (
- {getResourceObject(resourceId)?.fileDetails.file.name.replace( + {getResourceObject(resourceId)?.fileDetails?.file.name.replace( 'resources/', '' )}{' '} @@ -242,12 +247,35 @@ export const EditResource = ({ refetch, list }: EditProps) => { setResourceId(''); }; + const handlePreviewDetailsChange = ( + field: string, + value: string | boolean + ) => { + if (field === 'isAllEntries' && value) { + setPreviewDetails({ + startEntry: 0, + endEntry: 0, + isAllEntries: true, + }); + } else { + setPreviewDetails((prev) => ({ + ...prev, + [field]: value, + })); + } + }; const saveResource = () => { updateResourceMutation.mutate({ fileResourceInput: { id: resourceId, description: resourceDesc || '', name: resourceName || '', + previewEnabled: previewEnable, + previewDetails: { + startEntry: +previewDetails.startEntry || 0, + endEntry: +previewDetails.endEntry || 0, + isAllEntries: previewDetails.isAllEntries, + }, }, isResetSchema: false, }); @@ -357,6 +385,7 @@ export const EditResource = ({ refetch, list }: EditProps) => { multiline={4} />
+
{fileInput} @@ -371,71 +400,55 @@ export const EditResource = ({ refetch, list }: EditProps) => {
- {/*
-
- console.log('hi')}> - Enabel Preview - - -
- -
+
+ setPreviewEnable(!previewEnable)} + > + Preview Enabled + -
- - Select Rows to be
shown in the Preview - - - -
-
-
- See Preview -
-
*/} -
+ {previewEnable && ( + <> + + handlePreviewDetailsChange( + 'isAllEntries', + !previewDetails.isAllEntries + ) + } + > + Show all entries + + {!previewDetails.isAllEntries && ( + <> + + handlePreviewDetailsChange('startEntry', value) + } + type="number" + /> + + handlePreviewDetailsChange('endEntry', value) + } + type="number" + /> + + )} + + )} +
+
Fields in the Resource + + + ({ + name: item.fieldName, + format: item.format, + }))} + /> + + + ); + }, + }, + { + accessorKey: 'rowsLength', + header: 'No.of Rows', + cell: ({ row }: any) => { + return ( +

+ {row.original.rowsLength === 0 + ? 'NA' + : `${row.original.rowsLength}`} +

+ ); + }, + }, + { + accessorKey: 'format', + header: 'Format', + }, + { + accessorKey: 'size', + header: 'Size', + }, + { + accessorKey: 'preview', + header: 'Preview', + cell: ({ row }: any) => { + const previewData = row.original.preview; + + // Generate columns dynamically from previewData.columns + const previewColumns = + previewData?.columns?.map((column: string) => ({ + accessorKey: column, + header: column, + cell: ({ cell }: any) => { + const value = cell.getValue(); + return {value !== null ? value.toString() : 'N/A'}; + }, + })) || []; + + // Transform rows data to match column structure + const previewRows = + previewData?.rows?.map((row: any[]) => { + const rowData: Record = {}; + previewData.columns.forEach((column: string, index: number) => { + rowData[column] = row[index]; + }); + return rowData; + }) || []; + + return ( + + + + + + {previewData && ( +
+ )} + + + ); + }, + }, + ]; + }; + + const generateTableData = (data: any) => { + return [ + { + schema: data?.schema, + rowsLength: data?.previewData?.rows?.length || 'Na', + format: data?.fileDetails?.format || 'Na', + size: Math.round(data?.fileDetails?.size / 1024).toFixed(2) + 'KB', + preview: data?.previewData, + }, + ]; + }; + return (
{getResourceDetails.isLoading ? ( @@ -94,51 +218,77 @@ const Resources = () => { Downloadable Resources -
+
{getResourceDetails.data?.datasetResources.map( (item: any, index: number) => (
-
-
- {item.name} - {item.fileDetails?.format} +
+
+
+ {item.name} + {item.fileDetails?.format && ( + {item.fileDetails?.format} + )} +
+
+ Updated: + {formatDate(item.modified)} +
- Updated: - {formatDate(item.modified)} -
-
-
(descriptionRefs.current[index] = el)} - className={!showMore[index] ? 'line-clamp-2' : ''} + - {item.description} -
- {isDescriptionLong[index] && ( - - )} + +
-
- - - -
+ + +
+
+
(descriptionRefs.current[index] = el)} + className={!showMore[index] ? 'line-clamp-2' : ''} + > + {item.description} +
+ {isDescriptionLong[index] && ( + + )} +
+ + View Details + +
+ +
+ + + ) )} From 25061caf970064d256f9ac6ce9eb081f82aec0cb Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 19 Mar 2025 13:35:06 +0530 Subject: [PATCH 6/6] fix variable --- .../dataset/[id]/edit/resources/components/EditResource.tsx | 2 +- .../[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx index 251af78d..ecc3e476 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/components/EditResource.tsx @@ -180,7 +180,7 @@ export const EditResource = ({ refetch, list }: EditProps) => { React.useEffect(() => { setResourceName(getResourceObject(resourceId)?.label); setResourceDesc(getResourceObject(resourceId)?.description); - setPreviewEnable(getResourceObject(resourceId)?.previewEnable ?? true); + setPreviewEnable(getResourceObject(resourceId)?.previewEnabled ?? true); setPreviewDetails({ startEntry: getResourceObject(resourceId)?.previewDetails.startEntry ?? 0, endEntry: getResourceObject(resourceId)?.previewDetails.endEntry ?? 0, diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx index 23fa0dfa..e9de5e25 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/resources/page-layout.tsx @@ -17,7 +17,7 @@ export interface TListItem { description: string; dataset: any; fileDetails: any; - previewEnable: boolean + previewEnabled: boolean previewDetails: { startEntry: 0, endEntry: 0, @@ -54,7 +54,7 @@ export function DistibutionPage({ description: item.description, dataset: item.dataset?.pk, fileDetails: item.fileDetails, - previewEnable: item.previewEnable, + previewEnabled: item.previewEnabled, previewDetails: { startEntry: item.previewDetails?.startEntry, endEntry: item.previewDetails?.endEntry,