Add sorting to tasks table

e2e/tasks.spec.ts

@@ -7,13 +7,62 @@ import {
     createPublicProjectViaApi,
     createTaskViaApi,
     createClientViaApi,
+    createTimeEntryViaApi,
     updateOrganizationSettingViaApi,
+    type TestContext,
 } from './utils/api';
+import { getTableRowNames } from './utils/table';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
 }
 
+async function clearTaskTableState(page: Page) {
+    await page.evaluate(() => {
+        localStorage.removeItem('task-table-state');
+    });
+}
+
+async function createSortableTasks(ctx: TestContext) {
+    const project = await createProjectViaApi(ctx, { name: 'Task Sorting Project' });
+    const taskA = await createTaskViaApi(ctx, {
+        name: 'AAA Sorting Task',
+        project_id: project.id,
+        estimated_time: 36000,
+    });
+    const taskB = await createTaskViaApi(ctx, {
+        name: 'BBB Sorting Task',
+        project_id: project.id,
+        estimated_time: 14400,
+    });
+    const taskC = await createTaskViaApi(ctx, {
+        name: 'CCC Sorting Task',
+        project_id: project.id,
+    });
+
+    expect(taskA.estimated_time).toBe(36000);
+    expect(taskB.estimated_time).toBe(14400);
+    expect(taskC.estimated_time).toBeNull();
+
+    await createTimeEntryViaApi(ctx, {
+        duration: '1h',
+        projectId: project.id,
+        taskId: taskA.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        duration: '2h',
+        projectId: project.id,
+        taskId: taskB.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        duration: '3h',
+        projectId: project.id,
+        taskId: taskC.id,
+    });
+
+    return { project, taskA, taskB, taskC };
+}
+
 test('test that creating and deleting a new task in a new project works', async ({ page }) => {
     const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
@@ -301,6 +350,59 @@ test('test that creating a new project from the task create modal project dropdo
     await expect(page.getByTestId('task_table')).toContainText(newTaskName);
 });
 
+// =============================================
+// Sorting Tests
+// =============================================
+
+test('test that sorting tasks by name, total time and progress works', async ({ page, ctx }) => {
+    const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
+    await goToProjectsOverview(page);
+    await clearTaskTableState(page);
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
+    const table = page.getByTestId('task_table');
+    await expect(table).toBeVisible();
+
+    // This project contains only the seeded tasks, so assert the complete order.
+    const expectOrder = async (expected: string[]) => {
+        await expect.poll(() => getTableRowNames(table)).toEqual(expected);
+    };
+    const clickHeader = async (headerText: string) => {
+        await table.getByText(headerText).first().click();
+    };
+
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+    await clickHeader('Task Name');
+    await expectOrder([taskC.name, taskB.name, taskA.name]);
+    await clickHeader('Task Name');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+
+    await clickHeader('Total Time');
+    await expectOrder([taskC.name, taskB.name, taskA.name]);
+    await clickHeader('Total Time');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+
+    await clickHeader('Progress');
+    await expectOrder([taskB.name, taskA.name, taskC.name]);
+    await clickHeader('Progress');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+});
+
+test('test that task sort state persists after page reload', async ({ page, ctx }) => {
+    const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
+    await goToProjectsOverview(page);
+    await clearTaskTableState(page);
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
+    const table = page.getByTestId('task_table');
+    await expect(table).toBeVisible();
+
+    await table.getByText('Progress').first().click();
+    await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
+    await page.reload();
+
+    // Verify the persisted row order, not just the sort indicator.
+    await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
+});
+
 // =============================================
 // Employee Permission Tests
 // =============================================

e2e/utils/api.ts

@@ -357,7 +357,7 @@ export async function createProjectWithClientViaApi(
 
 export async function createTaskViaApi(
     ctx: TestContext,
-    data: { name: string; project_id: string }
+    data: { name: string; project_id: string; estimated_time?: number }
 ) {
     const response = await ctx.request.post(
         `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/tasks`,
@@ -365,12 +365,20 @@ export async function createTaskViaApi(
             data: {
                 name: data.name,
                 project_id: data.project_id,
+                ...(data.estimated_time !== undefined
+                    ? { estimated_time: data.estimated_time }
+                    : {}),
             },
         }
     );
     expect(response.status()).toBe(201);
     const body = await response.json();
-    return body.data as { id: string; name: string; project_id: string };
+    return body.data as {
+        id: string;
+        name: string;
+        project_id: string;
+        estimated_time: number | null;
+    };
 }
 
 export async function markTaskDoneViaApi(ctx: TestContext, task: { id: string; name: string }) {

resources/js/Components/Common/Task/TaskTable.vue

@@ -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>
+                <TaskTableHeading
-                <div v-if="tasks.length === 0" class="col-span-5 py-24 text-center">
+                    :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>

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -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>

resources/js/Pages/ProjectShow.vue

@@ -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()">