mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-05-07 20:32:26 +00:00
Improve Time page responsiveness and compact tags, fixes #896
This commit is contained in:
Gregor Vostrak
@@ -114,7 +114,7 @@ function deleteSelected() {
|
||||
:tags="tags"
|
||||
:currency="getOrganizationCurrencyString()"
|
||||
:clients="clients"
|
||||
class="border-t border-default-background-separator"
|
||||
class="border-t border-default-background-separator hidden sm:block"
|
||||
:update-time-entries="
|
||||
(args) =>
|
||||
updateTimeEntries(
|
||||
|
||||
@@ -47,7 +47,7 @@ const tagClasses = computed(() => {
|
||||
tagClasses,
|
||||
badgeClasses[size],
|
||||
borderClasses,
|
||||
'rounded transition inline-flex items-center font-medium text-text-primary disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||||
'rounded transition inline-flex items-center font-medium text-text-primary disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring min-w-0 overflow-hidden',
|
||||
props.class
|
||||
)
|
||||
">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="px-3 sm:px-4 lg:px-6 mx-auto">
|
||||
<div class="px-2 sm:px-4 lg:px-6 mx-auto">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,12 +11,14 @@ const props = withDefaults(
|
||||
class?: string;
|
||||
color?: string;
|
||||
border?: boolean;
|
||||
showIcon?: boolean;
|
||||
}>(),
|
||||
{
|
||||
size: 'base',
|
||||
tag: 'div',
|
||||
color: 'var(--theme-color-icon-default)',
|
||||
border: true,
|
||||
showIcon: true,
|
||||
}
|
||||
);
|
||||
|
||||
@@ -28,7 +30,7 @@ const indicatorClasses = {
|
||||
|
||||
<template>
|
||||
<Badge :name :size :tag :class="props.class" :color :border>
|
||||
<TagIcon :class="twMerge(indicatorClasses[size])"></TagIcon>
|
||||
<TagIcon v-if="showIcon" :class="twMerge(indicatorClasses[size])"></TagIcon>
|
||||
<span v-if="name">
|
||||
{{ name }}
|
||||
</span>
|
||||
|
||||
@@ -23,9 +23,11 @@ const props = withDefaults(
|
||||
tags: Tag[];
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
align?: 'center' | 'end' | 'start';
|
||||
showNoTagOption?: boolean;
|
||||
}>(),
|
||||
{
|
||||
align: 'start',
|
||||
showNoTagOption: true,
|
||||
}
|
||||
);
|
||||
|
||||
@@ -55,6 +57,7 @@ const filteredTags = computed(() => {
|
||||
});
|
||||
|
||||
const showNoTag = computed(() => {
|
||||
if (!props.showNoTagOption) return false;
|
||||
const search = searchValue.value.toLowerCase().trim();
|
||||
if (!search) return true;
|
||||
return NO_TAG_LABEL.toLowerCase().includes(search);
|
||||
@@ -101,7 +104,7 @@ const showCreateTagModal = ref(false);
|
||||
<template #content>
|
||||
<ComboboxRoot
|
||||
v-model:search-term="searchValue"
|
||||
:open="open"
|
||||
:open="true"
|
||||
class="p-2"
|
||||
:filter-function="(val: string[]) => val">
|
||||
<ComboboxAnchor>
|
||||
|
||||
@@ -94,7 +94,8 @@ function onSelectChange(checked: boolean) {
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 items-center min-w-0 justify-between group">
|
||||
<div class="flex space-x-3 items-center min-w-0">
|
||||
<!-- Desktop layout -->
|
||||
<div class="hidden @lg:flex space-x-3 items-center min-w-0">
|
||||
<Checkbox
|
||||
:checked="
|
||||
timeEntry.timeEntries.every((aggregateTimeEntry: TimeEntry) =>
|
||||
@@ -107,10 +108,11 @@ function onSelectChange(checked: boolean) {
|
||||
{{ timeEntry?.timeEntries?.length }}
|
||||
</GroupedItemsCountButton>
|
||||
<TimeEntryDescriptionInput
|
||||
class="min-w-0 mr-4"
|
||||
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
|
||||
@@ -125,7 +127,8 @@ function onSelectChange(checked: boolean) {
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center font-medium space-x-1 @lg:space-x-2">
|
||||
<div
|
||||
class="hidden @lg:flex items-center font-medium space-x-1 @lg:space-x-2 shrink-0">
|
||||
<TimeEntryRowTagDropdown
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
@@ -180,6 +183,74 @@ 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"
|
||||
:show-badge-border="false"
|
||||
: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
|
||||
|
||||
@@ -31,11 +31,11 @@ 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 text-ellipsis whitespace-nowrap overflow-hidden">
|
||||
<div class="relative text-sm font-medium min-w-0">
|
||||
<div
|
||||
:class="[
|
||||
'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-3 pr-1',
|
||||
'opacity-0 h-4 text-sm whitespace-pre font-medium min-w-0 pl-1.5 @lg:pl-3 pr-1',
|
||||
{ 'min-w-[130px]': displaysPlaceholder },
|
||||
]">
|
||||
{{ liveDataValue }}
|
||||
@@ -44,7 +44,7 @@ const displaysPlaceholder = computed(() => {
|
||||
data-testid="time_entry_description"
|
||||
:value="liveDataValue"
|
||||
placeholder="Add a description"
|
||||
class="absolute px-0 h-full min-w-0 pl-3 pr-1 left-0 top-0 w-full text-sm text-text-primary font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0"
|
||||
class="absolute px-0 h-full min-w-0 pl-1.5 @lg:pl-3 pr-1 left-0 top-0 w-full text-sm text-text-primary font-medium bg-transparent focus-visible:ring-0 rounded-lg border-0"
|
||||
@blur="onChange"
|
||||
@input="onInput"
|
||||
@keydown.enter="onChange" />
|
||||
|
||||
@@ -63,7 +63,7 @@ const showMassUpdateModal = ref(false);
|
||||
:class="
|
||||
twMerge(
|
||||
props.class,
|
||||
'text-sm py-1.5 font-medium flex border-b border-border-primary items-center space-x-3'
|
||||
'text-sm py-1.5 font-medium hidden sm:flex border-b border-border-primary items-center space-x-3'
|
||||
)
|
||||
">
|
||||
<Checkbox
|
||||
|
||||
@@ -113,14 +113,16 @@ async function handleDeleteTimeEntry() {
|
||||
data-testid="time_entry_row">
|
||||
<MainContainer class="min-w-0">
|
||||
<div class="@xl:flex py-2 min-w-0 items-center justify-between group">
|
||||
<div class="flex items-center min-w-0">
|
||||
<!-- 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"
|
||||
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
|
||||
@@ -134,7 +136,8 @@ async function handleDeleteTimeEntry() {
|
||||
:task="timeEntry.task_id"
|
||||
@changed="updateProjectAndTask"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<div class="flex items-center font-medium space-x-1 @lg:space-x-2">
|
||||
<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>
|
||||
@@ -171,6 +174,58 @@ async function handleDeleteTimeEntry() {
|
||||
@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"
|
||||
:show-badge-border="false"
|
||||
: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>
|
||||
</MainContainer>
|
||||
</div>
|
||||
|
||||
@@ -36,8 +36,8 @@ function selectUnselectAll(value: boolean) {
|
||||
class="bg-background dark:bg-secondary border-b border-border-primary py-1 text-xs @sm:text-sm">
|
||||
<MainContainer>
|
||||
<div class="flex group justify-between items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-5">
|
||||
<div class="flex items-center @lg:space-x-2 pl-1.5 @lg:pl-0">
|
||||
<div class="w-5 hidden @lg:block">
|
||||
<CalendarIcon
|
||||
class="w-3 @sm:w-4 text-icon-default group-hover:hidden block">
|
||||
</CalendarIcon>
|
||||
@@ -50,11 +50,11 @@ function selectUnselectAll(value: boolean) {
|
||||
<span class="font-medium text-text-secondary">
|
||||
{{ formatWeekday(date) }}
|
||||
</span>
|
||||
<span class="text-text-tertiary">
|
||||
<span class="text-text-tertiary ml-2">
|
||||
{{ formatDate(date, organization?.date_format) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-text-secondary pr-[87px] @lg:pr-[92px]">
|
||||
<div class="text-text-secondary pr-2 @lg:pr-[92px]">
|
||||
<span class="font-medium">
|
||||
{{
|
||||
formatHumanReadableDuration(
|
||||
|
||||
@@ -4,10 +4,16 @@ import { computed } from 'vue';
|
||||
import TagBadge from '@/packages/ui/src/Tag/TagBadge.vue';
|
||||
import type { Tag } from '@/packages/api/src';
|
||||
|
||||
const props = defineProps<{
|
||||
tags: Tag[];
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
tags: Tag[];
|
||||
createTag: (name: string) => Promise<Tag | undefined>;
|
||||
compact?: boolean;
|
||||
}>(),
|
||||
{
|
||||
compact: false,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
changed: [model: string[]];
|
||||
@@ -20,23 +26,41 @@ const model = defineModel<string[]>({
|
||||
const timeEntryTags = computed<Tag[]>(() => {
|
||||
return props.tags.filter((tag) => model.value.includes(tag.id));
|
||||
});
|
||||
|
||||
const displayName = computed(() => {
|
||||
if (props.compact && timeEntryTags.value.length > 0) {
|
||||
const count = timeEntryTags.value.length;
|
||||
return count === 1 ? '1 tag' : `${count} tags`;
|
||||
}
|
||||
if (timeEntryTags.value.length >= 3) {
|
||||
const firstTag = timeEntryTags.value[0]?.name || '';
|
||||
const remaining = timeEntryTags.value.length - 1;
|
||||
return `${firstTag} + ${remaining} more`;
|
||||
}
|
||||
return timeEntryTags.value.map((tag: Tag) => tag.name).join(', ');
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<TagDropdown
|
||||
v-model="model"
|
||||
:tags="tags"
|
||||
align="end"
|
||||
:show-no-tag-option="false"
|
||||
:create-tag
|
||||
@changed="emit('changed', model)">
|
||||
<template #trigger>
|
||||
<button
|
||||
data-testid="time_entry_tag_dropdown"
|
||||
class="opacity-50 group-hover:opacity-100 group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center">
|
||||
:class="[
|
||||
'group/dropdown focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:opacity-100 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center',
|
||||
compact ? '' : 'opacity-50 group-hover:opacity-100',
|
||||
]">
|
||||
<TagBadge
|
||||
: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>
|
||||
:show-icon="!(compact && timeEntryTags.length > 0)"
|
||||
class="border-0 sm:px-1.5 text-icon-default group-focus-within/dropdown:text-text-primary whitespace-nowrap"
|
||||
:name="displayName"></TagBadge>
|
||||
</button>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
|
||||
@@ -222,7 +222,7 @@ useSelectEvents(
|
||||
<div
|
||||
v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
|
||||
ref="floating"
|
||||
class="z-50 w-[min(500px,100vw-2rem)]"
|
||||
class="z-50 w-[min(640px,100vw-2rem)]"
|
||||
:style="floatingStyles">
|
||||
<div
|
||||
class="rounded-lg w-full border border-card-border overflow-hidden shadow-dropdown bg-card-background">
|
||||
|
||||
@@ -515,14 +515,14 @@ const showCreateProject = ref(false);
|
||||
props.class
|
||||
)
|
||||
">
|
||||
<div class="flex items-center lg:space-x-1 min-w-0">
|
||||
<span class="whitespace-nowrap text-xs lg:text-sm">
|
||||
<div class="flex items-center lg:space-x-1 min-w-0 overflow-hidden">
|
||||
<span class="text-xs lg:text-sm shrink-0">
|
||||
{{ selectedProjectName }}
|
||||
</span>
|
||||
<ChevronRightIcon
|
||||
v-if="currentTask"
|
||||
class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
|
||||
<div v-if="currentTask" class="min-w-0 shrink text-xs lg:text-sm truncate">
|
||||
<div v-if="currentTask" class="min-w-0 text-xs lg:text-sm truncate shrink">
|
||||
{{ currentTask.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,15 +42,15 @@ const task = computed(() => {
|
||||
ref="projectDropdownTrigger"
|
||||
:color="project?.color"
|
||||
:name="project?.name"
|
||||
class="shrink-0">
|
||||
class="shrink min-w-0 max-w-[50%]">
|
||||
<div v-if="project" class="flex items-center lg:space-x-1 min-w-0">
|
||||
<span class="whitespace-nowrap text-xs">
|
||||
<span class="text-xs whitespace-nowrap shrink-0">
|
||||
{{ project?.name }}
|
||||
</span>
|
||||
<ChevronRightIcon
|
||||
v-if="task"
|
||||
class="w-4 lg:w-5 text-text-secondary shrink-0"></ChevronRightIcon>
|
||||
<div v-if="task" class="min-w-0 shrink text-xs truncate">
|
||||
<div v-if="task" class="min-w-0 text-xs truncate">
|
||||
{{ task.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user