packages/components/containers/addresses/AddressesTable.tsx

   1 import { c } from 'ttag';
   2
   3 import { CircleLoader } from '@proton/atoms';
   4 import Table from '@proton/components/components/table/Table';
   5 import TableBody from '@proton/components/components/table/TableBody';
   6 import TableHeader from '@proton/components/components/table/TableHeader';
   7 import TableRow from '@proton/components/components/table/TableRow';
   8 import type {
   9     Address,
  10     CachedOrganizationKey,
  11     Member,
  12     PartialMemberAddress,
  13     UserModel,
  14 } from '@proton/shared/lib/interfaces';
  15
  16 import AddressActions from './AddressActions';
  17 import AddressStatus from './AddressStatus';
  18 import { getPermissions, getStatus } from './helper';
  19
  20 interface AddressesTableProps {
  21     loading: boolean;
  22     hasUsername: boolean;
  23     user: UserModel;
  24     members: Member[];
  25     memberAddressesMap?: { [key: string]: (Address | PartialMemberAddress)[] | undefined };
  26     organizationKey?: CachedOrganizationKey;
  27     allowAddressDeletion: boolean;
  28 }
  29
  30 const AddressesTable = ({
  31     loading,
  32     hasUsername,
  33     user,
  34     members,
  35     memberAddressesMap,
  36     organizationKey,
  37     allowAddressDeletion,
  38 }: AddressesTableProps) => {
  39     return (
  40         <Table responsive="cards" hasActions>
  41             <TableHeader
  42                 cells={[
  43                     c('Header for addresses table').t`Address`,
  44                     hasUsername ? c('Header for addresses table').t`Username` : null,
  45                     c('Header for addresses table').t`Status`,
  46                     c('Header for addresses table').t`Actions`,
  47                 ].filter(Boolean)}
  48             />
  49             <TableBody colSpan={hasUsername ? 4 : 3} loading={loading}>
  50                 {members.flatMap((member) => {
  51                     const memberAddresses = memberAddressesMap?.[member.ID] || [];
  52                     return memberAddresses.map((address, i) => {
  53                         const emailCell = (
  54                             <div className="text-ellipsis" title={address.Email}>
  55                                 {address.Email}
  56                             </div>
  57                         );
  58                         const nameCell = hasUsername && member.Name;
  59
  60                         // Partial address getting loaded
  61                         if (!('Keys' in address)) {
  62                             return (
  63                                 <TableRow
  64                                     key={address.ID}
  65                                     cells={[
  66                                         emailCell,
  67                                         nameCell,
  68                                         <div className="visibility-hidden">
  69                                             <AddressStatus isActive />
  70                                         </div>,
  71                                         <CircleLoader />,
  72                                     ].filter(Boolean)}
  73                                 />
  74                             );
  75                         }
  76
  77                         return (
  78                             <TableRow
  79                                 key={address.ID}
  80                                 cells={[
  81                                     emailCell,
  82                                     nameCell,
  83                                     <AddressStatus {...getStatus(address, i)} />,
  84                                     <AddressActions
  85                                         member={member}
  86                                         address={address}
  87                                         user={user}
  88                                         permissions={getPermissions({
  89                                             addressIndex: i,
  90                                             member,
  91                                             address,
  92                                             addresses: memberAddresses,
  93                                             user,
  94                                             organizationKey,
  95                                         })}
  96                                         allowAddressDeletion={allowAddressDeletion}
  97                                     />,
  98                                 ].filter(Boolean)}
  99                             />
 100                         );
 101                     });
 102                 })}
 103             </TableBody>
 104         </Table>
 105     );
 106 };
 107
 108 export default AddressesTable;