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

Add sorting to tasks table

Browse Source
This commit is contained in:
Niklaus Bucher
2026-08-21 14:16:58 +02:00
committed by Gregor Vostrak
parent b2849ec04a
commit d29f5706ce
5 changed files with 277 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,18 +2,93 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { PlusCircleIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { ref } from 'vue';
import { computed, 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';
export type SortColumn = 'name' | 'spent_time' | 'progress';
export type SortDirection = 'asc' | 'desc';
const props = defineProps<{
projectId: string;
tasks: Task[];
sortColumn: SortColumn;
sortDirection: SortDirection;
}>();
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(() => [
{
id: 'name',
accessorFn: (row: Task) => row.name.toLowerCase(),
},
{
id: 'spent_time',
sortDescFirst: true,
accessorFn: (row: Task) => row.spent_time ?? 0,
},
{
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 sortedTasks = computed(() => table.getRowModel().rows.map((row) => row.original));
const createTask = ref(false);
</script>
@@ -30,8 +105,12 @@ const createTask = ref(false);
1fr minmax(80px, auto) minmax(120px, auto) minmax(50px, auto)
80px;
">
<TaskTableHeading></TaskTableHeading>
<div v-if="tasks.length === 0" class="col-span-5 py-24 text-center">
<TaskTableHeading
:sort-column="sortColumn"
:sort-direction="sortDirection"
:desc-first-columns="descFirstColumns"
@sort="handleSort"></TaskTableHeading>
<div v-if="sortedTasks.length === 0" class="col-span-5 py-24 text-center">
<PlusCircleIcon class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
<h3 class="text-text-primary font-semibold">No tasks found</h3>
<p v-if="canCreateTasks()" class="pb-5">Create your first task now!</p>
@@ -42,7 +121,7 @@ const createTask = ref(false);
>Create your First Task
</SecondaryButton>
</div>
<template v-for="task in tasks" :key="task.id">
<template v-for="task in sortedTasks" :key="task.id">
<TaskTableRow :task="task"></TaskTableRow>
</template>
</div>

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

@@ -1,14 +1,65 @@
<script setup lang="ts">
import TableHeading from '@/Components/Common/TableHeading.vue';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
const props = defineProps<{
sortColumn: SortColumn;
sortDirection: SortDirection;
descFirstColumns: ReadonlySet<SortColumn>;
}>();
const emit = defineEmits<{
sort: [column: SortColumn];
}>();
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">
<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')">
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')">
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')">
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 class="px-3 py-1.5 text-left text-text-tertiary">Total Time</div>
<div class="px-3 py-1.5 text-left text-text-tertiary">Progress</div>
<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>

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

@@ -15,6 +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 CardTitle from '@/packages/ui/src/CardTitle.vue';
import Card from '@/Components/Common/Card.vue';
import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
@@ -29,6 +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';
const { projects } = useProjectsQuery();
@@ -65,6 +67,26 @@ 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 shownTasks = computed(() => {
return tasks.value.filter((task) => {
if (activeTab.value === 'active') {
@@ -159,7 +181,12 @@ const shownTasks = computed(() => {
</template>
</CardTitle>
<Card>
<TaskTable :tasks="shownTasks" :project-id="projectId"></TaskTable>
<TaskTable
:tasks="shownTasks"
:project-id="projectId"
:sort-column="tableState.sortColumn"
:sort-direction="tableState.sortDirection"
@sort="handleSort"></TaskTable>
</Card>
</div>
<div v-if="canViewProjectMembers()">