refactor timetracker to seperate data and ui logic

resources/js/Pages/Projects.vue

@@ -13,7 +13,12 @@ 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';
+import type {
+    CreateClientBody,
+    Client,
+    CreateProjectBody,
+    Project,
+} from '@/utils/api';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
@@ -27,11 +32,6 @@ 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(() => {
@@ -42,6 +42,16 @@ const shownProjects = computed(() => {
         return project.is_archived;
     });
 });
+async function createProject(
+    project: CreateProjectBody
+): Promise<Project | undefined> {
+    return await useProjectsStore().createProject(project);
+}
+async function createClient(
+    client: CreateClientBody
+): Promise<Client | undefined> {
+    return await useClientsStore().createClient(client);
+}
 </script>
 
 <template>
@@ -70,6 +80,8 @@ const shownProjects = computed(() => {
                 >Create Project
             </SecondaryButton>
             <ProjectCreateModal
+                :createProject
+                :createClient
                 :clients="clients"
                 @submit="createProject"
                 v-model:show="showCreateProjectModal"></ProjectCreateModal>

resources/js/Pages/Reporting.vue

@@ -35,10 +35,10 @@ import { getCurrentMembershipId, getCurrentRole } from '@/utils/useUser';
 import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
 import { useTagsStore } from '@/utils/useTags';
 
-const startDate = ref<string | null>(
+const startDate = ref<string>(
     getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
 );
-const endDate = ref<string | null>(
+const endDate = ref<string>(
     getLocalizedDayJs(getDayJsInstance()().format()).format()
 );
 const selectedTags = ref<string[]>([]);

resources/js/Pages/Time.vue

@@ -5,7 +5,14 @@ import { onMounted, ref, watch } from 'vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { storeToRefs } from 'pinia';
-import type { CreateTimeEntryBody, TimeEntry } from '@/utils/api';
+import type {
+    CreateClientBody,
+    CreateProjectBody,
+    CreateTimeEntryBody,
+    Project,
+    TimeEntry,
+    Client,
+} from '@/utils/api';
 import { useElementVisibility } from '@vueuse/core';
 import { ClockIcon } from '@heroicons/vue/20/solid';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
@@ -17,6 +24,7 @@ import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import TimeEntryGroupedTable from '@/Components/Common/TimeEntry/TimeEntryGroupedTable.vue';
 import { useTagsStore } from '@/utils/useTags';
+import { useClientsStore } from '@/utils/useClients';
 
 const timeEntriesStore = useTimeEntriesStore();
 const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
@@ -76,10 +84,22 @@ const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
 const { tasks } = storeToRefs(taskStore);
+const clientStore = useClientsStore();
+const { clients } = storeToRefs(clientStore);
 
 async function createTag(name: string) {
     return await useTagsStore().createTag(name);
 }
+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);
+}
 </script>
 
 <template>
@@ -104,6 +124,9 @@ async function createTag(name: string) {
             </div>
         </MainContainer>
         <TimeEntryGroupedTable
+            :createProject
+            :clients
+            :createClient
             :updateTimeEntry
             :updateTimeEntries
             :deleteTimeEntries