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

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

@@ -1,16 +1,10 @@
 <script setup lang="ts">
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
-import type { TimeEntry } from '@/utils/api';
-import { storeToRefs } from 'pinia';
+import type { Project, Task, TimeEntry } from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
-import {
-    type TimeEntriesGroupedByType,
-    useTimeEntriesStore,
-} from '@/utils/useTimeEntries';
+import { type TimeEntriesGroupedByType } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
-import dayjs from 'dayjs';
-import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
@@ -22,80 +16,49 @@ import {
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
 import GroupedItemsCountButton from '@/Components/Common/GroupedItemsCountButton.vue';
 
-const currentTimeEntryStore = useCurrentTimeEntryStore();
-const { stopTimer } = currentTimeEntryStore;
-const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
-
 const props = defineProps<{
     timeEntry: TimeEntriesGroupedByType;
+    projects: Project[];
+    tasks: Task[];
 }>();
 
-const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
-    useTimeEntriesStore();
-
-async function onStartStopClick() {
-    if (props.timeEntry.start && !props.timeEntry.end) {
-        await updateTimeEntry({
-            ...props.timeEntry,
-            end: dayjs().utc().format(),
-        });
-    } else {
-        if (currentTimeEntry.value.id) {
-            await stopTimer();
-        }
-        await createTimeEntry({
-            ...props.timeEntry,
-            start: dayjs().utc().format(),
-            end: null,
-        });
-    }
-    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-    fetchTimeEntries();
-}
-
-function deleteTimeEntry() {
-    const timeEntries = props.timeEntry.timeEntries;
-    timeEntries.forEach((entry) => {
-        useTimeEntriesStore().deleteTimeEntry(entry.id);
-    });
-    fetchTimeEntries();
-}
+const emit = defineEmits<{
+    onStartStopClick: [timeEntry: TimeEntry];
+    updateTimeEntries: [timeEntries: TimeEntry[]];
+    deleteTimeEntries: [timeEntries: TimeEntry[]];
+}>();
 
 function updateTimeEntryDescription(description: string) {
     const timeEntries = props.timeEntry.timeEntries;
     timeEntries.forEach((entry) => {
-        updateTimeEntry({ ...entry, description });
         entry.description = description;
     });
+    emit('updateTimeEntries', timeEntries);
 }
 
 function updateTimeEntryTags(tags: string[]) {
     const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
     timeEntries.forEach((entry) => {
-        updateTimeEntry({ ...entry, tags });
         entry.tags = tags;
     });
+    emit('updateTimeEntries', timeEntries);
 }
 
 function updateTimeEntryBillable(billable: boolean) {
     const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
     timeEntries.forEach((entry) => {
-        updateTimeEntry({ ...entry, billable });
         entry.billable = billable;
     });
+    emit('updateTimeEntries', timeEntries);
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
     const timeEntries = props.timeEntry.timeEntries as TimeEntry[];
     timeEntries.forEach((entry) => {
-        updateTimeEntry({
-            ...entry,
-            project_id: projectId,
-            task_id: taskId,
-        });
         entry.project_id = projectId;
         entry.task_id = taskId;
     });
+    emit('updateTimeEntries', timeEntries);
 }
 
 const expanded = ref(false);
@@ -124,6 +87,8 @@ const expanded = ref(false);
                             "></TimeEntryDescriptionInput>
                     </div>
                     <TimeTrackerProjectTaskDropdown
+                        :projects="projects"
+                        :tasks="tasks"
                         :showBadgeBorder="false"
                         @changed="updateProjectAndTask"
                         :project="timeEntry.project_id"
@@ -157,12 +122,12 @@ const expanded = ref(false);
                     </button>
 
                     <TimeTrackerStartStop
-                        @changed="onStartStopClick"
+                        @changed="emit('onStartStopClick', timeEntry)"
                         :active="!!(timeEntry.start && !timeEntry.end)"
                         class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
-                            deleteTimeEntry
+                            emit('deleteTimeEntries', timeEntry.timeEntries)
                         "></TimeEntryMoreOptionsDropdown>
                 </div>
             </div>
@@ -171,7 +136,14 @@ const expanded = ref(false);
             v-if="expanded"
             class="w-full border-t border-default-background-separator bg-black/15">
             <TimeEntryRow
+                :projects="projects"
+                :tasks="tasks"
                 indent
+                @updateTimeEntry="
+                    (timeEntry) => emit('updateTimeEntries', [timeEntry])
+                "
+                @onStartStopClick="emit('onStartStopClick', subEntry)"
+                @deleteTimeEntry="emit('deleteTimeEntries', [subEntry])"
                 :key="subEntry.id"
                 v-for="subEntry in timeEntry.timeEntries"
                 :time-entry="subEntry"></TimeEntryRow>

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

@@ -13,6 +13,13 @@ import InputLabel from '@/Components/InputLabel.vue';
 import TimePicker from '@/Components/Common/TimePicker.vue';
 import DatePicker from '@/Components/Common/DatePicker.vue';
 import { getDayJsInstance, getLocalizedDayJs } from '@/utils/time';
+import { storeToRefs } from 'pinia';
+import { useTasksStore } from '@/utils/useTasks';
+import { useProjectsStore } from '@/utils/useProjects';
+const projectStore = useProjectsStore();
+const { projects } = storeToRefs(projectStore);
+const taskStore = useTasksStore();
+const { tasks } = storeToRefs(taskStore);
 
 const { createTimeEntry } = useTimeEntriesStore();
 const show = defineModel('show', { default: false });
@@ -92,6 +99,8 @@ async function submit() {
                         <TimeTrackerProjectTaskDropdown
                             class="mt-1"
                             size="xlarge"
+                            :projects="projects"
+                            :tasks="tasks"
                             v-model:project="timeEntry.project_id"
                             v-model:task="
                                 timeEntry.task_id

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

@@ -9,7 +9,9 @@ defineProps<{
     end: string | null;
 }>();
 
-const emit = defineEmits(['changed']);
+const emit = defineEmits<{
+    changed: [start: string, end: string | null];
+}>();
 
 const open = ref(false);
 </script>

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

@@ -2,80 +2,45 @@
 import MainContainer from '@/Pages/MainContainer.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
-import type { TimeEntry } from '@/utils/api';
-import { storeToRefs } from 'pinia';
+import type { Project, Task, TimeEntry } from '@/utils/api';
 import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
 import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue';
-import dayjs from 'dayjs';
-import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
 
-const currentTimeEntryStore = useCurrentTimeEntryStore();
-const { stopTimer, updateTimer } = currentTimeEntryStore;
-const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
-
 const props = defineProps<{
     timeEntry: TimeEntry;
     indent?: boolean;
+    projects: Project[];
+    tasks: Task[];
 }>();
 
-const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
-    useTimeEntriesStore();
-
-async function updateStartEndTime(start: string, end: string | null) {
-    if (currentTimeEntry.value.id === props.timeEntry.id) {
-        currentTimeEntry.value.start = start;
-        currentTimeEntry.value.end = end;
-        await updateTimer();
-    } else {
-        await updateTimeEntry({ ...props.timeEntry, start, end });
-    }
-    await fetchTimeEntries();
-}
-
-async function onStartStopClick() {
-    if (props.timeEntry.start && !props.timeEntry.end) {
-        await updateTimeEntry({
-            ...props.timeEntry,
-            end: dayjs().utc().format(),
-        });
-    } else {
-        if (currentTimeEntry.value.id) {
-            await stopTimer();
-        }
-        await createTimeEntry({
-            ...props.timeEntry,
-            start: dayjs().utc().format(),
-            end: null,
-        });
-    }
-    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-    fetchTimeEntries();
-}
-
-function deleteTimeEntry() {
-    useTimeEntriesStore().deleteTimeEntry(props.timeEntry.id);
-    fetchTimeEntries();
-}
+const emit = defineEmits<{
+    onStartStopClick: [];
+    deleteTimeEntry: [];
+    updateTimeEntry: [timeEntry: TimeEntry];
+}>();
 
 function updateTimeEntryDescription(description: string) {
-    updateTimeEntry({ ...props.timeEntry, description });
+    emit('updateTimeEntry', { ...props.timeEntry, description });
 }
 
 function updateTimeEntryTags(tags: string[]) {
-    updateTimeEntry({ ...props.timeEntry, tags });
+    emit('updateTimeEntry', { ...props.timeEntry, tags });
 }
 
 function updateTimeEntryBillable(billable: boolean) {
-    updateTimeEntry({ ...props.timeEntry, billable });
+    emit('updateTimeEntry', { ...props.timeEntry, billable });
+}
+
+function updateStartEndTime(start: string, end: string | null) {
+    emit('updateTimeEntry', { ...props.timeEntry, start, end });
 }
 
 function updateProjectAndTask(projectId: string, taskId: string) {
-    updateTimeEntry({
+    emit('updateTimeEntry', {
         ...props.timeEntry,
         project_id: projectId,
         task_id: taskId,
@@ -100,6 +65,8 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             timeEntry.description
                         "></TimeEntryDescriptionInput>
                     <TimeTrackerProjectTaskDropdown
+                        :projects="projects"
+                        :tasks="tasks"
                         :showBadgeBorder="false"
                         @changed="updateProjectAndTask"
                         :project="timeEntry.project_id"
@@ -132,12 +99,12 @@ function updateProjectAndTask(projectId: string, taskId: string) {
                             updateStartEndTime
                         "></TimeEntryRowDurationInput>
                     <TimeTrackerStartStop
-                        @changed="onStartStopClick"
+                        @changed="emit('onStartStopClick')"
                         :active="!!(timeEntry.start && !timeEntry.end)"
                         class="opacity-20 hidden sm:flex group-hover:opacity-100"></TimeTrackerStartStop>
                     <TimeEntryMoreOptionsDropdown
                         @delete="
-                            deleteTimeEntry
+                            emit('deleteTimeEntry')
                         "></TimeEntryMoreOptionsDropdown>
                 </div>
             </div>