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

resources/js/Components/Common/Project/ProjectCreateModal.vue

@@ -6,22 +6,26 @@ import { computed, ref } from 'vue';
 import type { CreateProjectBody } from '@/utils/api';
 import { getRandomColor } from '@/utils/color';
 import PrimaryButton from '@/Components/PrimaryButton.vue';
-import { useProjectsStore } from '@/utils/useProjects';
 import { useFocus } from '@vueuse/core';
 import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
 import Badge from '@/Components/Common/Badge.vue';
-import { useClientsStore } from '@/utils/useClients';
-import { storeToRefs } from 'pinia';
 import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 import { UserCircleIcon } from '@heroicons/vue/20/solid';
 import InputLabel from '@/Components/InputLabel.vue';
 import ProjectEditBillableSection from '@/Components/Common/Project/ProjectEditBillableSection.vue';
+import type { Client } from '@/utils/api';
 
-const { createProject } = useProjectsStore();
-const { clients } = storeToRefs(useClientsStore());
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
+const props = defineProps<{
+    clients: Client[];
+}>();
+
+const emit = defineEmits<{
+    submit: [project: CreateProjectBody, callback: () => void];
+}>();
+
 const project = ref<CreateProjectBody>({
     name: '',
     color: getRandomColor(),
@@ -31,15 +35,16 @@ const project = ref<CreateProjectBody>({
 });
 
 async function submit() {
-    await createProject(project.value);
-    show.value = false;
-    project.value = {
-        name: '',
-        color: getRandomColor(),
-        client_id: null,
-        billable_rate: null,
-        is_billable: false,
-    };
+    emit('submit', project.value, () => {
+        show.value = false;
+        project.value = {
+            name: '',
+            color: getRandomColor(),
+            client_id: null,
+            billable_rate: null,
+            is_billable: false,
+        };
+    });
 }
 
 const projectNameInput = ref<HTMLInputElement | null>(null);
@@ -48,7 +53,7 @@ useFocus(projectNameInput, { initialValue: true });
 
 const currentClientName = computed(() => {
     if (project.value.client_id) {
-        return clients.value.find(
+        return props.clients.find(
             (client) => client.id === project.value.client_id
         )?.name;
     }

resources/js/Components/Common/Project/ProjectTable.vue

@@ -7,17 +7,28 @@ import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.v
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
 import { canCreateProjects } from '@/utils/permissions';
-import type { Project } from '@/utils/api';
+import type { CreateProjectBody, Project } from '@/utils/api';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
 
 defineProps<{
     projects: Project[];
 }>();
 
-const createProject = ref(false);
+const showCreateProjectModal = ref(false);
+async function createProject(project: CreateProjectBody, callback: () => void) {
+    await useProjectsStore().createProject(project);
+    callback();
+}
+const { clients } = storeToRefs(useClientsStore());
 </script>
 
 <template>
-    <ProjectCreateModal v-model:show="createProject"></ProjectCreateModal>
+    <ProjectCreateModal
+        :clients="clients"
+        @submit="createProject"
+        v-model:show="showCreateProjectModal"></ProjectCreateModal>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -36,7 +47,7 @@ const createProject = ref(false);
                     </p>
                     <SecondaryButton
                         v-if="canCreateProjects()"
-                        @click="createProject = true"
+                        @click="showCreateProjectModal = true"
                         :icon="PlusIcon"
                         >Create your First Project
                     </SecondaryButton>