@digigov/form 2.0.9 → 2.0.10

package/src/FieldArray/FormDialog/ArrayDisplay/__stories__/WithDeleteConfirmation.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { ArrayDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/';
+
+const mockOfField = {
+  type: 'object',
+  label: { primary: 'Item' },
+  extra: {
+    fields: [
+      { key: 'afm', label: { primary: 'ΑΦΜ' } },
+      { key: 'firstName', label: { primary: 'Όνομα' } },
+      { key: 'lastName', label: { primary: 'Επώνυμο' } },
+    ],
+  },
+};
+
+const mockCustomField = {
+  editable: true,
+  extra: {
+    deleteConfirmation: true,
+    noHeader: false,
+    noEdit: false,
+    noDelete: false,
+    border: true,
+    verticalAlign: 'top',
+    wordBreak: 'break-all',
+    stackProps: {
+      spacing: 4,
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      direction: 'column',
+    },
+  },
+};
+
+const initialValues = [
+  {
+    afm: '123456789',
+    firstName: 'Γιάννης',
+    lastName: 'Παπαδόπουλος',
+  },
+  {
+    afm: '987654321',
+    firstName: 'Μαρία',
+    lastName: 'Κωνσταντίνου',
+  },
+  {
+    afm: '456789123',
+    firstName: 'Δημήτρης',
+    lastName: 'Αθανασίου',
+  },
+];
+
+export const WithDeleteConfirmation = () => {
+  const [fieldArrayValues, setFieldArrayValues] = useState(initialValues);
+
+  const handleEdit = (index: number) => {
+    const newFirstName = prompt(
+      '[TEST INTERFACE] Εισάγετε νέο όνομα:',
+      fieldArrayValues[index].firstName
+    );
+    if (newFirstName !== null) {
+      const newValues = [...fieldArrayValues];
+      newValues[index] = { ...newValues[index], firstName: newFirstName };
+      setFieldArrayValues(newValues);
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    if (confirm('Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτό το στοιχείο;')) {
+      const newValues = fieldArrayValues.filter((_, i) => i !== index);
+      setFieldArrayValues(newValues);
+    }
+  };
+
+  const handleMove = (fromIndex: number, toIndex: number) => {
+    const newValues = [...fieldArrayValues];
+    const [movedItem] = newValues.splice(fromIndex, 1);
+    newValues.splice(toIndex, 0, movedItem);
+    setFieldArrayValues(newValues);
+  };
+
+  return (
+    <ArrayDisplay
+      fieldArrayName="signatories"
+      fieldArrayValues={fieldArrayValues}
+      ofField={mockOfField}
+      customField={mockCustomField}
+      onEdit={handleEdit}
+      onRemove={handleRemove}
+      move={handleMove}
+      sortable={false}
+    />
+  );
+};

package/src/FieldArray/FormDialog/ArrayDisplay/index.test.tsx

@@ -1,44 +1,48 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
+import TestVariant from '@digigov/ui/utils/TestVariant';
 import { Cards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Cards';
 import { Default } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Default';
 import { ReadOnly } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnly';
 import { ReadOnlyCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnlyCards';
 import { Sortable } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Sortable';
 import { SortableCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/SortableCards';
+import { WithDeleteConfirmation } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/WithDeleteConfirmation';
 
 test('renders the All ArrayDisplay variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Cards">
-      <Cards />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="ReadOnly">
-      <ReadOnly />
-    </TestVariant>
-    <TestVariant title="ReadOnlyCards">
-      <ReadOnlyCards />
-    </TestVariant>
-    <TestVariant title="Sortable">
-      <Sortable />
-    </TestVariant>
-    <TestVariant title="SortableCards">
-      <SortableCards />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Cards">
+        <Cards />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ReadOnly">
+        <ReadOnly />
+      </TestVariant>
+      <TestVariant title="ReadOnlyCards">
+        <ReadOnlyCards />
+      </TestVariant>
+      <TestVariant title="Sortable">
+        <Sortable />
+      </TestVariant>
+      <TestVariant title="SortableCards">
+        <SortableCards />
+      </TestVariant>
+      <TestVariant title="WithDeleteConfirmation">
+        <WithDeleteConfirmation />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
   // Move the mouse to the top-left corner to avoid random hover issues
   await page.mouse.move(0, 0);
 
-
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/FieldArray/FormDialog/ArrayDisplay/index.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useState, useId } from 'react';
 import type { UseFieldArrayMove } from 'react-hook-form';
+import DeleteConfirmationModal from '@digigov/form/FieldArray/DeleteConfirmationModal';
 import { ArrayContainerDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay';
 import { ArrayItemDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay';
+import { omit } from '@digigov/form/utils';
+import { useModal } from '@digigov/ui';
 export interface ArrayDisplayProps {
   fieldArrayName: string;
   fieldArrayValues: any[];
@@ -11,6 +14,7 @@ export interface ArrayDisplayProps {
   onRemove: (index: number) => void;
   move: UseFieldArrayMove;
   sortable: boolean;
+  deleteConfirmation?: boolean;
   error?: any;
 }
 
@@ -23,44 +27,74 @@ export const ArrayDisplay = ({
   onRemove,
   move,
   sortable,
+  deleteConfirmation,
   error,
 }: ArrayDisplayProps) => {
+  const confirmationModalId = useId();
+  const [removeCurrentModal, setRemoveCurrentModal] = useState<number>(-1);
+  const { registerModal, open, ...modalProps } = useModal();
+
+  const handleRemoveClick = React.useCallback(
+    (index: number) => {
+      const needsConfirmation =
+        deleteConfirmation || customField.extra?.deleteConfirmation;
+      if (needsConfirmation) {
+        setRemoveCurrentModal(index);
+        open(confirmationModalId);
+      } else {
+        onRemove(index);
+      }
+    },
+    [deleteConfirmation, customField.extra, open, onRemove, confirmationModalId]
+  );
   return (
-    <ArrayContainerDisplay
-      fieldArrayValues={fieldArrayValues}
-      ofField={ofField}
-      customField={customField}
-    >
-      {fieldArrayValues?.map?.((field, index) => {
-        return (
-          <ArrayItemDisplay
-            error={error && error[index] ? error[index] : undefined}
-            key={index}
-            name={`${fieldArrayName}.${index}`}
-            index={index}
-            isFirst={index === 0}
-            isLast={index === fieldArrayValues.length - 1}
-            data={field}
-            edit={() => onEdit(index)}
-            stackProps={customField?.extra?.stackProps}
-            wordBreak={customField?.extra?.wordBreak}
-            valueDisplay={customField?.extra?.valueDisplay}
-            remove={() => onRemove(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}
-            fieldArrayValues={fieldArrayValues}
-            ofField={ofField}
-            customField={customField}
-          />
-        );
-      })}
-    </ArrayContainerDisplay>
+    <>
+      <ArrayContainerDisplay
+        fieldArrayValues={fieldArrayValues}
+        ofField={ofField}
+        customField={customField}
+      >
+        {fieldArrayValues?.map?.((field, index) => {
+          return (
+            <ArrayItemDisplay
+              error={error && error[index] ? error[index] : undefined}
+              key={index}
+              name={`${fieldArrayName}.${index}`}
+              index={index}
+              isFirst={index === 0}
+              isLast={index === fieldArrayValues.length - 1}
+              data={field}
+              edit={() => onEdit(index)}
+              stackProps={customField?.extra?.stackProps}
+              wordBreak={customField?.extra?.wordBreak}
+              valueDisplay={customField?.extra?.valueDisplay}
+              remove={() => handleRemoveClick(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}
+              fieldArrayValues={fieldArrayValues}
+              ofField={ofField}
+              customField={customField}
+            />
+          );
+        })}
+      </ArrayContainerDisplay>
+      <DeleteConfirmationModal
+        {...omit(modalProps, ['registerAction', 'currentOpen'])}
+        {...registerModal(confirmationModalId)}
+        remove={() => {
+          if (removeCurrentModal !== -1) {
+            onRemove(removeCurrentModal);
+            setRemoveCurrentModal(-1);
+          }
+        }}
+      />
+    </>
   );
 };
 

package/src/FieldArray/FormDialog/index.tsx

@@ -28,6 +28,7 @@ export interface FormDialogProps extends FieldProps {
   resetField?: UseFormReturn['resetField'];
   sortable: boolean;
   Field: React.FC<FieldProps>;
+  deleteConfirmation?: boolean;
 }
 
 export const FormDialog = React.forwardRef<HTMLButtonElement, FormDialogProps>(
@@ -39,6 +40,7 @@ export const FormDialog = React.forwardRef<HTMLButtonElement, FormDialogProps>(
       getValues,
       Field,
       sortable,
+      deleteConfirmation = false,
       ...customField
     },
     ref
@@ -264,6 +266,7 @@ export const FormDialog = React.forwardRef<HTMLButtonElement, FormDialogProps>(
             move={handleMove}
             sortable={sortable}
             error={error}
+            deleteConfirmation={deleteConfirmation}
           />
         )}
         {customField.extra?.editVariant !== 'display' && // add noAdd: necessary for dilosi's 'fixed' fieldsets

package/src/FieldArray/__stories__/WithDeleteConfirmation.tsx

@@ -0,0 +1,190 @@
+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,
+      deleteConfirmation: true,
+      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: 'lastName',
+              required: true,
+              type: 'string',
+              label: {
+                primary: 'Όνομα',
+              },
+            },
+            {
+              key: 'gender',
+              required: true,
+              type: 'choice:single',
+              label: {
+                primary: 'Φύλο',
+              },
+              extra: {
+                options: [
+                  {
+                    label: {
+                      primary: 'Άνδρας',
+                      secondary: 'Choice 1 explanation',
+                    },
+                    value: 'male',
+                  },
+                  {
+                    label: {
+                      primary: 'Γυναίκα',
+                      secondary: 'Choice 2 explanation',
+                    },
+                    value: 'female',
+                  },
+                  {
+                    label: {
+                      primary: 'Άλλο',
+                      secondary: 'Choice 3 explanation',
+                    },
+                    value: 'other',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    key: 'arrayofafm',
+    editable: true,
+    type: 'array',
+    label: {
+      primary: 'Συνυπογράφοντες',
+      secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
+    },
+    extra: {
+      variant: 'dialog',
+      deleteConfirmation: true,
+      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 WithDeleteConfirmation = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+      window.alert('Submit success');
+    }}
+    initial={{
+      multiplicity: [['Παπαδόπουλος', 'other']],
+    }}
+  >
+    <Field name="multiplicity" {...fields[1]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/FieldArray/index.spec.tsx

@@ -351,5 +351,47 @@ describe('FieldArray', () => {
 
       expect(screen.getByText('Προσθήκη συνυπογράφοντα')).toHaveFocus();
     });
+
+    it('should show delete confirmation modal and delete item on confirm', async () => {
+      render(
+        <TestForm
+          fieldObject={{
+            ...fieldSpec,
+            extra: {
+              ...fieldSpec.extra,
+              deleteConfirmation: true,
+            },
+          }}
+        />
+      );
+
+      const addButton = await screen.findByText('Προσθήκη συνυπογράφοντα');
+      expect(addButton).toBeInTheDocument();
+      fireEvent.click(addButton);
+
+      const nameInput = screen.getByLabelText('Όνομα');
+      fireEvent.change(nameInput, {
+        target: { value: 'John' },
+      });
+      fireEvent.click(screen.getByText('Αποθήκευση'));
+
+      await waitFor(() =>
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(screen.getByText('John')).toBeInTheDocument());
+
+      fireEvent.click(screen.getByText('Διαγραφή'));
+
+      await waitFor(() =>
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      );
+      expect(screen.getByText('Επιβεβαίωση διαγραφής')).toBeInTheDocument();
+      fireEvent.click(screen.getAllByText('Διαγραφή')[1]);
+      await waitFor(() =>
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      );
+
+      expect(screen.queryByText('John')).not.toBeInTheDocument();
+    });
   });
 });

package/src/FieldArray/index.test.tsx

@@ -1,40 +1,44 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
+import TestVariant from '@digigov/ui/utils/TestVariant';
 import { CardsWithError } from '@digigov/form/FieldArray/__stories__/CardsWithError';
 import { Default } from '@digigov/form/FieldArray/__stories__/Default';
 import { TableWithError } from '@digigov/form/FieldArray/__stories__/TableWithError';
 import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
 import { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
+import { WithDeleteConfirmation } from '@digigov/form/FieldArray/__stories__/WithDeleteConfirmation';
 
 test('renders the All FieldArray variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="CardsWithError">
-      <CardsWithError />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="TableWithError">
-      <TableWithError />
-    </TestVariant>
-    <TestVariant title="WithExactLength">
-      <WithExactLength />
-    </TestVariant>
-    <TestVariant title="WithModal">
-      <WithModal />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="CardsWithError">
+        <CardsWithError />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="TableWithError">
+        <TableWithError />
+      </TestVariant>
+      <TestVariant title="WithExactLength">
+        <WithExactLength />
+      </TestVariant>
+      <TestVariant title="WithModal">
+        <WithModal />
+      </TestVariant>
+      <TestVariant title="WithDeleteConfirmation">
+        <WithDeleteConfirmation />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
   // Move the mouse to the top-left corner to avoid random hover issues
   await page.mouse.move(0, 0);
 
-
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/FieldArray/index.tsx

@@ -40,7 +40,6 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
 }) => {
   /** The ref of the add-button */
   const buttonRef = useRef<HTMLButtonElement | null>(null);
-
   // Register the button to be focusable
   useEffect(() => {
     let unregister: (name: string) => void = () => {};
@@ -90,6 +89,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           reset={reset}
           resetField={resetField}
           sortable={customField.extra.sortable}
+          deleteConfirmation={customField.extra?.deleteConfirmation}
           {...customField}
         />
       ) : (
@@ -102,6 +102,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           error={error}
           getValues={getValues}
           Field={Field}
+          deleteConfirmation={customField.extra?.deleteConfirmation}
           {...customField}
         />
       )}

package/src/lazy.ts

@@ -9,9 +9,10 @@ export default {
   'FieldBase': lazy(() => import('@digigov/form/Field/FieldBase').then((module) => ({ default: module['FieldBase'] }))),
   'FieldBaseContainer': lazy(() => import('@digigov/form/Field/FieldBaseContainer').then((module) => ({ default: module['FieldBaseContainer'] }))),
   'FieldConditional': lazy(() => import('@digigov/form/Field/FieldConditional').then((module) => ({ default: module['FieldConditional'] }))),
+  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'BaseFieldArray': lazy(() => import('@digigov/form/FieldArray/BaseFieldArray').then((module) => ({ default: module['BaseFieldArray'] }))),
+  'DeleteConfirmationModal': lazy(() => import('@digigov/form/FieldArray/DeleteConfirmationModal').then((module) => ({ default: module['DeleteConfirmationModal'] }))),
   'FieldArray': lazy(() => import('@digigov/form/FieldArray').then((module) => ({ default: module['FieldArray'] }))),
-  'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FieldsetWithContext': lazy(() => import('@digigov/form/Fieldset/FieldsetWithContext').then((module) => ({ default: module['FieldsetWithContext'] }))),
   'FieldsetLabel': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetLabel'] }))),
   'FieldsetCaption': lazy(() => import('@digigov/form/Fieldset').then((module) => ({ default: module['FieldsetCaption'] }))),