mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-13 00:03:18 +01:00
add format check, update prettier rules, apply rules consistently
This commit is contained in:
@@ -17,10 +17,7 @@ import TimeEntryMoreOptionsDropdown from '@/packages/ui/src/TimeEntry/TimeEntryM
|
||||
import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
|
||||
import BillableToggleButton from '@/packages/ui/src/Input/BillableToggleButton.vue';
|
||||
import { ref, inject, type ComputedRef } from 'vue';
|
||||
import {
|
||||
formatHumanReadableDuration,
|
||||
formatStartEnd,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { formatHumanReadableDuration, formatStartEnd } from '@/packages/ui/src/utils/time';
|
||||
import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
|
||||
import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
|
||||
import type { TimeEntriesGroupedByType } from '@/types/time-entries';
|
||||
@@ -95,31 +92,23 @@ function onSelectChange(checked: boolean) {
|
||||
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="sm:flex py-1.5 items-center min-w-0 justify-between group">
|
||||
<div class="sm:flex py-1.5 items-center min-w-0 justify-between group">
|
||||
<div class="flex space-x-3 items-center min-w-0">
|
||||
<Checkbox
|
||||
:checked="
|
||||
timeEntry.timeEntries.every(
|
||||
(aggregateTimeEntry: TimeEntry) =>
|
||||
selectedTimeEntries.includes(
|
||||
aggregateTimeEntry
|
||||
)
|
||||
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">
|
||||
<GroupedItemsCountButton :expanded="expanded" @click="expanded = !expanded">
|
||||
{{ timeEntry?.timeEntries?.length }}
|
||||
</GroupedItemsCountButton>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 mr-4"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="
|
||||
updateTimeEntryDescription
|
||||
"></TimeEntryDescriptionInput>
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
:clients
|
||||
:create-project
|
||||
@@ -132,9 +121,7 @@ function onSelectChange(checked: boolean) {
|
||||
:enable-estimated-time
|
||||
:currency="currency"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="
|
||||
updateProjectAndTask
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center font-medium lg:space-x-2">
|
||||
@@ -142,21 +129,30 @@ function onSelectChange(checked: boolean) {
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:model-value="timeEntry.tags"
|
||||
@changed="
|
||||
updateTimeEntryTags
|
||||
"></TimeEntryRowTagDropdown>
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
class="opacity-50 focus-visible:opacity-100 group-hover:opacity-100"
|
||||
size="small"
|
||||
@changed="
|
||||
updateTimeEntryBillable
|
||||
"></BillableToggleButton>
|
||||
@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-[170px]' : 'w-[120px]')"
|
||||
: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-[170px]'
|
||||
: 'w-[120px]'
|
||||
)
|
||||
"
|
||||
@click="expanded = !expanded">
|
||||
{{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
|
||||
{{
|
||||
formatStartEnd(
|
||||
timeEntry.start,
|
||||
timeEntry.end,
|
||||
organization?.time_format
|
||||
)
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@@ -174,9 +170,7 @@ function onSelectChange(checked: boolean) {
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
class="opacity-20 flex group-hover:opacity-100 focus-visible:opacity-100"
|
||||
@changed="
|
||||
onStartStopClick(timeEntry)
|
||||
"></TimeTrackerStartStop>
|
||||
@changed="onStartStopClick(timeEntry)"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
@delete="
|
||||
deleteTimeEntries(timeEntry?.timeEntries ?? [])
|
||||
@@ -196,8 +190,7 @@ function onSelectChange(checked: boolean) {
|
||||
:tasks="tasks"
|
||||
:selected="
|
||||
!!selectedTimeEntries.find(
|
||||
(filterEntry: TimeEntry) =>
|
||||
filterEntry.id === subEntry.id
|
||||
(filterEntry: TimeEntry) => filterEntry.id === subEntry.id
|
||||
)
|
||||
"
|
||||
:create-client
|
||||
@@ -205,9 +198,7 @@ function onSelectChange(checked: boolean) {
|
||||
:create-project
|
||||
:tags="tags"
|
||||
indent
|
||||
:update-time-entry="
|
||||
(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)
|
||||
"
|
||||
:update-time-entry="(timeEntry: TimeEntry) => updateTimeEntry(timeEntry)"
|
||||
:on-start-stop-click="() => onStartStopClick(subEntry)"
|
||||
:delete-time-entry="() => deleteTimeEntries([subEntry])"
|
||||
:currency="currency"
|
||||
|
||||
@@ -7,10 +7,7 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
|
||||
import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
|
||||
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
|
||||
import { TagIcon } from '@heroicons/vue/20/solid';
|
||||
import {
|
||||
getDayJsInstance,
|
||||
getLocalizedDayJs,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { getDayJsInstance, getLocalizedDayJs } from '@/packages/ui/src/utils/time';
|
||||
import type {
|
||||
CreateClientBody,
|
||||
CreateProjectBody,
|
||||
@@ -29,16 +26,14 @@ import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
|
||||
|
||||
import { InformationCircleIcon } from '@heroicons/vue/20/solid';
|
||||
import type { Tag, Task } from '@/packages/api/src';
|
||||
import TimePickerSimple from "@/packages/ui/src/Input/TimePickerSimple.vue";
|
||||
import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
|
||||
|
||||
const show = defineModel('show', { default: false });
|
||||
const saving = ref(false);
|
||||
|
||||
const props = defineProps<{
|
||||
enableEstimatedTime: boolean;
|
||||
createTimeEntry: (
|
||||
entry: Omit<CreateTimeEntryBody, 'member_id'>
|
||||
) => Promise<void>;
|
||||
createTimeEntry: (entry: Omit<CreateTimeEntryBody, 'member_id'>) => Promise<void>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
@@ -83,9 +78,7 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const localStart = ref(
|
||||
getLocalizedDayJs(timeEntryDefaultValues.start).format()
|
||||
);
|
||||
const localStart = ref(getLocalizedDayJs(timeEntryDefaultValues.start).format());
|
||||
|
||||
const localEnd = ref(getLocalizedDayJs(timeEntryDefaultValues.end).format());
|
||||
|
||||
@@ -143,15 +136,12 @@ type BillableOption = {
|
||||
@keydown.enter="submit" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sm:flex justify-between items-end space-y-2 sm:space-y-0 pt-4 sm:space-x-4">
|
||||
<div class="sm:flex justify-between items-end space-y-2 sm:space-y-0 pt-4 sm:space-x-4">
|
||||
<div class="flex w-full items-center space-x-2 justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
v-model:project="timeEntry.project_id"
|
||||
v-model:task="
|
||||
timeEntry.task_id
|
||||
"
|
||||
v-model:task="timeEntry.task_id"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
@@ -161,19 +151,15 @@ type BillableOption = {
|
||||
class="bg-input-background"
|
||||
:projects="projects"
|
||||
:tasks="tasks"
|
||||
:enable-estimated-time="enableEstimatedTime"></TimeTrackerProjectTaskDropdown>
|
||||
:enable-estimated-time="
|
||||
enableEstimatedTime
|
||||
"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex-col">
|
||||
<TagDropdown
|
||||
v-model="timeEntry.tags"
|
||||
:create-tag
|
||||
:tags="tags">
|
||||
<TagDropdown v-model="timeEntry.tags" :create-tag :tags="tags">
|
||||
<template #trigger>
|
||||
<Badge
|
||||
class="bg-input-background"
|
||||
tag="button"
|
||||
size="xlarge">
|
||||
<Badge class="bg-input-background" tag="button" size="xlarge">
|
||||
<TagIcon
|
||||
v-if="timeEntry.tags.length === 0"
|
||||
class="w-4"></TagIcon>
|
||||
@@ -190,12 +176,8 @@ type BillableOption = {
|
||||
<div class="flex-col">
|
||||
<SelectDropdown
|
||||
v-model="billableProxy"
|
||||
:get-key-from-item="
|
||||
(item: BillableOption) => item.value
|
||||
"
|
||||
:get-name-for-item="
|
||||
(item: BillableOption) => item.label
|
||||
"
|
||||
:get-key-from-item="(item: BillableOption) => item.value"
|
||||
:get-name-for-item="(item: BillableOption) => item.label"
|
||||
:items="[
|
||||
{
|
||||
label: 'Billable',
|
||||
@@ -207,16 +189,10 @@ type BillableOption = {
|
||||
},
|
||||
]">
|
||||
<template #trigger>
|
||||
<Badge
|
||||
class="bg-input-background"
|
||||
tag="button"
|
||||
size="xlarge">
|
||||
<BillableIcon
|
||||
class="h-4"></BillableIcon>
|
||||
<Badge class="bg-input-background" tag="button" size="xlarge">
|
||||
<BillableIcon class="h-4"></BillableIcon>
|
||||
<span>{{
|
||||
timeEntry.billable
|
||||
? 'Billable'
|
||||
: 'Non-Billable'
|
||||
timeEntry.billable ? 'Billable' : 'Non-Billable'
|
||||
}}</span>
|
||||
</Badge>
|
||||
</template>
|
||||
@@ -246,10 +222,7 @@ type BillableOption = {
|
||||
<div class="">
|
||||
<InputLabel>Start</InputLabel>
|
||||
<div class="flex flex-col items-center space-y-2 mt-1">
|
||||
<TimePickerSimple
|
||||
|
||||
v-model="localStart"
|
||||
size="large"></TimePickerSimple>
|
||||
<TimePickerSimple v-model="localStart" size="large"></TimePickerSimple>
|
||||
<DatePicker
|
||||
v-model="localStart"
|
||||
tabindex="1"
|
||||
@@ -259,9 +232,7 @@ type BillableOption = {
|
||||
<div class="">
|
||||
<InputLabel>End</InputLabel>
|
||||
<div class="flex flex-col items-center space-y-2 mt-1">
|
||||
<TimePickerSimple
|
||||
v-model="localEnd"
|
||||
size="large"></TimePickerSimple>
|
||||
<TimePickerSimple v-model="localEnd" size="large"></TimePickerSimple>
|
||||
<DatePicker
|
||||
v-model="localEnd"
|
||||
tabindex="1"
|
||||
|
||||
@@ -31,8 +31,7 @@ const displaysPlaceholder = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative min-w-0 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">
|
||||
<div class="relative min-w-0 flex-1 text-ellipsis whitespace-nowrap overflow-hidden">
|
||||
<div class="relative text-sm font-medium min-w-0">
|
||||
<div
|
||||
:class="[
|
||||
|
||||
@@ -10,10 +10,7 @@ import type {
|
||||
TimeEntry,
|
||||
Client,
|
||||
} from '@/packages/api/src';
|
||||
import {
|
||||
getDayJsInstance,
|
||||
getLocalizedDateFromTimestamp,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/packages/ui/src/utils/time';
|
||||
import TimeEntryAggregateRow from '@/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue';
|
||||
import TimeEntryRowHeading from '@/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue';
|
||||
import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
|
||||
@@ -48,17 +45,13 @@ const groupedTimeEntries = computed(() => {
|
||||
if (entry.end === null) {
|
||||
continue;
|
||||
}
|
||||
const oldEntries =
|
||||
groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)];
|
||||
const oldEntries = groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)];
|
||||
groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)] = [
|
||||
...(oldEntries ?? []),
|
||||
entry,
|
||||
];
|
||||
}
|
||||
const groupedEntriesByDayAndType: Record<
|
||||
string,
|
||||
TimeEntriesGroupedByType[]
|
||||
> = {};
|
||||
const groupedEntriesByDayAndType: Record<string, TimeEntriesGroupedByType[]> = {};
|
||||
for (const dailyEntriesKey in groupedEntriesByDay) {
|
||||
const dailyEntries = groupedEntriesByDay[dailyEntriesKey];
|
||||
const newDailyEntries: TimeEntriesGroupedByType[] = [];
|
||||
@@ -77,15 +70,12 @@ const groupedTimeEntries = computed(() => {
|
||||
|
||||
// Add up durations for time entries of the same type
|
||||
newDailyEntries[oldEntriesIndex].duration =
|
||||
(newDailyEntries[oldEntriesIndex].duration ?? 0) +
|
||||
(entry?.duration ?? 0);
|
||||
(newDailyEntries[oldEntriesIndex].duration ?? 0) + (entry?.duration ?? 0);
|
||||
|
||||
// adapt start end times so they show the earliest start and latest end time
|
||||
if (
|
||||
getDayJsInstance()(entry.start).isBefore(
|
||||
getDayJsInstance()(
|
||||
newDailyEntries[oldEntriesIndex].start
|
||||
)
|
||||
getDayJsInstance()(newDailyEntries[oldEntriesIndex].start)
|
||||
)
|
||||
) {
|
||||
newDailyEntries[oldEntriesIndex].start = entry.start;
|
||||
@@ -133,17 +123,15 @@ function selectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
|
||||
}
|
||||
}
|
||||
function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
|
||||
selectedTimeEntries.value = selectedTimeEntries.value.filter(
|
||||
(timeEntry) => {
|
||||
return !value.find(
|
||||
(filterTimeEntry) =>
|
||||
filterTimeEntry.id === timeEntry.id ||
|
||||
filterTimeEntry.timeEntries?.find(
|
||||
(subTimeEntry) => subTimeEntry.id === timeEntry.id
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
selectedTimeEntries.value = selectedTimeEntries.value.filter((timeEntry) => {
|
||||
return !value.find(
|
||||
(filterTimeEntry) =>
|
||||
filterTimeEntry.id === timeEntry.id ||
|
||||
filterTimeEntry.timeEntries?.find(
|
||||
(subTimeEntry) => subTimeEntry.id === timeEntry.id
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -153,9 +141,7 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
|
||||
:date="key"
|
||||
:duration="sumDuration(value)"
|
||||
:checked="
|
||||
value.every((timeEntry: TimeEntry) =>
|
||||
selectedTimeEntries.includes(timeEntry)
|
||||
)
|
||||
value.every((timeEntry: TimeEntry) => selectedTimeEntries.includes(timeEntry))
|
||||
"
|
||||
@select-all="selectAllTimeEntries(value)"
|
||||
@unselect-all="unselectAllTimeEntries(value)"></TimeEntryRowHeading>
|
||||
@@ -180,10 +166,7 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
|
||||
:time-entry="entry"
|
||||
@selected="
|
||||
(timeEntries: TimeEntry[]) => {
|
||||
selectedTimeEntries = [
|
||||
...selectedTimeEntries,
|
||||
...timeEntries,
|
||||
];
|
||||
selectedTimeEntries = [...selectedTimeEntries, ...timeEntries];
|
||||
}
|
||||
"
|
||||
@unselected="
|
||||
@@ -191,8 +174,7 @@ function unselectAllTimeEntries(value: TimeEntriesGroupedByType[]) {
|
||||
selectedTimeEntries = selectedTimeEntries.filter(
|
||||
(item: TimeEntry) =>
|
||||
!timeEntriesToUnselect.find(
|
||||
(filterEntry: TimeEntry) =>
|
||||
filterEntry.id === item.id
|
||||
(filterEntry: TimeEntry) => filterEntry.id === item.id
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,9 +28,7 @@ const props = defineProps<{
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
updateTimeEntries: (
|
||||
changeset: UpdateMultipleTimeEntriesChangeset
|
||||
) => Promise<void>;
|
||||
updateTimeEntries: (changeset: UpdateMultipleTimeEntriesChangeset) => Promise<void>;
|
||||
currency: string;
|
||||
enableEstimatedTime: boolean;
|
||||
canCreateProject: boolean;
|
||||
@@ -71,9 +69,7 @@ const showMassUpdateModal = ref(false);
|
||||
<Checkbox
|
||||
id="selectAll"
|
||||
:checked="allSelected"
|
||||
@update:checked="
|
||||
allSelected ? emit('unselectAll') : emit('selectAll')
|
||||
">
|
||||
@update:checked="allSelected ? emit('unselectAll') : emit('selectAll')">
|
||||
</Checkbox>
|
||||
<InputLabel
|
||||
v-if="selectedTimeEntries.length > 0"
|
||||
@@ -81,10 +77,7 @@ const showMassUpdateModal = ref(false);
|
||||
class="select-none text-text-secondary">
|
||||
{{ selectedTimeEntries.length }} selected
|
||||
</InputLabel>
|
||||
<InputLabel
|
||||
v-else
|
||||
for="selectAll"
|
||||
class="text-text-secondary select-none"
|
||||
<InputLabel v-else for="selectAll" class="text-text-secondary select-none"
|
||||
>Select All</InputLabel
|
||||
>
|
||||
<button
|
||||
|
||||
@@ -31,9 +31,7 @@ const props = defineProps<{
|
||||
createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
updateTimeEntries: (
|
||||
changeset: UpdateMultipleTimeEntriesChangeset
|
||||
) => Promise<void>;
|
||||
updateTimeEntries: (changeset: UpdateMultipleTimeEntriesChangeset) => Promise<void>;
|
||||
currency: string;
|
||||
enableEstimatedTime: boolean;
|
||||
canCreateProject: boolean;
|
||||
@@ -172,15 +170,9 @@ type SelectOption = { label: string; value: string };
|
||||
<div class="space-y-2">
|
||||
<InputLabel for="project" value="Tag" />
|
||||
<div class="flex space-x-5">
|
||||
<TagDropdown
|
||||
v-model="selectedTags"
|
||||
:create-tag
|
||||
:tags="tags">
|
||||
<TagDropdown v-model="selectedTags" :create-tag :tags="tags">
|
||||
<template #trigger>
|
||||
<Badge
|
||||
:disabled="removeAllTags"
|
||||
tag="button"
|
||||
size="xlarge">
|
||||
<Badge :disabled="removeAllTags" tag="button" size="xlarge">
|
||||
<span v-if="selectedTags.length > 0">
|
||||
Set {{ selectedTags.length }} tags
|
||||
</span>
|
||||
@@ -189,9 +181,7 @@ type SelectOption = { label: string; value: string };
|
||||
</template>
|
||||
</TagDropdown>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="no_tags"
|
||||
v-model:checked="removeAllTags"></Checkbox>
|
||||
<Checkbox id="no_tags" v-model:checked="removeAllTags"></Checkbox>
|
||||
<InputLabel for="no_tags" value="Remove all tags" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -201,12 +191,8 @@ type SelectOption = { label: string; value: string };
|
||||
<div class="flex">
|
||||
<SelectDropdown
|
||||
v-model="timeEntryBillable"
|
||||
:get-key-from-item="
|
||||
(item: SelectOption) => item.value
|
||||
"
|
||||
:get-name-for-item="
|
||||
(item: SelectOption) => item.label
|
||||
"
|
||||
:get-key-from-item="(item: SelectOption) => item.value"
|
||||
:get-name-for-item="(item: SelectOption) => item.label"
|
||||
:items="[
|
||||
{
|
||||
label: 'Keep current billable status',
|
||||
@@ -223,12 +209,8 @@ type SelectOption = { label: string; value: string };
|
||||
]">
|
||||
<template #trigger>
|
||||
<Badge tag="button" size="xlarge">
|
||||
<span v-if="billable === undefined">
|
||||
Set billable status
|
||||
</span>
|
||||
<span v-else-if="billable === true">
|
||||
Billable
|
||||
</span>
|
||||
<span v-if="billable === undefined"> Set billable status </span>
|
||||
<span v-else-if="billable === true"> Billable </span>
|
||||
<span v-else> Non Billable </span></Badge
|
||||
>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
|
||||
import { defineProps, ref, inject, type ComputedRef } from 'vue';
|
||||
import {
|
||||
formatDateLocalized,
|
||||
formatStartEnd,
|
||||
} from '@/packages/ui/src/utils/time';
|
||||
import { formatDateLocalized, formatStartEnd } from '@/packages/ui/src/utils/time';
|
||||
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import type { Organization } from '@/packages/api/src';
|
||||
@@ -23,7 +20,6 @@ const open = ref(false);
|
||||
const triggerElement = ref<HTMLButtonElement | null>(null);
|
||||
|
||||
const organization = inject<ComputedRef<Organization>>('organization');
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -59,8 +55,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
|
||||
:start="start"
|
||||
:end="end"
|
||||
@changed="
|
||||
(newStart: string, newEnd: string) =>
|
||||
emit('changed', newStart, newEnd)
|
||||
(newStart: string, newEnd: string) => emit('changed', newStart, newEnd)
|
||||
"
|
||||
@close="open = false">
|
||||
</TimeRangeSelector>
|
||||
|
||||
@@ -72,9 +72,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
|
||||
|
||||
const memberName = computed(() => {
|
||||
if (props.members) {
|
||||
const member = props.members.find(
|
||||
(member) => member.user_id === props.timeEntry.user_id
|
||||
);
|
||||
const member = props.members.find((member) => member.user_id === props.timeEntry.user_id);
|
||||
if (member) {
|
||||
return member.name;
|
||||
}
|
||||
@@ -82,7 +80,7 @@ const memberName = computed(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
function onSelectChange(checked : boolean) {
|
||||
function onSelectChange(checked: boolean) {
|
||||
if (checked) {
|
||||
emit('selected');
|
||||
} else {
|
||||
@@ -96,18 +94,13 @@ function onSelectChange(checked : boolean) {
|
||||
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="sm:flex py-2 min-w-0 items-center justify-between group">
|
||||
<div class="sm:flex py-2 min-w-0 items-center justify-between group">
|
||||
<div class="flex items-center min-w-0">
|
||||
<Checkbox
|
||||
:checked="selected"
|
||||
@update:checked="onSelectChange" />
|
||||
<Checkbox :checked="selected" @update:checked="onSelectChange" />
|
||||
<div v-if="indent === true" class="w-10 h-7"></div>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 mr-4"
|
||||
:model-value="
|
||||
timeEntry.description
|
||||
"
|
||||
:model-value="timeEntry.description"
|
||||
@changed="updateTimeEntryDescription"></TimeEntryDescriptionInput>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
:create-project
|
||||
@@ -120,13 +113,10 @@ function onSelectChange(checked : boolean) {
|
||||
:project="timeEntry.project_id"
|
||||
:currency="currency"
|
||||
:enable-estimated-time
|
||||
:task="
|
||||
timeEntry.task_id
|
||||
"
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center font-medium space-x-1 lg:space-x-2">
|
||||
<div class="flex items-center font-medium space-x-1 lg:space-x-2">
|
||||
<div v-if="showMember && members" class="text-sm px-2">
|
||||
{{ memberName }}
|
||||
</div>
|
||||
@@ -137,34 +127,28 @@ function onSelectChange(checked : boolean) {
|
||||
@changed="updateTimeEntryTags"></TimeEntryRowTagDropdown>
|
||||
<BillableToggleButton
|
||||
:model-value="timeEntry.billable"
|
||||
:class="twMerge('opacity-50 group-hover:opacity-100 focus-visible:opacity-100')"
|
||||
:class="
|
||||
twMerge('opacity-50 group-hover:opacity-100 focus-visible:opacity-100')
|
||||
"
|
||||
size="small"
|
||||
@changed="
|
||||
updateTimeEntryBillable
|
||||
"></BillableToggleButton>
|
||||
@changed="updateTimeEntryBillable"></BillableToggleButton>
|
||||
<div class="flex-1">
|
||||
<TimeEntryRangeSelector
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
:show-date
|
||||
@changed="
|
||||
updateStartEndTime
|
||||
"></TimeEntryRangeSelector>
|
||||
@changed="updateStartEndTime"></TimeEntryRangeSelector>
|
||||
</div>
|
||||
<TimeEntryRowDurationInput
|
||||
:start="timeEntry.start"
|
||||
:end="timeEntry.end"
|
||||
@changed="
|
||||
updateStartEndTime
|
||||
"></TimeEntryRowDurationInput>
|
||||
@changed="updateStartEndTime"></TimeEntryRowDurationInput>
|
||||
<TimeTrackerStartStop
|
||||
:active="!!(timeEntry.start && !timeEntry.end)"
|
||||
class="opacity-20 flex focus-visible:opacity-100 group-hover:opacity-100"
|
||||
@changed="onStartStopClick"></TimeTrackerStartStop>
|
||||
<TimeEntryMoreOptionsDropdown
|
||||
@delete="
|
||||
deleteTimeEntry
|
||||
"></TimeEntryMoreOptionsDropdown>
|
||||
@delete="deleteTimeEntry"></TimeEntryMoreOptionsDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</MainContainer>
|
||||
|
||||
@@ -28,13 +28,8 @@ const open = ref(false);
|
||||
|
||||
function updateTimerAndStartLiveTimerUpdate() {
|
||||
const defaultUnit =
|
||||
organizationSettings?.value?.intervalFormat === 'decimal'
|
||||
? 'hours'
|
||||
: 'minutes';
|
||||
const { seconds } = parseTimeInput(
|
||||
temporaryCustomTimerEntry.value,
|
||||
defaultUnit
|
||||
);
|
||||
organizationSettings?.value?.intervalFormat === 'decimal' ? 'hours' : 'minutes';
|
||||
const { seconds } = parseTimeInput(temporaryCustomTimerEntry.value, defaultUnit);
|
||||
if (seconds && seconds > 0) {
|
||||
let newEndDate = props.end;
|
||||
let newStartDate = props.start;
|
||||
|
||||
@@ -36,9 +36,7 @@ const timeEntryTags = computed<Tag[]>(() => {
|
||||
:border="false"
|
||||
size="large"
|
||||
class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary"
|
||||
:name="
|
||||
timeEntryTags.map((tag: Tag) => tag.name).join(', ')
|
||||
"></TagBadge>
|
||||
:name="timeEntryTags.map((tag: Tag) => tag.name).join(', ')"></TagBadge>
|
||||
</button>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
|
||||
Reference in New Issue
Block a user