refactor timetracker to seperate data and ui logic

2026-08-14 11:12:16 +01:00 · 2024-07-22 17:56:51 +02:00
parent a9c874e540
commit 06fef6e40f
41 changed files with 1984 additions and 961 deletions
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerControls.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import TimeTrackerTagDropdown from '@/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import TimeTrackerRangeSelector from '@/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue';
+import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
+import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
+import type {
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Tag,
+    Task,
+    TimeEntry,
+    Client,
+} from '@/utils/api';
+import { ref } from 'vue';
+import type { Dayjs } from 'dayjs';
+
+const currentTimeEntry = defineModel<TimeEntry>('currentTimeEntry', {
+    required: true,
+});
+const liveTimer = defineModel<Dayjs | null>('liveTimer', { required: true });
+
+const currentTimeEntryDescriptionInput = ref<HTMLInputElement | null>(null);
+
+const props = defineProps<{
+    projects: Project[];
+    tasks: Task[];
+    tags: Tag[];
+    clients: Client[];
+    createTag: (name: string) => Promise<Tag | undefined>;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
+    isActive: boolean;
+}>();
+
+const emit = defineEmits<{
+    startTimer: [];
+    stopTimer: [];
+    updateTimeEntry: [];
+    startLiveTimer: [];
+    stopLiveTimer: [];
+}>();
+
+function updateProject() {
+    setBillableDefaultForProject();
+    emit('updateTimeEntry');
+}
+
+function startTimerIfNotActive() {
+    if (!props.isActive) {
+        emit('startTimer');
+    }
+}
+
+function setBillableDefaultForProject() {
+    const project = props.projects.find(
+        (project) => project.id === currentTimeEntry.value.project_id
+    );
+    if (project) {
+        currentTimeEntry.value.billable = project.is_billable;
+    }
+}
+
+function onToggleButtonPress(newState: boolean) {
+    if (newState) {
+        emit('startTimer');
+        currentTimeEntryDescriptionInput.value?.focus();
+    } else {
+        emit('stopTimer');
+    }
+}
+</script>
+
+<template>
+    <div
+        class="flex items-center relative @container"
+        data-testid="dashboard_timer">
+        <div
+            class="flex flex-col sm:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
+            <div class="flex items-center pr-6">
+                <input
+                    placeholder="What are you working on?"
+                    data-testid="time_entry_description"
+                    ref="currentTimeEntryDescriptionInput"
+                    v-model="currentTimeEntry.description"
+                    @keydown.enter="startTimerIfNotActive"
+                    @blur="$emit('updateTimeEntry')"
+                    class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator lg:px-4 text-base @4xl:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
+                    type="text" />
+            </div>
+            <div class="flex items-center justify-between pl-2 shrink min-w-0">
+                <div
+                    class="flex items-center w-[130px] sm:w-auto shrink min-w-0">
+                    <TimeTrackerProjectTaskDropdown
+                        :createClient
+                        :clients
+                        :createProject
+                        :projects="projects"
+                        :tasks="tasks"
+                        @changed="updateProject"
+                        v-model:project="currentTimeEntry.project_id"
+                        v-model:task="
+                            currentTimeEntry.task_id
+                        "></TimeTrackerProjectTaskDropdown>
+                </div>
+                <div class="flex items-center lg:space-x-2 px-2 lg:px-4">
+                    <TimeTrackerTagDropdown
+                        @changed="$emit('updateTimeEntry')"
+                        :createTag
+                        :tags="tags"
+                        v-model="
+                            currentTimeEntry.tags
+                        "></TimeTrackerTagDropdown>
+                    <BillableToggleButton
+                        @changed="$emit('updateTimeEntry')"
+                        v-model="
+                            currentTimeEntry.billable
+                        "></BillableToggleButton>
+                </div>
+                <div class="border-l border-card-border">
+                    <TimeTrackerRangeSelector
+                        @startLiveTimer="emit('startLiveTimer')"
+                        @stopLiveTimer="emit('stopLiveTimer')"
+                        @updateTimer="emit('updateTimeEntry')"
+                        @startTimer="emit('startTimer')"
+                        v-model:currentTimeEntry="currentTimeEntry"
+                        v-model:liveTimer="liveTimer"
+                        @keydown.enter="
+                            startTimerIfNotActive
+                        "></TimeTrackerRangeSelector>
+                </div>
+            </div>
+        </div>
+        <div
+            class="pl-4 lg:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0">
+            <TimeTrackerStartStop
+                :active="isActive"
+                @changed="onToggleButtonPress"
+                size="large"></TimeTrackerStartStop>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>