mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-09-30 09:13:11 +00:00
refactor(vendors): satisfy row maintainability gate
This commit is contained in:
parent
c587122b16
commit
7eb3308a06
1 changed files with 45 additions and 33 deletions
|
|
@ -135,11 +135,54 @@ interface VendorTableRowProps {
|
|||
onOpenEdit: (row: VendorListItem) => void;
|
||||
}
|
||||
|
||||
function VendorTradeCell({
|
||||
primaryTrade,
|
||||
omittedTrades,
|
||||
}: {
|
||||
primaryTrade: string;
|
||||
omittedTrades: string[];
|
||||
}) {
|
||||
const extraTrades = omittedTrades.length;
|
||||
return (
|
||||
<TableCell sx={{ color: "var(--color-muted-foreground)" }}>
|
||||
{primaryTrade === "—" ? (
|
||||
"—"
|
||||
) : (
|
||||
<Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
|
||||
<span>{primaryTrade}</span>
|
||||
{extraTrades > 0 && (
|
||||
<Tooltip title={omittedTrades.join(", ")} placement="top" arrow>
|
||||
<Box
|
||||
component="span"
|
||||
tabIndex={0}
|
||||
aria-label={`+${extraTrades} more ${extraTrades === 1 ? "trade" : "trades"}: ${omittedTrades.join(", ")}`}
|
||||
data-testid="vendor-trade-badge"
|
||||
className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
|
||||
onClick={stopPropagation}
|
||||
onKeyDown={stopTradeBadgeKeyDown}
|
||||
sx={{
|
||||
borderRadius: "9999px",
|
||||
backgroundColor: "var(--color-bg-muted)",
|
||||
px: 0.75,
|
||||
py: 0.25,
|
||||
fontSize: 10.5,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
+{extraTrades}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
|
||||
function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
|
||||
const trades = splitTrades(row.tradeSpecialties);
|
||||
const primaryTrade = trades[0] ?? "—";
|
||||
const omittedTrades = trades.slice(1);
|
||||
const extraTrades = omittedTrades.length;
|
||||
const { locationText, phoneText } = getVendorDisplayValues(row);
|
||||
const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
|
||||
|
||||
|
|
@ -204,38 +247,7 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
|
|||
color="var(--color-muted-foreground)"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell sx={{ color: "var(--color-muted-foreground)" }}>
|
||||
{primaryTrade === "—" ? (
|
||||
"—"
|
||||
) : (
|
||||
<Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
|
||||
<span>{primaryTrade}</span>
|
||||
{extraTrades > 0 && (
|
||||
<Tooltip title={omittedTrades.join(", ")} placement="top" arrow>
|
||||
<Box
|
||||
component="span"
|
||||
tabIndex={0}
|
||||
aria-label={`+${extraTrades} more ${extraTrades === 1 ? "trade" : "trades"}: ${omittedTrades.join(", ")}`}
|
||||
data-testid="vendor-trade-badge"
|
||||
className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
|
||||
onClick={stopPropagation}
|
||||
onKeyDown={stopTradeBadgeKeyDown}
|
||||
sx={{
|
||||
borderRadius: "9999px",
|
||||
backgroundColor: "var(--color-bg-muted)",
|
||||
px: 0.75,
|
||||
py: 0.25,
|
||||
fontSize: 10.5,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
+{extraTrades}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Stack>
|
||||
)}
|
||||
</TableCell>
|
||||
<VendorTradeCell primaryTrade={primaryTrade} omittedTrades={omittedTrades} />
|
||||
<TableCell sx={{ color: "var(--color-muted-foreground)", overflow: "hidden" }}>
|
||||
<TruncatedText
|
||||
value={phoneText || "—"}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue