use prop function createTag instead of event to make sure it is handled by the parent

resources/js/Pages/Reporting.vue

@@ -21,7 +21,7 @@ import {
 import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
 import { storeToRefs } from 'pinia';
 import TagDropdown from '@/Components/Common/Tag/TagDropdown.vue';
-import type { AggregatedTimeEntriesQueryParams, Tag } from '@/utils/api';
+import type { AggregatedTimeEntriesQueryParams } from '@/utils/api';
 import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
 import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
 import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
@@ -139,11 +139,8 @@ onMounted(() => {
 });
 
 const { tags } = storeToRefs(useTagsStore());
-async function createTag(tag: string, callback: (tag: Tag) => void) {
-    const newTag = await useTagsStore().createTag(tag);
-    if (newTag !== undefined) {
-        callback(newTag);
-    }
+async function createTag(tag: string) {
+    return await useTagsStore().createTag(tag);
 }
 </script>
 
@@ -205,7 +202,7 @@ async function createTag(tag: string, callback: (tag: Tag) => void) {
                     </ClientMultiselectDropdown>
                     <TagDropdown
                         @submit="updateReporting"
-                        @createTag="createTag"
+                        :createTag
                         v-model="selectedTags"
                         :tags="tags">
                         <template v-slot:trigger>

resources/js/Pages/Tags.vue

@@ -9,13 +9,11 @@ import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateTags } from '@/utils/permissions';
 import { useTagsStore } from '@/utils/useTags';
-import type { Tag } from '@/utils/api';
+
 const showCreateTagModal = ref(false);
-async function createTag(tag: string, callback: (tag: Tag) => void) {
-    const newTag = await useTagsStore().createTag(tag);
-    if (newTag !== undefined) {
-        callback(newTag);
-    }
+
+async function createTag(tag: string) {
+    return await useTagsStore().createTag(tag);
 }
 </script>
 
@@ -24,18 +22,18 @@ async function createTag(tag: string, callback: (tag: Tag) => void) {
         <MainContainer
             class="py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-6">
-                <PageTitle :icon="TagIcon" title="Tags"> </PageTitle>
+                <PageTitle :icon="TagIcon" title="Tags"></PageTitle>
             </div>
             <SecondaryButton
                 v-if="canCreateTags()"
                 :icon="PlusIcon"
                 @click="showCreateTagModal = true"
-                >Create Tag</SecondaryButton
-            >
+                >Create Tag
+            </SecondaryButton>
             <TagCreateModal
-                @createTag="createTag"
+                :createTag="createTag"
                 v-model:show="showCreateTagModal"></TagCreateModal>
         </MainContainer>
-        <TagTable></TagTable>
+        <TagTable :createTag="createTag"></TagTable>
     </AppLayout>
 </template>

resources/js/Pages/Time.vue

@@ -5,7 +5,7 @@ import { onMounted, ref, watch } from 'vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { storeToRefs } from 'pinia';
-import type { CreateTimeEntryBody, Tag, TimeEntry } from '@/utils/api';
+import type { CreateTimeEntryBody, TimeEntry } from '@/utils/api';
 import { useElementVisibility } from '@vueuse/core';
 import { ClockIcon } from '@heroicons/vue/20/solid';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
@@ -77,11 +77,8 @@ const { projects } = storeToRefs(projectStore);
 const taskStore = useTasksStore();
 const { tasks } = storeToRefs(taskStore);
 
-async function createTag(name: string, callback: (tag: Tag) => void) {
-    const newTag = await useTagsStore().createTag(name);
-    if (newTag !== undefined) {
-        callback(newTag);
-    }
+async function createTag(name: string) {
+    return await useTagsStore().createTag(name);
 }
 </script>
 
@@ -111,7 +108,7 @@ async function createTag(name: string, callback: (tag: Tag) => void) {
             @updateTimeEntries="updateTimeEntries"
             @deleteTimeEntries="deleteTimeEntries"
             @createTimeEntry="startTimeEntry"
-            @createTag="createTag"
+            :createTag
             :projects="projects"
             :tasks="tasks"
             :timeEntries="timeEntries"