Blocks data sorting (#2709)

* feat: blocks data sorting * feat: pR comments fix
ballerine-io · Sep 15, 2024 · 2226e58 · 2226e58
1 parent e395928
commit 2226e58
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 56 deletions.
diff --git a/apps/backoffice-v2/src/lib/blocks/components/Details/Details.tsx b/apps/backoffice-v2/src/lib/blocks/components/Details/Details.tsx
@@ -1,19 +1,29 @@
-import { FunctionComponent } from 'react';
-import { Separator } from '../../../../common/components/atoms/Separator/Separator';
-import { ctw } from '../../../../common/utils/ctw/ctw';
+import { Separator } from '@/common/components/atoms/Separator/Separator';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { EditableDetails } from '../EditableDetails/EditableDetails';
-import { IDetailsProps } from './interfaces';
+import { ExtractCellProps } from '@ballerine/blocks';
+import { FunctionComponent } from 'react';
+import { sortData } from '@/lib/blocks/utils/sort-data';
 
-export const Details: FunctionComponent<IDetailsProps> = ({
+export const Details: FunctionComponent<ExtractCellProps<'details'>> = ({
   id,
   value,
   hideSeparator,
   contextUpdateMethod,
   workflowId,
   documents = [],
   onSubmit,
+  props,
 }) => {
-  if (!value.data?.length) return null;
+  if (!value.data?.length) {
+    return null;
+  }
+
+  const sortedData = sortData({
+    data: value.data,
+    direction: props?.config?.sort?.direction,
+    predefinedOrder: props?.config?.sort?.predefinedOrder,
+  });
 
   return (
     <div
@@ -27,7 +37,7 @@ export const Details: FunctionComponent<IDetailsProps> = ({
         valueId={value?.id}
         documents={documents}
         title={value?.title}
-        data={value?.data}
+        data={sortedData}
         contextUpdateMethod={contextUpdateMethod}
         onSubmit={onSubmit}
       />

diff --git a/apps/backoffice-v2/src/lib/blocks/components/Details/interfaces.ts b/apps/backoffice-v2/src/lib/blocks/components/Details/interfaces.ts
diff --git a/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/interfaces.ts b/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/interfaces.ts
@@ -18,14 +18,13 @@ export interface IEditableDetails {
     pattern?: string;
     maximum?: string;
     minimum?: string;
-    dropdownOptions?: Array<TDropdownOption>;
+    dropdownOptions?: TDropdownOption[];
   }>;
   valueId: string;
   id: string;
-  documents: Array<IEditableDetailsDocument>;
+  documents: IEditableDetailsDocument[];
   title: string;
   workflowId: string;
   contextUpdateMethod?: 'base' | 'director';
   onSubmit?: (document: AnyObject) => void;
-  config: Record<string, unknown>;
 }
diff --git a/apps/backoffice-v2/src/lib/blocks/components/ReadOnlyDetailsCell/ReadOnlyDetailsCell.tsx b/apps/backoffice-v2/src/lib/blocks/components/ReadOnlyDetailsCell/ReadOnlyDetailsCell.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { ctw } from '../../../../common/utils/ctw/ctw';
+import { ctw } from '@/common/utils/ctw/ctw';
 import { ExtractCellProps } from '@ballerine/blocks';
 import { ReadOnlyDetail } from '@/common/components/atoms/ReadOnlyDetail/ReadOnlyDetail';
 import { titleCase } from 'string-ts';
@@ -20,21 +20,24 @@ export const ReadOnlyDetailsCell: FunctionComponent<ExtractCellProps<'readOnlyDe
       {...restProps}
       className={ctw(`grid grid-cols-1 gap-4 p-4 md:grid-cols-2 xl:grid-cols-3`, className)}
     >
-      {value?.map(({ label, value }) => {
-        return (
-          <div key={label} className="flex flex-col">
-            <TextWithNAFallback as={'h4'} className={'mb-2 text-sm font-medium leading-none'}>
-              {titleCase(label ?? '')}
-            </TextWithNAFallback>
-            <ReadOnlyDetail
-              parse={parse}
-              className={'max-w-[35ch] justify-start break-all text-sm'}
-            >
-              {value}
-            </ReadOnlyDetail>
-          </div>
-        );
-      })}
+      {value
+        ?.slice()
+        ?.sort((a, b) => a.label.localeCompare(b.label))
+        .map(({ label, value }) => {
+          return (
+            <div key={label} className="flex flex-col">
+              <TextWithNAFallback as={'h4'} className={'mb-2 text-sm font-medium leading-none'}>
+                {titleCase(label ?? '')}
+              </TextWithNAFallback>
+              <ReadOnlyDetail
+                parse={parse}
+                className={'max-w-[35ch] justify-start break-all text-sm'}
+              >
+                {value}
+              </ReadOnlyDetail>
+            </div>
+          );
+        })}
     </div>
   );
 };
diff --git a/apps/backoffice-v2/src/lib/blocks/create-blocks-typed/types.ts b/apps/backoffice-v2/src/lib/blocks/create-blocks-typed/types.ts
@@ -17,7 +17,7 @@ import { ICallToActionDocumentSelection } from '@/lib/blocks/components/Director
 import { IEditableDetailsDocument } from '@/lib/blocks/components/EditableDetails/interfaces';
 import { TPDFViewerCell } from '@/lib/blocks/components/PDFViewerCell/interfaces';
 import { Block } from '@ballerine/blocks';
-import { CommonWorkflowStates, GenericFunction } from '@ballerine/common';
+import { CommonWorkflowStates, GenericFunction, SortDirection } from '@ballerine/common';
 import { AnyChildren, AnyObject, Image } from '@ballerine/ui';
 import { ColumnDef, TableOptions } from '@tanstack/react-table';
 import { ComponentProps, ReactNode } from 'react';
@@ -133,6 +133,11 @@ export type TDetailsCell = {
       maximum?: string;
     }>;
   };
+  props?: {
+    config?: {
+      sort?: { direction?: SortDirection; predefinedOrder?: string[] };
+    };
+  };
   onSubmit?: (document: AnyObject) => void;
 };
 

diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useAddressBlock/useAddressBlock.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useAddressBlock/useAddressBlock.tsx
@@ -59,6 +59,11 @@ export const useAddressBlock = ({
                       isEditable: false,
                     })),
             },
+            props: {
+              config: {
+                sort: { predefinedOrder: ['street', 'streetNumber', 'city', 'country'] },
+              },
+            },
             workflowId: workflow?.id,
             documents: workflow?.context?.documents,
           })

diff --git a/apps/backoffice-v2/src/lib/blocks/utils/sort-data.ts b/apps/backoffice-v2/src/lib/blocks/utils/sort-data.ts
@@ -0,0 +1,22 @@
+import { SortDirection } from '@ballerine/common';
+import { ExtractCellProps } from '@ballerine/blocks';
+
+export const sortData = ({
+  data,
+  direction = 'asc',
+  predefinedOrder = [],
+}: {
+  direction?: SortDirection;
+  predefinedOrder?: string[];
+  data: ExtractCellProps<'details'>['value']['data'];
+}) => {
+  const orderedData = predefinedOrder.map(key => data.find(value => value.title === key));
+
+  const restData = data
+    .filter(data => !predefinedOrder.includes(data.title))
+    .sort((a, b) =>
+      direction === 'asc' ? a.title.localeCompare(b.title) : b.title.localeCompare(a.title),
+    );
+
+  return [...orderedData, ...restData].filter(Boolean);
+};