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

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

@@ -0,0 +1,93 @@
+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: {
+    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 Default = () => {
+  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/__stories__/ReadOnly.tsx

@@ -0,0 +1,79 @@
+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: false,
+  extra: {
+    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 ReadOnly = () => {
+  const [fieldArrayValues] = useState(initialValues);
+
+  const handleEdit = () => {
+    console.log('Edit is disabled');
+  };
+
+  const handleRemove = () => {
+    console.log('Remove is disabled');
+  };
+
+  const handleMove = () => {
+    console.log('Move is disabled');
+  };
+
+  return (
+    <ArrayDisplay
+      fieldArrayName="signatories"
+      fieldArrayValues={fieldArrayValues}
+      ofField={mockOfField}
+      customField={mockCustomField}
+      onEdit={handleEdit}
+      onRemove={handleRemove}
+      move={handleMove}
+      sortable={false}
+    />
+  );
+};

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

@@ -0,0 +1,93 @@
+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: {
+    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 Sortable = () => {
+  const [fieldArrayValues, setFieldArrayValues] = useState(initialValues);
+
+  const handleEdit = (index: number) => {
+    const newFirstName = prompt(
+      'Εισάγετε νέο όνομα:',
+      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={true}
+    />
+  );
+};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+import { ArrayItemDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay';
+import { ArrayItemHeader } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader';
+import { Table, TableBody, TableContainer } from '@digigov/ui/content';
+
+export interface ArrayDisplayProps {
+  fieldArrayName: string;
+  fieldArrayValues: any[];
+  ofField: any;
+  customField: any;
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+  move: UseFieldArrayMove;
+  sortable: boolean;
+}
+
+export const ArrayDisplay = ({
+  fieldArrayName,
+  fieldArrayValues,
+  ofField,
+  customField,
+  onEdit,
+  onRemove,
+  move,
+  sortable,
+}: ArrayDisplayProps) => {
+  return (
+    <TableContainer {...customField.extra?.tableContainer}>
+      <Table verticalAlign={customField.extra?.verticalAlign}>
+        {!customField.extra?.noHeader &&
+          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>
+          {fieldArrayValues?.map?.((field, index) => {
+            return (
+              <ArrayItemDisplay
+                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}
+              />
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default ArrayDisplay;

package/src/FieldArray/FormDialog/ArrayEditModal.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { ErrorOption, UseFormProps } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import type {
+  FieldProps,
+  FieldSpec,
+  FormData,
+} from '@digigov/form/Field/types';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
+import { FormContext, useFormContext } from '@digigov/form/FormContext';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
+import type { ModalProps } from '@digigov/ui/app/Modal';
+import {
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading,
+} from '@digigov/ui/app/Modal';
+import { Button } from '@digigov/ui/form/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export interface ArrayEditModalProps extends Omit<ModalProps, 'children'> {
+  type: 'append' | 'edit';
+  name: string;
+  title?: string;
+  hint?: string;
+  editOrAppend: (data: FormData) => void;
+  cancel: () => void;
+  addTitle?: string;
+  editLabel?: string;
+  editProps?: any;
+  appendLabel?: string;
+  appendProps?: any;
+  cancelLabel?: string;
+  cancelProps?: any;
+  ofField?: any;
+  arrayItemName: string;
+  defaultValue?: any;
+  Field: React.FC<FieldProps>;
+  error?: ErrorOption;
+  currentIndex: number;
+}
+
+export const ArrayEditModal = React.forwardRef<
+  HTMLDivElement,
+  ArrayEditModalProps
+>(function ArrayEditModal(
+  {
+    type,
+    title,
+    hint,
+    defaultValue,
+    editOrAppend,
+    cancel,
+    addTitle,
+    editLabel,
+    editProps,
+    appendLabel,
+    appendProps,
+    cancelLabel,
+    cancelProps,
+    ofField,
+    error,
+    Field,
+    currentIndex,
+    ...modalProps
+  },
+  ref
+) {
+  const parentCtx = useFormContext();
+  const schema = useValidationSchema(
+    ofField.type === 'object' && ofField.extra.fields
+      ? Object.values(ofField.extra.fields)
+      : [ofField]
+  );
+
+  const resolver: UseFormProps['resolver'] = useMemo(() => {
+    if (!schema) return;
+
+    return yupResolver(schema);
+  }, [schema]);
+
+  const form = useForm({
+    resolver,
+    mode: 'onSubmit',
+    reValidateMode: 'onSubmit',
+    shouldFocusError: true,
+    criteriaMode: 'all',
+  });
+
+  const { reset, setValue } = form;
+
+  // Reset form and set default values when modal opens
+  useEffect(() => {
+    if (modalProps.open) {
+      // Reset form first to clear any previous values
+      reset(undefined);
+
+      // Set default values if they exist
+      if (defaultValue) {
+        Object.entries(defaultValue).forEach(([key, value]) => {
+          setValue(key, value);
+        });
+      }
+
+      if (
+        type === 'append' &&
+        ofField?.type === 'object' &&
+        ofField.extra?.fields
+      ) {
+        // For append mode, set empty values for all fields in case no defaultValue is provided
+        ofField.extra.fields.forEach((field: FieldSpec) => {
+          if (defaultValue && defaultValue[field.key] !== undefined) return;
+          switch (field.type) {
+            case 'array':
+              setValue(field.key, []);
+              break;
+            case 'object':
+              setValue(field.key, {});
+              break;
+            default:
+              // TODO: This replicates legacy behaviour. Maybe reconsider this?
+              setValue(field.key, '');
+          }
+        });
+      }
+    }
+  }, [modalProps.open, defaultValue, reset, setValue, type, ofField]);
+
+  const onSubmit = useCallback(
+    (data: FormData): void => {
+      editOrAppend(data);
+    },
+    [editOrAppend]
+  );
+
+  const handleSubmitWithoutPropagation = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    return form.handleSubmit(onSubmit)(e);
+  };
+
+  const formRef = useRef(null);
+
+  const ctx = {
+    ...parentCtx,
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    resetField: form.resetField,
+    registerField: () => {}, // If we use parent registerField, validation breaks
+    registerFieldFocus: () => {
+      return () => {};
+    },
+    errors: form.formState.errors,
+    formState: form.formState,
+    reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    getValuesFromParentForm: parentCtx.getValues,
+    unregister: form.unregister,
+    setError: form.setError,
+    formRef,
+    submit: form.handleSubmit(onSubmit),
+  };
+
+  return (
+    <ModalPortal {...modalProps} ref={ref} aria-labelledby="modal-label">
+      <FormContext.Provider value={ctx}>
+        <form onSubmit={handleSubmitWithoutPropagation} ref={formRef}>
+          <ModalHeading id="modal-label">
+            {title
+              ? title
+              : type === 'edit'
+                ? 'Επεξεργασία'
+                : addTitle || 'Προσθήκη'}
+          </ModalHeading>
+          <ModalContent>
+            {hint && <Hint>{hint}</Hint>}
+            <Fieldset>
+              {ofField?.type === 'object' ? (
+                <FieldObject
+                  {...ofField}
+                  defaultValue={defaultValue || undefined}
+                  error={error && error[currentIndex]}
+                  formState={form.formState}
+                  register={form.register}
+                  control={form.control}
+                  name={undefined}
+                  Field={Field}
+                />
+              ) : (
+                <Field error={error && error[currentIndex]} {...ofField} />
+              )}
+            </Fieldset>
+          </ModalContent>
+          <ModalAction>
+            {type === 'edit' ? (
+              <Button color="secondary" {...editProps} type="submit">
+                {editLabel || 'Αποθήκευση'}
+              </Button>
+            ) : (
+              <Button color="primary" {...appendProps} type="submit">
+                {appendLabel || 'Προσθήκη'}
+              </Button>
+            )}
+            <Button
+              variant="link"
+              type="button"
+              {...cancelProps}
+              onClick={(e) => {
+                e.preventDefault();
+                cancel();
+              }}
+            >
+              {cancelLabel || 'Ακύρωση'}
+            </Button>
+          </ModalAction>
+        </form>
+      </FormContext.Provider>
+    </ModalPortal>
+  );
+});
+
+const ModalPortal = (props: ModalProps) => {
+  return createPortal(<Modal {...props} />, document.body);
+};