Skip to content

Commit e18e894

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #88 from CivicDataLab/87-metadata-page-fixes
Metadata page fixes
2 parents 1b0625a + 7df653e commit e18e894

6 files changed

Lines changed: 241 additions & 125 deletions

File tree

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

Lines changed: 200 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,50 @@
11
'use client';
22

3+
import { useEffect, useState } from 'react';
4+
import { useParams, useRouter } from 'next/navigation';
35
import LoadingPage from '@/app/[locale]/dashboard/loading';
46
import { graphql } from '@/gql';
5-
import { TypeMetadata, UpdateMetadataInput } from '@/gql/generated/graphql';
6-
import { useMutation, useQuery } from '@tanstack/react-query';
7-
import { useParams, useRouter } from 'next/navigation';
8-
import { Button, Divider, Form, FormLayout, Input, Text } from 'opub-ui';
7+
import {
8+
TypeDatasetMetadata,
9+
TypeMetadata,
10+
UpdateDatasetInput,
11+
UpdateMetadataInput,
12+
} from '@/gql/generated/graphql';
13+
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
14+
import {
15+
Button,
16+
Combobox,
17+
Divider,
18+
Form,
19+
FormLayout,
20+
Input,
21+
Text,
22+
toast,
23+
} from 'opub-ui';
924

1025
import { GraphQL } from '@/lib/api';
1126

27+
const datasetMetadataQueryDoc: any = graphql(`
28+
query MetadataValues($filters: DatasetFilter) {
29+
datasets(filters: $filters) {
30+
title
31+
id
32+
description
33+
metadata {
34+
metadataItem {
35+
id
36+
label
37+
}
38+
id
39+
value
40+
}
41+
}
42+
}
43+
`);
44+
1245
const metadataQueryDoc: any = graphql(`
13-
query MetaDataQuery {
14-
metadata {
46+
query MetaDataList($filters: MetadataFilter) {
47+
metadata(filters: $filters) {
1548
id
1649
label
1750
dataStandard
@@ -22,6 +55,7 @@ const metadataQueryDoc: any = graphql(`
2255
type
2356
model
2457
enabled
58+
filterable
2559
}
2660
}
2761
`);
@@ -44,22 +78,74 @@ const updateMetadataMutationDoc: any = graphql(`
4478
}
4579
`);
4680

81+
const updateDatasetMutationDoc: any = graphql(`
82+
mutation SaveDatasetDescTags($updateDatasetInput: UpdateDatasetInput!) {
83+
updateDataset(updateDatasetInput: $updateDatasetInput) {
84+
__typename
85+
... on TypeDataset {
86+
id
87+
}
88+
... on OperationInfo {
89+
messages {
90+
kind
91+
message
92+
}
93+
}
94+
}
95+
}
96+
`);
97+
4798
export function EditMetadata({
4899
id,
49-
defaultValues,
100+
// defaultValues,
101+
// description,
50102
}: {
51103
id: string;
52-
defaultValues: any;
104+
// defaultValues: any;
105+
// description: string;
53106
}) {
54107
// const submitRef = React.useRef<HTMLButtonElement>(null);
55108

56109
const router = useRouter();
57110
const params = useParams();
58111

59-
const getMetaDataQueryRes: { data: any; isLoading: boolean } = useQuery(
60-
[`dataset_meta_${id}`],
61-
() => GraphQL(metadataQueryDoc, [])
62-
);
112+
const queryClient = useQueryClient();
113+
114+
const [datasetDetailsMutationFlag, setDatasetDetailsMutationFlag] =
115+
useState(false);
116+
const [metadataDetailsMutationFlag, setMetadataDetailsMutationFlag] =
117+
useState(false);
118+
useEffect(() => {
119+
if (datasetDetailsMutationFlag && metadataDetailsMutationFlag) {
120+
toast('Details updated successfully!');
121+
122+
queryClient.invalidateQueries({
123+
queryKey: [`metadata_values_query_${id}`, `metadata_fields_list_${id}`],
124+
});
125+
126+
getMetaDataListQuery.refetch();
127+
getDatasetMetadata.refetch();
128+
129+
router.push(
130+
`/dashboard/organization/${params.organizationId}/dataset/${id}/edit/publish`
131+
);
132+
}
133+
}, [datasetDetailsMutationFlag, metadataDetailsMutationFlag]);
134+
135+
const getMetaDataListQuery: { data: any; isLoading: boolean; refetch: any } =
136+
useQuery([`metadata_fields_list_${id}`], () =>
137+
GraphQL(metadataQueryDoc, {
138+
filters: {
139+
model: 'DATASET',
140+
enabled: true,
141+
},
142+
})
143+
);
144+
145+
const getDatasetMetadata: { data: any; isLoading: boolean; refetch: any } =
146+
useQuery([`metadata_values_query_${id}`], () =>
147+
GraphQL(datasetMetadataQueryDoc, { filters: { id: id } })
148+
);
63149

64150
const updateMetadataMutation = useMutation(
65151
(data: { UpdateMetadataInput: UpdateMetadataInput }) =>
@@ -70,39 +156,82 @@ export function EditMetadata({
70156
// queryKey: [`create_dataset_${'52'}`],
71157
// });
72158

73-
router.push(
74-
`/dashboard/organization/${params.organizationId}/dataset/${params.id}/edit/publish`
75-
);
159+
setMetadataDetailsMutationFlag(!metadataDetailsMutationFlag);
76160
},
77161
onError: (err: any) => {
78-
console.log('Error ::: ', err);
162+
toast('Error: ' + err.message.split(':')[0]);
79163
},
80164
}
81165
);
82166

167+
const updateDatasetMutation = useMutation(
168+
(data: { updateDatasetInput: UpdateDatasetInput }) =>
169+
GraphQL(updateDatasetMutationDoc, data),
170+
{
171+
onSuccess: (data: any) => {
172+
setDatasetDetailsMutationFlag(!datasetDetailsMutationFlag);
173+
},
174+
onError: (err: any) => {
175+
toast('Error: ' + err.message.split(':')[0]);
176+
},
177+
}
178+
);
179+
180+
const defaultValuesPrepFn = (metadataArray: Array<TypeDatasetMetadata>) => {
181+
let defaultVal: {
182+
[key: string]: string | number | undefined;
183+
} = {};
184+
185+
metadataArray?.map((field) => {
186+
defaultVal[field.metadataItem.id] = field.value;
187+
});
188+
189+
return defaultVal;
190+
};
191+
83192
return (
84193
<>
85-
{getMetaDataQueryRes?.isLoading ? (
194+
{getMetaDataListQuery?.isLoading ? (
86195
<LoadingPage />
87196
) : (
88197
<Form
89198
onSubmit={(values) => {
199+
updateDatasetMutation.mutate({
200+
updateDatasetInput: {
201+
dataset: id,
202+
title: getDatasetMetadata?.data?.datasets[0]?.title,
203+
description: values.description,
204+
tags: [],
205+
},
206+
});
207+
90208
updateMetadataMutation.mutate({
91209
UpdateMetadataInput: {
92210
dataset: id,
93211
metadata: [
94-
...Object.keys(values).map((key) => {
95-
return {
96-
id: key,
97-
value: values[key] || '',
98-
};
99-
}),
212+
...Object.keys(values)
213+
.filter(
214+
(valueItem) =>
215+
valueItem !== 'description' && valueItem !== 'tags'
216+
)
217+
.map((key) => {
218+
return {
219+
id: key,
220+
value: values[key] || '',
221+
};
222+
}),
100223
],
101224
},
102225
});
103226
}}
104227
formOptions={{
105-
defaultValues: defaultValues,
228+
resetOptions: {
229+
keepValues: true,
230+
keepDirtyValues: true,
231+
},
232+
defaultValues: defaultValuesPrepFn(
233+
getDatasetMetadata?.data?.datasets[0]?.metadata
234+
),
106235
}}
107236
>
108237
<>
@@ -115,28 +244,52 @@ export function EditMetadata({
115244

116245
<div className="pt-3">
117246
<FormLayout>
118-
{getMetaDataQueryRes?.data?.metadata?.length > 0 ? (
119-
getMetaDataQueryRes?.data?.metadata
120-
?.filter((fieldItem: TypeMetadata) => fieldItem.enabled)
121-
?.map((metadataFormItem: TypeMetadata) => {
122-
if (metadataFormItem.dataType === 'STRING') {
123-
return (
124-
<Input
125-
key={metadataFormItem.id}
126-
name={metadataFormItem.id}
127-
label={metadataFormItem.label}
128-
disabled={
129-
getMetaDataQueryRes.isLoading ||
130-
!metadataFormItem.enabled
131-
}
132-
/>
133-
);
247+
<Input
248+
key="description"
249+
multiline
250+
name="description"
251+
label={'Description'}
252+
defaultValue={
253+
getDatasetMetadata?.data?.datasets[0].description
254+
}
255+
/>
256+
257+
<div className="flex flex-wrap">
258+
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
259+
<Combobox name={'tags'} list={[]} label={'Tags'} />
260+
</div>
261+
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2"></div>
262+
</div>
263+
264+
<div className="flex flex-wrap">
265+
{getMetaDataListQuery?.data?.metadata?.length > 0 ? (
266+
getMetaDataListQuery?.data?.metadata?.map(
267+
(metadataFormItem: TypeMetadata) => {
268+
if (metadataFormItem.dataType === 'STRING') {
269+
return (
270+
<div
271+
key={metadataFormItem.id}
272+
className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2"
273+
>
274+
<Input
275+
name={metadataFormItem.id}
276+
label={metadataFormItem.label}
277+
disabled={
278+
getMetaDataListQuery.isLoading ||
279+
!metadataFormItem.enabled
280+
}
281+
/>
282+
</div>
283+
);
284+
}
285+
return null;
134286
}
135-
return null;
136-
})
137-
) : (
138-
<>No Metadata Fields!!</>
139-
)}
287+
)
288+
) : (
289+
<></>
290+
)}
291+
</div>
292+
140293
{/* <FormLayout.Group>
141294
<Select
142295
name="update_frequency"
@@ -151,7 +304,7 @@ export function EditMetadata({
151304
placeholder="Select"
152305
required
153306
error="This field is required"
154-
disabled={getMetaDataQueryRes.isLoading}
307+
disabled={getMetaDataListQuery.isLoading}
155308
/>
156309
<Select
157310
name="language"
@@ -166,7 +319,7 @@ export function EditMetadata({
166319
placeholder="Select"
167320
required
168321
error="This field is required"
169-
disabled={getMetaDataQueryRes.isLoading}
322+
disabled={getMetaDataListQuery.isLoading}
170323
/>
171324
</FormLayout.Group>
172325

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/distribution/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ export default async function Page({ params }: { params: { id: string } }) {
4141
const dehydratedState = dehydrate(queryClient);
4242

4343
return (
44-
<Hydrate state={dehydratedState}>
44+
// <Hydrate state={dehydratedState}>
4545
<div className={styles.EditPage}>
4646
<DistibutionPage params={params} />
4747
</div>
48-
</Hydrate>
48+
// </Hydrate>
4949
);
5050
}

0 commit comments

Comments
 (0)