From b50ef8e0c770b119a53159adffde07ee9a690a56 Mon Sep 17 00:00:00 2001
From: hegeaal <hegeaal@gmail.com>
Date: Mon, 23 Dec 2024 13:04:15 +0100
Subject: [PATCH] feat: add mulitlanguage keyword support dataset form

---
 .../components/concept-section.tsx            | 72 ++++---------------
 .../utils/dataset-initial-values.tsx          |  2 +
 libs/types/src/lib/dataset.ts                 |  2 +-
 3 files changed, 17 insertions(+), 59 deletions(-)

diff --git a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx
index c322e187..3630a681 100644
--- a/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx
+++ b/apps/dataset-catalog/components/dataset-form/components/concept-section.tsx
@@ -1,13 +1,12 @@
 'use client';
 import { Dataset } from '@catalog-frontend/types';
-import { Textfield, Chip, Button, Combobox } from '@digdir/designsystemet-react';
+import { Combobox } from '@digdir/designsystemet-react';
 import { useFormikContext } from 'formik';
 import { useState } from 'react';
 import { capitalizeFirstLetter, getTranslateText, localization } from '@catalog-frontend/utils';
 import styles from '../dataset-form.module.css';
 import { useSearchConceptsByUri, useSearchConceptSuggestions } from '../../../hooks/useSearchService';
-import { TitleWithTag } from '@catalog-frontend/ui';
-import classNames from 'classnames';
+import { FormikLanguageFieldset, TitleWithTag } from '@catalog-frontend/ui';
 
 interface Props {
   searchEnv: string; // Environment variable to search service
@@ -15,7 +14,6 @@ interface Props {
 
 export const ConceptSection = ({ searchEnv }: Props) => {
   const { setFieldValue, values } = useFormikContext<Dataset>();
-  const [inputValue, setInputValue] = useState<string>('');
   const [searchQuery, setSearchQuery] = useState<string>('');
 
   const { data: searchHits, isLoading: searching } = useSearchConceptSuggestions(searchEnv, searchQuery);
@@ -42,22 +40,9 @@ export const ConceptSection = ({ searchEnv }: Props) => {
     ).values(),
   ];
 
-  const addKeyword = () => {
-    if (inputValue && !values.keywordList?.nb?.includes(inputValue)) {
-      const updatedKeywords = [...(values.keywordList?.nb || []), inputValue];
-      setFieldValue('keywordList.nb', updatedKeywords);
-      setInputValue('');
-    }
-  };
-
-  const removeKeyword = (keyword: string) => {
-    const updatedKeywords = values.keywordList?.nb?.filter((item: string) => item !== keyword) || [];
-    setFieldValue('keywordList.nb', updatedKeywords);
-  };
-
   return (
     <>
-      <div className={styles.fieldContainer}>
+      <>
         <TitleWithTag
           title={localization.datasetForm.fieldLabel.concept}
           tagTitle={localization.tag.recommended}
@@ -92,48 +77,19 @@ export const ConceptSection = ({ searchEnv }: Props) => {
             </Combobox.Option>
           ))}
         </Combobox>
-      </div>
+      </>
 
-      <div className={classNames(styles.set, styles.fullWidth)}>
-        <div className={styles.fullWidth}>
-          <Textfield
-            size='sm'
-            label={
-              <TitleWithTag
-                title={localization.datasetForm.fieldLabel.keyword}
-                tagTitle={localization.tag.recommended}
-                tagColor='info'
-              />
-            }
-            type='text'
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                addKeyword();
-              }
-            }}
+      <FormikLanguageFieldset
+        multiple
+        name={'keywordList'}
+        legend={
+          <TitleWithTag
+            title={localization.datasetForm.fieldLabel.keyword}
+            tagTitle={localization.tag.recommended}
+            tagColor='info'
           />
-        </div>
-        <div className={styles.tagsButton}>
-          <Button
-            size='sm'
-            onClick={addKeyword}
-            variant='secondary'
-          >{`${localization.add}...`}</Button>
-        </div>
-      </div>
-      <Chip.Group size='sm'>
-        {values.keywordList?.nb?.map((value: string) => (
-          <Chip.Removable
-            key={value}
-            onClick={() => removeKeyword(value)}
-          >
-            {value}
-          </Chip.Removable>
-        ))}
-      </Chip.Group>
+        }
+      />
     </>
   );
 };
diff --git a/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx b/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx
index aec0d32b..6bf4af03 100644
--- a/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx
+++ b/apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx
@@ -27,6 +27,7 @@ export const datasetTemplate = (dataset: Dataset): Dataset => {
       : [],
     type: dataset?.type,
     keywordList: dataset.keyword ? groupByKeys(dataset.keyword) : { nb: [] },
+    keyword: dataset.keyword ?? [{ nb: '' }],
     conceptList: dataset.concepts ? dataset.concepts.map((concept) => concept.uri) : [],
     provenance: dataset?.provenance?.uri ? { uri: dataset?.provenance?.uri } : undefined,
     accrualPeriodicity: dataset?.accrualPeriodicity?.uri ? { uri: dataset?.accrualPeriodicity?.uri } : undefined,
@@ -78,6 +79,7 @@ export const datasetToBeCreatedTemplate = (): DatasetToBeCreated => {
     euThemeList: [],
     type: undefined,
     keywordList: { nb: [] },
+    keyword: [{ nb: '' }],
     conceptList: [],
     provenance: undefined,
     accrualPeriodicity: undefined,
diff --git a/libs/types/src/lib/dataset.ts b/libs/types/src/lib/dataset.ts
index c1b05b75..5cb09176 100644
--- a/libs/types/src/lib/dataset.ts
+++ b/libs/types/src/lib/dataset.ts
@@ -20,7 +20,7 @@ export type DatasetToBeCreated = {
   landingPage?: string[];
   theme?: { uri: string }[];
   type?: string;
-  keyword?: LocalizedStrings[];
+  keyword?: { [key: string]: string }[];
   keywordList?: { nb?: string[]; nn?: string[]; en?: string[] };
   concepts?: [{ uri: string }];
   provenance?: ReferenceDataCode;