@digigov/form 2.0.0-6e3977bc → 2.0.0-750aec28

package/src/FieldArray/FormDialog.tsx

@@ -0,0 +1,378 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import { FieldProps } from '@digigov/form/Field/types';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
+import {
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading,
+  useModal,
+} from '@digigov/ui/app/Modal';
+import {
+  Table,
+  TableBody,
+  TableContainer,
+  TableDataCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+} from '@digigov/ui/content';
+import { Button, ButtonGroup } 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'];
+  Field: React.FC<FieldProps>;
+}
+
+export interface DialogProps {
+  name: string;
+  heading: string;
+  actions: React.ReactNode;
+  children: React.ReactNode;
+  registerModal: (any) => {};
+}
+
+export const FormDialog: React.FC<FormDialogProps> = ({
+  name,
+  trigger,
+  register,
+  control,
+  formState,
+  error,
+  getValues,
+  Field,
+  reset,
+  ...customField
+}) => {
+  const [isAppending, setIsAppending] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name,
+  });
+  const { open, close, registerModal } = useModal();
+  const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;
+  const currentName = isAppending
+    ? `${name}.${currentLength}`
+    : `${name}.${currentIndex}`;
+  useEffect(() => {
+    if (isAppending) {
+      setCurrentIndex(currentLength);
+      open(`modal-${name}`);
+    }
+  }, [isAppending]);
+
+  const valuesRef = useRef(null);
+  if (!error) {
+    const values = getValues(currentName);
+    if (typeof values === 'object') {
+      valuesRef.current = { ...values };
+    } else {
+      valuesRef.current = values;
+    }
+  }
+  const values = getValues(name);
+  return (
+    <>
+      <ArrayItemModal
+        title={
+          customField.extra?.label.object.title &&
+          `${customField.extra?.label.object.title} ${currentLength + 1}`
+        }
+        hint={customField.label?.secondary}
+        name={name}
+        editOrAppend={async () => {
+          const hasNoErrors = await trigger(
+            customField.extra?.of.extra
+              ? customField.extra?.of.extra.fields.map(
+                  ({ key }) => `${currentName}.${key}`
+                )
+              : currentName
+          );
+          if (hasNoErrors) {
+            const newValues = getValues(currentName);
+            if (isAppending) {
+              setIsAppending(false);
+            }
+            if (customField?.extra?.of?.extra) {
+              update(currentIndex, newValues);
+            } else {
+              update(currentIndex, newValues);
+            }
+            close();
+          }
+        }}
+        cancel={() => {
+          if (isAppending) {
+            setIsAppending(false);
+            remove(currentIndex);
+            close();
+            return;
+          }
+          update(currentIndex, valuesRef.current);
+          reset(undefined, {
+            keepTouched: true,
+            keepDefaultValues: true,
+            keepIsValid: true,
+            keepIsSubmitted: true,
+            keepValues: true,
+          });
+          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}
+        {...registerModal(`modal-${name}`)}
+      >
+        <Fieldset>
+          {customField.extra?.of?.type === 'object' ? (
+            <FieldObject
+              defaultValue={getValues(currentName) || undefined}
+              name={currentName}
+              error={error && error[currentIndex]}
+              formState={formState}
+              register={register}
+              control={control}
+              {...customField.extra?.of}
+              Field={Field}
+            />
+          ) : (
+            <Field
+              name={currentName}
+              {...customField.extra?.of}
+              error={error && error[currentIndex]}
+              key={currentName}
+            />
+          )}
+        </Fieldset>
+      </ArrayItemModal>
+      <TableContainer>
+        <Table>
+          {!customField.extra?.noHeader && customField.extra?.of?.extra && (
+            <ArrayItemHeader
+              labels={customField.extra?.of.extra.fields.map(
+                ({ label }) => label.primary
+              )}
+              disabled={customField.extra?.editable === false}
+            />
+          )}
+          <TableBody>
+            {values?.map((field, index) => {
+              return (
+                <ArrayItemDisplay
+                  key={index}
+                  name={`${name}.${index}`}
+                  data={field}
+                  edit={() => {
+                    setCurrentIndex(index);
+                    open(`modal-${name}`);
+                  }}
+                  remove={() => {
+                    remove(index);
+                  }}
+                  disabledEdit={customField.extra?.noEdit ?? false}
+                  disabledDelete={customField.extra?.noDelete ?? false}
+                  disabled={customField.extra?.editable ?? false}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div
+        className={
+          customField.extra?.label.object?.addButtonVariant === 'link'
+            ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400'
+            : ''
+        }
+      >
+        <Button
+          type="button"
+          name={`${name}-add-object`}
+          color="secondary"
+          variant={customField.extra?.label.object?.addButtonVariant}
+          onClick={(ev) => {
+            ev.preventDefault();
+            if (customField.extra?.of?.extra) {
+              append({});
+            } else {
+              append('');
+            }
+            setCurrentIndex(currentLength + 1);
+            setIsAppending(true);
+          }}
+          disabled={!customField?.editable}
+        >
+          {customField.extra?.label.object?.add}
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const ArrayItemModal = ({
+  type,
+  name,
+  title,
+  hint,
+  editOrAppend,
+  cancel,
+  editLabel,
+  editProps,
+  appendLabel,
+  appendProps,
+  cancelLabel,
+  cancelProps,
+  children,
+  ...props
+}: {
+  type: 'append' | 'edit';
+  name: string;
+  title?: string;
+  hint?: string;
+  editOrAppend: (name: string) => void;
+  cancel: (name: string) => void;
+  editLabel?: string;
+  editProps?: any;
+  appendLabel?: string;
+  appendProps?: any;
+  cancelLabel?: string;
+  cancelProps?: any;
+  children: React.ReactNode;
+  [key: string]: any;
+}) => {
+  return (
+    <Modal {...props} aria-labelledby="modal-label">
+      <ModalHeading id="modal-label">
+        {title ? title : type === 'edit' ? 'Επεξεργασία' : 'Προσθήκη'}
+      </ModalHeading>
+      <ModalContent>
+        {hint && <Hint>{hint}</Hint>}
+        {children}
+      </ModalContent>
+      <ModalAction>
+        {type === 'edit' ? (
+          <Button
+            color="secondary"
+            {...editProps}
+            onClick={async (e) => {
+              e.preventDefault();
+              editOrAppend(name);
+            }}
+          >
+            {editLabel || 'Αποθήκευση'}
+          </Button>
+        ) : (
+          <Button
+            color="primary"
+            {...appendProps}
+            onClick={async (e) => {
+              e.preventDefault();
+              editOrAppend(name);
+            }}
+          >
+            {appendLabel || 'Προσθήκη'}
+          </Button>
+        )}
+        <Button
+          variant="link"
+          {...cancelProps}
+          onClick={(e) => {
+            e.preventDefault();
+            cancel(name);
+          }}
+        >
+          {cancelLabel || 'Ακύρωση'}
+        </Button>
+      </ModalAction>
+    </Modal>
+  );
+};
+
+export const ArrayItemHeader = ({ labels, disabled }) => {
+  return (
+    <TableHead>
+      <TableRow>
+        {labels.map((label, index) => {
+          return <TableHeadCell key={index}>{label}</TableHeadCell>;
+        })}
+        {!disabled && <TableHeadCell>Ενέργειες</TableHeadCell>}
+      </TableRow>
+    </TableHead>
+  );
+};
+
+export const ArrayItemDisplay = ({
+  name,
+  data,
+  edit,
+  remove,
+  disabledEdit,
+  disabledDelete,
+  disabled,
+}: {
+  data: any;
+  name: string;
+  edit: (name: string) => void;
+  remove: (name: string) => void;
+  disabledEdit?: boolean;
+  disabledDelete?: boolean;
+  disabled?: boolean;
+}) => {
+  if (
+    Object.keys(data).length === 0 ||
+    (Object.keys(data).length === 1 && data.id)
+  ) {
+    return null;
+  }
+  delete data.id;
+  const values: string[] =
+    typeof data === 'string' ? [data] : Object.values(data);
+  return (
+    <TableRow>
+      {values.map((value, index) => {
+        return <TableDataCell key={index}>{value || ''}</TableDataCell>;
+      })}
+      {disabled === true ||
+      (disabledEdit === true && disabledDelete === true) ? null : (
+        <TableDataCell>
+          <ButtonGroup>
+            {disabledEdit !== true && (
+              <Button
+                variant="link"
+                type="button"
+                onClick={() => {
+                  edit(name);
+                }}
+              >
+                Επεξεργασία
+              </Button>
+            )}
+            {disabledDelete !== true && (
+              <Button variant="link" type="button" onClick={() => remove(name)}>
+                Διαγραφή
+              </Button>
+            )}
+          </ButtonGroup>
+        </TableDataCell>
+      )}
+    </TableRow>
+  );
+};
+
+export default FormDialog;

package/src/FieldArray/__stories__/Default.tsx

@@ -15,6 +15,7 @@ const fields = [
   {
     key: 'multiplicity',
     type: 'array',
+    editable: true,
     label: {
       primary: 'Συνυπογράφοντες',
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -15,6 +15,7 @@ const fields = [
   {
     key: 'multiplicity',
     type: 'array',
+    editable: true,
     label: {
       primary: 'Συνυπογράφοντες',
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',

package/src/FieldArray/__stories__/WithModal.tsx

@@ -0,0 +1,159 @@
+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: {
+      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 = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field name="string" {...fields[0]} />
+    <Field name="multiplicity" {...fields[1]} />
+    <Field name="arrayofafm" {...fields[2]} />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);

package/src/FieldArray/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/FieldArray/__stories__/Default';
 import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+import { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 
 test('renders the All FieldArray variants', async ({ mount, page }) => {
   await mount(
@@ -14,10 +15,17 @@ test('renders the All FieldArray variants', async ({ mount, page }) => {
     <TestVariant title="WithExactLength">
       <WithExactLength />
     </TestVariant>
+    <TestVariant title="WithModal">
+      <WithModal />
+    </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' });
   expect(screenshot).toMatchSnapshot();
 });