add mass updates to time view

resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue

@@ -38,6 +38,11 @@ const props = defineProps<{
     updateTimeEntry: (timeEntry: TimeEntry) => void;
     deleteTimeEntries: (timeEntries: TimeEntry[]) => void;
     currency: string;
+    selectedTimeEntries: TimeEntry[];
+}>();
+const emit = defineEmits<{
+    selected: [TimeEntry[]];
+    unselected: [TimeEntry[]];
 }>();
 
 function updateTimeEntryDescription(description: string) {
@@ -69,6 +74,14 @@ function updateProjectAndTask(projectId: string, taskId: string) {
 }
 
 const expanded = ref(false);
+function onSelectChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.checked) {
+        emit('selected', [...props.timeEntry.timeEntries]);
+    } else {
+        emit('unselected', [...props.timeEntry.timeEntries]);
+    }
+}
 </script>
 
 <template>
@@ -80,6 +93,15 @@ const expanded = ref(false);
                 class="sm:flex py-1.5 items-center min-w-0 justify-between group">
                 <div class="flex space-x-3 items-center min-w-0">
                     <input
+                        @change="onSelectChange"
+                        :checked="
+                            timeEntry.timeEntries.every(
+                                (aggregateTimeEntry: TimeEntry) =>
+                                    selectedTimeEntries.includes(
+                                        aggregateTimeEntry
+                                    )
+                            )
+                        "
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
                     <div class="flex items-center min-w-0">
@@ -153,6 +175,13 @@ const expanded = ref(false);
             <TimeEntryRow
                 :projects="projects"
                 :tasks="tasks"
+                :selected="
+                    !!selectedTimeEntries.find(
+                        (filterEntry) => filterEntry.id === subEntry.id
+                    )
+                "
+                @selected="emit('selected', [subEntry])"
+                @unselected="emit('unselected', [subEntry])"
                 :createClient
                 :clients
                 :createProject

resources/js/packages/ui/src/TimeEntry/TimeEntryGroupedTable.vue

@@ -19,6 +19,10 @@ import TimeEntryRowHeading from '@/packages/ui/src/TimeEntry/TimeEntryRowHeading
 import TimeEntryRow from '@/packages/ui/src/TimeEntry/TimeEntryRow.vue';
 import type { TimeEntriesGroupedByType } from '@/types/time-entries';
 
+const selectedTimeEntries = defineModel<TimeEntry[]>('selected', {
+    default: [],
+});
+
 const props = defineProps<{
     timeEntries: TimeEntry[];
     projects: Project[];
@@ -124,6 +128,25 @@ function sumDuration(timeEntries: TimeEntry[]) {
         <template v-for="entry in value" :key="entry.id">
             <TimeEntryAggregateRow
                 :createProject
+                :selected-time-entries="selectedTimeEntries"
+                @selected="
+                    (timeEntries) => {
+                        selectedTimeEntries = [
+                            ...selectedTimeEntries,
+                            ...timeEntries,
+                        ];
+                    }
+                "
+                @unselected="
+                    (timeEntriesToUnselect) => {
+                        selectedTimeEntries = selectedTimeEntries.filter(
+                            (item) =>
+                                !timeEntriesToUnselect.find(
+                                    (filterEntry) => filterEntry.id === item.id
+                                )
+                        );
+                    }
+                "
                 :createClient
                 :projects="projects"
                 :tasks="tasks"
@@ -141,6 +164,17 @@ function sumDuration(timeEntries: TimeEntry[]) {
                 :createClient
                 :createProject
                 :projects="projects"
+                :selected="
+                    !!selectedTimeEntries.find(
+                        (filterEntry) => filterEntry.id === entry.id
+                    )
+                "
+                @selected="selectedTimeEntries.push(entry)"
+                @unselected="
+                    selectedTimeEntries = selectedTimeEntries.filter(
+                        (item) => item.id !== entry.id
+                    )
+                "
                 :tasks="tasks"
                 :tags="tags"
                 :clients

resources/js/packages/ui/src/TimeEntry/TimeEntryRow.vue

@@ -98,7 +98,7 @@ function onSelectChange(event: Event) {
                 <div class="flex space-x-1 items-center min-w-0">
                     <input
                         @change="onSelectChange"
-                        :value="selected"
+                        :checked="selected"
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
                     <div class="w-7 h-7" v-if="indent === true"></div>