@digigov/form 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/src/FieldArray/FormDialog/index.tsx

@@ -0,0 +1,233 @@
+import React, { useEffect, useMemo, 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 { ArrayItemDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayItemDisplay';
+import { ArrayItemHeader } from '@digigov/form/FieldArray/FormDialog/ArrayItemHeader';
+import { ArrayItemModal } from '@digigov/form/FieldArray/FormDialog/ArrayItemModal';
+import { useModal } from '@digigov/ui/app/Modal';
+import { Table, TableBody, TableContainer } from '@digigov/ui/content';
+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>(
+  function FormDialog(
+    {
+      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 = {
+      ...customField.extra?.of,
+      name: arrayItemName,
+    };
+    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 noValuesCommitted = fields.length === 0;
+
+    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,
+    ]);
+
+    return (
+      <>
+        {noValuesCommitted && (
+          <Hint {...customField.extra?.label.object?.nothing_added_props}>
+            {customField.extra?.label.object?.nothing_added}
+          </Hint>
+        )}
+        <ArrayItemModal
+          editOrAppend={(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]);
+            }
+            close();
+          }}
+          cancel={() => {
+            if (isAppending) {
+              setIsAppending(false);
+            }
+            close();
+          }}
+          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}`)}
+        />
+        {!noValuesCommitted && (
+          <TableContainer {...customField.extra?.tableContainer}>
+            <Table verticalAlign={customField.extra?.verticalAlign}>
+              {!customField.extra?.noHeader &&
+                !noValuesCommitted &&
+                ofField?.extra &&
+                fieldArrayValues?.length > 0 && (
+                  <ArrayItemHeader
+                    labels={
+                      ofField.type === 'object'
+                        ? ofField.extra.fields.map(({ label }) => label.primary)
+                        : [ofField.label.primary]
+                    }
+                    disabled={customField?.editable === false}
+                  />
+                )}
+              <TableBody>
+                {!noValuesCommitted &&
+                  fieldArrayValues?.map?.((field, index) => {
+                    return (
+                      <ArrayItemDisplay
+                        key={index}
+                        name={`${fieldArrayName}.${index}`}
+                        index={index}
+                        isFirst={index === 0}
+                        isLast={index === fieldArrayValues.length - 1}
+                        data={field}
+                        edit={() => {
+                          setEditingIndex(index);
+                          open(`modal-${fieldArrayName}`);
+                        }}
+                        stackProps={customField?.extra?.stackProps}
+                        wordBreak={customField?.extra?.wordBreak}
+                        valueDisplay={customField?.extra?.valueDisplay}
+                        remove={() => {
+                          remove(index);
+                        }}
+                        border={customField.extra?.border}
+                        move={move}
+                        sortable={sortable}
+                        disabledEdit={
+                          sortable ? true : (customField.extra?.noEdit ?? false)
+                        }
+                        disabledDelete={customField.extra?.noDelete ?? false}
+                        disabled={customField?.editable === false}
+                      />
+                    );
+                  })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+        {customField.extra?.editVariant !== 'display' && (
+          <div
+            className={
+              customField.extra?.label.object?.addButtonVariant === 'link'
+                ? '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={(ev) => {
+                ev.preventDefault();
+                setIsAppending(true);
+              }}
+              disabled={
+                customField?.editable === false ||
+                customField.extra?.editVariant === 'noinput' ||
+                fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
+              }
+            >
+              {customField.extra?.label.object?.add}
+            </Button>
+          </div>
+        )}
+      </>
+    );
+  }
+);
+
+export default FormDialog;

package/src/FieldArray/__stories__/WithModal.tsx

@@ -22,6 +22,8 @@ const fields = [
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
     },
     extra: {
+      noIndex: true,
+      border: false,
       variant: 'dialog',
       noHeader: false,
       label: {
@@ -149,11 +151,10 @@ 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__/multiplicity-attachment.spec.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+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: 'attachment_multiplicity',
+  type: 'array',
+  editable: true,
+  required: false,
+  label: {
+    primary: 'attachment multiplicity',
+    secondary: 'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+  },
+  extra: {
+    border: false,
+    editVariant: 'optional',
+    label: {
+      object: {
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        append: {
+          label: 'Αποθήκευση',
+        },
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        edit: {
+          label: 'Αποθήκευση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+        nothing_added_props: {
+          margin: 0,
+          paddingLeft: 2,
+          style: {
+            color: 'var(--color-gray-600)',
+          },
+        },
+      },
+    },
+    limit: {
+      maxSize: 5242880,
+    },
+    max: 10,
+    min: 0,
+    noHeader: true,
+    noIndex: true,
+    of: {
+      editable: true,
+      name: undefined,
+      key: undefined,
+      label: {},
+      type: 'file',
+      extra: {
+        containerProps: {
+          variant: 'border',
+        },
+        limit: {
+          maxSize: 5242880,
+        },
+        noResetButton: true,
+        resetButtonProps: {
+          color: 'warning',
+        },
+        uploadButtonProps: {
+          variant: 'link',
+        },
+      },
+    },
+    stackProps: {
+      direction: 'row',
+      justifyContent: 'flex-end',
+      spacing: 2,
+    },
+    tableContainer: {
+      mb: 0,
+    },
+    variant: 'dialog',
+  },
+};
+
+describe('multiplicity_attachment case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="multiplicity_attachment" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(screen.getByText('attachment multiplicity')).toBeInTheDocument();
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it('should open dialog on add button click', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+    expect(screen.getByText('Αποθήκευση')).toBeInTheDocument();
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Επιλογή αρχείου')).toBeInTheDocument();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    fireEvent.change(fileInput, { target: { files: [file] } });
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(saveButton);
+    expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+  });
+  it('should submit added item on main form', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    await user.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(fileInput, file);
+    await waitFor(() => {
+      expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+    });
+
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Επεξεργασία')).toBeInTheDocument();
+    expect(screen.getByText('Διαγραφή')).toBeInTheDocument();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+      expect(submitHandler).toHaveBeenCalledWith({
+        multiplicity_attachment: expect.any(Array),
+      });
+    });
+
+    const callArgs = submitHandler.mock.calls[0][0];
+
+    expect(Array.isArray(callArgs.multiplicity_attachment)).toBe(true);
+    expect(callArgs.multiplicity_attachment).toHaveLength(1);
+    expect(callArgs.multiplicity_attachment[0]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[0][0].name).toBe('test-file.txt');
+  });
+  it('should allow editing of added item', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    await user.click(addButton);
+    const fileInput = screen.getByLabelText('Επιλογή αρχείου');
+    const file = new File(['file content'], 'test-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(fileInput, file);
+    expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+    const saveButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveButton);
+    await waitFor(() =>
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    );
+    expect(screen.getByText(/test-file.txt/)).toBeInTheDocument();
+
+    const editButton = screen.getByRole('button', { name: 'Επεξεργασία' });
+    await user.click(editButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      const dialog = screen.getByRole('dialog');
+
+      expect(dialog).toHaveTextContent(/test-file.txt/);
+    });
+    const editFileInput = screen.getByLabelText(/Αντικατάσταση/);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    const newFile = new File(['new content'], 'new-file.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(editFileInput, newFile);
+    const saveEditButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    await user.click(saveEditButton);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.getByText(/new-file.txt/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,131 @@
+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: 'multiplicity_required',
+  editable: true,
+  type: 'array',
+  required: true,
+  label: {
+    primary: '"required" μέχρι 10',
+    secondary: 'Ο χρήστης μπορεί να προσθέσει τιμές (σύνολο από 1 έως 10)',
+  },
+  extra: {
+    variant: 'dialog',
+    editVariant: 'required',
+    min: 1,
+    ma: 10,
+    noHeader: true,
+    noIndex: true,
+    label: {
+      object: {
+        add: 'Προσθήκη',
+        addButtonVariant: 'link',
+        append: {
+          label: 'Αποθήκευση',
+        },
+        delete: 'Αφαίρεση',
+        deleteButtonVariant: 'link',
+        cancel: {
+          label: 'Ακύρωση',
+        },
+        edit: {
+          label: 'Αποθήκευση',
+        },
+        nothing_added: 'Δεν έχουν προστεθεί στοιχεία',
+      },
+    },
+    of: {
+      editable: true,
+      key: undefined,
+      name: undefined,
+      type: 'string',
+      required: true,
+      label: {},
+    },
+  },
+};
+
+describe('multiplicity_required case from dilosi', () => {
+  const submitHandler = vi.fn();
+
+  const TestForm = () => (
+    <FormBuilder onSubmit={submitHandler}>
+      <Field name="multiplicity_required" {...fieldSpec} />
+      <Button type="submit">Συνέχεια</Button>
+    </FormBuilder>
+  );
+
+  beforeEach(() => {
+    submitHandler.mockClear();
+  });
+
+  it('should render', async () => {
+    render(<TestForm />);
+    expect(screen.getByText('"required" μέχρι 10')).toBeInTheDocument();
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it('should open dialog on add button click', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+  it('should add a new item on dialog form submission', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+
+    const inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    expect(submitHandler).not.toHaveBeenCalled();
+  });
+  it('should submit added item on main form', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    fireEvent.click(addButton);
+
+    const inputField = screen.getByRole('textbox');
+    fireEvent.change(inputField, { target: { value: 'Test Value' } });
+    expect(inputField).toHaveValue('Test Value');
+    const submitButton = screen.getByRole('button', { name: 'Αποθήκευση' });
+    fireEvent.click(submitButton);
+    expect(await screen.findByRole('dialog')).not.toBeVisible();
+
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    fireEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+    });
+    expect(submitHandler).toHaveBeenCalledWith({
+      multiplicity_required: ['Test Value'],
+    });
+  });
+});