Skip to content

Commit

Permalink
feat: add design to dataset-form
Browse files Browse the repository at this point in the history
  • Loading branch information
@hegeaal
hegeaal committed Dec 2, 2024
1 parent 06c48c8 commit 7595171
Show file tree
Hide file tree
Showing 20 changed files with 751 additions and 809 deletions.
294 changes: 143 additions & 151 deletions ...dataset-catalog/components/dataset-form/components/dataset-form-access-rights-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,182 +13,174 @@ type AccessRightsSectionProps = {
export const AccessRightsSection = ({ errors, values }: AccessRightsSectionProps) => {
return (
<div>
<Heading
size='sm'
spacing
>
{localization.datasetForm.heading.accessRights}
</Heading>
<FormContainer>
<FormContainer.Header
{/* <FormContainer.Header
title={localization.datasetForm.heading.accessRights}
subtitle={localization.datasetForm.helptext.accessRights}
/>
<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>
/> */}
<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) && (
<>
<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForRestriction}
subtitle={localization.datasetForm.helptext.legalBasisForRestriction}
/>
<FieldArray name='legalBasisForRestriction'>
{({ remove, push }) => (
<>
{values.legalBasisForRestriction?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForRestriction[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForRestriction[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForRestriction
error={errors?.legalBasisForRestriction?.[index]?.uri}
/>
<Button
type='button'
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
))}
<div>
{(values.accessRights?.uri === AccessRights.RESTRICTED ||
values.accessRights?.uri === AccessRights.NON_PUBLIC) && (
<>
<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForRestriction}
subtitle={localization.datasetForm.helptext.legalBasisForRestriction}
/>
<FieldArray name='legalBasisForRestriction'>
{({ remove, push }) => (
<>
{values.legalBasisForRestriction?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForRestriction[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForRestriction[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForRestriction
error={errors?.legalBasisForRestriction?.[index]?.uri}
/>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<PlusCircleIcon />
{localization.add}
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
</>
)}
</FieldArray>
))}
<div>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
variant='tertiary'
>
<PlusCircleIcon />
{localization.add}
</Button>
</div>
</>
)}
</FieldArray>

<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForProcessing}
subtitle={localization.datasetForm.helptext.legalBasisForProcessing}
/>
<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForProcessing}
subtitle={localization.datasetForm.helptext.legalBasisForProcessing}
/>

<FieldArray name='legalBasisForProcessing'>
{({ remove, push }) => (
<>
{values.legalBasisForProcessing?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForProcessing[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForProcessing[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForProcessing
error={errors?.legalBasisForProcessing?.[index]?.uri}
/>
<Button
type='button'
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
))}
<div>
<FieldArray name='legalBasisForProcessing'>
{({ remove, push }) => (
<>
{values.legalBasisForProcessing?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForProcessing[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForProcessing[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForProcessing
error={errors?.legalBasisForProcessing?.[index]?.uri}
/>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<PlusCircleIcon />
{localization.add}
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
</>
)}
</FieldArray>
))}
<div>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
variant='tertiary'
>
<PlusCircleIcon />
{localization.add}
</Button>
</div>
</>
)}
</FieldArray>

<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForAccess}
subtitle={localization.datasetForm.helptext.legalBasisForAccess}
/>
<FormContainer.Header
title={localization.datasetForm.heading.legalBasisForAccess}
subtitle={localization.datasetForm.helptext.legalBasisForAccess}
/>

<FieldArray name='legalBasisForAccess'>
{({ remove, push }) => (
<>
{values.legalBasisForAccess?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForAccess[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForAccess[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForAccess
error={errors?.legalBasisForAccess?.[index]?.uri}
/>
<Button
type='button'
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
))}
<div>
<FieldArray name='legalBasisForAccess'>
{({ remove, push }) => (
<>
{values.legalBasisForAccess?.map((_, index) => (
<div key={index}>
<Field
name={`legalBasisForAccess[${index}].prefLabel.nb`}
as={Textfield}
label={localization.title}
/>
<Field
name={`legalBasisForAccess[${index}].uri`}
as={Textfield}
label={localization.link}
// @ts-expect-error uri exsists in object legalBasisForAccess
error={errors?.legalBasisForAccess?.[index]?.uri}
/>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
onClick={() => remove(index)}
variant='tertiary'
color='danger'
>
<PlusCircleIcon />
{localization.add}
<MinusCircleIcon />
{localization.remove}
</Button>
</div>
</>
)}
</FieldArray>
</>
)}
</FormContainer>
))}
<div>
<Button
type='button'
onClick={() => push({ prefLabel: { nb: '' }, uri: '' })}
variant='tertiary'
>
<PlusCircleIcon />
{localization.add}
</Button>
</div>
</>
)}
</FieldArray>
</>
)}
</div>
);
};
Loading

0 comments on commit 7595171

Please sign in to comment.