adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-10-14 16:53:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix empty-value sorting edge cases and simplify sort components

Browse Source
This commit is contained in:
Gregor Vostrak
2026-08-26 18:11:24 +02:00
parent c9330e6cb8
commit 1edb940557
9 changed files with 67 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
@@ -10,20 +9,9 @@ const props = defineProps<{
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
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);
}
</script>
<template>
@@ -31,14 +19,17 @@ function handleSort(column: SortColumn) {
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
v-bind="props"
@sort="$emit('sort', $event)">
Name
</SortableTableHeaderCell>
<SortableTableHeaderCell column="projects_count" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell
column="projects_count"
v-bind="props"
@sort="$emit('sort', $event)">
Projects
</SortableTableHeaderCell>
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
Status
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

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

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
@@ -10,20 +9,9 @@ const props = defineProps<{
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
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);
}
</script>
<template>
@@ -31,20 +19,23 @@ function handleSort(column: SortColumn) {
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
v-bind="props"
@sort="$emit('sort', $event)">
Name
</SortableTableHeaderCell>
<SortableTableHeaderCell column="email" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="email" v-bind="props" @sort="$emit('sort', $event)">
Email
</SortableTableHeaderCell>
<SortableTableHeaderCell column="role" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="role" v-bind="props" @sort="$emit('sort', $event)">
Role
</SortableTableHeaderCell>
<SortableTableHeaderCell column="billable_rate" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell
column="billable_rate"
v-bind="props"
@sort="$emit('sort', $event)">
Billable Rate
</SortableTableHeaderCell>
<SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
Status
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">

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

@@ -87,7 +87,7 @@ const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
{
id: 'billable_rate',
sortDescFirst: true,
accessorFn: (row: Project) => row.billable_rate ?? 0,
accessorFn: (row: Project) => row.billable_rate,
},
{
id: 'status',

18
resources/js/Components/Common/SortableTableHeaderCell.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts" generic="TColumn extends string">
import { computed, useAttrs } from 'vue';
import { twMerge } from 'tailwind-merge';
import type { ClassValue } from 'clsx';
import { cn } from '@/lib/utils';
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
import type { SortDirection } from '@/utils/useSortableTable';
@@ -29,24 +30,15 @@ const isChevronDown = computed(() => {
});
const cellClass = computed(() =>
twMerge(
cn(
'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
attrs.class as ClassValue
)
);
const passthroughAttrs = computed(() => {
const { class: _class, ...rest } = attrs;
return rest;
});
</script>
<template>
<button
v-bind="passthroughAttrs"
type="button"
:class="cellClass"
@click="emit('sort', column)">
<button type="button" :class="cellClass" @click="emit('sort', column)">
<slot></slot>
<span class="sr-only">
{{

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

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
@@ -10,20 +9,9 @@ const props = defineProps<{
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
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);
}
</script>
<template>
@@ -31,8 +19,8 @@ function handleSort(column: SortColumn) {
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
v-bind="props"
@sort="$emit('sort', $event)">
Name
</SortableTableHeaderCell>
<div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

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

@@ -1,5 +1,4 @@
<script setup lang="ts">
import { computed } from 'vue';
import TableHeading from '@/Components/Common/TableHeading.vue';
import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
@@ -10,20 +9,9 @@ const props = defineProps<{
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
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);
}
</script>
<template>
@@ -31,14 +19,14 @@ function handleSort(column: SortColumn) {
<SortableTableHeaderCell
class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
column="name"
v-bind="sortState"
@sort="handleSort">
v-bind="props"
@sort="$emit('sort', $event)">
Task Name
</SortableTableHeaderCell>
<SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="spent_time" v-bind="props" @sort="$emit('sort', $event)">
Total Time
</SortableTableHeaderCell>
<SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
<SortableTableHeaderCell column="progress" v-bind="props" @sort="$emit('sort', $event)">
Progress
</SortableTableHeaderCell>
<div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>