-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add tema section to dataset form (#832)
- Loading branch information
Showing
17 changed files
with
296 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| 'use client'; | ||
| import { getLosThemes, getDataThemes } from '@catalog-frontend/data-access'; | ||
| import { LosTheme, DataTheme } from '@catalog-frontend/types'; | ||
| import React, { createContext, useEffect, useState, ReactNode } from 'react'; | ||
|
|
||
| type ThemesContextType = { | ||
| losThemes: LosTheme[]; | ||
| dataThemes: DataTheme[]; | ||
| loading: boolean; | ||
| error: string | null; | ||
| }; | ||
|
|
||
| const ThemesContext = createContext<ThemesContextType | undefined>(undefined); | ||
|
|
||
| export const ThemesProvider = ({ children }: { children: ReactNode }) => { | ||
| const [losThemes, setLosThemes] = useState<LosTheme[]>([]); | ||
| const [dataThemes, setDataThemes] = useState<DataTheme[]>([]); | ||
| const [loading, setLoading] = useState<boolean>(true); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const fetchThemes = async () => { | ||
| setLoading(true); | ||
| try { | ||
| const [los, data] = await Promise.all([getLosThemes(), getDataThemes()]); | ||
| const losThemesData = await los.json(); | ||
| const dataThemesData = await data.json(); | ||
|
|
||
| setLosThemes(losThemesData.losNodes.flat()); | ||
| setDataThemes(dataThemesData.dataThemes); | ||
| } catch (err) { | ||
| console.error(`Failed to fetch reference-data, ${err}`); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchThemes(); | ||
| }, []); | ||
|
|
||
| const value = { | ||
| losThemes, | ||
| dataThemes, | ||
| loading, | ||
| error, | ||
| }; | ||
|
|
||
| return <ThemesContext.Provider value={value}>{children}</ThemesContext.Provider>; | ||
| }; | ||
|
|
||
| export const useThemes = () => { | ||
| const context = React.useContext(ThemesContext); | ||
| if (context === undefined) { | ||
| throw new Error('useThemes must be used within a ThemesProvider'); | ||
| } | ||
| return context; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
124 changes: 124 additions & 0 deletions
124
apps/dataset-catalog/components/dataset-form/dataset-form-tema-section.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { Dataset, Option } from '@catalog-frontend/types'; | ||
| import { FormContainer, TitleWithTag } from '@catalog-frontend/ui'; | ||
| import { useThemes } from '../../app/context/themes/index'; | ||
| import { Combobox, Spinner } from '@digdir/designsystemet-react'; | ||
| import { getTranslateText, localization } from '@catalog-frontend/utils'; | ||
| import { Field, FormikErrors, useFormikContext } from 'formik'; | ||
| import styles from './dataset-form.module.css'; | ||
|
|
||
| export const TemaSection = () => { | ||
| const { losThemes, dataThemes, loading } = useThemes(); | ||
| const { setFieldValue, values, errors } = useFormikContext<Dataset>(); | ||
|
|
||
| const getNameFromLosPath = (path: string): string | string[] => { | ||
| const obj = losThemes?.find((obj) => obj.losPaths.includes(path)); | ||
| return obj ? getTranslateText(obj.name) : []; | ||
| }; | ||
|
|
||
| const getParentNames = (inputPaths: string[]): string => { | ||
| const results: string[] = []; | ||
|
|
||
| inputPaths.forEach((path) => { | ||
| const parts = path.split('/').slice(0, -1); | ||
| const parentPath = parts.slice(0, -1).join('/'); | ||
| const childPath = parts.join('/'); | ||
|
|
||
| const parentName = getNameFromLosPath(parentPath); | ||
| const childName = getNameFromLosPath(childPath); | ||
|
|
||
| const formattedResult = `${parentName} - ${childName}`; | ||
| results.push(formattedResult); | ||
| }); | ||
|
|
||
| return `${localization.datasetForm.helptext.parentTheme}: ${results.join('; ')}`; | ||
| }; | ||
|
|
||
| const containsFilter = (inputValue: string, option: Option): boolean => { | ||
| return option.label.toLowerCase().includes(inputValue.toLowerCase()); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormContainer> | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.losTheme} | ||
| subtitle={localization.datasetForm.helptext.theme} | ||
| /> | ||
| <> | ||
| <div className={styles.combobox}> | ||
| <TitleWithTag | ||
| title={localization.datasetForm.fieldLabel.losTheme} | ||
| tagTitle={localization.tag.recommended} | ||
| tagColor='info' | ||
| /> | ||
| {loading ? ( | ||
| <div className={styles.spinner}> | ||
| <Spinner title={`${localization.loading}...`} /> | ||
| </div> | ||
| ) : ( | ||
| <Field | ||
| as={Combobox} | ||
| name='losThemeList' | ||
| value={values.losThemeList} | ||
| multiple | ||
| virtual | ||
| filter={containsFilter} | ||
| placeholder={`${localization.search.search}...`} | ||
| onValueChange={(values: string[]) => setFieldValue('losThemeList', values)} | ||
| > | ||
| <Combobox.Empty>{localization.search.noHits}</Combobox.Empty> | ||
| {losThemes?.map((theme) => ( | ||
| <Combobox.Option | ||
| key={theme.uri} | ||
| value={theme.uri} | ||
| description={getParentNames(theme.losPaths)} | ||
| > | ||
| {getTranslateText(theme.name)} | ||
| </Combobox.Option> | ||
| ))} | ||
| </Field> | ||
| )} | ||
| </div> | ||
| </> | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.euTheme} | ||
| subtitle={localization.datasetForm.helptext.theme} | ||
| /> | ||
| <> | ||
| <div className={styles.combobox}> | ||
| <TitleWithTag | ||
| title={localization.datasetForm.fieldLabel.euTheme} | ||
| tagTitle={localization.tag.required} | ||
| /> | ||
| {loading ? ( | ||
| <div className={styles.spinner}> | ||
| <Spinner title={`${localization.loading}...`} /> | ||
| </div> | ||
| ) : ( | ||
| <Field | ||
| as={Combobox} | ||
| multiple | ||
| filter={containsFilter} | ||
| placeholder={`${localization.search.search}...`} | ||
| error={errors.euThemeList} | ||
| value={values.euThemeList} | ||
| onValueChange={(values: string[]) => setFieldValue('euThemeList', values)} | ||
| > | ||
| <Combobox.Empty>{localization.search.noHits}</Combobox.Empty> | ||
| {dataThemes && | ||
| dataThemes.map((eutheme) => ( | ||
| <Combobox.Option | ||
| key={eutheme.uri} | ||
| value={eutheme.uri} | ||
| > | ||
| {getTranslateText(eutheme.label)} | ||
| </Combobox.Option> | ||
| ))} | ||
| </Field> | ||
| )} | ||
| </div> | ||
| </> | ||
| </FormContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default TemaSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .combobox { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .spinner { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export const getLosThemes = async () => { | ||
| const resource = `https://staging.fellesdatakatalog.digdir.no/reference-data/los/themes-and-words`; //env-variabel kommer i neste PR | ||
| const options = { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }; | ||
| return await fetch(resource, options); | ||
| }; | ||
|
|
||
| export const getDataThemes = async () => { | ||
| const resource = `https://staging.fellesdatakatalog.digdir.no/reference-data/eu/data-themes`; //env-variabel kommer i neste PR | ||
| const options = { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }; | ||
| return await fetch(resource, options); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.