Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: move title/uri fieldsets to table dataset from #903

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: move title/uri fieldsets to table dataset from #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5f17bc
feat: move title/uri fieldsets to table dataset from
hegeaal Dec 10, 2024
d14744e
feat: refactor accessRights dataset form
hegeaal Dec 10, 2024
b5efd00
feat: hide fields behind buttons dataset field
hegeaal Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 12 additions & 22 deletions ...components/dataset-from-title-section.tsx → ...dataset-form/components/about-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { AddButton, FormikLanguageFieldset, TextareaWithPrefix, TitleWithTag } f
import { localization } from '@catalog-frontend/utils';
import { Textfield, Fieldset } from '@digdir/designsystemet-react';
import { Field, FieldArray, useFormikContext } from 'formik';
import FieldsetWithDelete from '../../fieldset-with-delete';
import { FieldsetDivider } from '@catalog-frontend/ui';
import { AccessRightsForm } from './access-rights.tsx/dataset-form-access-rights-section';
import FieldsetWithDelete from '../../fieldset-with-delete';

export const TitleSection = () => {
export const AboutSection = () => {
const errors = useFormikContext<Dataset>()?.errors;
return (
<>
Expand Down Expand Up @@ -40,28 +41,17 @@ export const TitleSection = () => {
</Fieldset>

<FieldsetDivider />
<AccessRightsForm />

<FieldArray name='landingPage'>
{(arrayHelpers) => (
<>
{arrayHelpers.form.values.landingPage &&
arrayHelpers.form.values.landingPage.map((_: string, index: number) => (
<div key={`landingPage-${index}`}>
<FieldsetWithDelete onDelete={() => arrayHelpers.remove(index)}>
<Field
name={`landingPage[${index}]`}
label={localization.datasetForm.heading.landingPage}
as={Textfield}
error={errors?.landingPage?.[index]}
/>
</FieldsetWithDelete>
</div>
))}
<FieldsetDivider />

<AddButton onClick={() => arrayHelpers.push('')}>{localization.button.addUrl}</AddButton>
</>
)}
</FieldArray>
<Field
as={Textfield}
size='sm'
type='date'
name='issued'
label={localization.datasetForm.heading.releaseDate}
/>
</>
);
};
219 changes: 219 additions & 0 deletions ...-catalog/components/dataset-form/components/access-rights.tsx/access-rights-uri-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
import { Dataset, UriWithLabel } from '@catalog-frontend/types';
import { AddButton, DeleteButton, EditButton, FormikLanguageFieldset } from '@catalog-frontend/ui';
import { getTranslateText, localization, trimObjectWhitespace } from '@catalog-frontend/utils';
import { Button, Divider, Label, Modal, Radio, Table, Textfield } from '@digdir/designsystemet-react';
import { FastField, Formik, useFormikContext } from 'formik';
import styles from '../../dataset-form.module.css';
import { useRef, useState } from 'react';
import _ from 'lodash';
import { uriWithLabelSchema } from '../../utils/validation-schema';

const hasNoFieldValues = (values: UriWithLabel) => {
if (!values) return true;
return _.isEmpty(_.trim(values.uri)) && _.isEmpty(_.pickBy(values.prefLabel, _.identity));
};

const accessRightTypes = ['legalBasisForRestriction', 'legalBasisForProcessing', 'legalBasisForAccess'];

export const AccessRightsUriTable = () => {
const { setFieldValue, values } = useFormikContext<Dataset>();

const allLegalBases = [
...(values.legalBasisForRestriction ?? []).map((item, index) => ({
uriWithLabel: item,
type: 'legalBasisForRestriction',
index: index,
})),
...(values.legalBasisForProcessing ?? []).map((item, index) => ({
uriWithLabel: item,
type: 'legalBasisForProcessing',
index: index,
})),
...(values.legalBasisForAccess ?? []).map((item, index) => ({
uriWithLabel: item,
type: 'legalBasisForAccess',
index: index,
})),
];

const getFieldName = (formValues: LegalBasis): string => {
const fieldMap: Record<string, UriWithLabel[]> = {
legalBasisForRestriction: values.legalBasisForRestriction ?? [],
legalBasisForProcessing: values.legalBasisForProcessing ?? [],
legalBasisForAccess: values.legalBasisForAccess ?? [],
};

const fieldArray = fieldMap[formValues.type];
if (!fieldArray) {
throw new Error(`Invalid type: ${formValues.type}`);
}

return fieldArray.length > 0 && !hasNoFieldValues(fieldArray[0])
? `${formValues.type}[${fieldArray.length}]`
: `${formValues.type}[0]`;
};

return (
<div>
<Label>{localization.datasetForm.fieldLabel.legalBasis}</Label>

{allLegalBases && allLegalBases?.length > 0 && !hasNoFieldValues(allLegalBases[0].uriWithLabel) && (
<Table size='sm'>
<Table.Head>
<Table.Row>
<Table.HeaderCell>{localization.title}</Table.HeaderCell>
<Table.HeaderCell>{localization.link}</Table.HeaderCell>
<Table.HeaderCell>{localization.type}</Table.HeaderCell>
<Table.HeaderCell />
</Table.Row>
</Table.Head>
<Table.Body>
{allLegalBases.map(
(item, i) =>
item?.uriWithLabel && (
<Table.Row key={`${item.type}-tableRow-${i}`}>
<Table.Cell>{getTranslateText(item?.uriWithLabel.prefLabel)}</Table.Cell>
<Table.Cell>{item?.uriWithLabel.uri}</Table.Cell>
<Table.Cell>{localization.datasetForm.fieldLabel[item?.type]}</Table.Cell>
<Table.Cell>
<span className={styles.buttonSet}>
<FieldModal
template={item.uriWithLabel}
formType='edit'
onSuccess={(updatedItem: LegalBasis) =>
setFieldValue(`${updatedItem.type}[${item.index}]`, updatedItem.uriWithLabel)
}
initialType={item.type}
/>
<DeleteButton onClick={() => setFieldValue(`${item.type}[${item.index}]`, undefined)} />
</span>
</Table.Cell>
</Table.Row>
),
)}
</Table.Body>
</Table>
)}
<div>
<FieldModal
template={{ prefLabel: { nb: '' }, uri: '' }}
formType='new'
onSuccess={(formValues: LegalBasis) => setFieldValue(getFieldName(formValues), formValues.uriWithLabel)}
/>
</div>
</div>
);
};

type LegalBasis = {
type: string;
uriWithLabel: UriWithLabel;
};

interface ModalProps {
formType: 'new' | 'edit';
onSuccess: (values: LegalBasis) => void;
template: UriWithLabel;
initialType?: string;
}

const FieldModal = ({ template, formType, onSuccess, initialType = 'legalBasisForRestriction' }: ModalProps) => {
const [submitted, setSubmitted] = useState(false);
const modalRef = useRef<HTMLDialogElement>(null);
const [legalBasis, setLegalBasis] = useState<string>(initialType);

return (
<>
<Modal.Root>
<Modal.Trigger asChild>{formType === 'edit' ? <EditButton /> : <AddButton />}</Modal.Trigger>
<Modal.Dialog
ref={modalRef}
className={styles.dialog}
>
<Formik
initialValues={template}
validateOnChange={submitted}
validateOnBlur={submitted}
validationSchema={uriWithLabelSchema}
onSubmit={(formValues, { setSubmitting }) => {
const trimmedValues = trimObjectWhitespace(formValues);
console.log('ny', { type: legalBasis, uriWithLabel: trimmedValues });
onSuccess({ type: legalBasis, uriWithLabel: trimmedValues });
setSubmitting(false);
setSubmitted(true);
modalRef.current?.close();
}}
>
{({ errors, isSubmitting, submitForm, values, dirty }) => (
<>
<Modal.Header closeButton={false}>
{formType === 'edit'
? `${localization.edit} ${localization.datasetForm.fieldLabel.legalBasis.toLowerCase()}`
: `${localization.add} ${localization.datasetForm.fieldLabel.legalBasis.toLowerCase()}`}
</Modal.Header>

<Modal.Content>
<Radio.Group
size='sm'
legend={localization.type}
onChange={(val) => {
const newType = val.toString();
setLegalBasis(newType);
}}
defaultValue={legalBasis}
>
{accessRightTypes.map((type) => (
<Radio
key={type}
value={type}
>
{localization.datasetForm.fieldLabel[type]}
</Radio>
))}
</Radio.Group>

<FormikLanguageFieldset
as={Textfield}
name='prefLabel'
legend={localization.title}
/>
<div>
<Divider color='subtle' />
</div>

<FastField
name='uri'
as={Textfield}
label={localization.link}
error={errors?.uri}
size='sm'
/>
</Modal.Content>

<Modal.Footer>
<Button
type='button'
disabled={(isSubmitting || !dirty || hasNoFieldValues(values)) && legalBasis === initialType}
onClick={() => submitForm()}
size='sm'
>
{formType === 'new' ? localization.add : localization.datasetForm.button.update}
</Button>
<Button
variant='secondary'
type='button'
onClick={() => modalRef.current?.close()}
disabled={isSubmitting}
size='sm'
>
{localization.button.cancel}
</Button>
</Modal.Footer>
</>
)}
</Formik>
</Modal.Dialog>
</Modal.Root>
</>
);
};
36 changes: 36 additions & 0 deletions ...mponents/dataset-form/components/access-rights.tsx/dataset-form-access-rights-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { AccessRights, Dataset } from '@catalog-frontend/types';
import { TitleWithTag } from '@catalog-frontend/ui';
import { localization } from '@catalog-frontend/utils';
import { NativeSelect } from '@digdir/designsystemet-react';
import { Field, FormikHelpers, useFormikContext } from 'formik';
import { AccessRightsUriTable } from './access-rights-uri-table';

export const AccessRightsForm = () => {
const { values } = useFormikContext<Dataset>();
return (
<>
<Field name='accessRights.uri'>
{({ field, form }: { field: any; form: FormikHelpers<Dataset> }) => (
<NativeSelect
{...field}
label={
<TitleWithTag
title={localization.access}
tagColor='info'
tagTitle={localization.tag.recommended}
/>
}
>
<option value={''}>{`${localization.choose}...`}</option>
<option value={AccessRights.PUBLIC}>{localization.datasetForm.accessRight.public}</option>
<option value={AccessRights.RESTRICTED}>{localization.datasetForm.accessRight.restricted}</option>
<option value={AccessRights.NON_PUBLIC}>{localization.datasetForm.accessRight.nonPublic}</option>
</NativeSelect>
)}
</Field>

{(values.accessRights?.uri === AccessRights.RESTRICTED ||
values.accessRights?.uri === AccessRights.NON_PUBLIC) && <AccessRightsUriTable />}
</>
);
};
Loading
Loading