Skip to content

Commit eeafc1c

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #110 from CivicDataLab/94-add-file-resource-schema
94 add file resource schema
2 parents d3a21e7 + 854d654 commit eeafc1c

File tree

3 files changed

+171
-88
lines changed

3 files changed

+171
-88
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,20 @@ import { EditDistribution } from './EditDistribution';
2929
import { EditResource } from './EditResource';
3030
import { ResourceListView } from './ResourceListView';
3131

32-
export const getReourceDoc = graphql(`
32+
export const getReourceDoc: any = graphql(`
3333
query getResources($filters: DatasetFilter) {
3434
datasets(filters: $filters) {
3535
resources {
3636
id
3737
dataset {
3838
pk
3939
}
40+
schema {
41+
id
42+
fieldName
43+
format
44+
description
45+
}
4046
type
4147
name
4248
description
@@ -68,7 +74,11 @@ export function DistributionList({
6874
}) {
6975
const params = useParams();
7076

71-
const { data, isLoading, refetch } = useQuery(
77+
const {
78+
data,
79+
isLoading,
80+
refetch,
81+
}: { data: any; isLoading: boolean; refetch: any } = useQuery(
7282
[`fetch_resources_${params.id}`],
7383
() => GraphQL(getReourceDoc, { filters: { id: params.id } }),
7484
{
@@ -190,6 +200,7 @@ const NoList = ({
190200
return (
191201
<>
192202
<DropZone
203+
accept=".json, .csv, application/json, text/csv"
193204
name="file_details"
194205
label="Upload"
195206
allowMultiple={true}

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

Lines changed: 42 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import React from 'react';
2-
import { useParams, useRouter } from 'next/navigation';
31
import { graphql } from '@/gql';
42
import {
53
CreateFileResourceInput,
64
UpdateFileResourceInput,
75
} from '@/gql/generated/graphql';
8-
import { useMutation } from '@tanstack/react-query';
6+
import { useMutation, useQuery } from '@tanstack/react-query';
97
import { parseAsString, useQueryState } from 'next-usequerystate';
8+
import { useParams, useRouter } from 'next/navigation';
109
import {
1110
Button,
1211
Combobox,
1312
Dialog,
1413
Divider,
1514
DropZone,
1615
Icon,
17-
IconButton,
1816
Select,
1917
Text,
2018
TextField,
21-
toast,
19+
toast
2220
} from 'opub-ui';
21+
import React from 'react';
2322

24-
import { GraphQL } from '@/lib/api';
2523
import { Icons } from '@/components/icons';
24+
import { GraphQL } from '@/lib/api';
2625
import { createResourceFilesDoc } from './DistributionList';
26+
import { ResourceSchema } from './ResourceSchema';
2727

2828
interface TListItem {
2929
label: string;
@@ -34,6 +34,8 @@ interface TListItem {
3434
}
3535

3636
export const EditResource = ({ reload, data }: any) => {
37+
const params = useParams();
38+
3739
const updateResourceDoc: any = graphql(`
3840
mutation updateFileResource($fileResourceInput: UpdateFileResourceInput!) {
3941
updateFileResource(fileResourceInput: $fileResourceInput) {
@@ -68,6 +70,28 @@ export const EditResource = ({ reload, data }: any) => {
6870
}
6971
);
7072

73+
const {
74+
data: payload,
75+
refetch,
76+
isLoading: isPending,
77+
} = useQuery<any>([`fetch_schema_${params.id}`], () =>
78+
GraphQL(fetchSchema, { datasetId: params.id })
79+
);
80+
81+
const fetchSchema: any = graphql(`
82+
query datasetSchema($datasetId: UUID!) {
83+
datasetResources(datasetId: $datasetId) {
84+
schema {
85+
id
86+
fieldName
87+
format
88+
description
89+
}
90+
id
91+
}
92+
}
93+
`);
94+
7195
const { mutate: transform } = useMutation(
7296
(data: { fileResourceInput: CreateFileResourceInput }) =>
7397
GraphQL(createResourceFilesDoc, data),
@@ -88,61 +112,6 @@ export const EditResource = ({ reload, data }: any) => {
88112
}
89113
);
90114

91-
const table = {
92-
columns: [
93-
{
94-
accessorKey: 'field_key',
95-
header: 'FIELD KEY',
96-
},
97-
{
98-
accessorKey: 'display_name',
99-
header: 'DISPLAY NAME',
100-
},
101-
{
102-
accessorKey: 'description',
103-
header: 'DESCRIPTION',
104-
},
105-
{
106-
accessorKey: 'format',
107-
header: 'FORMAT',
108-
},
109-
{
110-
header: 'DELETE',
111-
cell: ({ row }: any) => (
112-
<IconButton
113-
size="medium"
114-
icon={Icons.delete}
115-
color="interactive"
116-
onClick={(e) => console.log(row.original)}
117-
>
118-
Delete
119-
</IconButton>
120-
),
121-
},
122-
],
123-
rows: [
124-
{
125-
field_key: 'date',
126-
display_name: 'Date',
127-
description: 'Date on which measurements are taken',
128-
format: 'Date',
129-
},
130-
{
131-
field_key: 'date',
132-
display_name: 'Date',
133-
description: 'Date on which measurements are taken',
134-
format: 'Date',
135-
},
136-
{
137-
field_key: 'date',
138-
display_name: 'Date',
139-
description: 'Date on which measurements are taken',
140-
format: 'Date',
141-
},
142-
],
143-
};
144-
145-
const params = useParams();
146115
const router = useRouter();
147116

148117
const ResourceList: TListItem[] =
@@ -412,32 +381,19 @@ export const EditResource = ({ reload, data }: any) => {
412381
<div className="flex w-1/6 justify-center ">
413382
<Text>See Preview</Text>
414383
</div>
415-
</div>
416-
<div className="flex justify-between">
417-
<Text>Fields in the Resource</Text>
418-
<div className="flex">
419-
<Link className="mx-4 flex items-center gap-1" href="/">
420-
<Text>Refetch Fields</Text>{' '}
421-
<Icon source={Icons.info} color="interactive" />
422-
</Link>
423-
<Link className="flex items-center gap-1" href="/">
424-
<Text> Reset Fields </Text>{' '}
425-
<Icon source={Icons.info} color="interactive" />
426-
</Link>
427-
</div>
428-
</div>
429-
<Text variant="headingXs" as="span" fontWeight="regular">
430-
The Field settings apply to the Resource on a master level and can not
431-
be changed in Access Models.
432-
</Text>
433-
<div className="mt-3">
434-
<DataTable
435-
columns={table.columns}
436-
rows={table.rows}
437-
hideFooter={true}
438-
defaultRowCount={10}
384+
</div>*/}
385+
{resourceId && payload && Object.keys(payload).length > 0 ? (
386+
<ResourceSchema
387+
resourceId={resourceId}
388+
isPending={isPending}
389+
refetch={refetch}
390+
data={
391+
payload?.datasetResources?.filter(
392+
(item: any) => item.id === resourceId
393+
)[0]?.schema
394+
}
439395
/>
440-
</div> */}
396+
) : null}
441397
</div>
442398
);
443399
};

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import { useParams } from 'next/navigation';
3+
import { graphql } from '@/gql';
4+
import { useMutation, useQuery } from '@tanstack/react-query';
5+
import { Button, DataTable, Icon, IconButton, Spinner, Text } from 'opub-ui';
6+
7+
import { GraphQL } from '@/lib/api';
8+
import { Icons } from '@/components/icons';
9+
10+
export const ResourceSchema = ({
11+
resourceId,
12+
isPending,
13+
data,
14+
refetch,
15+
}: any) => {
16+
17+
const resetSchema: any = graphql(`
18+
mutation resetFileResourceSchema($resourceId: UUID!) {
19+
resetFileResourceSchema(resourceId: $resourceId) {
20+
... on TypeResource {
21+
id
22+
schema {
23+
format
24+
description
25+
id
26+
fieldName
27+
}
28+
}
29+
}
30+
}
31+
`);
32+
33+
const { mutate, isLoading } = useMutation(
34+
(data: { resourceId: string }) => GraphQL(resetSchema, data),
35+
{
36+
onSuccess: () => {
37+
refetch();
38+
},
39+
onError: (err: any) => {
40+
console.log('Error ::: ', err);
41+
},
42+
}
43+
);
44+
45+
const generateColumnData = () => {
46+
return [
47+
{
48+
accessorKey: 'fieldName',
49+
header: 'FIELD NAME',
50+
},
51+
{
52+
accessorKey: 'description',
53+
header: 'DESCRIPTION',
54+
},
55+
{
56+
accessorKey: 'format',
57+
header: 'FORMAT',
58+
},
59+
];
60+
};
61+
62+
const generateTableData = (data: any[]) => {
63+
return data.map((item: any) => ({
64+
fieldName: item.fieldName,
65+
description: item.description,
66+
format: item.format,
67+
}));
68+
};
69+
70+
const setFields = () => {
71+
mutate({
72+
resourceId: resourceId,
73+
});
74+
};
75+
76+
return (
77+
<>
78+
<div className="mt-8 flex justify-between">
79+
<Text>Fields in the Resource</Text>
80+
<div className="flex gap-4">
81+
<Button
82+
size="medium"
83+
kind="tertiary"
84+
variant="basic"
85+
onClick={setFields}
86+
>
87+
<div className="flex items-center gap-1">
88+
<Text>Reset Fields</Text>{' '}
89+
<Icon source={Icons.info} color="interactive" />
90+
</div>
91+
</Button>
92+
</div>
93+
</div>
94+
<Text variant="headingXs" as="span" fontWeight="regular">
95+
The Field settings apply to the Resource on a master level and can not
96+
be changed in Access Models.
97+
</Text>
98+
<div className="mt-3">
99+
{isPending || isLoading ? (
100+
<div className=" mt-8 flex justify-center">
101+
<Spinner size={30} />
102+
</div>
103+
) : data && data.length > 0 ? (
104+
<DataTable
105+
columns={generateColumnData()}
106+
rows={generateTableData(data)}
107+
hideFooter={true}
108+
hideSelection
109+
/>
110+
) : (
111+
<div className="flex justify-center mt-8">Click on Reset Fields</div>
112+
)}
113+
</div>
114+
</>
115+
);
116+
};

0 commit comments

Comments
 (0)