mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 00:02:15 +01:00
Add context menu to time entry rows
This commit is contained in:
Gregor Vostrak
225
e2e/time.spec.ts
225
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();
|
||||
});
|
||||
|
||||
@@ -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,156 +97,99 @@ function onSelectChange(checked: boolean) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="border-b border-default-background-separator bg-row-background min-w-0 transition"
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 items-center min-w-0 justify-between group">
|
||||
<!-- Desktop layout -->
|
||||
<div class="hidden @lg:flex space-x-3 items-center min-w-0">
|
||||
<Checkbox
|
||||
:checked="
|
||||
timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
|
||||
selectedTimeEntries.includes(aggregateTimeEntry)
|
||||
)
|
||||
"
|
||||
@update:checked="onSelectChange" />
|
||||
<div class="flex items-center min-w-0">
|
||||
<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>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0 shrink"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:enable-estimated-time
|
||||
:currency="currency"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
faded
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<div class="flex-1">
|
||||
<button
|
||||
:class="
|
||||
twMerge(
|
||||
'text-text-secondary px-1 py-1.5 bg-transparent text-center 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',
|
||||
organization?.time_format === '12-hours'
|
||||
? 'w-[160px]'
|
||||
: 'w-[100px]'
|
||||
)
|
||||
"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatStartEnd(
|
||||
timeEntry.start,
|
||||
timeEntry.end,
|
||||
organization?.time_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="text-text-primary !mr-2 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"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
timeEntry.duration ?? 0,
|
||||
organization?.interval_format,
|
||||
organization?.number_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="opacity-60 flex group-hover:opacity-100 focus-visible:opacity-100"
|
||||
@changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
:show-edit="false"
|
||||
:show-duplicate="false"
|
||||
@delete="
|
||||
deleteTimeEntries(timeEntry?.timeEntries ?? [])
|
||||
"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
<!-- Mobile layout -->
|
||||
<div class="@lg:hidden">
|
||||
<!-- First row: count + description + duration -->
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<div class="flex items-center min-w-0 flex-1">
|
||||
<GroupedItemsCountButton
|
||||
:expanded="expanded"
|
||||
@click="expanded = !expanded">
|
||||
{{ timeEntry?.timeEntries?.length }}
|
||||
</GroupedItemsCountButton>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 flex-1"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<div
|
||||
class="border-b border-default-background-separator bg-row-background min-w-0 transition"
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 items-center min-w-0 justify-between group">
|
||||
<!-- Desktop layout -->
|
||||
<div class="hidden @lg:flex space-x-3 items-center min-w-0">
|
||||
<Checkbox
|
||||
:checked="
|
||||
timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
|
||||
selectedTimeEntries.includes(aggregateTimeEntry)
|
||||
)
|
||||
"
|
||||
@update:checked="onSelectChange" />
|
||||
<div class="flex items-center min-w-0">
|
||||
<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>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0 shrink"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:enable-estimated-time
|
||||
:currency="currency"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="
|
||||
updateProjectAndTask
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
</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"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
timeEntry.duration ?? 0,
|
||||
organization?.interval_format,
|
||||
organization?.number_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Second row: project/task - tags - billable - start - more -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:enable-estimated-time
|
||||
:currency="currency"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
<div class="flex items-center shrink-0">
|
||||
<div
|
||||
class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
compact
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
faded
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<div class="flex-1">
|
||||
<button
|
||||
:class="
|
||||
twMerge(
|
||||
'text-text-secondary px-1 py-1.5 bg-transparent text-center 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',
|
||||
organization?.time_format === '12-hours'
|
||||
? 'w-[160px]'
|
||||
: 'w-[100px]'
|
||||
)
|
||||
"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatStartEnd(
|
||||
timeEntry.start,
|
||||
timeEntry.end,
|
||||
organization?.time_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="text-text-primary !mr-2 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"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
timeEntry.duration ?? 0,
|
||||
organization?.interval_format,
|
||||
organization?.number_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
class="opacity-60 flex group-hover:opacity-100 focus-visible:opacity-100"
|
||||
@changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
:show-edit="false"
|
||||
@@ -247,41 +198,129 @@ function onSelectChange(checked: boolean) {
|
||||
deleteTimeEntries(timeEntry?.timeEntries ?? [])
|
||||
"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
<!-- Mobile layout -->
|
||||
<div class="@lg:hidden">
|
||||
<!-- First row: count + description + duration -->
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<div class="flex items-center min-w-0 flex-1">
|
||||
<GroupedItemsCountButton
|
||||
:expanded="expanded"
|
||||
@click="expanded = !expanded">
|
||||
{{ timeEntry?.timeEntries?.length }}
|
||||
</GroupedItemsCountButton>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 flex-1"
|
||||
:model-value="timeEntry.description"
|
||||
@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"
|
||||
@click="expanded = !expanded">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
timeEntry.duration ?? 0,
|
||||
organization?.interval_format,
|
||||
organization?.number_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Second row: project/task - tags - billable - start - more -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:enable-estimated-time
|
||||
:currency="currency"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="
|
||||
updateProjectAndTask
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
<div class="flex items-center shrink-0">
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
compact
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
@changed="
|
||||
onStartStopClick(timeEntry)
|
||||
"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
:show-edit="false"
|
||||
:show-duplicate="false"
|
||||
@delete="
|
||||
deleteTimeEntries(timeEntry?.timeEntries ?? [])
|
||||
"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
<div
|
||||
v-if="expanded"
|
||||
class="w-full border-t border-default-background-separator bg-black/15">
|
||||
<TimeEntryRow
|
||||
v-for="subEntry in timeEntry.timeEntries"
|
||||
:key="subEntry.id"
|
||||
:projects="projects"
|
||||
:enable-estimated-time
|
||||
:can-create-project
|
||||
:tasks="tasks"
|
||||
:selected="
|
||||
!!selectedTimeEntries.find(
|
||||
(filterEntry: TimeEntry) => filterEntry.id === subEntry.id
|
||||
)
|
||||
"
|
||||
:create-client
|
||||
:clients
|
||||
:create-project
|
||||
:tags="tags"
|
||||
indent
|
||||
:update-time-entry="(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)"
|
||||
:on-start-stop-click="() => onStartStopClick(subEntry)"
|
||||
:delete-time-entry="() => deleteTimeEntries([subEntry])"
|
||||
:duplicate-time-entry="() => duplicateTimeEntry(subEntry)"
|
||||
:currency="currency"
|
||||
:create-tag
|
||||
:time-entry="subEntry"
|
||||
@selected="emit('selected', [subEntry])"
|
||||
@unselected="emit('unselected', [subEntry])"></TimeEntryRow>
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
<div
|
||||
v-if="expanded"
|
||||
class="w-full border-t border-default-background-separator bg-black/15">
|
||||
<TimeEntryRow
|
||||
v-for="subEntry in timeEntry.timeEntries"
|
||||
:key="subEntry.id"
|
||||
:projects="projects"
|
||||
:enable-estimated-time
|
||||
:can-create-project
|
||||
:tasks="tasks"
|
||||
:selected="
|
||||
!!selectedTimeEntries.find(
|
||||
(filterEntry: TimeEntry) => filterEntry.id === subEntry.id
|
||||
)
|
||||
"
|
||||
:create-client
|
||||
:clients
|
||||
:create-project
|
||||
:tags="tags"
|
||||
indent
|
||||
:update-time-entry="(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)"
|
||||
:on-start-stop-click="() => onStartStopClick(subEntry)"
|
||||
:delete-time-entry="() => deleteTimeEntries([subEntry])"
|
||||
:duplicate-time-entry="() => duplicateTimeEntry(subEntry)"
|
||||
:currency="currency"
|
||||
:create-tag
|
||||
:time-entry="subEntry"
|
||||
@selected="emit('selected', [subEntry])"
|
||||
@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>
|
||||
|
||||
@@ -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,123 +117,150 @@ async function handleDeleteTimeEntry() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="border-b border-default-background-separator transition min-w-0 bg-row-background"
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 min-w-0 items-center justify-between group">
|
||||
<!-- Desktop layout -->
|
||||
<div class="hidden @lg:flex items-center min-w-0">
|
||||
<Checkbox :checked="selected" @update:checked="onSelectChange" />
|
||||
<div v-if="indent === true" class="w-10 h-7"></div>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 mr-4 shrink"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0 shrink"
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:clients
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:currency="currency"
|
||||
:enable-estimated-time
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div
|
||||
class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
|
||||
<div v-if="showMember && members" class="text-sm px-2">
|
||||
{{ memberName }}
|
||||
</div>
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
faded
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<div class="flex-1">
|
||||
<TimeEntryRangeSelector
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
:show-date
|
||||
@changed="updateStartEndTime"></TimeEntryRangeSelector>
|
||||
</div>
|
||||
<TimeEntryRowDurationInput
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
@changed="updateStartEndTime"></TimeEntryRowDurationInput>
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="opacity-60 flex focus-visible:opacity-100 group-hover:opacity-100"
|
||||
@changed="onStartStopClick"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
@edit="handleEdit"
|
||||
@duplicate="duplicateTimeEntry"
|
||||
@delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
<!-- Mobile layout -->
|
||||
<div class="@lg:hidden">
|
||||
<!-- First row: description + duration -->
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 flex-1"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<TimeEntryRowDurationInput
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
@changed="updateStartEndTime"></TimeEntryRowDurationInput>
|
||||
</div>
|
||||
<!-- Second row: project/task - tags - billable - start - more -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0"
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:clients
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:currency="currency"
|
||||
:enable-estimated-time
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
<div class="flex items-center shrink-0">
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<div
|
||||
class="border-b border-default-background-separator transition min-w-0 bg-row-background"
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 min-w-0 items-center justify-between group">
|
||||
<!-- Desktop layout -->
|
||||
<div class="hidden @lg:flex items-center min-w-0">
|
||||
<Checkbox :checked="selected" @update:checked="onSelectChange" />
|
||||
<div v-if="indent === true" class="w-10 h-7"></div>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 mr-4 shrink"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0 shrink"
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:clients
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:currency="currency"
|
||||
:enable-estimated-time
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div
|
||||
class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
|
||||
<div v-if="showMember && members" class="text-sm px-2">
|
||||
{{ memberName }}
|
||||
</div>
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
compact
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
faded
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<div class="flex-1">
|
||||
<TimeEntryRangeSelector
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
:show-date
|
||||
@changed="updateStartEndTime"></TimeEntryRangeSelector>
|
||||
</div>
|
||||
<TimeEntryRowDurationInput
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
@changed="updateStartEndTime"></TimeEntryRowDurationInput>
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
class="opacity-60 flex focus-visible:opacity-100 group-hover:opacity-100"
|
||||
@changed="onStartStopClick"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
@edit="handleEdit"
|
||||
@duplicate="duplicateTimeEntry"
|
||||
@delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
<!-- Mobile layout -->
|
||||
<div class="@lg:hidden">
|
||||
<!-- First row: description + duration -->
|
||||
<div class="flex items-center justify-between min-w-0">
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 flex-1"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="
|
||||
updateTimeEntryDescription
|
||||
"></TimeEntryDescriptionInput>
|
||||
<TimeEntryRowDurationInput
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
@changed="updateStartEndTime"></TimeEntryRowDurationInput>
|
||||
</div>
|
||||
<!-- Second row: project/task - tags - billable - start - more -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
class="min-w-0"
|
||||
:create-project
|
||||
:create-client
|
||||
:can-create-project
|
||||
:clients
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:project="timeEntry.project_id"
|
||||
:currency="currency"
|
||||
:enable-estimated-time
|
||||
:task="timeEntry.task_id"
|
||||
@changed="
|
||||
updateProjectAndTask
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
<div class="flex items-center shrink-0">
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
compact
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
size="small"
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
variant="secondary"
|
||||
class="ml-2"
|
||||
@changed="onStartStopClick"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
@edit="handleEdit"
|
||||
@duplicate="duplicateTimeEntry"
|
||||
@delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
</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"
|
||||
|
||||
Reference in New Issue
Block a user