mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-06-15 05:22:44 +01:00
Compare commits
3 Commits
8682cd1817
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c068eca2e | ||
|
|
cb5c2547f4 | ||
|
|
13a25524f3 |
812
package-lock.json
generated
812
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -28,30 +28,30 @@
|
||||
"@eslint/eslintrc": "^3.2.0",
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@inertiajs/vue3": "^2.0.0",
|
||||
"@playwright/test": "^1.41.1",
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/chroma-js": "^3.1.0",
|
||||
"@types/node": "^22.10.10",
|
||||
"@vitejs/plugin-vue": "^6.0.3",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.8.0",
|
||||
"@vitejs/plugin-vue": "^6.0.7",
|
||||
"@vue/test-utils": "^2.4.10",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"axios": "^1.6.4",
|
||||
"axios": "^1.16.1",
|
||||
"eslint-plugin-unused-imports": "^4.1.4",
|
||||
"happy-dom": "^20.8.9",
|
||||
"laravel-vite-plugin": "^2.1.0",
|
||||
"openapi-zod-client": "^1.16.2",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss": "^8.5.15",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-nesting": "^12.1.5",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^7.0.0",
|
||||
"vite-plugin-checker": "^0.12.0",
|
||||
"vitest": "^4.1.4",
|
||||
"vue": "^3.5.0",
|
||||
"vue-tsc": "^3.0.0"
|
||||
"vite-plugin-checker": "^0.14.1",
|
||||
"vitest": "^4.1.7",
|
||||
"vue": "^3.5.35",
|
||||
"vue-tsc": "^3.3.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.6.0",
|
||||
@@ -59,26 +59,26 @@
|
||||
"@heroicons/vue": "^2.1.1",
|
||||
"@rushstack/eslint-patch": "^1.10.5",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tanstack/vue-form": "^1.3.1",
|
||||
"@tanstack/vue-query": "^5.56.2",
|
||||
"@tanstack/vue-form": "^1.33.0",
|
||||
"@tanstack/vue-query": "^5.100.14",
|
||||
"@tanstack/vue-query-devtools": "^5.58.0",
|
||||
"@tanstack/vue-table": "^8.21.2",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.3.0",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"@vueuse/integrations": "^14.0.0",
|
||||
"@vueuse/core": "^14.3.0",
|
||||
"@vueuse/integrations": "^14.3.0",
|
||||
"@zodios/core": "^10.9.6",
|
||||
"chroma-js": "3.1.2",
|
||||
"chroma-js": "3.2.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.11",
|
||||
"echarts": "^6.0.0",
|
||||
"focus-trap": "^8.0.0",
|
||||
"dayjs": "^1.11.21",
|
||||
"echarts": "^6.1.0",
|
||||
"focus-trap": "^8.2.1",
|
||||
"lucide-vue-next": "^0.487.0",
|
||||
"parse-duration": "^2.0.1",
|
||||
"pinia": "^3.0.0",
|
||||
"radix-vue": "^1.9.6",
|
||||
"reka-ui": "2.8.2",
|
||||
"reka-ui": "2.9.8",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vue-echarts": "^8.0.0",
|
||||
|
||||
@@ -62,4 +62,35 @@ describe('TimesheetCell', () => {
|
||||
expect(wrapper.emitted('update')).toBeUndefined();
|
||||
expect((input.element as HTMLInputElement).value).toBe(previousValue);
|
||||
});
|
||||
|
||||
it('shows a pending 0 (delete in flight) over the cell total', () => {
|
||||
const wrapper = mount(TimesheetCell, {
|
||||
props: {
|
||||
cell: buildCell(2 * 3600),
|
||||
dayIndex: 0,
|
||||
date: '2026-04-13',
|
||||
isToday: false,
|
||||
hasRunningEntry: false,
|
||||
pendingSeconds: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// `??` (not `||`): a pending 0 must win over the 2h cell total.
|
||||
expect((wrapper.get('input').element as HTMLInputElement).value).toBe('');
|
||||
});
|
||||
|
||||
it('disables editing while the cell is saving', () => {
|
||||
const wrapper = mount(TimesheetCell, {
|
||||
props: {
|
||||
cell: buildCell(2 * 3600),
|
||||
dayIndex: 0,
|
||||
date: '2026-04-13',
|
||||
isToday: false,
|
||||
hasRunningEntry: false,
|
||||
saveStatus: 'saving',
|
||||
},
|
||||
});
|
||||
|
||||
expect((wrapper.get('input').element as HTMLInputElement).disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { CheckIcon } from '@heroicons/vue/16/solid';
|
||||
import DurationSecondsInput from '@/packages/ui/src/Input/DurationSecondsInput.vue';
|
||||
import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -7,18 +10,40 @@ import {
|
||||
TooltipTrigger,
|
||||
} from '@/packages/ui/src/tooltip';
|
||||
import type { TimesheetCell } from '@/utils/useTimesheetGrid';
|
||||
import type { CellSaveStatus } from '@/utils/timesheet/useTimesheetCellMutations';
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
cell?: TimesheetCell;
|
||||
dayIndex: number;
|
||||
date: string;
|
||||
isToday: boolean;
|
||||
hasRunningEntry: boolean;
|
||||
saveStatus?: CellSaveStatus;
|
||||
pendingSeconds?: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
update: [newSeconds: number];
|
||||
}>();
|
||||
|
||||
// Show the optimistic value while saving; `??` (not `||`) so a pending 0 (delete) wins.
|
||||
const displaySeconds = computed(() => props.pendingSeconds ?? props.cell?.totalSeconds ?? 0);
|
||||
const isSaving = computed(() => props.saveStatus === 'saving');
|
||||
|
||||
// Swap the border color (don't layer) to avoid same-specificity fights.
|
||||
const inputClass = computed(() => {
|
||||
const border = props.saveStatus === 'error' ? 'border-red-500/70' : 'border-input-border';
|
||||
return [
|
||||
'w-[80px] mx-auto text-center font-medium',
|
||||
'bg-transparent text-text-primary placeholder:text-text-quaternary',
|
||||
'rounded-lg border shadow-none',
|
||||
border,
|
||||
'hover:bg-card-background',
|
||||
'focus-visible:bg-tertiary focus-visible:border-transparent',
|
||||
'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
|
||||
'disabled:cursor-wait disabled:opacity-70',
|
||||
].join(' ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -46,18 +71,26 @@ const emit = defineEmits<{
|
||||
<TooltipContent> Stop the running time entry to edit the timesheet </TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<DurationSecondsInput
|
||||
v-else
|
||||
:model-value="cell?.totalSeconds ?? 0"
|
||||
default-unit="hours"
|
||||
placeholder="-"
|
||||
size="sm"
|
||||
input-class="w-[80px] mx-auto text-center font-medium
|
||||
bg-transparent text-text-primary placeholder:text-text-quaternary
|
||||
rounded-lg border border-input-border shadow-none
|
||||
hover:bg-card-background
|
||||
focus-visible:bg-tertiary focus-visible:border-transparent
|
||||
focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
|
||||
@commit="(seconds) => emit('update', seconds ?? 0)" />
|
||||
<template v-else>
|
||||
<span class="relative inline-flex items-center">
|
||||
<DurationSecondsInput
|
||||
:model-value="displaySeconds"
|
||||
default-unit="hours"
|
||||
placeholder="-"
|
||||
size="sm"
|
||||
:disabled="isSaving"
|
||||
:input-class="inputClass"
|
||||
@commit="(seconds) => emit('update', seconds ?? 0)" />
|
||||
<span
|
||||
v-if="saveStatus === 'saving' || saveStatus === 'saved'"
|
||||
class="pointer-events-none absolute left-full top-1/2 ml-1.5 flex -translate-y-1/2 items-center"
|
||||
:aria-label="saveStatus === 'saving' ? 'Saving' : 'Saved'">
|
||||
<LoadingSpinner
|
||||
v-if="saveStatus === 'saving'"
|
||||
class="h-3 w-3 m-0 text-text-tertiary" />
|
||||
<CheckIcon v-else class="h-3 w-3 text-text-tertiary" />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,6 +15,7 @@ import type {
|
||||
Task,
|
||||
} from '@/packages/api/src';
|
||||
import type { TimesheetRow as TimesheetRowType, TimesheetRowKey } from '@/utils/useTimesheetGrid';
|
||||
import type { CellSaveStatus } from '@/utils/timesheet/useTimesheetCellMutations';
|
||||
|
||||
const organization = inject<ComputedRef<Organization>>('organization');
|
||||
const dayjs = getDayJsInstance();
|
||||
@@ -36,6 +37,8 @@ defineProps<{
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
formatDuration: (seconds: number) => string;
|
||||
cellStatuses: Record<string, CellSaveStatus>;
|
||||
cellPendingSeconds: Record<string, number>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -60,7 +63,7 @@ const emit = defineEmits<{
|
||||
class="grid min-w-full w-max border-y border-default-background-separator"
|
||||
style="
|
||||
grid-template-columns:
|
||||
minmax(420px, 1fr) repeat(7, minmax(96px, 120px)) minmax(100px, auto)
|
||||
minmax(420px, 1fr) repeat(7, minmax(116px, 120px)) minmax(100px, auto)
|
||||
40px;
|
||||
">
|
||||
<!-- Header row -->
|
||||
@@ -100,6 +103,8 @@ const emit = defineEmits<{
|
||||
:create-client="createClient"
|
||||
:create-tag="createTag"
|
||||
:format-duration="formatDuration"
|
||||
:cell-statuses="cellStatuses"
|
||||
:cell-pending-seconds="cellPendingSeconds"
|
||||
@remove-row="$emit('remove-row', $event)"
|
||||
@cell-update="
|
||||
(dayIndex, seconds) => $emit('cell-update', row, dayIndex, seconds)
|
||||
|
||||
@@ -15,6 +15,10 @@ import type {
|
||||
Organization,
|
||||
} from '@/packages/api/src';
|
||||
import type { TimesheetRow, TimesheetRowKey } from '@/utils/useTimesheetGrid';
|
||||
import {
|
||||
makeCellStatusKey,
|
||||
type CellSaveStatus,
|
||||
} from '@/utils/timesheet/useTimesheetCellMutations';
|
||||
import { Button } from '@/packages/ui/src/Buttons';
|
||||
|
||||
const organization = inject<ComputedRef<Organization>>('organization');
|
||||
@@ -34,6 +38,8 @@ const props = defineProps<{
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
formatDuration: (seconds: number) => string;
|
||||
cellStatuses: Record<string, CellSaveStatus>;
|
||||
cellPendingSeconds: Record<string, number>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -109,6 +115,8 @@ function hasRunningEntry(dayIndex: number): boolean {
|
||||
:date="day"
|
||||
:is-today="day === todayDate"
|
||||
:has-running-entry="hasRunningEntry(dayIndex)"
|
||||
:save-status="cellStatuses[makeCellStatusKey(row.key, dayIndex)]"
|
||||
:pending-seconds="cellPendingSeconds[makeCellStatusKey(row.key, dayIndex)]"
|
||||
@update="(seconds) => emit('cellUpdate', dayIndex, seconds)" />
|
||||
|
||||
<!-- Row total -->
|
||||
|
||||
@@ -293,7 +293,7 @@ const page = usePage<{
|
||||
<div class="justify-self-end">
|
||||
<UpdateSidebarNotification></UpdateSidebarNotification>
|
||||
<ul
|
||||
class="border-t border-default-background-separator pt-3 gap-1 pr-2 flex justify-between items-center">
|
||||
class="border-t border-default-background-separator pt-3 gap-1 flex justify-between items-center">
|
||||
<UserSettingsIcon></UserSettingsIcon>
|
||||
|
||||
<NavigationSidebarItem
|
||||
|
||||
@@ -90,7 +90,12 @@ const weekRangeDisplay = computed(() => {
|
||||
});
|
||||
|
||||
// ── Cell / row mutation handlers ──────────────────────────────────
|
||||
const { handleCellUpdate } = useTimesheetCellMutations(weekDays, timeEntries, rows, removeSlot);
|
||||
const { handleCellUpdate, cellStatus, cellPendingSeconds } = useTimesheetCellMutations(
|
||||
weekDays,
|
||||
timeEntries,
|
||||
rows,
|
||||
removeSlot
|
||||
);
|
||||
|
||||
const { handleRowIdentityChange, handleAddRow } = useTimesheetRowMutations(
|
||||
mutations,
|
||||
@@ -167,6 +172,8 @@ async function createTag(name: string): Promise<Tag | undefined> {
|
||||
:create-client="createClient"
|
||||
:create-tag="createTag"
|
||||
:format-duration="formatDuration"
|
||||
:cell-statuses="cellStatus"
|
||||
:cell-pending-seconds="cellPendingSeconds"
|
||||
@remove-row="handleRemoveRow"
|
||||
@cell-update="handleCellUpdate"
|
||||
@project-task-change="
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { ref } from 'vue';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { useTimesheetCellMutations } from './useTimesheetCellMutations';
|
||||
import { useTimesheetCellMutations, makeCellStatusKey } from './useTimesheetCellMutations';
|
||||
import { api } from '@/packages/api/src';
|
||||
import type { TimesheetRow, TimesheetCell } from '@/utils/useTimesheetGrid';
|
||||
import type { TimeEntry } from '@/packages/api/src';
|
||||
@@ -549,3 +549,119 @@ describe('useTimesheetCellMutations.handleCellUpdate', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('useTimesheetCellMutations save status', () => {
|
||||
// Timer handles keep old fade-outs from clearing newer status, and
|
||||
// the same-cell saving guard prevents concurrent writes from stale rows.
|
||||
|
||||
it('does not let a stale fade-out timer clear a newer edit on the same cell', async () => {
|
||||
const { cellMutations } = setup([]);
|
||||
const row = buildEmptyRow('p-1');
|
||||
const key = makeCellStatusKey(row.key, 0);
|
||||
|
||||
await cellMutations.handleCellUpdate(row, 0, HOUR);
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('saved');
|
||||
|
||||
// Re-edit the same cell partway through the first "saved" window.
|
||||
vi.advanceTimersByTime(1000);
|
||||
await cellMutations.handleCellUpdate(row, 0, 2 * HOUR);
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBe(2 * HOUR);
|
||||
|
||||
// Advance past the FIRST timer's deadline: it must not wipe the newer state.
|
||||
vi.advanceTimersByTime(2000);
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('saved');
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBe(2 * HOUR);
|
||||
});
|
||||
|
||||
it('ignores another commit while the same cell is saving', async () => {
|
||||
const { cellMutations } = setup([]);
|
||||
const row = buildEmptyRow('p-1');
|
||||
const key = makeCellStatusKey(row.key, 0);
|
||||
|
||||
let release!: () => void;
|
||||
const gateA = new Promise<void>((res) => {
|
||||
release = () => res();
|
||||
});
|
||||
apiMocks.createTimeEntry.mockImplementationOnce(async () => {
|
||||
await gateA;
|
||||
return { data: { id: 'a' } } as never;
|
||||
});
|
||||
|
||||
const save = cellMutations.handleCellUpdate(row, 0, HOUR);
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('saving');
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
|
||||
|
||||
// The second commit would be planned from the same stale row, so it is ignored.
|
||||
await cellMutations.handleCellUpdate(row, 0, 2 * HOUR);
|
||||
expect(apiMocks.createTimeEntry).toHaveBeenCalledTimes(1);
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
|
||||
|
||||
release();
|
||||
await save;
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('saved');
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBe(HOUR);
|
||||
});
|
||||
|
||||
it('marks error and drops the optimistic value when the save fails', async () => {
|
||||
const { cellMutations } = setup([]);
|
||||
const row = buildEmptyRow('p-1');
|
||||
const key = makeCellStatusKey(row.key, 0);
|
||||
|
||||
apiMocks.createTimeEntry.mockRejectedValueOnce(new Error('boom'));
|
||||
|
||||
await cellMutations.handleCellUpdate(row, 0, HOUR);
|
||||
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('error');
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
|
||||
expect(addNotification).toHaveBeenCalledWith(
|
||||
'error',
|
||||
'Failed to update timesheet',
|
||||
expect.any(String)
|
||||
);
|
||||
});
|
||||
|
||||
it('marks error and drops the optimistic value when the day is full', async () => {
|
||||
// Block all but the last 2h, then ask for 3h → NoFreeWindowError.
|
||||
const blocker = entry('2026-04-10T00:00:00Z', '2026-04-10T22:00:00Z', { id: 'blocker' });
|
||||
const { cellMutations } = setup([blocker]);
|
||||
const row = buildEmptyRow('p-1');
|
||||
const key = makeCellStatusKey(row.key, 0);
|
||||
|
||||
await cellMutations.handleCellUpdate(row, 0, 3 * HOUR);
|
||||
|
||||
expect(cellMutations.cellStatus.value[key]).toBe('error');
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
|
||||
expect(addNotification).toHaveBeenCalledWith(
|
||||
'error',
|
||||
"This day can't fit any more work",
|
||||
expect.any(String)
|
||||
);
|
||||
});
|
||||
|
||||
it('creates no status when the committed value is unchanged', async () => {
|
||||
const cellEntry = entry('2026-04-10T09:00:00Z', '2026-04-10T10:00:00Z');
|
||||
const { cellMutations } = setup([cellEntry]);
|
||||
const row = buildRow('p-1', [cellEntry]);
|
||||
const key = makeCellStatusKey(row.key, 0);
|
||||
|
||||
await cellMutations.handleCellUpdate(row, 0, HOUR);
|
||||
|
||||
expect(cellMutations.cellStatus.value[key]).toBeUndefined();
|
||||
expect(cellMutations.cellPendingSeconds.value[key]).toBeUndefined();
|
||||
});
|
||||
|
||||
it('tracks save status independently for each cell', async () => {
|
||||
const { cellMutations } = setup([]);
|
||||
const row = buildEmptyRow('p-1');
|
||||
const mondayKey = makeCellStatusKey(row.key, 0);
|
||||
const tuesdayKey = makeCellStatusKey(row.key, 1);
|
||||
|
||||
await cellMutations.handleCellUpdate(row, 0, HOUR);
|
||||
await cellMutations.handleCellUpdate(row, 1, 2 * HOUR);
|
||||
|
||||
expect(cellMutations.cellStatus.value[mondayKey]).toBe('saved');
|
||||
expect(cellMutations.cellStatus.value[tuesdayKey]).toBe('saved');
|
||||
expect(cellMutations.cellPendingSeconds.value[mondayKey]).toBe(HOUR);
|
||||
expect(cellMutations.cellPendingSeconds.value[tuesdayKey]).toBe(2 * HOUR);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { ref, type Ref } from 'vue';
|
||||
import { useQueryClient } from '@tanstack/vue-query';
|
||||
import { api, type CreateTimeEntryBody, type TimeEntry } from '@/packages/api/src';
|
||||
import { formatHumanReadableDuration, getDayJsInstance } from '@/packages/ui/src/utils/time';
|
||||
@@ -19,6 +19,17 @@ import {
|
||||
type FreeWindow,
|
||||
} from './cellMath';
|
||||
|
||||
export type CellSaveStatus = 'saving' | 'saved' | 'error';
|
||||
|
||||
/** Map key for a cell's save state (row + day). */
|
||||
export function makeCellStatusKey(rowKey: TimesheetRowKey, dayIndex: number): string {
|
||||
return `${rowKey}:${dayIndex}`;
|
||||
}
|
||||
|
||||
/** How long the saved/error state stays visible before fading. */
|
||||
const SAVED_VISIBLE_MS = 2800;
|
||||
const ERROR_VISIBLE_MS = 2500;
|
||||
|
||||
/**
|
||||
* Cell-level edit dispatcher. Picks one of four strategies based on
|
||||
* the diff between current and requested totals:
|
||||
@@ -48,15 +59,58 @@ export function useTimesheetCellMutations(
|
||||
const queryClient = useQueryClient();
|
||||
const notifications = useNotificationsStore();
|
||||
|
||||
// Save status + the optimistic value shown while saving, so a saved cell
|
||||
// doesn't flicker back to its old total before the refetch lands.
|
||||
const cellStatus = ref<Record<string, CellSaveStatus>>({});
|
||||
const cellPendingSeconds = ref<Record<string, number>>({});
|
||||
const statusClearTimers: Record<string, ReturnType<typeof setTimeout>> = {};
|
||||
|
||||
function clearStatusTimer(key: string): void {
|
||||
clearTimeout(statusClearTimers[key]);
|
||||
delete statusClearTimers[key];
|
||||
}
|
||||
|
||||
function beginSaving(key: string, seconds: number): void {
|
||||
clearStatusTimer(key);
|
||||
cellPendingSeconds.value[key] = seconds;
|
||||
cellStatus.value[key] = 'saving';
|
||||
}
|
||||
|
||||
function markSaved(key: string): void {
|
||||
clearStatusTimer(key);
|
||||
cellStatus.value[key] = 'saved';
|
||||
statusClearTimers[key] = setTimeout(() => {
|
||||
delete cellStatus.value[key];
|
||||
delete cellPendingSeconds.value[key];
|
||||
delete statusClearTimers[key];
|
||||
}, SAVED_VISIBLE_MS);
|
||||
}
|
||||
|
||||
function markError(key: string): void {
|
||||
clearStatusTimer(key);
|
||||
cellStatus.value[key] = 'error';
|
||||
// Drop the optimistic value so the cell shows server truth after refetch.
|
||||
delete cellPendingSeconds.value[key];
|
||||
statusClearTimers[key] = setTimeout(() => {
|
||||
delete cellStatus.value[key];
|
||||
delete statusClearTimers[key];
|
||||
}, ERROR_VISIBLE_MS);
|
||||
}
|
||||
|
||||
async function handleCellUpdate(
|
||||
row: TimesheetRow,
|
||||
dayIndex: number,
|
||||
newTotalSeconds: number
|
||||
): Promise<void> {
|
||||
const statusKey = makeCellStatusKey(row.key, dayIndex);
|
||||
if (cellStatus.value[statusKey] === 'saving') return;
|
||||
|
||||
const cell = row.cells.get(dayIndex);
|
||||
const existingSeconds = cell?.totalSeconds ?? 0;
|
||||
if (newTotalSeconds === existingSeconds) return;
|
||||
|
||||
beginSaving(statusKey, newTotalSeconds);
|
||||
|
||||
// Capture row state before the mutation: a row that was empty
|
||||
// and shares identity with another slot collapses after the
|
||||
// first entry lands, so the entry naturally identity-routes to
|
||||
@@ -74,7 +128,9 @@ export function useTimesheetCellMutations(
|
||||
'Another row with the same project, task, billable status and tags already exists.'
|
||||
);
|
||||
}
|
||||
markSaved(statusKey);
|
||||
} catch (err) {
|
||||
markError(statusKey);
|
||||
if (err instanceof NoFreeWindowError) {
|
||||
const friendlyDuration = formatHumanReadableDuration(
|
||||
err.requiredSeconds,
|
||||
@@ -93,7 +149,6 @@ export function useTimesheetCellMutations(
|
||||
'Failed to update timesheet',
|
||||
'Please try again later.'
|
||||
);
|
||||
throw err;
|
||||
} finally {
|
||||
queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
|
||||
}
|
||||
@@ -316,5 +371,5 @@ export function useTimesheetCellMutations(
|
||||
return best;
|
||||
}
|
||||
|
||||
return { handleCellUpdate };
|
||||
return { handleCellUpdate, cellStatus, cellPendingSeconds };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user