@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/FieldArray/__stories__/WithModal.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'string',
+    type: 'string',
+    label: {
+      primary: 'Πεδίο κειμένου',
+      secondary:
+        'Το multiplicity field είναι ένα πεδίο οπότε φαίνεται και είναι μέρος της φόρμας',
+    },
+  },
+  {
+    key: 'multiplicity',
+    editable: true,
+    required: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      noIndex: true,
+      border: false,
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      min: 2,
+      // max: 4,
+      of: {
+        type: 'object',
+        extra: {
+          fields: [
+            {
+              key: 'firstName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Επώνυμο',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'arrayofafm',
+    editable: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      variant: 'dialog',
+      noHeader: false,
+      label: {
+        object: {
+          title: 'Συνυπογράφοντας',
+          title_added: 'Οι συνυπογράφοντες που έχετε προσθέσει',
+          add: 'Προσθήκη',
+          delete: 'Αφαίρεση συνυπογράφοντος',
+          append: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          edit: {
+            label: 'Αποθήκευση',
+            props: {
+              color: 'primary',
+            },
+          },
+          cancel: {
+            label: 'Ακύρωση',
+            props: {
+              variant: 'link',
+            },
+          },
+        },
+        question: {
+          title: 'Θέλετε να προσθέσετε επιπλέον συνυπογράφοντες;',
+          objectLabel: {
+            primary: 'Προσθήκη νέου συνυπογράφοντα',
+            secondary: 'Συμπληρώστε τα στοιχεία και μετά πατήστε «Προσθήκη»',
+          },
+          yes: 'Ναι',
+          no: 'Όχι',
+        },
+      },
+      // min: 2,
+      // max: 4,
+      of: {
+        required: true,
+        type: 'afm',
+        label: {
+          primary: 'ΑΦΜ',
+        },
+      },
+    },
+  },
+] as FieldSpec[];
+
+export const WithModal = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+      window.alert('Submit success');
+    }}
+  >
+    <Field name="multiplicity" {...fields[1]} />
+    <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',
+          },
+        ],
+      })
+    );
+  });
+});

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

@@ -0,0 +1,280 @@
+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 submit multiple added items', async () => {
+    render(<TestForm />);
+    const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
+
+    // First file
+    await user.click(addButton);
+    const file1 = new File(['file content'], 'file-1.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(screen.getByLabelText('Επιλογή αρχείου'), file1);
+    await waitFor(() => {
+      expect(screen.getByText(/file-1.txt/)).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('file-1.txt')).toBeInTheDocument();
+    expect(screen.getByText('Επεξεργασία')).toBeInTheDocument();
+    expect(screen.getByText('Διαγραφή')).toBeInTheDocument();
+
+    // Second file
+    await user.click(addButton);
+    const file2 = new File(['file content'], 'file-2.txt', {
+      type: 'text/plain',
+    });
+    await user.upload(screen.getByLabelText('Επιλογή αρχείου'), file2);
+    await waitFor(() => {
+      expect(screen.getByText(/file-2.txt/)).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: 'Αποθήκευση' }));
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText('file-1.txt')).toBeInTheDocument();
+    expect(screen.getByText('file-2.txt')).toBeInTheDocument();
+
+    const submitButton = screen.getByRole('button', { name: 'Συνέχεια' });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(submitHandler).toHaveBeenCalledTimes(1);
+      expect(submitHandler).toHaveBeenCalledWith({
+        multiplicity_attachment: [expect.any(FileList), expect.any(FileList)],
+      });
+    });
+
+    const callArgs = submitHandler.mock.calls[0][0];
+
+    expect(Array.isArray(callArgs.multiplicity_attachment)).toBe(true);
+    expect(callArgs.multiplicity_attachment).toHaveLength(2);
+    expect(callArgs.multiplicity_attachment[0]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[0][0].name).toBe('file-1.txt');
+
+    expect(callArgs.multiplicity_attachment[1]).toBeInstanceOf(FileList);
+    expect(callArgs.multiplicity_attachment[1][0].name).toBe('file-2.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();
+  });
+});