337 multiple values field type

packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx

@@ -12,6 +12,8 @@ interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
   isValid?: boolean
   isInvalid?: boolean
   disabled?: boolean
+  value?: string | number
+  required?: boolean
 }
 
 export function FormInput({
@@ -22,6 +24,8 @@ export function FormInput({
   isInvalid,
   disabled,
   withinMultipleFieldsGroup,
+  value,
+  required,
   ...props
 }: FormInputProps) {
   return (
@@ -37,6 +41,8 @@ export function FormInput({
         isValid={isValid}
         isInvalid={isInvalid}
         disabled={disabled}
+        value={value}
+        required={required}
         {...props}
       />
     </FormElementLayout>

public/locales/en/createDataset.json

@@ -37,7 +37,9 @@
       "submitting": "Submitting...",
       "success": "Form submitted successfully!",
       "failed": "Error: Submission failed."
-    }
+    },
+    "addRowButton": "Add",
+    "deleteRowButton": "Delete"
   },
   "datasetFormStates": {
     "submitting": "Form Submitting",

src/dataset/domain/useCases/validateDataset.ts

@@ -21,13 +21,14 @@ export function validateDataset(dataset: DatasetDTO) {
     isValid = false
   }
 
-  if (
-    isArrayOfSubfieldValue(dataset.metadataBlocks[0].fields.author) &&
-    !dataset.metadataBlocks[0].fields.author[0].authorName
-  ) {
-    if (isArrayOfSubfieldValue(errors.metadataBlocks[0].fields.author)) {
-      errors.metadataBlocks[0].fields.author[0].authorName = AUTHOR_NAME_REQUIRED
-      isValid = false
+  if (isArrayOfSubfieldValue(dataset.metadataBlocks[0].fields.author)) {
+    for (let i = 0; i < dataset.metadataBlocks[0].fields.author.length; i++) {
+      if (!dataset.metadataBlocks[0].fields.author[i].authorName) {
+        if (isArrayOfSubfieldValue(errors.metadataBlocks[0].fields.author)) {
+          errors.metadataBlocks[0].fields.author[i].authorName = AUTHOR_NAME_REQUIRED
+          isValid = false
+        }
+      }
     }
   }
 

src/sections/create-dataset/AuthorFormGroup.tsx

@@ -0,0 +1,90 @@
+import { Form } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { SubmissionStatus } from './useCreateDatasetForm'
+import { DatasetMetadataSubField } from '../../dataset/domain/models/Dataset'
+import { Col, Row } from '@iqss/dataverse-design-system'
+import { DynamicFieldsButtons } from './dynamic-fields-buttons/DynamicFieldsButtons'
+
+import { ChangeEvent } from 'react'
+import _ from 'lodash'
+import { useMultipleFields } from './useMultipleFields'
+interface AuthorFormGroupProps {
+  submissionStatus: SubmissionStatus
+  initialAuthorFields: DatasetMetadataSubField[]
+  updateFormData: (name: string, value: string | DatasetMetadataSubField[]) => void
+}
+
+export function AuthorFormGroup({
+  submissionStatus,
+  initialAuthorFields,
+  updateFormData
+}: AuthorFormGroupProps) {
+  const { t } = useTranslation('createDataset')
+  const { multipleFields, setMultipleFields, addField, removeField } =
+    useMultipleFields(initialAuthorFields)
+
+  const isAuthorValid = (index: number) => {
+    return !!multipleFields[index].authorName
+  }
+  const handleFieldChange = (index: number, event: ChangeEvent<HTMLInputElement>) => {
+    const updatedAuthorFields = _.cloneDeep(multipleFields)
+    updatedAuthorFields[index].authorName = (event.target as HTMLInputElement).value
+    setMultipleFields(updatedAuthorFields)
+    updateFormData('metadataBlocks.0.fields.author', multipleFields)
+  }
+  const FIRST_AUTHOR = 0
+  const initialAuthorFieldState = { authorName: '' }
+  return (
+    <>
+      {multipleFields.map((author, index) => (
+        <Form.Group controlId="author-name" required key={index}>
+          <Row>
+            <Col sm={3}>
+              {index === FIRST_AUTHOR && (
+                <Form.Group required controlId={'author-title'} as={Col}>
+                  <Form.Group.Label message={t('datasetForm.fields.authorName.tooltip')}>
+                    {t('datasetForm.fields.authorName.label')}
+                  </Form.Group.Label>
+                </Form.Group>
+              )}
+            </Col>
+            <Col sm={6}>
+              <Form.Group.Label required message={t('datasetForm.fields.authorName.tooltip')}>
+                Name
+              </Form.Group.Label>
+              <Form.Group controlId={'author-name'} as={Col} required>
+                <Form.Group.Input
+                  disabled={submissionStatus === SubmissionStatus.IsSubmitting}
+                  type="text"
+                  name={`metadataBlocks.0.fields.author.${index}.authorName`}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                    handleFieldChange(index, event)
+                  }
+                  isInvalid={!isAuthorValid(index)}
+                  value={author.authorName}
+                  required
+                />
+                <Form.Group.Feedback type="invalid">
+                  {t('datasetForm.fields.authorName.feedback')}
+                </Form.Group.Feedback>
+              </Form.Group>
+            </Col>
+            <Col sm={3}>
+              <Form.Group controlId={'author-button'} as={Col} required>
+                <DynamicFieldsButtons
+                  originalField={index === FIRST_AUTHOR}
+                  onAddButtonClick={() => {
+                    addField(index, initialAuthorFieldState)
+                  }}
+                  onRemoveButtonClick={() => {
+                    removeField(index)
+                  }}
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+        </Form.Group>
+      ))}
+    </>
+  )
+}

src/sections/create-dataset/CreateDatasetForm.tsx

@@ -12,6 +12,7 @@ import { Route } from '../Route.enum'
 import { useNavigate } from 'react-router-dom'
 import { useDatasetValidator } from './useDatasetValidator'
 import { DatasetMetadataSubField } from '../../dataset/domain/models/Dataset'
+import { AuthorFormGroup } from './AuthorFormGroup'
 
 interface CreateDatasetFormProps {
   repository: DatasetRepository
@@ -81,24 +82,12 @@ export function CreateDatasetForm({ repository }: CreateDatasetFormProps) {
               {t('datasetForm.fields.title.feedback')}
             </Form.Group.Feedback>
           </Form.Group>
-          <Form.Group controlId="author-name" required>
-            <Form.Group.Label message={t('datasetForm.fields.authorName.tooltip')}>
-              {t('datasetForm.fields.authorName.label')}
-            </Form.Group.Label>
-            <Form.Group.Input
-              disabled={submissionStatus === SubmissionStatus.IsSubmitting}
-              type="text"
-              name="metadataBlocks.0.fields.author.0.authorName"
-              onChange={handleFieldChange}
-              isInvalid={
-                !!(validationErrors.metadataBlocks[0].fields.author as DatasetMetadataSubField[])[0]
-                  .authorName
-              }
-            />
-            <Form.Group.Feedback type="invalid">
-              {t('datasetForm.fields.authorName.feedback')}
-            </Form.Group.Feedback>
-          </Form.Group>
+          <AuthorFormGroup
+            submissionStatus={submissionStatus}
+            updateFormData={updateFormData}
+            initialAuthorFields={
+              formData.metadataBlocks[0].fields['author'] as DatasetMetadataSubField[]
+            }></AuthorFormGroup>
           <Form.Group controlId="contact-email" required>
             <Form.Group.Label message={t('datasetForm.fields.datasetContactEmail.tooltip')}>
               {t('datasetForm.fields.datasetContactEmail.label')}

src/sections/create-dataset/dynamic-fields-buttons/DynamicFieldsButtons.module.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  margin: 2.5em;
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: -0.125em;
+}
+
+.overlay-container {
+  width: fit-content;
+}

src/sections/create-dataset/dynamic-fields-buttons/DynamicFieldsButtons.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@iqss/dataverse-design-system'
+import styles from './DynamicFieldsButtons.module.scss'
+import { MouseEvent } from 'react'
+import { Dash, Plus } from 'react-bootstrap-icons'
+import { Tooltip } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+
+interface AddFieldButtonsProps {
+  originalField?: boolean
+  onAddButtonClick: (event: MouseEvent<HTMLButtonElement>) => void
+  onRemoveButtonClick: (event: MouseEvent<HTMLButtonElement>) => void
+}
+
+export function DynamicFieldsButtons({
+  originalField,
+  onAddButtonClick,
+  onRemoveButtonClick
+}: AddFieldButtonsProps) {
+  const { t } = useTranslation('createDataset')
+  return (
+    <div className={styles.container}>
+      <Tooltip placement="top" overlay={t('datasetForm.addRowButton')}>
+        <div className={styles['overlay-container']}>
+          <Button variant="secondary" onClick={onAddButtonClick}>
+            <Plus className={styles.icon} title="Add" />
+          </Button>
+        </div>
+      </Tooltip>
+      {!originalField && (
+        <Tooltip placement="top" overlay={t('datasetForm.deleteRowButton')}>
+          <div className={styles['overlay-container']}>
+            <Button variant="secondary" withSpacing onClick={onRemoveButtonClick}>
+              <Dash className={styles.icon} title="Delete" />
+            </Button>
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  )
+}

src/sections/create-dataset/useDatasetFormData.tsx

@@ -1,27 +1,27 @@
 import { useState } from 'react'
 import { DatasetDTO, initialDatasetDTO } from '../../dataset/domain/useCases/DTOs/DatasetDTO'
 import _ from 'lodash'
+import { DatasetMetadataSubField } from '../../dataset/domain/models/Dataset'
 
 const initialState: DatasetDTO = JSON.parse(JSON.stringify(initialDatasetDTO)) as DatasetDTO
 export const useDatasetFormData = (
   datasetIsValid: (formData: DatasetDTO) => boolean
 ): {
   formData: DatasetDTO
-  updateFormData: (name: string, value: string) => void
+  updateFormData: (name: string, value: string | DatasetMetadataSubField[]) => void
 } => {
   const [formData, setFormData] = useState(initialState)
 
-  const updateFormData = (name: string, value: string) => {
+  const updateFormData = (name: string, value: string | DatasetMetadataSubField[]) => {
     const updatedFormData = _.cloneDeep(getUpdatedFormData(formData, name, value))
-
     setFormData(updatedFormData)
     datasetIsValid(updatedFormData)
   }
 
   const getUpdatedFormData = (
     currentFormData: DatasetDTO,
     name: string,
-    value: string
+    value: string | DatasetMetadataSubField[]
   ): DatasetDTO => {
     const objectFromPath: DatasetDTO = initialState
 

src/sections/create-dataset/useMultipleFields.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import _ from 'lodash'
+import { DatasetMetadataSubField } from '../../dataset/domain/models/Dataset'
+
+export function useMultipleFields(initialFields: DatasetMetadataSubField[]) {
+  const [multipleFields, setMultipleFields] = useState(initialFields)
+
+  const addField = (index: number, newField: DatasetMetadataSubField) => {
+    const updatedFields = _.cloneDeep(multipleFields)
+    updatedFields.splice(index + 1, 0, newField)
+    setMultipleFields(updatedFields)
+  }
+
+  const removeField = (index: number) => {
+    const updatedFields = _.cloneDeep(multipleFields)
+    updatedFields.splice(index, 1)
+    setMultipleFields(updatedFields)
+  }
+
+  return { multipleFields, setMultipleFields, addField, removeField }
+}

src/stories/create-dataset/AuthorFormGroup.stories.tsx

@@ -0,0 +1,27 @@
+import type { StoryObj, Meta } from '@storybook/react'
+import { WithLayout } from '../WithLayout'
+import { WithI18next } from '../WithI18next'
+import { AuthorFormGroup } from '../../sections/create-dataset/AuthorFormGroup'
+import { SubmissionStatus } from '../../sections/create-dataset/useCreateDatasetForm'
+import { initialState } from '../../sections/create-dataset/useDatasetValidator'
+import { DatasetMetadataSubField } from '../../dataset/domain/models/Dataset'
+
+const meta: Meta<typeof AuthorFormGroup> = {
+  title: 'Sections/Create Dataset Page/AuthorFormGroup',
+  component: AuthorFormGroup,
+  decorators: [WithI18next, WithLayout]
+}
+export default meta
+type Story = StoryObj<typeof AuthorFormGroup>
+
+export const Default: Story = {
+  render: () => (
+    <AuthorFormGroup
+      submissionStatus={SubmissionStatus.NotSubmitted}
+      updateFormData={() => {}}
+      initialAuthorFields={
+        initialState.metadataBlocks[0].fields['author'] as DatasetMetadataSubField[]
+      }
+    />
+  )
+}

tests/component/create-dataset/AuthorFormGroup.spec.tsx

@@ -0,0 +1,36 @@
+import { AuthorFormGroup } from '../../../src/sections/create-dataset/AuthorFormGroup'
+import { SubmissionStatus } from '../../../src/sections/create-dataset/useCreateDatasetForm'
+describe('AuthorFormGroup', () => {
+  const initialAuthorFields = [{ authorName: '' }]
+
+  it('renders and allows adding and removing author fields', () => {
+    const updateFormDataMock = cy.stub()
+
+    cy.customMount(
+      <AuthorFormGroup
+        submissionStatus={SubmissionStatus.NotSubmitted}
+        initialAuthorFields={initialAuthorFields}
+        updateFormData={updateFormDataMock}
+      />
+    )
+    cy.findByLabelText(/Name/i).should('exist')
+    // Simulate typing in the first author field
+    cy.findByLabelText(/Name/i).type('Test author name')
+
+    // Simulate clicking the add button to add a new author field
+    cy.contains('button', 'Add').should('exist')
+    cy.contains('button', 'Add').click()
+
+    // Assert that a new author field is added
+    const secondAuthorInput = 'input[name="metadataBlocks.0.fields.author.1.authorName"]'
+    // Check if the initial author field is rendered
+    cy.get(secondAuthorInput).should('exist')
+
+    // Simulate clicking the remove button on the first author field
+    cy.contains('button', 'Delete').should('exist')
+    cy.contains('button', 'Delete').click()
+
+    // Assert that the new author field is removed
+    cy.get(secondAuthorInput).should('not.exist')
+  })
+})

tests/component/create-dataset/CreateDatasetForm.spec.tsx

@@ -15,9 +15,7 @@ describe('Create Dataset', () => {
     cy.findByText('Title').children('div').trigger('mouseover')
     cy.findByText('The main title of the Dataset').should('exist')
 
-    cy.findByLabelText(/Author Name/i)
-      .should('exist')
-      .should('have.attr', 'required', 'required')
+    cy.findByLabelText(/Name/i).should('exist').should('have.attr', 'required', 'required')
     cy.findByText('Author Name').children('div').trigger('mouseover')
     cy.findByText(
       "The name of the author, such as the person's name or the name of an organization"
@@ -115,9 +113,7 @@ describe('Create Dataset', () => {
 
     cy.findByLabelText(/Title/i).type('Test Dataset Title').and('have.value', 'Test Dataset Title')
 
-    cy.findByLabelText(/Author Name/i)
-      .type('Test author name')
-      .and('have.value', 'Test author name')
+    cy.findByLabelText(/Name/i).type('Test author name').and('have.value', 'Test author name')
 
     cy.findByLabelText(/Point of Contact E-mail/i)
       .type('[email protected]')
@@ -140,7 +136,7 @@ describe('Create Dataset', () => {
     cy.customMount(<CreateDatasetForm repository={datasetRepository} />)
 
     cy.findByLabelText(/Title/i).type('Test Dataset Title')
-    cy.findByLabelText(/Author Name/i).type('Test author name')
+    cy.findByLabelText(/Name/i).type('Test author name')
     cy.findByLabelText(/Point of Contact E-mail/i).type('[email protected]')
     cy.findByLabelText(/Description Text/i).type('Test description text')
     cy.findByLabelText(/Arts and Humanities/i).check()