@digigov/form 2.0.0-a32ad9b2 → 2.0.0-abd768eb

package/src/FieldArray/FormDialog.tsx

@@ -1,5 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+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';
@@ -19,7 +25,9 @@ import {
   TableHeadCell,
   TableRow,
 } from '@digigov/ui/content';
-import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+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 {
@@ -32,6 +40,8 @@ export interface FormDialogProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
+  sortable: boolean;
   Field: React.FC<FieldProps>;
 }
 
@@ -43,223 +53,297 @@ export interface DialogProps {
   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]);
+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 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);
+    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;
             }
-            if (customField?.extra?.of?.extra) {
-              update(currentIndex, newValues);
-            } else {
-              update(currentIndex, newValues);
-            }
-            close();
-          }
-        }}
-        cancel={() => {
-          if (isAppending) {
-            setIsAppending(false);
-            remove(currentIndex);
+            update(currentIndex, valuesRef.current);
+            reset(undefined, {
+              keepTouched: true,
+              keepDefaultValues: true,
+              keepIsValid: true,
+              keepIsSubmitted: true,
+              keepValues: true,
+            });
             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}
+          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}`)}
         >
-          {customField.extra?.label.object?.add}
-        </Button>
-      </div>
-    </>
-  );
-};
+          <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 = ({
-  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;
-}) => {
+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} aria-labelledby="modal-label">
+    <Modal
+      {...props}
+      ref={ref as LegacyRef<HTMLDivElement>}
+      aria-labelledby="modal-label"
+    >
       <ModalHeading id="modal-label">
-        {title ? title : type === 'edit' ? 'Επεξεργασία' : 'Προσθήκη'}
+        {title
+          ? title
+          : type === 'edit'
+            ? 'Επεξεργασία'
+            : addTitle || 'Προσθήκη'}
       </ModalHeading>
       <ModalContent>
         {hint && <Hint>{hint}</Hint>}
@@ -270,10 +354,12 @@ export const ArrayItemModal = ({
           <Button
             color="secondary"
             {...editProps}
-            onClick={async (e) => {
+            type="button"
+            onClick={(e) => {
               e.preventDefault();
-              editOrAppend(name);
+              editOrAppend();
             }}
+            disabled={disabled}
           >
             {editLabel || 'Αποθήκευση'}
           </Button>
@@ -281,20 +367,23 @@ export const ArrayItemModal = ({
           <Button
             color="primary"
             {...appendProps}
-            onClick={async (e) => {
+            type="button"
+            onClick={(e) => {
               e.preventDefault();
-              editOrAppend(name);
+              editOrAppend();
             }}
+            disabled={disabled}
           >
             {appendLabel || 'Προσθήκη'}
           </Button>
         )}
         <Button
           variant="link"
+          type="button"
           {...cancelProps}
           onClick={(e) => {
             e.preventDefault();
-            cancel(name);
+            cancel();
           }}
         >
           {cancelLabel || 'Ακύρωση'}
@@ -302,7 +391,7 @@ export const ArrayItemModal = ({
       </ModalAction>
     </Modal>
   );
-};
+});
 
 export const ArrayItemHeader = ({ labels, disabled }) => {
   return (
@@ -325,6 +414,20 @@ export const ArrayItemDisplay = ({
   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;
@@ -333,7 +436,19 @@ export const ArrayItemDisplay = ({
   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)
@@ -341,37 +456,109 @@ export const ArrayItemDisplay = ({
     return null;
   }
   delete data.id;
-  const values: string[] =
-    typeof data === 'string' ? [data] : Object.values(data);
+  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, 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>
+    <>
+      <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>
             )}
-          </ButtonGroup>
-        </TableDataCell>
+          </TableDataCell>
+        </TableRow>
       )}
-    </TableRow>
+    </>
   );
 };