@digigov/form 2.0.0-599965f0 → 2.0.0-5e7a6790

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+import { TableDataCell, TableRow } from '@digigov/ui/content';
+import { Button } from '@digigov/ui/form/Button';
+import type { StackProps } from '@digigov/ui/layouts';
+import { Grid, Stack } from '@digigov/ui/layouts';
+import Heading from '@digigov/ui/typography/Heading';
+
+export interface ArrayItemDisplayProps {
+  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;
+}
+
+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',
+  },
+}: ArrayItemDisplayProps) => {
+  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>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableHead, TableHeadCell, TableRow } from '@digigov/ui/content';
+
+export const ArrayItemHeader = ({ labels, disabled }) => {
+  return (
+    <TableHead>
+      <TableRow>
+        {labels.map((label, index) => {
+          return <TableHeadCell key={index}>{label}</TableHeadCell>;
+        })}
+        {!disabled && <TableHeadCell>Ενέργειες</TableHeadCell>}
+      </TableRow>
+    </TableHead>
+  );
+};

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;