@digigov/form 2.0.0-6e3977bc → 2.0.0-6eea4edb

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__/ReadOnlyCards.tsx

@@ -0,0 +1,75 @@
+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: 'Επώνυμο' } },
+    ],
+    layout: 'card',
+  },
+};
+
+const mockCustomField = {
+  editable: false,
+  extra: {
+    noHeader: false,
+    noEdit: false,
+    noDelete: false,
+    border: true,
+    verticalAlign: 'top',
+    wordBreak: 'break-all',
+    layout: 'card',
+  },
+};
+
+const initialValues = [
+  {
+    afm: '123456789',
+    firstName: 'Γιάννης',
+    lastName: 'Παπαδόπουλος',
+  },
+  {
+    afm: '987654321',
+    firstName: 'Μαρία',
+    lastName: 'Κωνσταντίνου',
+  },
+  {
+    afm: '456789123',
+    firstName: 'Δημήτρης',
+    lastName: 'Αθανασίου',
+  },
+];
+
+export const ReadOnlyCards = () => {
+  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/__stories__/SortableCards.tsx

@@ -0,0 +1,88 @@
+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',
+    layout: 'card',
+  },
+};
+
+const initialValues = [
+  {
+    afm: '123456789',
+    firstName: 'Γιάννης',
+    lastName: 'Παπαδόπουλος',
+  },
+  {
+    afm: '987654321',
+    firstName: 'Μαρία',
+    lastName: 'Κωνσταντίνου',
+  },
+  {
+    afm: '456789123',
+    firstName: 'Δημήτρης',
+    lastName: 'Αθανασίου',
+  },
+];
+
+export const SortableCards = () => {
+  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.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Cards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Cards';
+import { Default } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Default';
+import { ReadOnly } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnly';
+import { ReadOnlyCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnlyCards';
+import { Sortable } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Sortable';
+import { SortableCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/SortableCards';
+
+test('renders the All ArrayDisplay variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Cards">
+      <Cards />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="ReadOnly">
+      <ReadOnly />
+    </TestVariant>
+    <TestVariant title="ReadOnlyCards">
+      <ReadOnlyCards />
+    </TestVariant>
+    <TestVariant title="Sortable">
+      <Sortable />
+    </TestVariant>
+    <TestVariant title="SortableCards">
+      <SortableCards />
+    </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();
+});
+  

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+import { ArrayContainerDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay';
+import { ArrayItemDisplay } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay';
+export interface ArrayDisplayProps {
+  fieldArrayName: string;
+  fieldArrayValues: any[];
+  ofField: any;
+  customField: any;
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+  move: UseFieldArrayMove;
+  sortable: boolean;
+  error?: any;
+}
+
+export const ArrayDisplay = ({
+  fieldArrayName,
+  fieldArrayValues,
+  ofField,
+  customField,
+  onEdit,
+  onRemove,
+  move,
+  sortable,
+  error,
+}: ArrayDisplayProps) => {
+  return (
+    <ArrayContainerDisplay
+      fieldArrayValues={fieldArrayValues}
+      ofField={ofField}
+      customField={customField}
+    >
+      {fieldArrayValues?.map?.((field, index) => {
+        return (
+          <ArrayItemDisplay
+            error={error && error[index] ? error[index] : undefined}
+            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}
+            fieldArrayValues={fieldArrayValues}
+            ofField={ofField}
+            customField={customField}
+          />
+        );
+      })}
+    </ArrayContainerDisplay>
+  );
+};
+
+export default ArrayDisplay;