From 4cb5a4eba20c63a6258cc664e046de0f8cc9dc52 Mon Sep 17 00:00:00 2001 From: tonyaellie Date: Tue, 18 Nov 2025 22:31:30 +0000 Subject: [PATCH] fix: disable sort on item page --- frontend/components/Item/View/Selectable.vue | 7 +++- .../components/Item/View/table/columns.ts | 38 ++++++++++++------- .../components/Item/View/table/table-view.vue | 4 +- frontend/pages/items.vue | 2 + 4 files changed, 35 insertions(+), 16 deletions(-) diff --git a/frontend/components/Item/View/Selectable.vue b/frontend/components/Item/View/Selectable.vue index 40bf13b9..73632d63 100644 --- a/frontend/components/Item/View/Selectable.vue +++ b/frontend/components/Item/View/Selectable.vue @@ -18,6 +18,7 @@ items: ItemSummary[]; locationFlatTree?: FlatTreeItem[]; pagination?: Pagination; + disableSort?: boolean; }>(); const emit = defineEmits<{ @@ -27,8 +28,10 @@ const preferences = useViewPreferences(); const { t } = useI18n(); const columns = computed(() => - makeColumns(t, () => { - emit("refresh"); + makeColumns({ + t, + refresh: () => emit("refresh"), + disableSort: props.disableSort, }) ); diff --git a/frontend/components/Item/View/table/columns.ts b/frontend/components/Item/View/table/columns.ts index 7dbcb658..449ea87c 100644 --- a/frontend/components/Item/View/table/columns.ts +++ b/frontend/components/Item/View/table/columns.ts @@ -13,18 +13,30 @@ import { cn } from "~/lib/utils"; * Create columns with i18n support. * Pass `t` from useI18n() when creating the columns in your component. */ -export function makeColumns(t: (key: string) => string, refresh?: () => void): ColumnDef[] { +export function makeColumns({ + t, + refresh, + disableSort, +}: { + t: (key: string) => string; + refresh?: () => void; + disableSort?: boolean; +}): ColumnDef[] { const sortable = (column: Column, key: string) => { const sortState = column.getIsSorted(); // 'asc' | 'desc' | false if (!sortState) { // show the neutral up/down icon when not sorted - return [t(key), h(ArrowUpDown, { class: "ml-2 h-4 w-4 opacity-40" })]; + return [t(key), h(ArrowUpDown, { class: cn(["ml-2 h-4 w-4 opacity-40", disableSort && "opacity-0"]) })]; } // show a single arrow that points up for asc (rotate-180) and down for desc return [ t(key), h(ArrowDown, { - class: cn(["ml-2 h-4 w-4 transition-transform opacity-100", sortState === "asc" ? "rotate-180" : ""]), + class: cn([ + "ml-2 h-4 w-4 transition-transform opacity-100", + sortState === "asc" ? "rotate-180" : "", + disableSort && "opacity-0", + ]), }), ]; }; @@ -58,7 +70,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.asset_id") ), @@ -72,7 +84,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.name") ), @@ -86,7 +98,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.quantity") ), @@ -100,7 +112,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.insured") ), @@ -121,7 +133,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.purchase_price") ), @@ -136,14 +148,14 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.location") ), cell: ({ row }) => { const loc = (row.original as ItemSummary).location as { id: string; name: string } | null; if (loc) { - return h("NuxtLink", { to: `/location/${loc.id}`, class: "hover:underline text-sm" }, () => loc.name); + return h("a", { href: `/location/${loc.id}`, class: "hover:underline text-sm" }, loc.name); } return h("div", { class: "text-sm text-muted-foreground" }, ""); }, @@ -156,7 +168,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.archived") ), @@ -177,7 +189,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.created_at") ), @@ -196,7 +208,7 @@ export function makeColumns(t: (key: string) => string, refresh?: () => void): C Button, { variant: "ghost", - onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), + onClick: () => !disableSort && column.toggleSorting(column.getIsSorted() === "asc"), }, () => sortable(column, "items.updated_at") ), diff --git a/frontend/components/Item/View/table/table-view.vue b/frontend/components/Item/View/table/table-view.vue index abf74a4a..b8a1c9f6 100644 --- a/frontend/components/Item/View/table/table-view.vue +++ b/frontend/components/Item/View/table/table-view.vue @@ -46,7 +46,9 @@ v-for="cell in row.getVisibleCells()" :key="cell.id" :href=" - cell.column.id !== 'select' && cell.column.id !== 'actions' ? `/item/${row.original.id}` : undefined + cell.column.id !== 'select' && cell.column.id !== 'actions' && cell.column.id !== 'location' + ? `/item/${row.original.id}` + : undefined " :class="cell.column.id === 'select' || cell.column.id === 'actions' ? 'w-10 px-3' : ''" :compact="cell.column.id === 'select' || cell.column.id === 'actions'" diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue index cd2430bd..88217a56 100644 --- a/frontend/pages/items.vue +++ b/frontend/pages/items.vue @@ -437,6 +437,7 @@ + {{ $t("items.name") }} {{ $t("items.created_at") }} {{ $t("items.updated_at") }} @@ -509,6 +510,7 @@ :items="items" :location-flat-tree="locationFlatTree" :pagination="pagination" + disable-sort @refresh="async () => search()" />