@digigov/form 2.0.0-8e254888 → 2.0.0-a0ac149e

package/src/FieldArray/FormDialog/index.tsx

@@ -0,0 +1,250 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldProps, FormData } from '@digigov/form/Field/types';
+import { ArrayDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay';
+import { ArrayEditModal } from '@digigov/form/FieldArray/FormDialog/ArrayEditModal';
+import { useModal } from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export interface FormDialogProps extends FieldProps {
+  control: UseFormReturn['control'];
+  trigger: UseFormReturn['trigger'];
+  register: UseFormReturn['register'];
+  clearErrors: UseFormReturn['clearErrors'];
+  formState: UseFormReturn['formState'];
+  error?: ErrorOption;
+  getValues: UseFormReturn['getValues'];
+  setValue: UseFormReturn['setValue'];
+  reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
+  sortable: boolean;
+  Field: React.FC<FieldProps>;
+}
+
+export const FormDialog = React.forwardRef<HTMLButtonElement, FormDialogProps>(
+  (
+    {
+      name: fieldArrayName,
+      control,
+      error,
+      getValues,
+      Field,
+      sortable,
+      ...customField
+    },
+    ref
+  ) => {
+    const [isAppending, setIsAppending] = useState(false);
+    const [editingIndex, setEditingIndex] = useState(0);
+    const { fields, append, remove, update, move } = useFieldArray({
+      control,
+      name: fieldArrayName,
+    });
+    const { open, close, registerModal } = useModal();
+    const currentLength = fields.length;
+    const arrayItemName = isAppending
+      ? `${fieldArrayName}.${currentLength}`
+      : `${fieldArrayName}.${editingIndex}`;
+
+    useEffect(() => {
+      if (isAppending) {
+        open(`modal-${fieldArrayName}`);
+      }
+    }, [isAppending, fieldArrayName, open]);
+
+    const fieldArrayValues = getValues(fieldArrayName);
+    const ofField = useMemo(
+      () => ({
+        ...customField.extra?.of,
+        name: arrayItemName,
+      }),
+      [arrayItemName, customField.extra?.of]
+    );
+    if (ofField.type !== 'object') {
+      ofField.name = ofField.key ?? fieldArrayName;
+      ofField.key = ofField.key ?? fieldArrayName;
+    }
+
+    const defaultValue = useMemo(() => {
+      // If appending, use default value from field spec
+      if (isAppending) {
+        if (ofField.type === 'object') return ofField.defaultValue;
+        else return { [ofField.name]: ofField.defaultValue };
+      }
+
+      if (ofField.type === 'object') return getValues(ofField.name);
+      else return { [ofField.name]: fieldArrayValues?.[editingIndex] };
+    }, [
+      editingIndex,
+      fieldArrayValues,
+      getValues,
+      isAppending,
+      ofField.defaultValue,
+      ofField.name,
+      ofField.type,
+    ]);
+
+    const hasCommitedValues = fields.length > 0 || !!fieldArrayValues?.length;
+
+    const title = useMemo(() => {
+      if (!customField.extra?.label.object.title) return null;
+
+      let title = customField.extra.label.object.title;
+      if (customField.extra.label.object.titleNumbering)
+        title += ` ${currentLength + 1}`;
+
+      return title;
+    }, [
+      currentLength,
+      customField.extra?.label.object.title,
+      customField.extra?.label.object.titleNumbering,
+    ]);
+
+    const focusReturnRef = useRef<HTMLElement | null>(null);
+
+    /** Handle closing the modal and restoring focus */
+    const closeModal = useCallback(() => {
+      close();
+      // Return focus to the element that was focused before the modal opened
+      if (focusReturnRef.current) {
+        focusReturnRef.current.focus();
+        focusReturnRef.current = null;
+      }
+    }, [close]);
+
+    /** Handle modal form submission */
+    const handleEditOrAppend = useCallback(
+      (data: FormData) => {
+        if (isAppending) {
+          setIsAppending(false);
+          if (ofField.type === 'object') append(data);
+          else if (data) append(data[ofField.key ?? fieldArrayName]);
+        } else {
+          if (ofField.type === 'object') update(editingIndex, data);
+          else if (data)
+            update(editingIndex, data[ofField.key ?? fieldArrayName]);
+        }
+        closeModal();
+      },
+      [
+        append,
+        closeModal,
+        editingIndex,
+        fieldArrayName,
+        isAppending,
+        ofField.key,
+        ofField.type,
+        update,
+      ]
+    );
+
+    /** Handle cancelling the modal operation */
+    const handleCancel = useCallback(() => {
+      if (isAppending) setIsAppending(false);
+      closeModal();
+    }, [closeModal, isAppending]);
+
+    /** Handle opening the modal to edit an existing item */
+    const handleEdit = useCallback(
+      (index: number) => {
+        // Store the currently focused element to restore focus later
+        if (document.activeElement instanceof HTMLElement) {
+          focusReturnRef.current = document.activeElement;
+        }
+        setEditingIndex(index);
+        open(`modal-${fieldArrayName}`);
+      },
+      [fieldArrayName, open]
+    );
+
+    /** Handle opening the modal to add a new item */
+    const handleAddClick = useCallback((ev: React.MouseEvent) => {
+      ev.preventDefault();
+      // Store the currently focused element to restore focus later
+      if (document.activeElement instanceof HTMLElement) {
+        focusReturnRef.current = document.activeElement;
+      }
+      setIsAppending(true);
+    }, []);
+
+    return (
+      <>
+        {!hasCommitedValues && (
+          <Hint {...customField.extra?.label.object?.nothing_added_props}>
+            {customField.extra?.label.object?.nothing_added}
+          </Hint>
+        )}
+        <ArrayEditModal
+          editOrAppend={handleEditOrAppend}
+          cancel={handleCancel}
+          type={isAppending ? 'append' : 'edit'}
+          appendLabel={customField.extra?.label.object.append.label}
+          appendProps={customField.extra?.label.object.append.props}
+          editLabel={customField.extra?.label.object.edit.label}
+          editProps={customField.extra?.label.object.edit.props}
+          cancelLabel={customField.extra?.label.object.cancel.label}
+          cancelProps={customField.extra?.label.object.cancel.props}
+          ofField={ofField}
+          title={title}
+          hint={customField.label?.secondary}
+          name={fieldArrayName}
+          defaultValue={defaultValue || undefined}
+          arrayItemName={arrayItemName}
+          Field={Field}
+          error={error && error[editingIndex]}
+          currentIndex={editingIndex}
+          {...registerModal(`modal-${fieldArrayName}`)}
+        />
+        {hasCommitedValues && (
+          <ArrayDisplay
+            fieldArrayName={fieldArrayName}
+            fieldArrayValues={fieldArrayValues}
+            ofField={ofField}
+            customField={customField}
+            onEdit={handleEdit}
+            onRemove={remove}
+            move={move}
+            sortable={sortable}
+          />
+        )}
+        {customField.extra?.editVariant !== 'display' && (
+          <div
+            className={
+              customField.extra?.label.object?.addButtonVariant === 'link'
+                ? 'my-2 px-2 py-2 bg-gray-200 border-t border-b border-gray-400'
+                : ''
+            }
+          >
+            <Button
+              ref={ref}
+              type="button"
+              name={`${fieldArrayName}-add-object`}
+              color="secondary"
+              variant={customField.extra?.label.object?.addButtonVariant}
+              onClick={handleAddClick}
+              disabled={
+                customField?.editable === false ||
+                customField.extra?.editVariant === 'noinput' ||
+                fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
+              }
+            >
+              {customField.extra?.label.object?.add}
+            </Button>
+          </div>
+        )}
+      </>
+    );
+  }
+);
+
+FormDialog.displayName = 'FormDialog';
+
+export default FormDialog;

package/src/FieldArray/__stories__/Default.tsx

@@ -81,7 +81,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -81,7 +81,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithExactLength = () => (
+export const WithExactLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/FieldArray/__stories__/WithModal.tsx

@@ -22,6 +22,8 @@ const fields = [
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
     },
     extra: {
+      noIndex: true,
+      border: false,
       variant: 'dialog',
       noHeader: false,
       label: {
@@ -145,15 +147,14 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithModal = () => (
+export const WithModal = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
+      window.alert('Submit success');
     }}
   >
-    <Field name="string" {...fields[0]} />
     <Field name="multiplicity" {...fields[1]} />
-    <Field name="arrayofafm" {...fields[2]} />
     <Button>Συνέχεια</Button>
   </FormBuilder>
 );

package/src/FieldArray/__tests__/fieldset-multiplicity.spec.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { FieldSpec } from '@digigov/form';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+const fieldSpec: FieldSpec = {
+  key: 'fieldset_multiplicity',
+  type: 'array',
+  editable: true,
+  label: {
+    primary: 'Fieldset multiplicity (μέχρι 5)',
+  },
+  extra: {
+    noIndex: true,
+    tableCellActionsLabel: '',
+    border: true,
+    variant: 'dialog',
+    labelSize: 'md',
+    tableContainer: {
+      mb: 0,
+    },
+    stackProps: {
+      spacing: 2,
+      justifyContent: 'flex-end',
+      direction: 'row',
+    },
+    max: 5,
+    label: {
+      object: {
+        append: {
+          label: 'Αποθήκευση',
+          props: {
+            color: 'primary',
+          },
+        },
+        edit: {
+          label: 'Αποθήκευση',
+          props: {
+            color: 'primary',
+          },
+        },
+        cancel: {
+          label: 'Ακύρωση',
+          props: {
+            variant: 'button',
+            color: 'secondary',
+          },
+        },
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+        nothing_added_props: {
+          style: {
+            color: 'var(--color-gray-600)',
+          },
+          margin: 0,
+          paddingLeft: 2,
+        },
+      },
+    },
+    of: {
+      type: 'object',
+      extra: {
+        fields: [
+          {
+            key: 'fieldset_multiplicity_required',
+            name: 'fieldset_multiplicity_required',
+            type: 'string',
+            label: {
+              primary: '"required label"',
+            },
+            required: true,
+            editable: true,
+            layout: {},
+          },
+          {
+            key: 'fieldset_multiplicity_optional',
+            name: 'fieldset_multiplicity_optional',
+            type: 'string',
+            label: {
+              primary: '"optional label"',
+            },
+            required: false,
+            editable: true,
+            layout: {},
+          },
+        ],
+      },
+    },
+  },
+};
+
+describe('fieldset_multiplicity case from dilosi', () => {
+  const submitHandler = vi.fn();
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="fieldset_multiplicity" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+  let addButton: HTMLButtonElement;
+
+  beforeEach(() => {
+    render(<TestForm />);
+    addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    expect(
+      screen.getByText('Fieldset multiplicity (μέχρι 5)')
+    ).toBeInTheDocument();
+  });
+
+  it('should open dialog on add button click', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('"required label"')).toBeInTheDocument();
+    expect(screen.getByText('"optional label"')).toBeInTheDocument();
+  });
+  it('should submit required value', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+
+    expect(submitHandler).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(
+        screen.getByText('Το πεδίο είναι υποχρεωτικό.')
+      ).toBeInTheDocument()
+    );
+
+    const requiredInput = screen.getAllByRole('textbox')[0];
+    fireEvent.change(requiredInput, { target: { value: 'Required value' } });
+
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Required value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value',
+            fieldset_multiplicity_optional: '',
+          },
+        ],
+      });
+    });
+  });
+  it('should submit both required and optional values', async () => {
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    const requiredInput = screen.getAllByRole('textbox')[0];
+    fireEvent.change(requiredInput, { target: { value: 'Required value' } });
+    const optionalInput = screen.getAllByRole('textbox')[1];
+    fireEvent.change(optionalInput, { target: { value: 'Optional value' } });
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('Required value')).toBeInTheDocument();
+    expect(screen.getByText('Optional value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value',
+            fieldset_multiplicity_optional: 'Optional value',
+          },
+        ],
+      });
+    });
+  });
+  it('should allow adding up to max items', async () => {
+    for (let i = 0; i < 5; i++) {
+      fireEvent.click(addButton);
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      const requiredInput = screen.getAllByRole('textbox')[0];
+      fireEvent.change(requiredInput, {
+        target: { value: `Required value ${i}` },
+      });
+      const optionalInput = screen.getAllByRole('textbox')[1];
+      fireEvent.change(optionalInput, {
+        target: { value: `Optional value ${i}` },
+      });
+
+      const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+      fireEvent.click(saveButton);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+      expect(screen.getByText(`Required value ${i}`)).toBeInTheDocument();
+      expect(screen.getByText(`Optional value ${i}`)).toBeInTheDocument();
+    }
+
+    expect(addButton).toBeDisabled();
+
+    expect(submitHandler).not.toHaveBeenCalled();
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(submitButton);
+
+    await waitFor(() =>
+      expect(submitHandler).toHaveBeenCalledWith({
+        fieldset_multiplicity: [
+          {
+            fieldset_multiplicity_required: 'Required value 0',
+            fieldset_multiplicity_optional: 'Optional value 0',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 1',
+            fieldset_multiplicity_optional: 'Optional value 1',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 2',
+            fieldset_multiplicity_optional: 'Optional value 2',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 3',
+            fieldset_multiplicity_optional: 'Optional value 3',
+          },
+          {
+            fieldset_multiplicity_required: 'Required value 4',
+            fieldset_multiplicity_optional: 'Optional value 4',
+          },
+        ],
+      })
+    );
+  });
+});