refactor time entry and projecttaskdropdown components to not rely on pinia stores

resources/js/Pages/Projects.vue

@@ -12,12 +12,14 @@ import { canCreateProjects } from '@/utils/permissions';
 import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
 import TabBar from '@/Components/Common/TabBar/TabBar.vue';
 import { storeToRefs } from 'pinia';
+import { useClientsStore } from '@/utils/useClients';
+import type { CreateProjectBody } from '@/utils/api';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
 });
-
-const createProject = ref(false);
+const { clients } = storeToRefs(useClientsStore());
+const showCreateProjectModal = ref(false);
 
 const activeTab = ref<'active' | 'archived'>('active');
 
@@ -25,6 +27,11 @@ function isActiveTab(tab: string) {
     return activeTab.value === tab;
 }
 
+async function createProject(project: CreateProjectBody, callback: () => void) {
+    await useProjectsStore().createProject(project);
+    callback();
+}
+
 const { projects } = storeToRefs(useProjectsStore());
 
 const shownProjects = computed(() => {
@@ -59,11 +66,13 @@ const shownProjects = computed(() => {
             <SecondaryButton
                 v-if="canCreateProjects()"
                 :icon="PlusIcon"
-                @click="createProject = true"
+                @click="showCreateProjectModal = true"
                 >Create Project
             </SecondaryButton>
             <ProjectCreateModal
-                v-model:show="createProject"></ProjectCreateModal>
+                :clients="clients"
+                @submit="createProject"
+                v-model:show="showCreateProjectModal"></ProjectCreateModal>
         </MainContainer>
         <ProjectTable :projects="shownProjects"></ProjectTable>
     </AppLayout>

resources/js/Pages/Time.vue

@@ -19,14 +19,51 @@ import { PlusIcon } from '@heroicons/vue/16/solid';
 import TimeEntryCreateModal from '@/Components/Common/TimeEntry/TimeEntryCreateModal.vue';
 import TimeEntryAggregateRow from '@/Components/Common/TimeEntry/TimeEntryAggregateRow.vue';
 import LoadingSpinner from '@/Components/LoadingSpinner.vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import { useTasksStore } from '@/utils/useTasks';
+import { useProjectsStore } from '@/utils/useProjects';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
+const { updateTimeEntry, fetchTimeEntries, createTimeEntry } =
+    useTimeEntriesStore();
+
+function updateTimeEntries(timeEntries: TimeEntry[]) {
+    timeEntries.forEach((entry) => {
+        useTimeEntriesStore().updateTimeEntry(entry);
+    });
+    fetchTimeEntries();
+}
 
 const loading = ref(false);
 const loadMoreContainer = ref<HTMLDivElement | null>(null);
 const isLoadMoreVisible = useElementVisibility(loadMoreContainer);
 
+async function onStartStopClick(timeEntry: TimeEntry) {
+    if (timeEntry.start && !timeEntry.end) {
+        await updateTimeEntry({
+            ...timeEntry,
+            end: dayjs().utc().format(),
+        });
+    } else {
+        await createTimeEntry({
+            ...timeEntry,
+            start: dayjs().utc().format(),
+            end: null,
+        });
+    }
+    fetchTimeEntries();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+}
+
+function deleteTimeEntries(timeEntries: TimeEntry[]) {
+    timeEntries.forEach((entry) => {
+        useTimeEntriesStore().deleteTimeEntry(entry.id);
+    });
+    fetchTimeEntries();
+}
+
 watch(isLoadMoreVisible, async (isVisible) => {
     if (
         isVisible &&
@@ -45,6 +82,10 @@ onMounted(async () => {
 const groupedTimeEntries = computed(() => {
     const groupedEntriesByDay: Record<string, TimeEntry[]> = {};
     for (const entry of timeEntries.value) {
+        // skip current time entry
+        if (entry.end === null) {
+            continue;
+        }
         const oldEntries =
             groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)];
         groupedEntriesByDay[getLocalizedDateFromTimestamp(entry.start)] = [
@@ -104,6 +145,10 @@ const groupedTimeEntries = computed(() => {
     return groupedEntriesByDayAndType;
 });
 const showManualTimeEntryModal = ref(false);
+const projectStore = useProjectsStore();
+const { projects } = storeToRefs(projectStore);
+const taskStore = useTasksStore();
+const { tasks } = storeToRefs(taskStore);
 </script>
 
 <template>
@@ -131,11 +176,23 @@ const showManualTimeEntryModal = ref(false);
             <TimeEntryRowHeading :date="key"></TimeEntryRowHeading>
             <template v-for="entry in value" :key="entry.id">
                 <TimeEntryAggregateRow
+                    :projects="projects"
+                    :tasks="tasks"
+                    @onStartStopClick="onStartStopClick"
+                    @updateTimeEntries="updateTimeEntries"
+                    @deleteTimeEntries="deleteTimeEntries"
                     v-if="
                         'timeEntries' in entry && entry.timeEntries.length > 1
                     "
                     :time-entry="entry"></TimeEntryAggregateRow>
-                <TimeEntryRow v-else :time-entry="entry"></TimeEntryRow>
+                <TimeEntryRow
+                    :projects="projects"
+                    :tasks="tasks"
+                    @updateTimeEntry="updateTimeEntry"
+                    @onStartStopClick="onStartStopClick(entry)"
+                    @deleteTimeEntry="deleteTimeEntries([entry])"
+                    v-else
+                    :time-entry="entry"></TimeEntryRow>
             </template>
         </div>
         <div