refactor required time entry emits to props

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

@@ -22,40 +22,37 @@ const props = defineProps<{
     tasks: Task[];
     tags: Tag[];
     createTag: (name: string) => Promise<Tag | undefined>;
-}>();
-
-const emit = defineEmits<{
-    onStartStopClick: [timeEntry: TimeEntry];
-    updateTimeEntries: [timeEntries: TimeEntry[]];
-    deleteTimeEntries: [timeEntries: TimeEntry[]];
+    onStartStopClick: (timeEntry: TimeEntry) => void;
+    updateTimeEntries: (timeEntries: TimeEntry[]) => void;
+    deleteTimeEntries: (timeEntries: TimeEntry[]) => void;
 }>();
 
 function updateTimeEntryDescription(description: string) {
     const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
         return { ...entry, description };
     });
-    emit('updateTimeEntries', updatedTimeEntries);
+    props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateTimeEntryTags(tags: string[]) {
     const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
         return { ...entry, tags };
     });
-    emit('updateTimeEntries', updatedTimeEntries);
+    props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateTimeEntryBillable(billable: boolean) {
     const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
         return { ...entry, billable };
     });
-    emit('updateTimeEntries', updatedTimeEntries);
+    props.updateTimeEntries(updatedTimeEntries);
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
     const updatedTimeEntries = props.timeEntry.timeEntries.map((entry) => {
         return { ...entry, project_id: projectId, task_id: taskId };
     });
-    emit('updateTimeEntries', updatedTimeEntries);
+    props.updateTimeEntries(updatedTimeEntries);
 }
 
 const expanded = ref(false);
@@ -121,12 +118,12 @@ const expanded = ref(false);
                     </button>
 
                     <TimeTrackerStartStop
-                        @changed="emit('onStartStopClick', timeEntry)"
+                        @changed="onStartStopClick(timeEntry)"
                         :active="!!(timeEntry.start && !timeEntry.end)"
                         class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
-                            emit('deleteTimeEntries', timeEntry.timeEntries)
+                            deleteTimeEntries([timeEntry])
                         "></TimeEntryMoreOptionsDropdown>
                 </div>
             </div>
@@ -139,9 +136,9 @@ const expanded = ref(false);
                 :tasks="tasks"
                 :tags="tags"
                 indent
-                @updateTimeEntry="(arg) => emit('updateTimeEntries', [arg])"
-                @onStartStopClick="emit('onStartStopClick', subEntry)"
-                @deleteTimeEntry="emit('deleteTimeEntries', [subEntry])"
+                :updateTimeEntry="(arg) => updateTimeEntries([arg])"
+                :onStartStopClick="() => onStartStopClick(subEntry)"
+                :deleteTimeEntry="() => deleteTimeEntries([subEntry])"
                 :createTag
                 :key="subEntry.id"
                 v-for="subEntry in timeEntry.timeEntries"

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

@@ -20,13 +20,10 @@ const props = defineProps<{
     tasks: Task[];
     tags: Tag[];
     createTag: (name: string) => Promise<Tag | undefined>;
-}>();
-
-const emit = defineEmits<{
-    updateTimeEntry: [entry: TimeEntry];
-    updateTimeEntries: [entries: TimeEntry[]];
-    deleteTimeEntries: [entries: TimeEntry[]];
-    createTimeEntry: [entry: Omit<CreateTimeEntryBody, 'member_id'>];
+    updateTimeEntry: (entry: TimeEntry) => void;
+    updateTimeEntries: (entries: TimeEntry[]) => void;
+    deleteTimeEntries: (entries: TimeEntry[]) => void;
+    createTimeEntry: (entry: Omit<CreateTimeEntryBody, 'member_id'>) => void;
 }>();
 
 const groupedTimeEntries = computed(() => {
@@ -96,7 +93,7 @@ const groupedTimeEntries = computed(() => {
 });
 
 function startTimeEntryFromExisting(entry: TimeEntry) {
-    emit('createTimeEntry', {
+    props.createTimeEntry({
         project_id: entry.project_id,
         task_id: entry.task_id,
         start: dayjs().utc().format(),
@@ -115,9 +112,9 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
                 :projects="projects"
                 :tasks="tasks"
                 :tags="tags"
-                @onStartStopClick="startTimeEntryFromExisting(entry)"
-                @updateTimeEntries="(arg) => emit('updateTimeEntries', arg)"
-                @deleteTimeEntries="(arg) => emit('deleteTimeEntries', arg)"
+                :onStartStopClick="startTimeEntryFromExisting"
+                :updateTimeEntries
+                :deleteTimeEntries
                 :createTag
                 v-if="'timeEntries' in entry && entry.timeEntries.length > 1"
                 :time-entry="entry"></TimeEntryAggregateRow>
@@ -126,9 +123,9 @@ function startTimeEntryFromExisting(entry: TimeEntry) {
                 :tasks="tasks"
                 :tags="tags"
                 :createTag
-                @updateTimeEntry="(arg) => emit('updateTimeEntry', arg)"
-                @onStartStopClick="startTimeEntryFromExisting(entry)"
-                @deleteTimeEntry="() => emit('deleteTimeEntries', [entry])"
+                :updateTimeEntry
+                :onStartStopClick="() => startTimeEntryFromExisting(entry)"
+                :deleteTimeEntry="() => deleteTimeEntries([entry])"
                 v-else
                 :time-entry="entry"></TimeEntryRow>
         </template>

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

@@ -17,32 +17,29 @@ const props = defineProps<{
     tasks: Task[];
     tags: Tag[];
     createTag: (name: string) => Promise<Tag | undefined>;
-}>();
-
-const emit = defineEmits<{
-    onStartStopClick: [];
-    deleteTimeEntry: [];
-    updateTimeEntry: [timeEntry: TimeEntry];
+    onStartStopClick: () => void;
+    deleteTimeEntry: () => void;
+    updateTimeEntry: (timeEntry: TimeEntry) => void;
 }>();
 
 function updateTimeEntryDescription(description: string) {
-    emit('updateTimeEntry', { ...props.timeEntry, description });
+    props.updateTimeEntry({ ...props.timeEntry, description });
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    emit('updateTimeEntry', { ...props.timeEntry, tags });
+    props.updateTimeEntry({ ...props.timeEntry, tags });
 }
 
 function updateTimeEntryBillable(billable: boolean) {
-    emit('updateTimeEntry', { ...props.timeEntry, billable });
+    props.updateTimeEntry({ ...props.timeEntry, billable });
 }
 
 function updateStartEndTime(start: string, end: string | null) {
-    emit('updateTimeEntry', { ...props.timeEntry, start, end });
+    props.updateTimeEntry({ ...props.timeEntry, start, end });
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
-    emit('updateTimeEntry', {
+    props.updateTimeEntry({
         ...props.timeEntry,
         project_id: projectId,
         task_id: taskId,
@@ -106,12 +103,12 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             updateStartEndTime
                         "></TimeEntryRowDurationInput>
                     <TimeTrackerStartStop
-                        @changed="emit('onStartStopClick')"
+                        @changed="onStartStopClick"
                         :active="!!(timeEntry.start && !timeEntry.end)"
                         class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
-                            emit('deleteTimeEntry')
+                            deleteTimeEntry
                         "></TimeEntryMoreOptionsDropdown>
                 </div>
             </div>

resources/js/Pages/Time.vue

@@ -104,10 +104,10 @@ async function createTag(name: string) {
             </div>
         </MainContainer>
         <TimeEntryGroupedTable
-            @updateTimeEntry="updateTimeEntry"
-            @updateTimeEntries="updateTimeEntries"
-            @deleteTimeEntries="deleteTimeEntries"
-            @createTimeEntry="startTimeEntry"
+            :updateTimeEntry
+            :updateTimeEntries
+            :deleteTimeEntries
+            :createTimeEntry="startTimeEntry"
             :createTag
             :projects="projects"
             :tasks="tasks"