Merge pull request #294 from AmbireTech/table-sorting

Table sorting
AmbireTech · Sep 20, 2024 · 355d2bc · 355d2bc
2 parents 0288bbd + 84ed9ce
commit 355d2bc
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 18 deletions.
diff --git a/src/components/AdminPanel/AccountDetailsElements.tsx b/src/components/AdminPanel/AccountDetailsElements.tsx
@@ -16,21 +16,25 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
     ]
       .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
-      .map((x) => {
+      .map((x, i) => {
         const sign = x.type === 'campaignOpen' ? '-' : '+'
         const color: MantineColor = sign === '-' ? 'darkred' : 'darkgreen'
         return {
-          id: x.name,
+          id: x.id + i,
           columns: [
-            { element: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text> },
+            {
+              value: x.type,
+              element: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>
+            },
             { value: x.date.getTime(), element: x.date?.toLocaleDateString() || '' },
             {
-              value: x.amount,
+              value: Number(x.amount),
               element: (
                 <Text
                   c={color}
                   tt="capitalize"
                   fw="bold"
+                  style={{ whiteSpace: 'nowrap' }}
                 >{`${sign} ${parseBigNumTokenAmountToDecimal(x.amount, x.token.decimals)}`}</Text>
               )
             },
@@ -51,6 +55,7 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
       <CustomTable
         headings={['Type', 'Date', 'Amount', 'Token', 'Tx/Campaign id']}
         data={elements}
+        defaultSortIndex={1}
         pageSize={10}
       />
     </Box>

diff --git a/src/components/AdminPanel/AdminAnalytics.tsx b/src/components/AdminPanel/AdminAnalytics.tsx
@@ -319,6 +319,7 @@ const AdminAnalytics = () => {
               ? 'Error occurred while loading analytics'
               : undefined
           }
+          defaultSortIndex={3}
           loading={loading}
           headings={headings}
           data={data.elements}

diff --git a/src/components/Billing/AccountStatements.tsx b/src/components/Billing/AccountStatements.tsx
@@ -153,6 +153,7 @@ const Statements = () => {
       </BillingDetailsModal>
       <CustomTable
         headings={columnTitles}
+        defaultSortIndex={0}
         data={elements}
         actions={actions}
         shadow="xs"

diff --git a/src/components/Billing/Invoices.tsx b/src/components/Billing/Invoices.tsx
@@ -85,6 +85,7 @@ const Invoices = () => {
         headings={columnTitles}
         data={invoiceElements}
         actions={actions}
+        defaultSortIndex={2}
         shadow="xs"
         loading={initialDataLoading}
       />

diff --git a/src/components/CampaignAnalytics/Creatives.tsx b/src/components/CampaignAnalytics/Creatives.tsx
@@ -75,6 +75,7 @@ const Creatives = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: st
       error={error}
       headings={headings}
       data={elements}
+      defaultSortIndex={2}
       loading={loading}
       tableActions={
         <DownloadCSV

diff --git a/src/components/CampaignAnalytics/Placements.tsx b/src/components/CampaignAnalytics/Placements.tsx
@@ -173,6 +173,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
       error={error}
       headings={headings}
       data={elements}
+      defaultSortIndex={1}
       loading={loading}
       selectedActions={selectedActions}
       tableActions={

diff --git a/src/components/CampaignAnalytics/Regions.tsx b/src/components/CampaignAnalytics/Regions.tsx
@@ -62,6 +62,7 @@ const Regions = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: stri
         headings={headings}
         data={elements}
         loading={loading}
+        defaultSortIndex={1}
         tableActions={
           <Group align="center" justify="end" gap="xs">
             <Button

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
@@ -180,7 +180,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
                       : 'Website'
                 },
                 {
-                  value: cmpData.campaign.status.toString(),
+                  value: getStatusOrder(cmpData.campaign.status),
                   element: <BadgeStatusCampaign type={cmpData.campaign.status} />
                 },
                 {
@@ -430,6 +430,8 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
         </Flex>
         <CustomTable
           shadow={!isAdminPanel ? 'xs' : undefined}
+          defaultSortIndex={2}
+          defaultSortDirection={1}
           headings={campaignHeaders}
           data={elements}
           actions={actions}

diff --git a/src/components/LogIn/LogIn.tsx b/src/components/LogIn/LogIn.tsx
@@ -57,7 +57,7 @@ function LogIn() {
         overlayProps={{ blur: 2 }}
       />
       <Flex h="100%" pt="xl" pb="xl" direction="column" justify="space-around" align="center">
-        <Box c="white" w={191}>
+        <Box c="brandDarker" w={191}>
           <AdExLogo />
         </Box>
         <div>

diff --git a/src/components/common/CustomTable/CustomTable.tsx b/src/components/common/CustomTable/CustomTable.tsx
@@ -59,6 +59,7 @@ export type CustomTableProps = PropsWithChildren &
     tableActions?: ReactNode
     error?: string | boolean
     defaultSortIndex?: number
+    defaultSortDirection?: 1 | -1
   }
 
 const getLabel = (label: TableRowAction['label'], actionData?: DataElement['actionData']) => {
@@ -88,10 +89,12 @@ export const CustomTable = ({
   tableActions,
   error,
   defaultSortIndex,
+  defaultSortDirection,
   ...tableProps
 }: CustomTableProps) => {
   const selectedElements = useSet<string>()
   const hasSelectActions = useMemo(() => !!selectedActions?.length, [selectedActions?.length])
+  const headingIndexOffset = useMemo(() => (hasSelectActions ? -1 : 0), [hasSelectActions])
 
   const maxItemsPerPage = pageSize || 10
 
@@ -109,8 +112,8 @@ export const CustomTable = ({
   })
 
   const [sorting, setSorting] = useState<{ sortIndex: number; sortDirection: -1 | 1 }>({
-    sortIndex: defaultSortIndex || -1,
-    sortDirection: -1
+    sortIndex: defaultSortIndex !== undefined ? defaultSortIndex : -1,
+    sortDirection: defaultSortDirection !== undefined ? defaultSortDirection : -1
   })
 
   const filteredData = useMemo(() => {
@@ -280,7 +283,7 @@ export const CustomTable = ({
         const colElement = column?.element || column?.value?.toString()
 
         return typeof colElement !== 'object' ? (
-          <Text ta="left" size="sm" truncate maw={200}>
+          <Text size="sm" truncate maw={200}>
             {colElement}
           </Text>
         ) : (
@@ -306,7 +309,17 @@ export const CustomTable = ({
       return (
         <Table.Tr key={rowKey}>
           {cols.map((c, cidx) => (
-            <Table.Td key={rowKey + cidx.toString()} c={color}>
+            <Table.Td
+              ta={
+                ['number', 'bigint'].includes(
+                  typeof rowData?.columns?.[cidx + headingIndexOffset]?.value
+                )
+                  ? 'right'
+                  : 'left'
+              }
+              key={rowKey + cidx.toString()}
+              c={color}
+            >
               {c}
             </Table.Td>
           ))}
@@ -315,10 +328,8 @@ export const CustomTable = ({
     })
 
     const colHeadings: string[] = [...headings]
-    let headingOffset = 0
     if (hasSelectActions) {
       colHeadings.unshift('select')
-      headingOffset = -1
     }
 
     if (actions?.length) {
@@ -332,8 +343,19 @@ export const CustomTable = ({
           {heading === 'select' ? (
             masterSelectAction
           ) : (
-            <Group wrap="nowrap" gap="xs" align="center">
-              {filteredData[0]?.columns[index]?.value !== undefined ? (
+            <Group
+              wrap="nowrap"
+              gap="xs"
+              align="center"
+              justify={
+                ['number', 'bigint'].includes(
+                  typeof filteredData[0]?.columns[index + headingIndexOffset]?.value
+                )
+                  ? 'right'
+                  : undefined
+              }
+            >
+              {filteredData[0]?.columns[index + headingIndexOffset]?.value !== undefined ? (
                 <Button
                   px="0"
                   tt="capitalize"
@@ -342,20 +364,20 @@ export const CustomTable = ({
                   c="mainText"
                   onClick={() => {
                     setSorting((prev) => ({
-                      sortIndex: index + headingOffset,
+                      sortIndex: index + headingIndexOffset,
                       sortDirection: prev.sortDirection < 0 ? 1 : -1
                     }))
                     setPage(1)
                   }}
                   rightSection={
-                    sorting.sortIndex === index + headingOffset && (
-                      <ActionIcon variant="transparent" c="mainText" size={14}>
+                    sorting.sortIndex === index + headingIndexOffset && (
+                      <ThemeIcon variant="transparent" c="mainText" size={14}>
                         <DownArrowIcon
                           style={{
                             transform: sorting.sortDirection > 0 ? 'rotate(180deg)' : undefined
                           }}
                         />
-                      </ActionIcon>
+                      </ThemeIcon>
                     )
                   }
                 >