فهرست منبع

fix(dashboard): Fix column alignment in order table

Michael Bromley 3 ماه پیش
والد
کامیت
9ded89ba6b

+ 26 - 27
packages/dashboard/src/app/routes/_authenticated/_orders/components/order-table-totals.tsx

@@ -10,40 +10,39 @@ export interface OrderTableTotalsProps {
 
 export function OrderTableTotals({ order, columnCount }: Readonly<OrderTableTotalsProps>) {
     const currencyCode = order.currencyCode;
-
     return (
         <>
             {order.surcharges?.length > 0
                 ? order.surcharges.map((surcharge, index) => (
-                    <TableRow key={`${surcharge.description}-${index}`}>
-                        <TableCell colSpan={columnCount - 1} className="h-12">
-                            <Trans>Surcharge</Trans>: {surcharge.description}
-                        </TableCell>
-                        <TableCell colSpan={1} className="h-12">
-                            <MoneyGrossNet
-                                priceWithTax={surcharge.priceWithTax}
-                                price={surcharge.price}
-                                currencyCode={currencyCode}
-                            />
-                        </TableCell>
-                    </TableRow>
-                ))
+                      <TableRow key={`${surcharge.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Surcharge</Trans>: {surcharge.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={surcharge.priceWithTax}
+                                  price={surcharge.price}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
                 : null}
             {order.discounts?.length > 0
                 ? order.discounts.map((discount, index) => (
-                    <TableRow key={`${discount.description}-${index}`}>
-                        <TableCell colSpan={columnCount - 1} className="h-12">
-                            <Trans>Discount</Trans>: {discount.description}
-                        </TableCell>
-                        <TableCell colSpan={1} className="h-12">
-                            <MoneyGrossNet
-                                priceWithTax={discount.amountWithTax}
-                                price={discount.amount}
-                                currencyCode={currencyCode}
-                            />
-                        </TableCell>
-                    </TableRow>
-                ))
+                      <TableRow key={`${discount.description}-${index}`}>
+                          <TableCell colSpan={columnCount - 1} className="h-12">
+                              <Trans>Discount</Trans>: {discount.description}
+                          </TableCell>
+                          <TableCell colSpan={1} className="h-12">
+                              <MoneyGrossNet
+                                  priceWithTax={discount.amountWithTax}
+                                  price={discount.amount}
+                                  currencyCode={currencyCode}
+                              />
+                          </TableCell>
+                      </TableRow>
+                  ))
                 : null}
             <TableRow>
                 <TableCell colSpan={columnCount - 1} className="h-12">

+ 1 - 2
packages/dashboard/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -154,14 +154,13 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
         customizeColumns: customizeColumns as any,
         deleteMutation: undefined,
         defaultColumnOrder: columnOrder,
-        additionalColumns: {},
         includeSelectionColumn: false,
         includeActionsColumn: false,
         enableSorting: false,
     });
 
     const columnVisibility = getColumnVisibility(columns, defaultColumnVisibility, customFieldColumnNames);
-    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length - 2; // -2 for "actions" and "selection" cols
     const data = order.lines;
 
     return (