Skip to content

Commit e9aca0f

Browse files
sanjaypinnasanjaypinna
committed
fix prefilling issue
1 parent e9b09f6 commit e9aca0f

File tree

1 file changed

+161
-155
lines changed
  • app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components

1 file changed

+161
-155
lines changed

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

Lines changed: 161 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525

2626
import { GraphQL } from '@/lib/api';
2727
import { Loading } from '@/components/loading';
28+
import DatasetLoading from '../../../components/loading-dataset';
2829

2930
const categoriesListQueryDoc: any = graphql(`
3031
query CategoryList {
@@ -182,15 +183,16 @@ export function EditMetadata({ id }: { id: string }) {
182183
dataset.metadata?.map((field) => {
183184
if (field.metadataItem.dataType === 'MULTISELECT') {
184185
// Convert comma-separated string to array of {label, value} objects
185-
defaultVal[field.metadataItem.id] = field.value.split(', ').map((value: string) => ({
186-
label: value,
187-
value: value,
188-
}));
186+
defaultVal[field.metadataItem.id] = field.value
187+
.split(', ')
188+
.map((value: string) => ({
189+
label: value,
190+
value: value,
191+
}));
189192
} else {
190193
defaultVal[field.metadataItem.id] = field.value;
191194
}
192195
});
193-
194196

195197
defaultVal['description'] = dataset.description || '';
196198

@@ -257,7 +259,6 @@ export function EditMetadata({ id }: { id: string }) {
257259
key={metadataFormItem.id}
258260
className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2"
259261
>
260-
261262
<Select
262263
name={metadataFormItem.id}
263264
options={metadataFormItem.options.map((option: string) => ({
@@ -270,25 +271,28 @@ export function EditMetadata({ id }: { id: string }) {
270271
);
271272
}
272273
if (metadataFormItem.dataType === 'MULTISELECT') {
273-
274274
const prefillData = metadataFormItem.value ? metadataFormItem.value : [];
275275

276276
return (
277277
<div
278278
key={metadataFormItem.id}
279279
className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2"
280280
>
281-
282281
<Combobox
283282
name={metadataFormItem.id}
284-
list={[...metadataFormItem.options.map((option: string) => ({
285-
label: option,
286-
value: option,
287-
}))]}
283+
list={[
284+
...metadataFormItem.options.map(
285+
(option: string) =>
286+
({
287+
label: option,
288+
value: option,
289+
}) || []
290+
),
291+
]}
288292
label={metadataFormItem.label}
289293
displaySelected
290294
selectedValue={prefillData}
291-
/>
295+
/>
292296
</div>
293297
);
294298
}
@@ -300,7 +304,7 @@ export function EditMetadata({ id }: { id: string }) {
300304
>
301305
<Input
302306
name={metadataFormItem.id}
303-
type='url'
307+
type="url"
304308
label={metadataFormItem.label}
305309
disabled={
306310
getMetaDataListQuery.isLoading || !metadataFormItem.enabled
@@ -316,154 +320,156 @@ export function EditMetadata({ id }: { id: string }) {
316320

317321
return (
318322
<>
319-
<Form
320-
onSubmit={(values) => {
321-
322-
const transformedValues = Object.keys(values).reduce((acc:any, key) => {
323-
acc[key] = Array.isArray(values[key])
324-
? values[key].map((item:any) => item.value || item).join(', ')
325-
: values[key];
326-
return acc;
327-
}, {});
328-
329-
// Call the mutation to save both the static and dynamic metadata
330-
updateMetadataMutation.mutate({
331-
UpdateMetadataInput: {
332-
dataset: id,
333-
metadata: [
334-
...Object.keys(transformedValues)
335-
.filter(
336-
(valueItem) =>
337-
!['categories', 'description', 'tags'].includes(valueItem)
338-
)
339-
.map((key) => {
340-
return {
341-
id: key,
342-
value: transformedValues[key] || '',
343-
};
344-
}),
345-
],
346-
description: values.description || '',
347-
tags: values.tags?.map((item: any) => item.label) || [],
348-
categories:
349-
values.categories?.map((item: any) => item.value) || [],
323+
{!getTagsList?.isLoading && !getCategoriesList?.isLoading ? (
324+
<Form
325+
onSubmit={(values) => {
326+
const transformedValues = Object.keys(values)?.reduce(
327+
(acc: any, key) => {
328+
acc[key] = Array.isArray(values[key])
329+
? values[key].map((item: any) => item.value || item).join(', ')
330+
: values[key];
331+
return acc;
332+
},
333+
{}
334+
);
335+
336+
// Call the mutation to save both the static and dynamic metadata
337+
updateMetadataMutation.mutate({
338+
UpdateMetadataInput: {
339+
dataset: id,
340+
metadata: [
341+
...Object.keys(transformedValues)
342+
.filter(
343+
(valueItem) =>
344+
!['categories', 'description', 'tags'].includes(
345+
valueItem
346+
)
347+
)
348+
.map((key) => {
349+
return {
350+
id: key,
351+
value: transformedValues[key] || '',
352+
};
353+
}),
354+
],
355+
description: values.description || '',
356+
tags: values.tags?.map((item: any) => item.label) || [],
357+
categories:
358+
values.categories?.map((item: any) => item.value) || [],
359+
},
360+
});
361+
}}
362+
formOptions={{
363+
resetOptions: {
364+
keepValues: true,
365+
keepDirtyValues: true,
350366
},
351-
});
352-
}}
353-
formOptions={{
354-
resetOptions: {
355-
keepValues: true,
356-
keepDirtyValues: true,
357-
},
358-
defaultValues: defaultValuesPrepFn(
359-
getDatasetMetadata.isLoading || getDatasetMetadata.error
360-
? {}
361-
: getDatasetMetadata?.data?.datasets[0]
362-
),
363-
}}
364-
>
365-
<>
366-
<div className="pt-3">
367-
<FormLayout>
368-
<div className="w-full py-4 pr-4">
369-
<Input
370-
key="description"
371-
multiline
372-
name="description"
373-
label={'Description'}
374-
/>
375-
</div>
376-
377-
<div className="flex flex-wrap">
378-
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
379-
<Combobox
380-
displaySelected
381-
name="tags"
382-
list={
383-
getTagsList.isLoading || getTagsList.error
384-
? []
385-
: getTagsList.data?.tags?.map((item: TypeTag) => {
386-
return {
387-
label: item.value,
388-
value: item.id,
389-
};
390-
}) || []
391-
}
392-
label="Tags"
393-
creatable
394-
/>
395-
</div>
396-
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
397-
<Combobox
398-
displaySelected
399-
label="Categories"
400-
list={
401-
getCategoriesList.isLoading || getCategoriesList.error
402-
? []
403-
: getCategoriesList.data?.categories?.map(
404-
(item: TypeCategory) => {
405-
return { label: item.name, value: item.id };
406-
}
407-
) || []
408-
}
409-
name="categories"
367+
defaultValues: defaultValuesPrepFn(
368+
getDatasetMetadata.isLoading || getDatasetMetadata.error
369+
? {}
370+
: getDatasetMetadata?.data?.datasets[0]
371+
),
372+
}}
373+
>
374+
<>
375+
<div className="pt-3">
376+
<FormLayout>
377+
<div className="w-full py-4 pr-4">
378+
<Input
379+
key="description"
380+
multiline
381+
name="description"
382+
label={'Description'}
410383
/>
411384
</div>
412-
</div>
413-
414-
{getMetaDataListQuery.isLoading ? (
415-
<Loading />
416-
) : getMetaDataListQuery?.data?.metadata?.length > 0 ? (
417-
<>
418-
<div className="my-4">
419-
<Divider />
420-
</div>
421385

422-
<div className="flex flex-col gap-1">
423-
<Text variant="headingMd">Add Metadata</Text>
386+
<div className="flex flex-wrap">
387+
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
388+
<Combobox
389+
displaySelected
390+
name="tags"
391+
list={getTagsList.data?.tags?.map((item: TypeTag) => {
392+
return {
393+
label: item.value,
394+
value: item.id,
395+
};
396+
})}
397+
label="Tags"
398+
creatable
399+
/>
424400
</div>
425-
426-
<div className="my-4">
427-
<Divider />
401+
<div className="w-full py-4 pr-4 sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2">
402+
{
403+
<Combobox
404+
displaySelected
405+
label="Categories"
406+
list={getCategoriesList.data?.categories?.map(
407+
(item: TypeCategory) => {
408+
return { label: item.name, value: item.id };
409+
}
410+
)}
411+
name="categories"
412+
/>
413+
}
428414
</div>
415+
</div>
429416

430-
<div className="flex flex-wrap">
431-
{getMetaDataListQuery?.data?.metadata?.map(
432-
(metadataFormItem: TypeMetadata) => {
433-
return renderInputField(
434-
metadataFormItem,
435-
getMetaDataListQuery
436-
);
437-
}
438-
)}
439-
</div>
440-
</>
441-
) : (
442-
<></>
443-
)}
444-
</FormLayout>
445-
</div>
446-
<div className="mt-8">
447-
<Divider />
448-
</div>
449-
<div className="mt-4 flex flex-wrap items-center justify-center gap-2">
450-
<Button
451-
id="exitAfterSave"
452-
disabled
453-
loading={updateMetadataMutation.isLoading}
454-
>
455-
Save & Exit
456-
</Button>
457-
<Button
458-
id="proceedAfterSave"
459-
submit
460-
loading={updateMetadataMutation.isLoading}
461-
>
462-
Save & Proceed
463-
</Button>
464-
</div>
465-
</>
466-
</Form>
417+
{getMetaDataListQuery.isLoading ? (
418+
<Loading />
419+
) : getMetaDataListQuery?.data?.metadata?.length > 0 ? (
420+
<>
421+
<div className="my-4">
422+
<Divider />
423+
</div>
424+
425+
<div className="flex flex-col gap-1">
426+
<Text variant="headingMd">Add Metadata</Text>
427+
</div>
428+
429+
<div className="my-4">
430+
<Divider />
431+
</div>
432+
433+
<div className="flex flex-wrap">
434+
{getMetaDataListQuery?.data?.metadata?.map(
435+
(metadataFormItem: TypeMetadata) => {
436+
return renderInputField(
437+
metadataFormItem,
438+
getMetaDataListQuery
439+
);
440+
}
441+
)}
442+
</div>
443+
</>
444+
) : (
445+
<></>
446+
)}
447+
</FormLayout>
448+
</div>
449+
<div className="mt-8">
450+
<Divider />
451+
</div>
452+
<div className="mt-4 flex flex-wrap items-center justify-center gap-2">
453+
<Button
454+
id="exitAfterSave"
455+
disabled
456+
loading={updateMetadataMutation.isLoading}
457+
>
458+
Save & Exit
459+
</Button>
460+
<Button
461+
id="proceedAfterSave"
462+
submit
463+
loading={updateMetadataMutation.isLoading}
464+
>
465+
Save & Proceed
466+
</Button>
467+
</div>
468+
</>
469+
</Form>
470+
) : (
471+
<DatasetLoading />
472+
)}
467473
</>
468474
);
469475
}

0 commit comments

Comments
 (0)