adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-10-07 21:33:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor table sorting to composables and shared SortableTableHeaderCell

Browse Source
This commit is contained in:
Gregor Vostrak
2026-08-26 14:46:00 +02:00
parent d29f5706ce
commit 0e9f652d84
24 changed files with 596 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/Components/Common/Client/ClientTable.vue
View File

@@ -11,14 +11,13 @@ import Pagination from '@/Components/Common/Pagination.vue';
import { canCreateClients } from '@/utils/permissions';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
useSortableTable,
type SortableColumnDef,
type SortDirection,
} from '@/utils/useSortableTable';
export type SortColumn = 'name' | 'projects_count' | 'status';
export type SortDirection = 'asc' | 'desc';
export type { SortDirection } from '@/utils/useSortableTable';
const props = defineProps<{
clients: Client[];
@@ -44,17 +43,7 @@ const projectCountMap = computed(() => {
return map;
});
// Name is always the secondary sort so rows with equal values render
// alphabetically instead of in API (created_at) order.
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
]);
const columns = computed(() => [
const columns = computed<SortableColumnDef<Client, SortColumn>[]>(() => [
{
id: 'name',
accessorFn: (row: Client) => row.name.toLowerCase(),
@@ -70,41 +59,22 @@ const columns = computed(() => [
},
]);
const descFirstColumns = new Set<SortColumn>(
columns.value
.filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
.map((c) => c.id as SortColumn)
);
const {
sortedRows: sortedClients,
descFirstColumns,
nextDirection,
} = useSortableTable({
data: () => props.clients,
columns: () => columns.value,
sortColumn: () => props.sortColumn,
sortDirection: () => props.sortDirection,
tieBreakColumn: 'name',
});
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
emit('sort', column, nextDirection(column));
}
const table = useVueTable({
get data() {
return props.clients;
},
get columns() {
return columns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedClients = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
// Client-side pagination: the full list is in memory, only one page is mounted at a time.
const PAGE_SIZE = 15;
const currentPage = ref(1);

57
resources/js/Components/Common/Client/ClientTableHeading.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
const props = defineProps<{
@@ -13,53 +14,33 @@ const emit = defineEmits<{
sort: [column: SortColumn];
}>();
// Bound once per cell instead of repeating the three sort props on every column.
const sortState = computed(() => ({
sortColumn: props.sortColumn,
sortDirection: props.sortDirection,
descFirstColumns: props.descFirstColumns,
}));
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('projects_count')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="projects_count" v-bind="sortState" @sort="handleSort">
Projects
<ChevronDownIcon v-if="isChevronDown('projects_count')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('projects_count')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
Status
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

61
resources/js/Components/Common/Member/MemberTable.vue
View File

@@ -3,16 +3,14 @@ import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vu
import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
import { useMembersQuery } from '@/utils/useMembersQuery';
import type { Member } from '@/packages/api/src';
import { computed } from 'vue';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
useSortableTable,
type SortableColumnDef,
type SortDirection,
} from '@/utils/useSortableTable';
export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
export type SortDirection = 'asc' | 'desc';
export type { SortDirection } from '@/utils/useSortableTable';
const props = defineProps<{
sortColumn: SortColumn;
@@ -33,14 +31,7 @@ const roleOrder: Record<string, number> = {
placeholder: 4,
};
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
]);
const columns = [
const columns: SortableColumnDef<Member, SortColumn>[] = [
{
id: 'name',
accessorFn: (row: Member) => row.name.toLowerCase(),
@@ -56,7 +47,6 @@ const columns = [
{
id: 'billable_rate',
sortDescFirst: true,
sortUndefined: 'last' as const,
accessorFn: (row: Member) => {
if (row.billable_rate === null) return undefined;
return row.billable_rate;
@@ -68,36 +58,21 @@ const columns = [
},
];
const descFirstColumns = new Set<SortColumn>(
columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
);
const {
sortedRows: sortedMembers,
descFirstColumns,
nextDirection,
} = useSortableTable({
data: () => members.value,
columns: () => columns,
sortColumn: () => props.sortColumn,
sortDirection: () => props.sortDirection,
tieBreakColumn: 'name',
});
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
emit('sort', column, nextDirection(column));
}
const table = useVueTable({
get data() {
return members.value;
},
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedMembers = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
</script>
<template>

75
resources/js/Components/Common/Member/MemberTableHeading.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
const props = defineProps<{
@@ -13,69 +14,39 @@ const emit = defineEmits<{
sort: [column: SortColumn];
}>();
// Bound once per cell instead of repeating the three sort props on every column.
const sortState = computed(() => ({
sortColumn: props.sortColumn,
sortDirection: props.sortDirection,
descFirstColumns: props.descFirstColumns,
}));
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('email')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="email" v-bind="sortState" @sort="handleSort">
Email
<ChevronDownIcon v-if="isChevronDown('email')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('email')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('role')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="role" v-bind="sortState" @sort="handleSort">
Role
<ChevronDownIcon v-if="isChevronDown('role')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('role')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('billable_rate')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="billable_rate" v-bind="sortState" @sort="handleSort">
Billable Rate
<ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
Status
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
<span class="sr-only">Edit</span>
</div>

70
resources/js/Components/Common/Project/ProjectTable.vue
View File

@@ -16,7 +16,7 @@ export type SortColumn =
| 'billable_rate'
| 'status'
| 'visibility';
export type SortDirection = 'asc' | 'desc';
export type { SortDirection } from '@/utils/useSortableTable';
import { canCreateProjects } from '@/utils/permissions';
import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
import { useProjectsStore } from '@/utils/useProjects';
@@ -27,11 +27,10 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
import { getCurrentOrganizationId } from '@/utils/useUser';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
useSortableTable,
type SortableColumnDef,
type SortDirection,
} from '@/utils/useSortableTable';
const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
@@ -57,28 +56,16 @@ const clientNameMap = computed(() => {
return map;
});
// Convert sort props to TanStack Table format.
// Name is always the secondary sort so rows with equal values render
// alphabetically instead of in API (created_at) order.
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
]);
// Define column accessors for sorting.
// Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
// while text columns default to ascending (A-Z) on first click (chevron down).
const columns = computed(() => [
const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
{
id: 'name',
accessorFn: (row: Project) => row.name.toLowerCase(),
},
{
id: 'client_name',
sortUndefined: 'last' as const,
accessorFn: (row: Project) => {
if (!row.client_id) return undefined;
return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
@@ -87,12 +74,11 @@ const columns = computed(() => [
{
id: 'spent_time',
sortDescFirst: true,
accessorFn: (row: Project) => row.spent_time ?? 0,
accessorFn: (row: Project) => row.spent_time,
},
{
id: 'progress',
sortDescFirst: true,
sortUndefined: 'last' as const,
accessorFn: (row: Project) => {
if (!row.estimated_time) return undefined;
return (row.spent_time / row.estimated_time) * 100;
@@ -113,40 +99,22 @@ const columns = computed(() => [
},
]);
// Columns with sortDescFirst get desc as default direction on first click.
const descFirstColumns = new Set<SortColumn>(
columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
);
const {
sortedRows: sortedProjects,
descFirstColumns,
nextDirection,
} = useSortableTable({
data: () => props.projects,
columns: () => columns.value,
sortColumn: () => props.sortColumn,
sortDirection: () => props.sortDirection,
tieBreakColumn: 'name',
});
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
emit('sort', column, nextDirection(column));
}
const table = useVueTable({
get data() {
return props.projects;
},
get columns() {
return columns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedProjects = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
// Client-side pagination: the full list is in memory, only one page is mounted at a time.
const PAGE_SIZE = 15;
const currentPage = ref(1);

98
resources/js/Components/Common/Project/ProjectTableHeading.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
const props = defineProps<{
@@ -14,90 +15,51 @@ const emit = defineEmits<{
sort: [column: SortColumn];
}>();
// Bound once per cell instead of repeating the three sort props on every column.
const sortState = computed(() => ({
sortColumn: props.sortColumn,
sortDirection: props.sortDirection,
descFirstColumns: props.descFirstColumns,
}));
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('client_name')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="client_name" v-bind="sortState" @sort="handleSort">
Client
<ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('client_name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('spent_time')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
Total Time
<ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('progress')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
Progress
<ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
</SortableTableHeaderCell>
<SortableTableHeaderCell
v-if="showBillableRate"
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('billable_rate')">
column="billable_rate"
v-bind="sortState"
@sort="handleSort">
Billable Rate
<ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('status')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
Status
<ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('visibility')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="visibility" v-bind="sortState" @sort="handleSort">
Visibility
<ChevronDownIcon v-if="isChevronDown('visibility')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('visibility')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>
</TableHeading>
</template>
<style scoped></style>

62
resources/js/Components/Common/SortableTableHeaderCell.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts" generic="TColumn extends string">
import { computed, useAttrs } from 'vue';
import { twMerge } from 'tailwind-merge';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import type { SortDirection } from '@/utils/useSortableTable';
defineOptions({ inheritAttrs: false });
const props = defineProps<{
column: TColumn;
sortColumn: TColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<TColumn>;
}>();
const emit = defineEmits<{
sort: [column: TColumn];
}>();
const attrs = useAttrs();
const isSorted = computed(() => props.sortColumn === props.column);
const isChevronDown = computed(() => {
if (!isSorted.value) return false;
return props.descFirstColumns.has(props.column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
});
const cellClass = computed(() =>
twMerge(
'px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1',
attrs.class as string | undefined
)
);
const passthroughAttrs = computed(() => {
const { class: _class, ...rest } = attrs;
return rest;
});
</script>
<template>
<button
v-bind="passthroughAttrs"
type="button"
:class="cellClass"
@click="emit('sort', column)">
<slot></slot>
<span class="sr-only">
{{
isSorted
? `sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}`
: 'not sorted'
}}
</span>
<ChevronDownIcon v-if="isChevronDown" aria-hidden="true" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isSorted" aria-hidden="true" class="w-4 h-4" />
<span v-else aria-hidden="true" class="w-4 h-4"></span>
</button>
</template>

60
resources/js/Components/Common/Tag/TagTable.vue
View File

@@ -2,7 +2,7 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { FolderPlusIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useTagsQuery } from '@/utils/useTagsQuery';
import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
@@ -10,14 +10,13 @@ import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
import { canCreateTags } from '@/utils/permissions';
import type { Tag } from '@/packages/api/src';
import {
useVueTable,
getCoreRowModel,
getSortedRowModel,
type SortingState,
} from '@tanstack/vue-table';
useSortableTable,
type SortableColumnDef,
type SortDirection,
} from '@/utils/useSortableTable';
export type SortColumn = 'name';
export type SortDirection = 'asc' | 'desc';
export type { SortDirection } from '@/utils/useSortableTable';
const props = defineProps<{
createTag: (name: string) => Promise<Tag | undefined>;
@@ -32,50 +31,27 @@ const emit = defineEmits<{
const { tags } = useTagsQuery();
const showCreateTagModal = ref(false);
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
]);
const columns = [
const columns: SortableColumnDef<Tag, SortColumn>[] = [
{
id: 'name',
accessorFn: (row: Tag) => row.name.toLowerCase(),
},
];
const descFirstColumns = new Set<SortColumn>(
columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
);
const {
sortedRows: sortedTags,
descFirstColumns,
nextDirection,
} = useSortableTable({
data: () => tags.value,
columns: () => columns,
sortColumn: () => props.sortColumn,
sortDirection: () => props.sortDirection,
});
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
emit('sort', column, nextDirection(column));
}
const table = useVueTable({
get data() {
return tags.value;
},
columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedTags = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
</script>
<template>

39
resources/js/Components/Common/Tag/TagTableHeading.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
const props = defineProps<{
@@ -13,37 +14,27 @@ const emit = defineEmits<{
sort: [column: SortColumn];
}>();
// Bound once per cell instead of repeating the three sort props on every column.
const sortState = computed(() => ({
sortColumn: props.sortColumn,
sortDirection: props.sortDirection,
descFirstColumns: props.descFirstColumns,
}));
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>

70
resources/js/Components/Common/Task/TaskTable.vue
View File

@@ -2,21 +2,20 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { PlusCircleIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
import { canCreateTasks } from '@/utils/permissions';
import type { Task } from '@/packages/api/src';
import {
getCoreRowModel,
getSortedRowModel,
type SortingState,
useVueTable,
} from '@tanstack/vue-table';
useSortableTable,
type SortableColumnDef,
type SortDirection,
} from '@/utils/useSortableTable';
export type SortColumn = 'name' | 'spent_time' | 'progress';
export type SortDirection = 'asc' | 'desc';
export type { SortDirection } from '@/utils/useSortableTable';
const props = defineProps<{
projectId: string;
@@ -29,15 +28,7 @@ const emit = defineEmits<{
sort: [column: SortColumn, direction: SortDirection];
}>();
const sorting = computed<SortingState>(() => [
{
id: props.sortColumn,
desc: props.sortDirection === 'desc',
},
...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
]);
const columns = computed(() => [
const columns: SortableColumnDef<Task, SortColumn>[] = [
{
id: 'name',
accessorFn: (row: Task) => row.name.toLowerCase(),
@@ -45,49 +36,33 @@ const columns = computed(() => [
{
id: 'spent_time',
sortDescFirst: true,
accessorFn: (row: Task) => row.spent_time ?? 0,
accessorFn: (row: Task) => row.spent_time,
},
{
id: 'progress',
sortDescFirst: true,
sortUndefined: 'last' as const,
accessorFn: (row: Task) => {
if (!row.estimated_time) return undefined;
return (row.spent_time / row.estimated_time) * 100;
},
},
]);
];
const descFirstColumns = new Set<SortColumn>(
columns.value.filter((column) => column.sortDescFirst).map((column) => column.id as SortColumn)
);
function handleSort(column: SortColumn) {
if (props.sortColumn === column) {
emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
} else {
emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
}
}
const table = useVueTable({
get data() {
return props.tasks;
},
get columns() {
return columns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
const {
sortedRows: sortedTasks,
descFirstColumns,
nextDirection,
} = useSortableTable({
data: () => props.tasks,
columns: () => columns,
sortColumn: () => props.sortColumn,
sortDirection: () => props.sortDirection,
tieBreakColumn: 'name',
});
const sortedTasks = computed(() => table.getRowModel().rows.map((row) => row.original));
function handleSort(column: SortColumn) {
emit('sort', column, nextDirection(column));
}
const createTask = ref(false);
</script>
@@ -98,7 +73,6 @@ const createTask = ref(false);
<div class="inline-block min-w-full align-middle">
<div
data-testid="task_table"
role="table"
class="grid min-w-full"
style="
grid-template-columns:

59
resources/js/Components/Common/Task/TaskTableHeading.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
const props = defineProps<{
@@ -13,58 +14,36 @@ const emit = defineEmits<{
sort: [column: SortColumn];
}>();
// Bound once per cell instead of repeating the three sort props on every column.
const sortState = computed(() => ({
sortColumn: props.sortColumn,
sortDirection: props.sortDirection,
descFirstColumns: props.descFirstColumns,
}));
function handleSort(column: SortColumn) {
emit('sort', column);
}
function isSorted(column: SortColumn): boolean {
return props.sortColumn === column;
}
function isChevronDown(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return props.descFirstColumns.has(column)
? props.sortDirection === 'desc'
: props.sortDirection === 'asc';
}
function isChevronUp(column: SortColumn): boolean {
if (!isSorted(column)) return false;
return !isChevronDown(column);
}
</script>
<template>
<TableHeading>
<div
class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('name')">
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
Task Name
<ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('spent_time')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
Total Time
<ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
<div
class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
@click="handleSort('progress')">
</SortableTableHeaderCell>
<SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
Progress
<ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
<ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
<span v-else class="w-4 h-4"></span>
</div>
</SortableTableHeaderCell>
<div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<span class="sr-only">Edit</span>
</div>
</TableHeading>
</template>
<style scoped></style>

27
resources/js/Pages/Clients.vue
View File

@@ -11,8 +11,8 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
import PageTitle from '@/Components/Common/PageTitle.vue';
import { canCreateClients } from '@/utils/permissions';
import { TabBar, TabBarItem } from '@/packages/ui/src';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
import { useTableSortState } from '@/utils/useTableSortState';
import type { SortColumn } from '@/Components/Common/Client/ClientTable.vue';
const { clients } = useClientsQuery();
@@ -20,25 +20,10 @@ const activeTab = ref<'active' | 'archived'>('active');
const createClient = ref(false);
interface ClientTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<ClientTableState>(
'client-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
const { tableState, handleSort } = useTableSortState<SortColumn>('client-table-state', {
sortColumn: 'name',
sortDirection: 'asc',
});
const shownClients = computed(() => {
return clients.value.filter((client) => {

27
resources/js/Pages/Members.vue
View File

@@ -12,8 +12,8 @@ import type { Role } from '@/types/jetstream';
import PageTitle from '@/Components/Common/PageTitle.vue';
import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
import { canCreateInvitations } from '@/utils/permissions';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
import { useTableSortState } from '@/utils/useTableSortState';
import type { SortColumn } from '@/Components/Common/Member/MemberTable.vue';
const inviteMember = ref(false);
@@ -23,25 +23,10 @@ defineProps<{
const activeTab = ref<'all' | 'invitations'>('all');
interface MemberTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<MemberTableState>(
'member-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
const { tableState, handleSort } = useTableSortState<SortColumn>('member-table-state', {
sortColumn: 'name',
sortDirection: 'asc',
});
</script>
<template>

27
resources/js/Pages/ProjectShow.vue
View File

@@ -15,7 +15,7 @@ import {
import { Link } from '@inertiajs/vue3';
import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
import TaskTable from '@/Components/Common/Task/TaskTable.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
import type { SortColumn } from '@/Components/Common/Task/TaskTable.vue';
import CardTitle from '@/packages/ui/src/CardTitle.vue';
import Card from '@/Components/Common/Card.vue';
import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
@@ -30,7 +30,7 @@ import { formatCents } from '../packages/ui/src/utils/money';
import { getOrganizationCurrencyString } from '../utils/money';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useStorage } from '@vueuse/core';
import { useTableSortState } from '@/utils/useTableSortState';
const { projects } = useProjectsQuery();
@@ -67,25 +67,10 @@ const activeTab = ref<'active' | 'done'>('active');
const { tasks } = useTasksQuery();
interface TaskTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<TaskTableState>(
'task-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
const { tableState, handleSort } = useTableSortState<SortColumn>('task-table-state', {
sortColumn: 'name',
sortDirection: 'asc',
});
const shownTasks = computed(() => {
return tasks.value.filter((task) => {

23
resources/js/Pages/Projects.vue
View File

@@ -18,6 +18,7 @@ import { getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
import { isAllowedToPerformPremiumAction } from '@/utils/billing';
import { useStorage } from '@vueuse/core';
import { useTableSortState } from '@/utils/useTableSortState';
import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDropdown.vue';
import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
import ProjectVisibilityFilterBadge from '@/Components/Common/Project/ProjectVisibilityFilterBadge.vue';
@@ -41,7 +42,7 @@ interface ProjectTableState {
};
}
const tableState = useStorage<ProjectTableState>(
const { tableState, handleSort } = useTableSortState<SortColumn, ProjectTableState>(
'project-table-state',
{
sortColumn: 'name',
@@ -52,21 +53,15 @@ const tableState = useStorage<ProjectTableState>(
visibility: 'all',
},
},
undefined,
{
mergeDefaults: (storage, defaults) => ({
...defaults,
...storage,
filters: { ...defaults.filters, ...storage.filters },
}),
}
// The filters are merged key by key so a stored value missing a newer filter still
// picks up its default instead of the whole object falling back.
(storage, defaults) => ({
...defaults,
...storage,
filters: { ...defaults.filters, ...storage.filters },
})
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
// Filter projects based on current filters
const filteredProjects = computed(() => {
return projects.value.filter((project) => {

27
resources/js/Pages/Tags.vue
View File

@@ -9,30 +9,15 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
import PageTitle from '@/Components/Common/PageTitle.vue';
import { canCreateTags } from '@/utils/permissions';
import { useTagsStore } from '@/utils/useTags';
import { useStorage } from '@vueuse/core';
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
import { useTableSortState } from '@/utils/useTableSortState';
import type { SortColumn } from '@/Components/Common/Tag/TagTable.vue';
const showCreateTagModal = ref(false);
interface TagTableState {
sortColumn: SortColumn;
sortDirection: SortDirection;
}
const tableState = useStorage<TagTableState>(
'tag-table-state',
{
sortColumn: 'name',
sortDirection: 'asc',
},
undefined,
{ mergeDefaults: true }
);
function handleSort(column: SortColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
const { tableState, handleSort } = useTableSortState<SortColumn>('tag-table-state', {
sortColumn: 'name',
sortDirection: 'asc',
});
async function createTag(tag: string) {
return await useTagsStore().createTag(tag);

123
resources/js/utils/useSortableTable.ts Normal file
View File

@@ -0,0 +1,123 @@
import {
getCoreRowModel,
getSortedRowModel,
sortingFns,
type ColumnDef,
type Row,
type SortingFn,
type SortingState,
useVueTable,
} from '@tanstack/vue-table';
import { computed, type ComputedRef } from 'vue';
export type SortDirection = 'asc' | 'desc';
/**
* The comparator every sortable column gets: a row whose accessor returns `undefined`
* sorts to the bottom in both directions, and two such rows compare as equal so the
* tie-break decides their order.
*
* TanStack cannot express that combination. Its `sortUndefined: 'last'` keeps empty rows
* at the bottom but returns a non-zero result even when both rows are empty, which
* swallows the tie-break and leaves those rows in API (created_at) order; its default of
* `1` returns zero for that case but flips empty rows to the top when descending.
*/
function sortEmptyLast<TData>(getDirection: () => SortDirection): SortingFn<TData> {
return (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => {
const a = rowA.getValue(columnId);
const b = rowB.getValue(columnId);
if (a === undefined && b === undefined) {
return 0;
}
if (a === undefined || b === undefined) {
const emptyLast = a === undefined ? 1 : -1;
return getDirection() === 'desc' ? -emptyLast : emptyLast;
}
return typeof a === 'string' || typeof b === 'string'
? sortingFns.alphanumeric(rowA, rowB, columnId)
: sortingFns.basic(rowA, rowB, columnId);
};
}
/**
* A column definition whose `id` has to be one of the table's sortable columns, so a
* renamed or mistyped id is a compile error rather than a column that silently stops
* sorting: TanStack drops sort entries for ids it cannot resolve, leaving the rows in
* their original order with no chevron and no error.
*/
export type SortableColumnDef<TData, TColumn extends string> = ColumnDef<TData, unknown> & {
id: TColumn;
};
export function useSortableTable<TData, TColumn extends string>(options: {
data: () => TData[];
columns: () => SortableColumnDef<TData, TColumn>[];
sortColumn: () => TColumn;
sortDirection: () => SortDirection;
tieBreakColumn?: TColumn;
}): {
sortedRows: ComputedRef<TData[]>;
descFirstColumns: ComputedRef<ReadonlySet<TColumn>>;
nextDirection: (column: TColumn) => SortDirection;
} {
const sorting = computed<SortingState>(() => [
{
id: options.sortColumn(),
desc: options.sortDirection() === 'desc',
},
...(options.tieBreakColumn && options.sortColumn() !== options.tieBreakColumn
? [{ id: options.tieBreakColumn, desc: false }]
: []),
]);
const resolvedColumns = computed<ColumnDef<TData, unknown>[]>(() =>
options.columns().map((column) =>
column.sortingFn
? column
: {
...column,
sortUndefined: false as const,
sortingFn: sortEmptyLast<TData>(options.sortDirection),
}
)
);
const descFirstColumns = computed<ReadonlySet<TColumn>>(
() =>
new Set(
options
.columns()
.filter((column) => column.sortDescFirst)
.map((column) => column.id)
)
);
function nextDirection(column: TColumn): SortDirection {
if (options.sortColumn() === column) {
return options.sortDirection() === 'asc' ? 'desc' : 'asc';
}
return descFirstColumns.value.has(column) ? 'desc' : 'asc';
}
const table = useVueTable({
get data() {
return options.data();
},
get columns() {
return resolvedColumns.value;
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value;
},
},
manualSorting: false,
});
const sortedRows = computed(() => table.getRowModel().rows.map((row) => row.original));
return { sortedRows, descFirstColumns, nextDirection };
}

32
resources/js/utils/useTableSortState.ts Normal file
View File

@@ -0,0 +1,32 @@
import { useStorage } from '@vueuse/core';
import type { SortDirection } from '@/utils/useSortableTable';
export interface TableSortState<TColumn extends string> {
sortColumn: TColumn;
sortDirection: SortDirection;
}
/**
* The sort a table page remembers between visits, persisted in localStorage.
*
* Pages that persist more than the sort (filters, for example) pass the wider defaults
* and get them back on `tableState`; `mergeDefaults` is forwarded to `useStorage` so
* nested state can be merged key by key rather than wholesale.
*/
export function useTableSortState<
TColumn extends string,
TState extends TableSortState<TColumn> = TableSortState<TColumn>,
>(
key: string,
defaults: TState,
mergeDefaults: boolean | ((storageValue: TState, defaults: TState) => TState) = true
) {
const tableState = useStorage<TState>(key, defaults, undefined, { mergeDefaults });
function handleSort(column: TColumn, direction: SortDirection) {
tableState.value.sortColumn = column;
tableState.value.sortDirection = direction;
}
return { tableState, handleSort };
}