Feat/ha/add contact point dataset form

apps/dataset-catalog/components/dataset-form/components/dataset-form-contact-point-section.tsx

@@ -0,0 +1,111 @@
+'use client';
+import { Dataset } from '@catalog-frontend/types';
+import { HelpMarkdown, TitleWithTag } from '@catalog-frontend/ui';
+import { localization } from '@catalog-frontend/utils';
+import { Textfield, Box, Checkbox, CheckboxGroup } from '@digdir/designsystemet-react';
+import { Field, useFormikContext } from 'formik';
+import styles from '../dataset-form.module.css';
+import { useState } from 'react';
+
+export const ContactPointSection = () => {
+  const { setFieldValue, values, errors } = useFormikContext<Dataset>();
+  const [selectedFields, setSelectedFields] = useState<string[]>([
+    ...(values.contactPoint?.[0].email ? ['email'] : []),
+    ...(values.contactPoint?.[0].hasTelephone ? ['hasTelephone'] : []),
+    ...(values.contactPoint?.[0].organizationUnit ? ['organizationUnit'] : []),
+    ...(values.contactPoint?.[0].hasURL ? ['hasURL'] : []),
+  ]);
+
+  const contactPointOptions = [
+    { value: 'email', label: localization.email },
+    { value: 'hasTelephone', label: localization.telephone },
+    { value: 'hasURL', label: localization.contactPoint.form },
+    { value: 'organizationUnit', label: localization.contactPoint.organizationUnit },
+  ];
+
+  const handleContactChange = (value: string[]) => {
+    setSelectedFields(value);
+    contactPointOptions.forEach((option) => {
+      if (!value.includes(option.value)) {
+        setFieldValue(`contactPoint.${option.value}`, null);
+      }
+    });
+  };
+
+  return (
+    <Box>
+      <CheckboxGroup
+        className={styles.field}
+        size='sm'
+        value={selectedFields}
+        legend={
+          <TitleWithTag
+            title={
+              <>
+                {localization.datasetForm.heading.contactPoint}
+                <HelpMarkdown title={'Hjelpetekst kontaktinformasjon'}>
+                  {localization.datasetForm.helptext.contactPoint}
+                </HelpMarkdown>
+              </>
+            }
+            tagTitle={localization.tag.required}
+          />
+        }
+        onChange={handleContactChange}
+      >
+        {contactPointOptions.map((option) => (
+          <Checkbox
+            key={option.value}
+            value={option.value}
+          >
+            {option.label}
+          </Checkbox>
+        ))}
+      </CheckboxGroup>
+
+      {selectedFields.includes('email') && (
+        <Field
+          as={Textfield}
+          name='contactPoint[0].email'
+          size='sm'
+          label={localization.email}
+          className={styles.field}
+          // @ts-expect-error: email exists on the object
+          error={errors?.contactPoint?.[0]?.email}
+        />
+      )}
+
+      {selectedFields.includes('hasTelephone') && (
+        <Field
+          as={Textfield}
+          name='contactPoint[0].hasTelephone'
+          size='sm'
+          label={localization.telephone}
+          className={styles.field}
+          // @ts-expect-error: hasTelephone exists on the object
+          error={errors?.contactPoint?.[0]?.hasTelephone}
+        />
+      )}
+      {selectedFields.includes('organizationUnit') && (
+        <Field
+          as={Textfield}
+          name='contactPoint[0].organizationUnit'
+          size='sm'
+          label={localization.contactPoint.organizationUnit}
+          className={styles.field}
+        />
+      )}
+      {selectedFields.includes('hasURL') && (
+        <Field
+          as={Textfield}
+          name='contactPoint[0].hasURL'
+          size='sm'
+          label={localization.contactPoint.form}
+          className={styles.field}
+          // @ts-expect-error: hasURL exists on the object
+          error={errors?.contactPoint?.[0]?.hasURL}
+        />
+      )}
+    </Box>
+  );
+};

apps/dataset-catalog/components/dataset-form/components/dataset-form-content-section.tsx

@@ -19,24 +19,22 @@ export const ContentSection = () => {
             <Fieldset legend={localization.datasetForm.heading.standard}>
               {values.conformsTo &&
                 values.conformsTo.map((_, index) => (
-                  <>
-                    <div key={index}>
-                      <FieldsetWithDelete onDelete={() => remove(index)}>
-                        <Field
-                          as={Textfield}
-                          name={`conformsTo[${index}].prefLabel.nb`}
-                          label={localization.title}
-                        />
-                        <Field
-                          as={Textfield}
-                          name={`conformsTo[${index}].uri`}
-                          label={localization.link}
-                          // @ts-expect-error: uri exists on the object
-                          error={errors.conformsTo?.[index]?.uri || ''}
-                        />
-                      </FieldsetWithDelete>
-                    </div>
-                  </>
+                  <div key={index}>
+                    <FieldsetWithDelete onDelete={() => remove(index)}>
+                      <Field
+                        as={Textfield}
+                        name={`conformsTo[${index}].prefLabel.nb`}
+                        label={localization.title}
+                      />
+                      <Field
+                        as={Textfield}
+                        name={`conformsTo[${index}].uri`}
+                        label={localization.link}
+                        // @ts-expect-error: uri exists on the object
+                        error={errors.conformsTo?.[index]?.uri || ''}
+                      />
+                    </FieldsetWithDelete>
+                  </div>
                 ))}
 
               <AddButton onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}>

apps/dataset-catalog/components/dataset-form/components/dataset-form-information-model-section.tsx

@@ -96,8 +96,7 @@ export const InformationModelSection = ({ searchEnv }: Props) => {
           <div>
             {values.informationModel &&
               values.informationModel.map((_, index) => (
-                <>
-                  <Label></Label>
+                <div key={`informationmodel-${index}`}>
                   <Fieldset legend={localization.datasetForm.heading.informationModelOther}>
                     <FieldsetWithDelete
                       key={index}
@@ -117,7 +116,7 @@ export const InformationModelSection = ({ searchEnv }: Props) => {
                       />
                     </FieldsetWithDelete>
                   </Fieldset>
-                </>
+                </div>
               ))}
 
             <AddButton onClick={() => push('informationModel')}>

apps/dataset-catalog/components/dataset-form/dataset-form.module.css

@@ -42,3 +42,7 @@
 .fitContent {
   width: fit-content;
 }
+
+.field {
+  padding: 0.5rem 0;
+}

apps/dataset-catalog/components/dataset-form/index.tsx

@@ -22,6 +22,7 @@ import { QualifiedAttributionsSection } from './components/dataset-form-qualifie
 import { ExampleDataSection } from './components/dataset-form-example-data-section';
 import { RelationsSection } from './components/dataset-form-relations-section';
 import { DistributionSection } from './components/dataset-from-distribution/dataset-form-distribution-section';
+import { ContactPointSection } from './components/dataset-form-contact-point-section';
 
 type Props = {
   initialValues: DatasetToBeCreated | Dataset;
@@ -226,6 +227,13 @@ export const DatasetForm = ({
                   openLicenses={openLicenses}
                 />
               </FormLayout.Section>
+              <FormLayout.Section
+                id='contact-point-section'
+                title='Kontaktpunkt'
+                required
+              >
+                <ContactPointSection />
+              </FormLayout.Section>
             </FormLayout>
           </Form>
         );

apps/dataset-catalog/components/dataset-form/utils/dataset-initial-values.tsx

@@ -62,6 +62,7 @@ export const datasetTemplate = (dataset: Dataset): Dataset => {
       ...dist,
       accessServiceList: dist.accessService?.map((service) => service.uri) || [],
     })),
+    contactPoint: dataset.contactPoint ?? {},
   };
 };
 
@@ -119,6 +120,7 @@ export const datasetToBeCreatedTemplate = (): DatasetToBeCreated => {
     relations: [{ uri: '', prefLabel: { nb: '' } }],
     inSeries: '',
     distribution: [],
+    contactPoint: {},
   };
 };
 

apps/dataset-catalog/components/dataset-form/utils/validation-schema.tsx

@@ -1,4 +1,4 @@
-import { httpsRegex, localization } from '@catalog-frontend/utils';
+import { httpsRegex, localization, telephoneNumberRegex } from '@catalog-frontend/utils';
 import * as Yup from 'yup';
 
 export const datasetValidationSchema = Yup.object().shape({
@@ -64,6 +64,15 @@ export const datasetValidationSchema = Yup.object().shape({
         .url(localization.validation.invalidUrl),
     }),
   ),
+  contactPoint: Yup.array().of(
+    Yup.object().shape({
+      hasURL: Yup.string()
+        .matches(httpsRegex, localization.validation.invalidProtocol)
+        .url(localization.validation.invalidUrl),
+      email: Yup.string().email(localization.validation.invalidEmail),
+      hasTelephone: Yup.string().matches(telephoneNumberRegex, localization.validation.invalidTlf),
+    }),
+  ),
 });
 
 export const distributionSectionSchema = Yup.object().shape({

libs/types/src/lib/dataset.ts

@@ -43,6 +43,7 @@ export interface DatasetToBeCreated {
   relations?: UriWithLabel[];
   inSeries?: string;
   distribution?: Distribution[];
+  contactPoint: DatasetContactPoint[];
   // Arrays of uris used as helper values for Formik. These properties is not part of the db object.
   losThemeList?: string[];
   euThemeList?: string[];
@@ -92,3 +93,9 @@ export interface Distribution {
   // Arrays of uris used as helper values for Formik. These properties is not part of the db object.
   accessServiceList?: string[];
 }
+interface DatasetContactPoint {
+  email?: string;
+  hasTelephone?: string;
+  hasURL?: string;
+  organizationUnit?: string;
+}

libs/utils/src/lib/language/dataset.form.nb.ts

@@ -36,6 +36,8 @@ export const datasetFormNb = {
     relationsDataset: 'Oppgi relaterte datasett',
     relationDatasetSeries: 'Oppgi relaterte datasettserier.',
     relatedResources: 'Oppgi relaterte ressurser.',
+    contactPoint:
+      'Et kontaktpunkt er informasjon om en organisasjon eller enhet som kan kontaktes for spørsmål eller støtte knyttet til datasettet. Minst ett av feltene må fylles ut for å oppfylle kravet til kontaktpunkt.',
   },
   heading: {
     description: 'Beskrivelse av datasettet',
@@ -75,6 +77,7 @@ export const datasetFormNb = {
     relationDatasetSeries: 'Relasjoner til datasettserier',
     relatedResources: 'Relaterte ressurser',
     distribution: 'Distribusjon',
+    contactPoint: 'Kontaktpunkt',
   },
   accessRight: {
     public: 'Allmenn tilgang',

libs/utils/src/lib/language/nb.ts

@@ -120,6 +120,12 @@ export const nb = {
     county: 'Fylke',
   },
 
+  contactPoint: {
+    contactInformation: 'Kontaktinformasjon',
+    organizationUnit: 'Kontaktpunkt',
+    form: 'Kontaktskjema',
+  },
+
   search: {
     noHits: 'Ditt søk ga ingen treff',
     search: 'Søk',