-
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 geography combobox in dataset form
- Loading branch information
Showing
17 changed files
with
816 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
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
111 changes: 111 additions & 0 deletions
111
apps/dataset-catalog/components/dataset-form/dataset-form-geography-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,111 @@ | ||
| 'use client'; | ||
| import { FormContainer } from '@catalog-frontend/ui'; | ||
| import { getTranslateText, localization } from '@catalog-frontend/utils'; | ||
| import { Combobox, Heading } from '@digdir/designsystemet-react'; | ||
| import { useCallback, useState } from 'react'; | ||
| import { useSearchAdministrativeUnits, useSearchAdministrativeUnitsByUri } from '../../hooks/useReferenceDataSearch'; | ||
| import { useFormikContext } from 'formik'; | ||
| import { Dataset } from '@catalog-frontend/types'; | ||
| import { debounce } from 'lodash'; | ||
|
|
||
| interface Props { | ||
| envVariable: string; | ||
| } | ||
|
|
||
| export const GeographySection = ({ envVariable }: Props) => { | ||
| const [searchTerm, setSearchTerm] = useState<string>(''); | ||
| const { values, setFieldValue } = useFormikContext<Dataset>(); | ||
|
|
||
| const { data: searchHits, isLoading: isSearching } = useSearchAdministrativeUnits(searchTerm, envVariable); | ||
| const { data: selectedValues, isLoading: isLoadingselectedValues } = useSearchAdministrativeUnitsByUri( | ||
| values?.spatialList, | ||
| envVariable, | ||
| ); | ||
|
|
||
| const debouncedSetSearchTerm = debounce((term: string) => { | ||
| setSearchTerm(term); | ||
| }, 300); | ||
|
|
||
| const handleSearchChange = useCallback((input: any) => { | ||
| debouncedSetSearchTerm(input.target.value); | ||
| }, []); | ||
|
|
||
| const getLocationType = (uri: string): string => { | ||
| if (uri.includes('kommune')) return localization.spatial.municipality; | ||
| if (uri.includes('fylke')) return localization.spatial.country; | ||
| if (uri.includes('nasjon')) return localization.spatial.country; | ||
| return ''; | ||
| }; | ||
|
|
||
| const comboboxOptions = [ | ||
| // Combines selectedValues and searchHits, and add uri's for values not found in selectedValues | ||
| ...new Map( | ||
| [ | ||
| ...(selectedValues ?? []), | ||
| ...(searchHits ?? []), | ||
| ...(values.spatialList ?? []).map((uri) => ({ | ||
| uri, | ||
| label: | ||
| (selectedValues?.find((item) => item.uri === uri) || searchHits?.find((item) => item.uri === uri))?.label ?? | ||
| null, | ||
| })), | ||
| ].map((spatial) => [spatial.uri, spatial]), | ||
| ).values(), | ||
| ]; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Heading | ||
| size='sm' | ||
| spacing | ||
| > | ||
| {localization.datasetForm.heading.geography} | ||
| </Heading> | ||
| <FormContainer> | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.spatial} | ||
| subtitle={localization.datasetForm.helptext.spatial} | ||
| /> | ||
| {!isLoadingselectedValues && ( | ||
| <Combobox | ||
| loading={isSearching || isLoadingselectedValues} | ||
| onChange={handleSearchChange} | ||
| placeholder={`${localization.search.search}...`} | ||
| virtual | ||
| multiple | ||
| onValueChange={(selectedValues) => setFieldValue('spatialList', selectedValues)} | ||
| value={values.spatialList || []} | ||
| filter={() => true} // Deactivates filter. Filtering is handled in the backend. | ||
| > | ||
| <Combobox.Empty> | ||
| {searchTerm.length < 2 | ||
| ? localization.datasetForm.validation.searchString | ||
| : `${localization.search.noHits}...`} | ||
| </Combobox.Empty> | ||
| {comboboxOptions.map((location) => ( | ||
| <Combobox.Option | ||
| value={location.uri} | ||
| key={location.uri} | ||
| description={getLocationType(location.uri)} | ||
| > | ||
| {location.label ? getTranslateText(location.label) : location.uri} | ||
| </Combobox.Option> | ||
| ))} | ||
| </Combobox> | ||
| )} | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.temporal} | ||
| subtitle={localization.datasetForm.helptext.temporal} | ||
| /> | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.releaseDate} | ||
| subtitle={localization.datasetForm.helptext.releaseDate} | ||
| /> | ||
| <FormContainer.Header | ||
| title={localization.datasetForm.heading.language} | ||
| subtitle={localization.datasetForm.helptext.language} | ||
| /> | ||
| </FormContainer> | ||
| </div> | ||
| ); | ||
| }; |
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,28 @@ | ||
| import { getAdministrativeUnits, getAdministrativeUnitsByUri } from '@catalog-frontend/data-access'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
|
|
||
| export const useSearchAdministrativeUnits = (searchQuery: string, envVariable: string) => { | ||
| return useQuery({ | ||
| queryKey: ['ADMINISTRATIVE_ENHETER', searchQuery], | ||
| queryFn: async () => { | ||
| const data = await getAdministrativeUnits(searchQuery, envVariable); | ||
| return data; | ||
| }, | ||
| enabled: !!searchQuery, | ||
| }); | ||
| }; | ||
|
|
||
| export const useSearchAdministrativeUnitsByUri = (uriList: string[] | undefined, envVariable: string) => { | ||
| return useQuery({ | ||
| queryKey: ['ADMINISTRATIVE_ENHETER', uriList], | ||
| queryFn: async () => { | ||
| if (!uriList || uriList.length === 0) { | ||
| return []; | ||
| } | ||
|
|
||
| const data = await getAdministrativeUnitsByUri(uriList, envVariable); | ||
| return data; | ||
| }, | ||
| enabled: Array.isArray(uriList) && uriList.length > 0, | ||
| }); | ||
| }; |
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.