feat: add tidsmessig avgrenset til to dataset form

Informasjonsforvaltning · Oct 25, 2024 · 823104c · 823104c
1 parent 37eea0b
commit 823104c
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 3 deletions.
diff --git a/apps/dataset-catalog/components/dataset-form/dataset-form-geography-section.tsx b/apps/dataset-catalog/components/dataset-form/dataset-form-geography-section.tsx
@@ -1,12 +1,13 @@
 'use client';
-import { FormContainer } from '@catalog-frontend/ui';
+import { AddButton, DeleteButton, FormContainer, TitleWithTag } from '@catalog-frontend/ui';
 import { getTranslateText, localization } from '@catalog-frontend/utils';
-import { Combobox, Heading } from '@digdir/designsystemet-react';
+import { Combobox, Heading, Textfield } from '@digdir/designsystemet-react';
 import { useCallback, useState } from 'react';
 import { useSearchAdministrativeUnits, useSearchAdministrativeUnitsByUri } from '../../hooks/useReferenceDataSearch';
-import { useFormikContext } from 'formik';
+import { Field, FieldArray, useFormikContext } from 'formik';
 import { Dataset } from '@catalog-frontend/types';
 import { debounce } from 'lodash';
+import styles from './dataset-form.module.css';
 
 interface Props {
   envVariable: string;
@@ -97,6 +98,51 @@ export const GeographySection = ({ envVariable }: Props) => {
           title={localization.datasetForm.heading.temporal}
           subtitle={localization.datasetForm.helptext.temporal}
         />
+        <FieldArray
+          name='temporal'
+          render={({ remove, push }) => (
+            <div>
+              {values.temporal &&
+                values.temporal.map((_, index) => (
+                  <div
+                    className={styles.date}
+                    key={index}
+                  >
+                    <Field
+                      as={Textfield}
+                      label={
+                        <TitleWithTag
+                          title={localization.from}
+                          tagColor='info'
+                          tagTitle={localization.tag.recommended}
+                        />
+                      }
+                      type='date'
+                      name={`temporal.${index}.startDate`}
+                    />
+                    <Field
+                      as={Textfield}
+                      label={
+                        <TitleWithTag
+                          title={localization.to}
+                          tagColor='info'
+                          tagTitle={localization.tag.recommended}
+                        />
+                      }
+                      type='date'
+                      name={`temporal.${index}.endDate`}
+                    />
+                    <DeleteButton onClick={() => remove(index)} />
+                  </div>
+                ))}
+              <div className={styles.fitContent}>
+                <AddButton onClick={() => push({ startDate: '', endDate: '' })}>
+                  {localization.datasetForm.button.addDate}
+                </AddButton>
+              </div>
+            </div>
+          )}
+        />
         <FormContainer.Header
           title={localization.datasetForm.heading.releaseDate}
           subtitle={localization.datasetForm.helptext.releaseDate}

diff --git a/apps/dataset-catalog/components/dataset-form/dataset-form.module.css b/apps/dataset-catalog/components/dataset-form/dataset-form.module.css
@@ -24,3 +24,15 @@
   grid-template-columns: 20% 55% 20%;
   gap: 2.5%;
 }
+
+.date {
+  display: grid;
+  grid-template-columns: 40% 40% 10%;
+  gap: 3%;
+  align-items: flex-end;
+  padding-bottom: 2rem;
+}
+
+.fitContent {
+  width: fit-content;
+}
diff --git a/apps/dataset-catalog/components/dataset-form/dataset-initial-values.tsx b/apps/dataset-catalog/components/dataset-form/dataset-initial-values.tsx
@@ -43,6 +43,7 @@ export const datasetTemplate = (dataset: Dataset): Dataset => {
     hasAccuracyAnnotation: { hasBody: { nb: dataset.hasAccuracyAnnotation?.hasBody?.nb ?? '' } },
     hasAvailabilityAnnotation: { hasBody: { nb: dataset.hasAvailabilityAnnotation?.hasBody?.nb ?? '' } },
     spatialList: dataset.spatial ? dataset.spatial.map((spatial) => spatial.uri) : [],
+    temporal: dataset.temporal ?? [{ startDate: '', endDate: '' }],
   };
 };
 
@@ -79,5 +80,6 @@ export const datasetToBeCreatedTemplate = (): DatasetToBeCreated => {
     hasAccuracyAnnotation: { hasBody: { nb: '' } },
     hasAvailabilityAnnotation: { hasBody: { nb: '' } },
     spatialList: [],
+    temporal: [{ startDate: '', endDate: '' }],
   };
 };
diff --git a/libs/types/src/lib/dataset.ts b/libs/types/src/lib/dataset.ts
@@ -32,6 +32,7 @@ export interface DatasetToBeCreated {
   hasAccuracyAnnotation?: { hasBody: LocalizedStrings };
   conformsTo?: UriWithLabel[];
   spatial?: ReferenceDataCode[];
+  temporal?: DateRange[];
   // Arrays of uris used as helper values for Formik. These properties is not part of the db object.
   losThemeList?: string[];
   euThemeList?: string[];
@@ -43,3 +44,8 @@ export interface UriWithLabel {
   uri?: string;
   prefLabel?: LocalizedStrings;
 }
+
+interface DateRange {
+  startDate?: string;
+  endDate?: string;
+}
diff --git a/libs/ui/src/lib/button/add.tsx b/libs/ui/src/lib/button/add.tsx
@@ -0,0 +1,18 @@
+import { Button, ButtonProps } from '@digdir/designsystemet-react';
+import { localization } from '@catalog-frontend/utils';
+import { PlusCircleIcon } from '@navikt/aksel-icons';
+
+const AddButton = ({ children = localization.add, ...props }: ButtonProps) => (
+  <Button
+    {...props}
+    asChild
+    variant='tertiary'
+  >
+    <span>
+      <PlusCircleIcon />
+      {children}
+    </span>
+  </Button>
+);
+
+export { AddButton };
diff --git a/libs/ui/src/lib/button/delete.tsx b/libs/ui/src/lib/button/delete.tsx
@@ -0,0 +1,20 @@
+import { Button, ButtonProps } from '@digdir/designsystemet-react';
+import { localization } from '@catalog-frontend/utils';
+import { TrashIcon } from '@navikt/aksel-icons';
+
+const DeleteButton = ({ children = localization.button.delete, ...props }: ButtonProps) => (
+  <Button
+    {...props}
+    size={props.size ?? 'small'}
+    asChild
+    variant='tertiary'
+    color='danger'
+  >
+    <span>
+      <TrashIcon />
+      {children}
+    </span>
+  </Button>
+);
+
+export { DeleteButton };
diff --git a/libs/ui/src/lib/button/index.tsx b/libs/ui/src/lib/button/index.tsx
@@ -1,3 +1,5 @@
 export * from './button';
 export * from './upload';
 export * from './link';
+export * from './delete';
+export * from './add';
diff --git a/libs/utils/src/lib/language/dataset.form.nb.ts b/libs/utils/src/lib/language/dataset.form.nb.ts
@@ -87,4 +87,7 @@ export const datasetFormNb = {
     euTheme: 'Minst ett EU-tema må være valgt.',
     searchString: 'Ingen treff. Søkestrengen må inneholde minst to bokstaver.',
   },
+  button: {
+    addDate: 'Legg til tidsperiode',
+  },
 };
diff --git a/libs/utils/src/lib/language/nb.ts b/libs/utils/src/lib/language/nb.ts
@@ -34,6 +34,8 @@ export const nb = {
   name: 'Navn',
   nameAndConcept: 'Navn og begrep',
   no: 'Nei',
+  to: 'Til',
+  from: 'Fra',
   access: 'Tilgang',
   noAccess: 'Ingen tilgang',
   notFound: 'Ikke funnet',