@digigov/form 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/FieldArray/FormDialog.tsx

@@ -0,0 +1,565 @@
+import React, { LegacyRef, useEffect, useRef, useState } from 'react';
+import {
+  ErrorOption,
+  useFieldArray,
+  UseFieldArrayMove,
+  UseFormReturn,
+  useWatch,
+} 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 } from '@digigov/ui/form/Button';
+import { StackProps, Grid, Stack } from '@digigov/ui/layouts';
+import Heading from '@digigov/ui/typography/Heading';
+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 interface DialogProps {
+  name: string;
+  heading: string;
+  actions: React.ReactNode;
+  children: React.ReactNode;
+  registerModal: (any) => {};
+}
+
+export const FormDialog: React.FC<FormDialogProps> = React.forwardRef(
+  function FormDialog(
+    {
+      name,
+      trigger,
+      register,
+      control,
+      formState,
+      error,
+      getValues,
+      Field,
+      reset,
+      sortable,
+      ...customField
+    },
+    ref
+  ) {
+    const [isAppending, setIsAppending] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const { fields, append, remove, update, move } = 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);
+    const ofField = {
+      ...customField.extra?.of,
+      name: currentName,
+    };
+    const defaultValue = getValues(currentName) || ofField.defaultValue;
+    const noValuesCommitted =
+      fields.length === 0 || (fields.length === 1 && isAppending);
+    const titleNumber = customField.extra?.label.object.titleNumbering
+      ? `${currentLength + 1}`
+      : '';
+    return (
+      <>
+        {noValuesCommitted && (
+          <Hint {...customField.extra?.label.object?.nothing_added_props}>
+            {customField.extra?.label.object?.nothing_added}
+          </Hint>
+        )}
+        <ArrayItemModal
+          title={
+            customField.extra?.label.object.title &&
+            `${customField.extra?.label.object.title} ${titleNumber}`
+          }
+          hint={customField.label?.secondary}
+          name={name}
+          defaultValue={defaultValue}
+          currentName={currentName}
+          editOrAppend={async () => {
+            const hasNoErrors = await trigger(
+              ofField.type === 'object'
+                ? ofField.extra.fields.map(({ key }) => `${currentName}.${key}`)
+                : currentName
+            );
+            if (!hasNoErrors) {
+              update(currentIndex, valuesRef.current);
+            }
+            if (hasNoErrors) {
+              const newValues = getValues(currentName);
+              if (isAppending) {
+                setIsAppending(false);
+              }
+              if (newValues === '') {
+                remove(currentIndex);
+              } 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}
+          control={control}
+          {...registerModal(`modal-${name}`)}
+        >
+          <Fieldset>
+            {ofField?.type === 'object' ? (
+              <FieldObject
+                defaultValue={defaultValue || undefined}
+                error={error && error[currentIndex]}
+                formState={formState}
+                register={register}
+                control={control}
+                {...ofField}
+                key={currentName}
+                Field={Field}
+              />
+            ) : (
+              <Field
+                name={currentName}
+                {...ofField}
+                error={error && error[currentIndex]}
+                key={currentName}
+              />
+            )}
+          </Fieldset>
+        </ArrayItemModal>
+        {!noValuesCommitted && (
+          <TableContainer {...customField.extra?.tableContainer}>
+            <Table
+              ref={ref as LegacyRef<HTMLTableElement>}
+              verticalAlign={customField.extra?.verticalAlign}
+            >
+              {!customField.extra?.noHeader &&
+                !noValuesCommitted &&
+                ofField?.extra &&
+                values?.length > 0 && (
+                  <ArrayItemHeader
+                    labels={
+                      ofField.type === 'object'
+                        ? ofField.extra.fields.map(({ label }) => label.primary)
+                        : [ofField.label.primary]
+                    }
+                    disabled={customField?.editable === false}
+                  />
+                )}
+              <TableBody>
+                {!noValuesCommitted &&
+                  values?.map?.((field, index) => {
+                    return (
+                      <ArrayItemDisplay
+                        key={index}
+                        name={`${name}.${index}`}
+                        index={index}
+                        isFirst={index === 0}
+                        isLast={index === values.length - 1}
+                        data={field}
+                        edit={() => {
+                          setCurrentIndex(index);
+                          open(`modal-${name}`);
+                        }}
+                        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
+              type="button"
+              name={`${name}-add-object`}
+              color="secondary"
+              variant={customField.extra?.label.object?.addButtonVariant}
+              onClick={(ev) => {
+                ev.preventDefault();
+                if (customField?.extra?.of?.type === 'object') {
+                  append({});
+                } else {
+                  append('');
+                }
+                setCurrentIndex(currentLength + 1);
+                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 const ArrayItemModal = React.forwardRef(function ArrayItemModal(
+  {
+    type,
+    currentName,
+    title,
+    hint,
+    defaultValue,
+    editOrAppend,
+    cancel,
+    control,
+    addTitle,
+    editLabel,
+    editProps,
+    appendLabel,
+    appendProps,
+    cancelLabel,
+    cancelProps,
+    children,
+    ...props
+  }: {
+    type: 'append' | 'edit';
+    name: string;
+    title?: string;
+    hint?: string;
+    editOrAppend: () => void;
+    cancel: () => void;
+    addTitle?: string;
+    editLabel?: string;
+    editProps?: any;
+    appendLabel?: string;
+    appendProps?: any;
+    cancelLabel?: string;
+    cancelProps?: any;
+    children: React.ReactNode;
+    [key: string]: any;
+  },
+  ref
+) {
+  const value = useWatch({
+    control,
+    name: currentName,
+    defaultValue: defaultValue,
+  });
+  const disabled = value === undefined || value === null || value === '';
+  return (
+    <Modal
+      {...props}
+      ref={ref as LegacyRef<HTMLDivElement>}
+      aria-labelledby="modal-label"
+    >
+      <ModalHeading id="modal-label">
+        {title
+          ? title
+          : type === 'edit'
+            ? 'Επεξεργασία'
+            : addTitle || 'Προσθήκη'}
+      </ModalHeading>
+      <ModalContent>
+        {hint && <Hint>{hint}</Hint>}
+        {children}
+      </ModalContent>
+      <ModalAction>
+        {type === 'edit' ? (
+          <Button
+            color="secondary"
+            {...editProps}
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              editOrAppend();
+            }}
+            disabled={disabled}
+          >
+            {editLabel || 'Αποθήκευση'}
+          </Button>
+        ) : (
+          <Button
+            color="primary"
+            {...appendProps}
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              editOrAppend();
+            }}
+            disabled={disabled}
+          >
+            {appendLabel || 'Προσθήκη'}
+          </Button>
+        )}
+        <Button
+          variant="link"
+          type="button"
+          {...cancelProps}
+          onClick={(e) => {
+            e.preventDefault();
+            cancel();
+          }}
+        >
+          {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,
+  sortable,
+  index,
+  isFirst,
+  isLast,
+  move,
+  valueDisplay,
+  border = true,
+  wordBreak = 'break-all',
+  stackProps = {
+    spacing: 4,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    direction: 'column',
+  },
+}: {
+  data: any;
+  name: string;
+  edit: (name: string) => void;
+  remove: (name: string) => void;
+  disabledEdit?: boolean;
+  disabledDelete?: boolean;
+  disabled?: boolean;
+  sortable: boolean;
+  index: number;
+  isFirst: boolean;
+  isLast: boolean;
+  move: UseFieldArrayMove;
+  valueDisplay?: (value) => React.ReactNode;
+  border: boolean;
+  wordBreak?: 'break-all' | 'none';
+  stackProps?: StackProps;
+}) => {
+  if (data === undefined || data === null) {
+    return null;
+  }
+  if (
+    Object.keys(data).length === 0 ||
+    (Object.keys(data).length === 1 && data.id)
+  ) {
+    return null;
+  }
+  delete data.id;
+  const values: (string | Record<string, any>)[] =
+    typeof data === 'string' ? [data] : Object.values(data || {});
+  const borderVariant = border === false || sortable ? 'none' : 'border';
+  return (
+    <>
+      <TableRow>
+        {values?.map?.((value, valueIndex) => {
+          return (
+            <TableDataCell
+              key={valueIndex}
+              variant={borderVariant}
+              wordBreak={wordBreak}
+              pb={sortable ? 0 : undefined}
+              pt={sortable ? 4 : undefined}
+            >
+              {sortable && valueIndex === 0 && (
+                <Heading size="sm" className="mb-2">
+                  Επιλογή #{index + 1}
+                </Heading>
+              )}
+              {(value as Record<string, any>)?.name ||
+                (Array.isArray(value)
+                  ? value.join('\n')
+                  : valueDisplay
+                    ? valueDisplay(value)
+                    : value) ||
+                ''}
+            </TableDataCell>
+          );
+        })}
+        {disabled === true ||
+        (disabledEdit === true && disabledDelete === true) ? null : (
+          <TableDataCell variant={borderVariant}>
+            <Stack {...stackProps}>
+              {disabledEdit !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => {
+                    edit(name);
+                  }}
+                >
+                  Επεξεργασία
+                </Button>
+              )}
+              {disabledDelete !== true && (
+                <Button
+                  variant="link"
+                  type="button"
+                  onClick={() => remove(name)}
+                >
+                  Διαγραφή
+                </Button>
+              )}
+            </Stack>
+          </TableDataCell>
+        )}
+      </TableRow>
+      {sortable && (
+        <TableRow>
+          <TableDataCell
+            variant={isLast ? 'none' : 'border'}
+            colSpan={
+              disabled === true ||
+              (disabledEdit === true && disabledDelete === true)
+                ? values.length
+                : values.length + 1
+            }
+          >
+            {sortable && !disabled && !(isFirst && isLast) && (
+              <Grid xs={12} mt={2}>
+                Μετακίνηση{' '}
+                {!isFirst && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index - 1)}
+                    >
+                      πάνω
+                    </Button>
+                  </>
+                )}
+                {!isFirst && !isLast && ' ή '}
+                {!isLast && (
+                  <>
+                    προς τα{' '}
+                    <Button
+                      type="button"
+                      variant="link"
+                      onClick={() => move(index, index + 1)}
+                    >
+                      κάτω
+                    </Button>
+                  </>
+                )}
+              </Grid>
+            )}
+          </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: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
@@ -80,7 +81,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -15,6 +15,7 @@ const fields = [
   {
     key: 'multiplicity',
     type: 'array',
+    editable: true,
     label: {
       primary: 'Συνυπογράφοντες',
       secondary: 'Οι συνυπογράφοντες είναι άνθρωποι σαν και εμάς',
@@ -80,7 +81,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithExactLength = () => (
+export const WithExactLength = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);