Add context menu to time entry rows

e2e/time.spec.ts

@@ -2042,3 +2042,228 @@ test.describe('Employee Time Entry Isolation', () => {
         await expect(timeEntryRow).not.toBeVisible();
     });
 });
+
+// =============================================
+// Context Menu Tests
+// =============================================
+
+async function openTimeEntryContextMenu(page: Page, description: string) {
+    const row = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await row.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+}
+
+test('test that context menu appears with correct items on time entry row', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context menu items test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await expect(page.getByRole('menuitem', { name: 'Continue' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Edit' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Duplicate' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
+});
+
+test('test that context menu edit opens the edit modal', async ({ page, ctx }) => {
+    const description = 'Context edit test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await page.getByRole('menuitem', { name: 'Edit' }).click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await expect(page.getByRole('dialog').getByPlaceholder('What did you work on?')).toHaveValue(
+        description
+    );
+});
+
+test('test that context menu duplicate creates a copy', async ({ page, ctx }) => {
+    const description = 'Context dup test ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Dup Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: true,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+        billable: true,
+    });
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Duplicate' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.billable).toBe(true);
+});
+
+test('test that context menu continue starts a new time entry', async ({ page, ctx }) => {
+    const description = 'Context continue test ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Continue Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: false,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+    });
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Continue' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.end).toBeNull();
+});
+
+test('test that context menu delete removes the time entry', async ({ page, ctx }) => {
+    const description = 'Context delete test ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+
+    await goToTimeOverview(page);
+    await openTimeEntryContextMenu(page, description);
+
+    await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') && response.request().method() === 'DELETE'
+        ),
+        page.getByRole('menuitem', { name: 'Delete' }).click(),
+    ]);
+
+    await expect(
+        page.locator('[data-testid="time_entry_row"]').filter({ hasText: description })
+    ).not.toBeVisible();
+});
+
+test('test that aggregate row context menu shows only Continue and Delete', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg items ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+    await createBareTimeEntryViaApi(ctx, description, '30min');
+
+    await goToTimeOverview(page);
+
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await expect(page.getByRole('menuitem', { name: 'Continue' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Edit' })).not.toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Duplicate' })).not.toBeVisible();
+});
+
+test('test that aggregate row context menu continue starts a new time entry', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg continue ' + Math.floor(1 + Math.random() * 10000);
+    const project = await createProjectViaApi(ctx, {
+        name: 'Agg Continue Project ' + Math.floor(1 + Math.random() * 10000),
+        is_billable: false,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '1h',
+        projectId: project.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        description,
+        duration: '30min',
+        projectId: project.id,
+    });
+
+    await goToTimeOverview(page);
+
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    const [createResponse] = await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+        page.getByRole('menuitem', { name: 'Continue' }).click(),
+    ]);
+
+    const body = await createResponse.json();
+    expect(body.data.description).toBe(description);
+    expect(body.data.project_id).toBe(project.id);
+    expect(body.data.end).toBeNull();
+});
+
+test('test that aggregate row context menu delete removes all grouped entries', async ({
+    page,
+    ctx,
+}) => {
+    const description = 'Context agg delete ' + Math.floor(1 + Math.random() * 10000);
+    await createBareTimeEntryViaApi(ctx, description, '1h');
+    await createBareTimeEntryViaApi(ctx, description, '30min');
+
+    await goToTimeOverview(page);
+
+    // The aggregate row groups entries with same description
+    const aggregateRow = page
+        .locator('[data-testid="time_entry_row"]')
+        .filter({ hasText: description })
+        .first();
+    await aggregateRow.click({ button: 'right' });
+    await expect(page.getByRole('menu')).toBeVisible();
+
+    await Promise.all([
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') && response.request().method() === 'DELETE'
+        ),
+        page.getByRole('menuitem', { name: 'Delete' }).click(),
+    ]);
+
+    await expect(
+        page.locator('[data-testid="time_entry_row"]').filter({ hasText: description })
+    ).not.toBeVisible();
+});

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -21,7 +21,15 @@ import { formatHumanReadableDuration, formatStartEnd } from '@/packages/ui/src/u
 import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
 import type { TimeEntriesGroupedByType } from '@/types/time-entries';
-import { Checkbox } from '@/packages/ui/src';
+import {
+    Checkbox,
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+} from '@/packages/ui/src';
+import { PlayIcon, TrashIcon } from '@heroicons/vue/20/solid';
 import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
@@ -89,6 +97,8 @@ function onSelectChange(checked: boolean) {
 </script>
 
 <template>
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
             <div
                 class="border-b border-default-background-separator bg-row-background min-w-0 transition"
                 data-testid="time_entry_row">
@@ -104,13 +114,17 @@ function onSelectChange(checked: boolean) {
                                 "
                                 @update:checked="onSelectChange" />
                             <div class="flex items-center min-w-0">
-                        <GroupedItemsCountButton :expanded="expanded" @click="expanded = !expanded">
+                                <GroupedItemsCountButton
+                                    :expanded="expanded"
+                                    @click="expanded = !expanded">
                                     {{ timeEntry?.timeEntries?.length }}
                                 </GroupedItemsCountButton>
                                 <TimeEntryDescriptionInput
                                     class="min-w-0 mr-4 shrink"
                                     :model-value="timeEntry.description"
-                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                                    @changed="
+                                        updateTimeEntryDescription
+                                    "></TimeEntryDescriptionInput>
                                 <TimeTrackerProjectTaskDropdown
                                     class="min-w-0 shrink"
                                     :clients
@@ -123,7 +137,9 @@ function onSelectChange(checked: boolean) {
                                     :enable-estimated-time
                                     :currency="currency"
                                     :task="timeEntry.task_id"
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                                    @changed="
+                                        updateProjectAndTask
+                                    "></TimeTrackerProjectTaskDropdown>
                             </div>
                         </div>
                         <div
@@ -195,7 +211,9 @@ function onSelectChange(checked: boolean) {
                                     <TimeEntryDescriptionInput
                                         class="min-w-0 flex-1"
                                         :model-value="timeEntry.description"
-                                @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                                        @changed="
+                                            updateTimeEntryDescription
+                                        "></TimeEntryDescriptionInput>
                                 </div>
                                 <button
                                     class="text-text-primary min-w-[80px] px-1.5 py-1.5 bg-transparent text-right hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
@@ -223,7 +241,9 @@ function onSelectChange(checked: boolean) {
                                     :enable-estimated-time
                                     :currency="currency"
                                     :task="timeEntry.task_id"
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                                    @changed="
+                                        updateProjectAndTask
+                                    "></TimeTrackerProjectTaskDropdown>
                                 <div class="flex items-center shrink-0">
                                     <TimeEntryRowTagDropdown
                                         :create-tag
@@ -239,7 +259,9 @@ function onSelectChange(checked: boolean) {
                                         :active="!!(timeEntry.start && !timeEntry.end)"
                                         variant="secondary"
                                         class="ml-2"
-                                @changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
+                                        @changed="
+                                            onStartStopClick(timeEntry)
+                                        "></TimeTrackerStartStop>
                                     <TimeEntryMoreOptionsDropdown
                                         :show-edit="false"
                                         :show-duplicate="false"
@@ -282,6 +304,23 @@ function onSelectChange(checked: boolean) {
                         @unselected="emit('unselected', [subEntry])"></TimeEntryRow>
                 </div>
             </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent class="min-w-[160px]">
+            <ContextMenuItem
+                class="space-x-3"
+                @select="onStartStopClick(timeEntry.timeEntries[0]!)">
+                <PlayIcon class="w-4 h-4 text-icon-default" />
+                <span>Continue</span>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+                class="space-x-3 text-destructive"
+                @select="deleteTimeEntries(timeEntry?.timeEntries ?? [])">
+                <TrashIcon class="w-4 h-4 text-icon-default" />
+                <span>Delete</span>
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>
 
 <style scoped></style>

resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue

@@ -20,7 +20,15 @@ import { TimeEntryEditModal } from '@/packages/ui/src';
 import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
 import { computed, ref } from 'vue';
 import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
-import { Checkbox } from '@/packages/ui/src';
+import {
+    Checkbox,
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuTrigger,
+} from '@/packages/ui/src';
+import { PlayIcon, PencilIcon, DocumentDuplicateIcon, TrashIcon } from '@heroicons/vue/20/solid';
 
 const props = defineProps<{
     timeEntry: TimeEntry;
@@ -109,6 +117,8 @@ async function handleDeleteTimeEntry() {
 </script>
 
 <template>
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
             <div
                 class="border-b border-default-background-separator transition min-w-0 bg-row-background"
                 data-testid="time_entry_row">
@@ -179,7 +189,9 @@ async function handleDeleteTimeEntry() {
                                 <TimeEntryDescriptionInput
                                     class="min-w-0 flex-1"
                                     :model-value="timeEntry.description"
-                            @changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
+                                    @changed="
+                                        updateTimeEntryDescription
+                                    "></TimeEntryDescriptionInput>
                                 <TimeEntryRowDurationInput
                                     :start="timeEntry.start"
                                     :end="timeEntry.end"
@@ -199,7 +211,9 @@ async function handleDeleteTimeEntry() {
                                     :currency="currency"
                                     :enable-estimated-time
                                     :task="timeEntry.task_id"
-                            @changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
+                                    @changed="
+                                        updateProjectAndTask
+                                    "></TimeTrackerProjectTaskDropdown>
                                 <div class="flex items-center shrink-0">
                                     <TimeEntryRowTagDropdown
                                         :create-tag
@@ -226,6 +240,27 @@ async function handleDeleteTimeEntry() {
                     </div>
                 </MainContainer>
             </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent class="min-w-[160px]">
+            <ContextMenuItem class="space-x-3" @select="onStartStopClick()">
+                <PlayIcon class="w-4 h-4 text-icon-default" />
+                <span>Continue</span>
+            </ContextMenuItem>
+            <ContextMenuItem class="space-x-3" @select="handleEdit()">
+                <PencilIcon class="w-4 h-4 text-icon-default" />
+                <span>Edit</span>
+            </ContextMenuItem>
+            <ContextMenuItem class="space-x-3" @select="duplicateTimeEntry?.()">
+                <DocumentDuplicateIcon class="w-4 h-4 text-icon-default" />
+                <span>Duplicate</span>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem class="space-x-3 text-destructive" @select="deleteTimeEntry()">
+                <TrashIcon class="w-4 h-4 text-icon-default" />
+                <span>Delete</span>
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 
     <TimeEntryEditModal
         v-if="showEditModal"