packages/components/containers/contacts/merge/table/MergeTable.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import OrderableTable from '@proton/components/components/orderableTable/OrderableTable';
   5 import '@proton/components/components/orderableTable/OrderableTableHeader.scss';
   6 import TableCell from '@proton/components/components/table/TableCell';
   7 import type { ContactFormatted } from '@proton/shared/lib/interfaces/contacts';
   8
   9 import MergeTableBody from './MergeTableBody';
  10
  11 const MergeTableHeader = () => {
  12     return (
  13         <thead className="orderableTableHeader">
  14             <tr>
  15                 <TableCell type="header"> </TableCell>
  16                 <TableCell type="header">{c('TableHeader').t`Display name`}</TableCell>
  17                 <TableCell type="header" className="w-1/6">{c('TableHeader').t`First name`}</TableCell>
  18                 <TableCell type="header" className="w-1/6">{c('TableHeader').t`Last name`}</TableCell>
  19                 <TableCell type="header">{c('TableHeader').t`Address`}</TableCell>
  20                 <TableCell type="header">{c('TableHeader').t`Actions`}</TableCell>
  21             </tr>
  22         </thead>
  23     );
  24 };
  25
  26 interface Props {
  27     contacts: ContactFormatted[][];
  28     isChecked: { [ID: string]: boolean };
  29     beDeleted: { [ID: string]: boolean };
  30     onClickCheckbox: (ID: string) => void;
  31     onClickDetails: (ID: string) => void;
  32     onToggleDelete: (ID: string) => void;
  33     onClickPreview: (beMergedID: string, beDeletedIDs: string[]) => void;
  34     onSortEnd: (groupIndex: number) => ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => void;
  35 }
  36
  37 const MergeTable = ({
  38     contacts = [],
  39     isChecked = {},
  40     beDeleted = {},
  41     onClickCheckbox,
  42     onClickDetails,
  43     onToggleDelete,
  44     onClickPreview,
  45     onSortEnd,
  46 }: Props) => {
  47     return (
  48         <>
  49             {contacts.map((group, i) => {
  50                 const activeIDs = group
  51                     .map(({ ID }) => isChecked[ID] && !beDeleted[ID] && ID)
  52                     .filter(Boolean) as string[];
  53                 const beDeletedIDs = group.map(({ ID }) => beDeleted[ID] && ID).filter(Boolean) as string[];
  54                 const beMergedIDs = activeIDs.length > 1 ? activeIDs : [];
  55
  56                 return (
  57                     <div key={`${group && group[0].Name}`} className="mb-8 flex flex-column items-center">
  58                         <OrderableTable
  59                             onSortEnd={onSortEnd(i)}
  60                             className="mb-4"
  61                             helperClass="z-modals bg-norm color-norm"
  62                         >
  63                             <MergeTableHeader />
  64                             <MergeTableBody
  65                                 contacts={group}
  66                                 highlightedID={beMergedIDs[0]}
  67                                 isChecked={isChecked}
  68                                 beDeleted={beDeleted}
  69                                 onClickCheckbox={onClickCheckbox}
  70                                 onClickDetails={onClickDetails}
  71                                 onToggleDelete={onToggleDelete}
  72                             />
  73                         </OrderableTable>
  74                         <Button
  75                             className="aligcenter"
  76                             disabled={!beMergedIDs.length}
  77                             type="button"
  78                             onClick={() => onClickPreview(beMergedIDs[0], beDeletedIDs)}
  79                             data-testid="merge-model:preview-contact-button"
  80                         >
  81                             {c('Action').t`Preview contact`}
  82                         </Button>
  83                     </div>
  84                 );
  85             })}
  86         </>
  87     );
  88 };
  89
  90 export default MergeTable;