adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-13 18:52:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

add format check, update prettier rules, apply rules consistently

Browse Source
This commit is contained in:
Gregor Vostrak
2025-07-29 18:58:31 +02:00
parent b11672732b
commit cb30487a21
323 changed files with 3728 additions and 5579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
View File

@@ -13,19 +13,19 @@ import type {
TimeEntry,
Client,
} from '@/packages/api/src';
import {computed, nextTick, ref, watch} from 'vue';
import type {Dayjs} from 'dayjs';
import {useTimeEntriesStore} from '@/utils/useTimeEntries';
import {storeToRefs} from 'pinia';
import {useFocus} from "@vueuse/core";
import {autoUpdate, flip, limitShift, offset, shift, useFloating} from "@floating-ui/vue";
import TimeTrackerRecentlyTrackedEntry from "@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue";
import {useSelectEvents} from "@/packages/ui/src/utils/select";
import { computed, nextTick, ref, watch } from 'vue';
import type { Dayjs } from 'dayjs';
import { useTimeEntriesStore } from '@/utils/useTimeEntries';
import { storeToRefs } from 'pinia';
import { useFocus } from '@vueuse/core';
import { autoUpdate, flip, limitShift, offset, shift, useFloating } from '@floating-ui/vue';
import TimeTrackerRecentlyTrackedEntry from '@/packages/ui/src/TimeTracker/TimeTrackerRecentlyTrackedEntry.vue';
import { useSelectEvents } from '@/packages/ui/src/utils/select';
const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
required: true,
});
const liveTimer = defineModel<Dayjs | null>('liveTimer', {required: true});
const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
@@ -60,13 +60,12 @@ function setAndStartTimer(timeEntry: TimeEntry) {
setCurrentTimeEntry(timeEntry);
if (!props.isActive) {
emit('startTimer');
}
else {
} else {
emit('updateTimeEntry');
}
}
function setCurrentTimeEntry(timeEntry: TimeEntry){
function setCurrentTimeEntry(timeEntry: TimeEntry) {
currentTimeEntry.value.description = timeEntry.description;
currentTimeEntry.value.project_id = timeEntry.project_id;
currentTimeEntry.value.task_id = timeEntry.task_id;
@@ -75,21 +74,21 @@ function setCurrentTimeEntry(timeEntry: TimeEntry){
}
function startTimerIfNotActive() {
if(highlightedDropdownEntryId.value){
const timeEntry = filteredRecentlyTrackedTimeEntries.value.find((item) => item.id === highlightedDropdownEntryId.value);
if(timeEntry){
if (highlightedDropdownEntryId.value) {
const timeEntry = filteredRecentlyTrackedTimeEntries.value.find(
(item) => item.id === highlightedDropdownEntryId.value
);
if (timeEntry) {
setCurrentTimeEntry(timeEntry);
showDropdown.value = false;
}
}
else {
} else {
currentTimeEntry.value.description = tempDescription.value;
}
if (!props.isActive) {
emit('startTimer');
}
else {
} else {
emit('updateTimeEntry');
}
}
@@ -108,7 +107,7 @@ const blockRefocus = ref(false);
function onToggleButtonPress(newState: boolean) {
if (newState) {
emit('startTimer');
if (!blockRefocus.value){
if (!blockRefocus.value) {
currentTimeEntryDescriptionInput.value?.focus();
}
} else {
@@ -131,41 +130,47 @@ function updateTimeEntryDescription() {
}
}
const {timeEntries} = storeToRefs(useTimeEntriesStore());
const { timeEntries } = storeToRefs(useTimeEntriesStore());
const filteredRecentlyTrackedTimeEntries = computed(() => {
// do not include running time entries
const finishedTimeEntries = timeEntries.value.filter((item) => item.end !== null);
// filter out duplicates based on description, task, project, tags and billable
const nonDuplicateTimeEntries = finishedTimeEntries.filter((item, index, self) => {
return index === self.findIndex((t) => (
t.description === item.description &&
t.task_id === item.task_id &&
t.project_id === item.project_id &&
t.tags.length === item.tags.length &&
t.tags.every((tag) => item.tags.includes(tag)) &&
t.billable === item.billable
));
return (
index ===
self.findIndex(
(t) =>
t.description === item.description &&
t.task_id === item.task_id &&
t.project_id === item.project_id &&
t.tags.length === item.tags.length &&
t.tags.every((tag) => item.tags.includes(tag)) &&
t.billable === item.billable
)
);
});
// filter time entries based on current description
return nonDuplicateTimeEntries.filter((item) => {
return item.description
?.toLowerCase()
?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
}).slice(0, 5);
return nonDuplicateTimeEntries
.filter((item) => {
return item.description
?.toLowerCase()
?.includes(tempDescription.value?.toLowerCase()?.trim() || '');
})
.slice(0, 5);
});
const showDropdown = ref(false);
const {focused} = useFocus(currentTimeEntryDescriptionInput)
const { focused } = useFocus(currentTimeEntryDescriptionInput);
watch(focused, (focused) => {
nextTick(() => {
// make sure the click event on the dropdown does not get interrupted
showDropdown.value = focused
showDropdown.value = focused;
// make sure that the input does not get refocused after the dropdown is closed
if(!focused){
if (!focused) {
blockRefocus.value = true;
setTimeout(() => {
blockRefocus.value = false;
@@ -174,9 +179,8 @@ watch(focused, (focused) => {
});
});
const floating = ref(null);
const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating, {
const { floatingStyles } = useFloating(currentTimeEntryDescriptionInput, floating, {
placement: 'bottom-start',
whileElementsMounted: autoUpdate,
middleware: [
@@ -193,16 +197,16 @@ const {floatingStyles} = useFloating(currentTimeEntryDescriptionInput, floating,
});
const highlightedDropdownEntryId = ref<string | null>(null);
useSelectEvents(filteredRecentlyTrackedTimeEntries,
useSelectEvents(
filteredRecentlyTrackedTimeEntries,
highlightedDropdownEntryId,
(item) => item.id,
showDropdown)
showDropdown
);
</script>
<template>
<div
class="flex items-center relative @container"
data-testid="dashboard_timer">
<div class="flex items-center relative @container" data-testid="dashboard_timer">
<div
class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
<div class="flex flex-1 items-center pr-6 relative">
@@ -211,18 +215,18 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
v-model="tempDescription"
placeholder="What are you working on?"
data-testid="time_entry_description"
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
type="text"
@keydown.enter="startTimerIfNotActive"
@keydown.esc="showDropdown = false"
@blur="updateTimeEntryDescription"/>
@blur="updateTimeEntryDescription" />
<div
v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
ref="floating"
class="z-50 w-full max-w-2xl"
:style="floatingStyles">
<div
class="rounded-lg w-full fixed min-w-xl top-0 left-0 border border-card-border overflow-none shadow-dropdown bg-card-background">
class="rounded-lg w-full fixed min-w-xl top-0 left-0 border border-card-border overflow-none shadow-dropdown bg-card-background">
<div
class="text-text-tertiary text-xs font-semibold border-b border-border-tertiary px-2 py-1.5">
Recently Tracked Time Entries
@@ -236,20 +240,18 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
:projects="projects"
:tasks="tasks"
@mousedown="setAndStartTimer(timeEntry)"
@mouseenter="highlightedDropdownEntryId = timeEntry.id"
></TimeTrackerRecentlyTrackedEntry>
@mouseenter="
highlightedDropdownEntryId = timeEntry.id
"></TimeTrackerRecentlyTrackedEntry>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between pl-2 shrink min-w-0">
<div
class="flex items-center w-[130px] @2xl:w-auto shrink min-w-0">
<div class="flex items-center w-[130px] @2xl:w-auto shrink min-w-0">
<TimeTrackerProjectTaskDropdown
v-model:project="currentTimeEntry.project_id"
v-model:task="
currentTimeEntry.task_id
"
v-model:task="currentTimeEntry.task_id"
:create-client
:can-create-project
:clients
@@ -262,16 +264,12 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
</div>
<div class="flex items-center @2xl:space-x-2 px-2 @2xl:px-4">
<TimeTrackerTagDropdown
v-model="
currentTimeEntry.tags
"
v-model="currentTimeEntry.tags"
:create-tag
:tags="tags"
@changed="$emit('updateTimeEntry')"></TimeTrackerTagDropdown>
<BillableToggleButton
v-model="
currentTimeEntry.billable
"
v-model="currentTimeEntry.billable"
@changed="$emit('updateTimeEntry')"></BillableToggleButton>
</div>
<div class="border-l border-card-border">
@@ -282,14 +280,11 @@ useSelectEvents(filteredRecentlyTrackedTimeEntries,
@stop-live-timer="emit('stopLiveTimer')"
@update-timer="emit('updateTimeEntry')"
@start-timer="emit('startTimer')"
@keydown.enter="
startTimerIfNotActive
"></TimeTrackerRangeSelector>
@keydown.enter="startTimerIfNotActive"></TimeTrackerRangeSelector>
</div>
</div>
</div>
<div
class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
<div class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
<TimeTrackerStartStop
:active="isActive"
size="large"