Skip to content

Commit d3a21e7

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #109 from CivicDataLab/108-add-categories-to-metadata-form
Add categories to metadata form
2 parents 4a58620 + 51af9e9 commit d3a21e7

2 files changed

Lines changed: 152 additions & 106 deletions

File tree

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

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222

2323
import { GraphQL } from '@/lib/api';
2424
import { Icons } from '@/components/icons';
25+
import { Loading } from '@/components/loading';
2526

2627
const datasetQueryDoc: any = graphql(`
2728
query datasetTitleQuery($filters: DatasetFilter) {
@@ -110,13 +111,17 @@ export function EditLayout({ children, params }: LayoutProps) {
110111

111112
return (
112113
<div className="mt-8 flex h-full flex-col">
113-
<Header
114-
dataset={getDatasetTitleRes?.data?.datasets[0]}
115-
orgId={orgParams.organizationId}
116-
saveTitle={updateDatasetTitleMutation.mutate}
117-
editMode={editMode}
118-
setEditMode={setEditMode}
119-
/>
114+
{getDatasetTitleRes.isLoading ? (
115+
<Loading />
116+
) : (
117+
<Header
118+
dataset={getDatasetTitleRes?.data?.datasets[0]}
119+
orgId={orgParams.organizationId}
120+
saveTitle={updateDatasetTitleMutation.mutate}
121+
editMode={editMode}
122+
setEditMode={setEditMode}
123+
/>
124+
)}
120125
<div className="lg:flex-column mt-4 flex flex-col">
121126
<div>
122127
<Navigation
@@ -136,23 +141,11 @@ export function EditLayout({ children, params }: LayoutProps) {
136141
const Header = ({ dataset, orgId, saveTitle, editMode, setEditMode }: any) => {
137142
return (
138143
<>
139-
<div className="mb-3 flex justify-between">
144+
<div className="mb-3 flex flex-wrap-reverse items-center justify-between gap-4 md:gap-4 lg:flex-nowrap lg:gap-12">
140145
{!editMode ? (
141146
<div className="flex items-center gap-4">
142147
<Text variant="headingSm" color="subdued">
143-
DATASET NAME :
144-
{dataset?.title !== '' ? (
145-
<b>{dataset?.title}</b>
146-
) : (
147-
<b>
148-
Untitled -{' '}
149-
{new Date(dataset?.created).toLocaleDateString('en-IN', {
150-
month: 'long',
151-
day: 'numeric',
152-
year: 'numeric',
153-
})}
154-
</b>
155-
)}
148+
DATASET NAME : <b>{dataset?.title}</b>
156149
</Text>
157150
<Button
158151
kind="tertiary"
@@ -165,48 +158,55 @@ const Header = ({ dataset, orgId, saveTitle, editMode, setEditMode }: any) => {
165158
</Button>
166159
</div>
167160
) : (
168-
<Form
169-
onSubmit={(values: any) =>
170-
saveTitle({
171-
updateDatasetInput: {
172-
dataset: dataset.id,
173-
title: values.title,
174-
description: '',
175-
tags: [],
176-
},
177-
})
178-
}
179-
>
180-
<FormLayout>
181-
<div className="flex items-center gap-4">
182-
<Text variant="headingSm" color="subdued">
183-
DATASET NAME :
184-
</Text>
185-
<Input
186-
name="title"
187-
labelHidden
188-
label="Datset Title"
189-
defaultValue={
190-
dataset?.title !== ''
191-
? dataset?.title
192-
: `Untitled - ${new Date(
193-
dataset?.created
194-
).toLocaleDateString('en-IN', {
195-
month: 'long',
196-
day: 'numeric',
197-
year: 'numeric',
198-
})}`
199-
}
200-
/>
201-
<Button submit kind="primary">
202-
Save
203-
</Button>
204-
<Button kind="tertiary" onClick={() => setEditMode(false)}>
205-
Cancel
206-
</Button>
207-
</div>
208-
</FormLayout>
209-
</Form>
161+
<div className="flex-grow">
162+
<Form
163+
onSubmit={(values: any) =>
164+
saveTitle({
165+
updateDatasetInput: {
166+
dataset: dataset.id,
167+
title: values.title,
168+
description: '',
169+
tags: [],
170+
},
171+
})
172+
}
173+
>
174+
<FormLayout>
175+
<div className="flex flex-wrap items-center gap-4">
176+
<Text variant="headingSm" color="subdued">
177+
DATASET NAME :
178+
</Text>
179+
<div className="flex-grow">
180+
<Input
181+
name="title"
182+
labelHidden
183+
label="Datset Title"
184+
defaultValue={
185+
dataset?.title !== ''
186+
? dataset?.title
187+
: `Untitled - ${new Date(
188+
dataset?.created
189+
).toLocaleDateString('en-IN', {
190+
month: 'long',
191+
day: 'numeric',
192+
year: 'numeric',
193+
})}`
194+
}
195+
/>
196+
</div>
197+
<div className="flex flex-row gap-4">
198+
<Button submit kind="primary">
199+
Save
200+
</Button>
201+
202+
<Button kind="tertiary" onClick={() => setEditMode(false)}>
203+
Cancel
204+
</Button>
205+
</div>
206+
</div>
207+
</FormLayout>
208+
</Form>
209+
</div>
210210
)}
211211

212212
<Link href={`/dashboard/organization/${orgId}/dataset`}>

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

Lines changed: 89 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
'use client';
22

3+
import { useParams, useRouter } from 'next/navigation';
34
import { graphql } from '@/gql';
45
import {
6+
TypeCategory,
7+
TypeDataset,
58
TypeDatasetMetadata,
69
TypeMetadata,
7-
UpdateMetadataInput
10+
UpdateMetadataInput,
811
} from '@/gql/generated/graphql';
912
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
10-
import { useParams, useRouter } from 'next/navigation';
1113
import {
1214
Button,
1315
Combobox,
@@ -19,15 +21,28 @@ import {
1921
toast,
2022
} from 'opub-ui';
2123

22-
import { Loading } from '@/components/loading';
2324
import { GraphQL } from '@/lib/api';
25+
import { Loading } from '@/components/loading';
26+
27+
const categoriesListQueryDoc: any = graphql(`
28+
query CategoryList {
29+
categories {
30+
id
31+
name
32+
}
33+
}
34+
`);
2435

2536
const datasetMetadataQueryDoc: any = graphql(`
2637
query MetadataValues($filters: DatasetFilter) {
2738
datasets(filters: $filters) {
2839
title
2940
id
3041
description
42+
categories {
43+
id
44+
name
45+
}
3146
metadata {
3247
metadataItem {
3348
id
@@ -76,46 +91,44 @@ const updateMetadataMutationDoc: any = graphql(`
7691
}
7792
`);
7893

79-
export function EditMetadata({
80-
id,
81-
// defaultValues,
82-
// description,
83-
}: {
84-
id: string;
85-
// defaultValues: any;
86-
// description: string;
87-
}) {
88-
// const submitRef = React.useRef<HTMLButtonElement>(null);
89-
94+
export function EditMetadata({ id }: { id: string }) {
9095
const router = useRouter();
9196
const params = useParams();
9297

9398
const queryClient = useQueryClient();
9499

95-
const getMetaDataListQuery: { data: any; isLoading: boolean; refetch: any } =
96-
useQuery([`metadata_fields_list_${id}`], () =>
97-
GraphQL(metadataQueryDoc, {
98-
filters: {
99-
model: 'DATASET',
100-
enabled: true,
101-
},
102-
})
100+
const getCategoriesList: { data: any; isLoading: boolean; error: any } =
101+
useQuery([`categories_list_query`], () =>
102+
GraphQL(categoriesListQueryDoc, [])
103103
);
104104

105-
const getDatasetMetadata: { data: any; isLoading: boolean; refetch: any } =
106-
useQuery([`metadata_values_query_${id}`], () =>
107-
GraphQL(datasetMetadataQueryDoc, { filters: { id: id } })
108-
);
105+
const getMetaDataListQuery: {
106+
data: any;
107+
isLoading: boolean;
108+
refetch: any;
109+
} = useQuery([`metadata_fields_list_${id}`], () =>
110+
GraphQL(metadataQueryDoc, {
111+
filters: {
112+
model: 'DATASET',
113+
enabled: true,
114+
},
115+
})
116+
);
117+
118+
const getDatasetMetadata: {
119+
data: any;
120+
isLoading: boolean;
121+
refetch: any;
122+
error: any;
123+
} = useQuery([`metadata_values_query_${id}`], () =>
124+
GraphQL(datasetMetadataQueryDoc, { filters: { id: id } })
125+
);
109126

110127
const updateMetadataMutation = useMutation(
111128
(data: { UpdateMetadataInput: UpdateMetadataInput }) =>
112129
GraphQL(updateMetadataMutationDoc, data),
113130
{
114131
onSuccess: (data: any) => {
115-
// queryClient.invalidateQueries({
116-
// queryKey: [`create_dataset_${'52'}`],
117-
// });
118-
119132
toast('Details updated successfully!');
120133

121134
queryClient.invalidateQueries({
@@ -138,15 +151,28 @@ export function EditMetadata({
138151
}
139152
);
140153

141-
const defaultValuesPrepFn = (metadataArray: Array<TypeDatasetMetadata>) => {
154+
const defaultValuesPrepFn = (dataset: TypeDataset) => {
155+
// Function to set default values for the form
156+
142157
let defaultVal: {
143-
[key: string]: string | number | undefined;
158+
[key: string]: any;
144159
} = {};
145160

146-
metadataArray?.map((field) => {
161+
dataset.metadata?.map((field) => {
147162
defaultVal[field.metadataItem.id] = field.value;
148163
});
149164

165+
defaultVal['description'] = dataset.description || '';
166+
167+
defaultVal['categories'] = dataset.categories?.map(
168+
(category: TypeCategory) => {
169+
return {
170+
label: category.name,
171+
value: category.id,
172+
};
173+
}
174+
);
175+
150176
return defaultVal;
151177
};
152178

@@ -161,7 +187,7 @@ export function EditMetadata({
161187
...Object.keys(values)
162188
.filter(
163189
(valueItem) =>
164-
valueItem !== 'description' && valueItem !== 'tags'
190+
!['categories', 'description', 'tags'].includes(valueItem)
165191
)
166192
.map((key) => {
167193
return {
@@ -172,6 +198,8 @@ export function EditMetadata({
172198
],
173199
description: values.description || '',
174200
tags: values.tags || [],
201+
categories:
202+
values.categories?.map((item: any) => item.value) || [],
175203
},
176204
});
177205
}}
@@ -181,26 +209,44 @@ export function EditMetadata({
181209
keepDirtyValues: true,
182210
},
183211
defaultValues: defaultValuesPrepFn(
184-
getDatasetMetadata?.data?.datasets[0]?.metadata
212+
getDatasetMetadata.isLoading || getDatasetMetadata.error
213+
? {}
214+
: getDatasetMetadata?.data?.datasets[0]
185215
),
186216
}}
187217
>
188218
<>
189219
<div className="pt-3">
190220
<FormLayout>
191-
<Input
192-
key="description"
193-
multiline
194-
name="description"
195-
label={'Description'}
196-
defaultValue={getDatasetMetadata?.data?.datasets[0].description}
197-
/>
221+
<div className="w-full py-4 pr-4">
222+
<Input
223+
key="description"
224+
multiline
225+
name="description"
226+
label={'Description'}
227+
/>
228+
</div>
198229

199230
<div className="flex flex-wrap">
200231
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
201232
<Combobox name={'tags'} list={[]} label={'Tags'} />
202233
</div>
203-
<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>
234+
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
235+
<Combobox
236+
displaySelected
237+
label="Categories"
238+
list={
239+
getCategoriesList.isLoading || getCategoriesList.error
240+
? []
241+
: getCategoriesList.data?.categories?.map(
242+
(item: TypeCategory) => {
243+
return { label: item.name, value: item.id };
244+
}
245+
) || []
246+
}
247+
name="categories"
248+
/>
249+
</div>
204250
</div>
205251

206252
{getMetaDataListQuery.isLoading ? (

0 commit comments

Comments
 (0)