refactor timetracker to seperate data and ui logic

resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
-import type { Project, Tag, Task, TimeEntry } from '@/utils/api';
+import type {
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Tag,
+    Task,
+    TimeEntry,
+    Client,
+} from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
-import { type TimeEntriesGroupedByType } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
@@ -15,13 +22,17 @@ import {
 } from '../../../utils/time';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import GroupedItemsCountButton from '@/Components/Common/GroupedItemsCountButton.vue';
+import type { TimeEntriesGroupedByType } from '@/types/time-entries';
 
 const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
     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>;
     onStartStopClick: (timeEntry: TimeEntry) => void;
     updateTimeEntries: (timeEntries: TimeEntry[]) => void;
     deleteTimeEntries: (timeEntries: TimeEntry[]) => void;
@@ -64,7 +75,7 @@ const expanded = ref(false);
         data-testid="time_entry_row">
         <MainContainer>
             <div class="sm:flex py-1.5 items-center justify-between group">
-                <div class="flex space-x-3 items-center">
+                <div class="flex space-x-3 items-center min-w-0">
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
@@ -81,6 +92,9 @@ const expanded = ref(false);
                             "></TimeEntryDescriptionInput>
                     </div>
                     <TimeTrackerProjectTaskDropdown
+                        :clients
+                        :createProject
+                        :createClient
                         :projects="projects"
                         :tasks="tasks"
                         :showBadgeBorder="false"
@@ -134,6 +148,9 @@ const expanded = ref(false);
             <TimeEntryRow
                 :projects="projects"
                 :tasks="tasks"
+                :createClient
+                :clients
+                :createProject
                 :tags="tags"
                 indent
                 :updateTimeEntry="(arg) => updateTimeEntries([arg])"

resources/js/Components/Common/TimeEntry/TimeEntryCreateModal.vue

@@ -17,15 +17,36 @@ import { storeToRefs } from 'pinia';
 import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useTagsStore } from '@/utils/useTags';
+import type {
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Client,
+} from '@/utils/api';
+import { useClientsStore } from '@/utils/useClients';
 const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
 const { tasks } = storeToRefs(taskStore);
+const clientStore = useClientsStore();
+const { clients } = storeToRefs(clientStore);
 
 const { createTimeEntry } = useTimeEntriesStore();
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
+async function createProject(
+    project: CreateProjectBody
+): Promise<Project | undefined> {
+    return await useProjectsStore().createProject(project);
+}
+
+async function createClient(
+    body: CreateClientBody
+): Promise<Client | undefined> {
+    return await useClientsStore().createClient(body);
+}
+
 const description = ref<HTMLInputElement | null>(null);
 
 watch(show, (value) => {
@@ -102,6 +123,9 @@ async function createTag(tag: string) {
                 <div class="flex items-center justify-between">
                     <div>
                         <TimeTrackerProjectTaskDropdown
+                            :clients
+                            :createProject
+                            :createClient
                             class="mt-1"
                             size="xlarge"
                             :projects="projects"

resources/js/Components/Common/TimeEntry/TimeEntryGroupedTable.vue

@@ -1,29 +1,35 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type {
+    CreateClientBody,
+    CreateProjectBody,
     CreateTimeEntryBody,
     Project,
     Tag,
     Task,
     TimeEntry,
+    Client,
 } from '@/utils/api';
 import { getDayJsInstance, getLocalizedDateFromTimestamp } from '@/utils/time';
-import type { TimeEntriesGroupedByType } from '@/utils/useTimeEntries';
 import TimeEntryAggregateRow from '@/Components/Common/TimeEntry/TimeEntryAggregateRow.vue';
 import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import dayjs from 'dayjs';
+import type { TimeEntriesGroupedByType } from '@/types/time-entries';
 
 const props = defineProps<{
     timeEntries: TimeEntry[];
     projects: Project[];
     tasks: Task[];
     tags: Tag[];
+    clients: Client[];
     createTag: (name: string) => Promise<Tag | undefined>;
     updateTimeEntry: (entry: TimeEntry) => void;
     updateTimeEntries: (entries: TimeEntry[]) => void;
     deleteTimeEntries: (entries: TimeEntry[]) => void;
     createTimeEntry: (entry: Omit<CreateTimeEntryBody, 'member_id'>) => void;
+    createProject: (project: CreateProjectBody) => Promise<Project | undefined>;
+    createClient: (client: CreateClientBody) => Promise<Client | undefined>;
 }>();
 
 const groupedTimeEntries = computed(() => {
@@ -109,9 +115,12 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
         <TimeEntryRowHeading :date="key"></TimeEntryRowHeading>
         <template v-for="entry in value" :key="entry.id">
             <TimeEntryAggregateRow
+                :createProject
+                :createClient
                 :projects="projects"
                 :tasks="tasks"
                 :tags="tags"
+                :clients
                 :onStartStopClick="startTimeEntryFromExisting"
                 :updateTimeEntries
                 :deleteTimeEntries
@@ -119,9 +128,12 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
                 v-if="'timeEntries' in entry && entry.timeEntries.length > 1"
                 :time-entry="entry"></TimeEntryAggregateRow>
             <TimeEntryRow
+                :createClient
+                :createProject
                 :projects="projects"
                 :tasks="tasks"
                 :tags="tags"
+                :clients
                 :createTag
                 :updateTimeEntry
                 :onStartStopClick="() => startTimeEntryFromExisting(entry)"

resources/js/Components/Common/TimeEntry/TimeEntryRow.vue

@@ -2,7 +2,15 @@
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
-import type { Project, Tag, Task, TimeEntry } from '@/utils/api';
+import type {
+    Client,
+    CreateClientBody,
+    CreateProjectBody,
+    Project,
+    Tag,
+    Task,
+    TimeEntry,
+} from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue';
@@ -16,7 +24,10 @@ 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>;
     onStartStopClick: () => void;
     deleteTimeEntry: () => void;
     updateTimeEntry: (timeEntry: TimeEntry) => void;
@@ -54,7 +65,7 @@ function updateProjectAndTask(projectId: string, taskId: string) {
         <MainContainer>
             <div
                 class="sm:flex py-1 lg:py-1.5 items-center justify-between group">
-                <div class="flex space-x-1 items-center">
+                <div class="flex space-x-1 items-center min-w-0">
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
@@ -66,6 +77,9 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
                     <TimeTrackerProjectTaskDropdown
+                        :createProject
+                        :createClient
+                        :clients
                         :projects="projects"
                         :tasks="tasks"
                         :showBadgeBorder="false"