add select and deselect all on time and detailed reporting view

solidtime-io · Oct 8, 2024 · 8b7e862 · 8b7e862
1 parent 09586de
commit 8b7e862
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryMassActionRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryMassActionRow.vue
@@ -5,15 +5,19 @@ import TimeEntryMassUpdateModal from '@/Components/Common/TimeEntry/TimeEntryMas
 import type { TimeEntry } from '@/packages/api/src';
 import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import { Checkbox, InputLabel } from '@/packages/ui/src';
 
 const props = defineProps<{
     selectedTimeEntries: TimeEntry[];
     deleteSelected: () => void;
     class?: string;
+    allSelected: boolean;
 }>();
 
 const emit = defineEmits<{
     submit: [];
+    selectAll: [];
+    unselectAll: [];
 }>();
 
 const showMassUpdateModal = ref(false);
@@ -25,14 +29,31 @@ const showMassUpdateModal = ref(false);
         @submit="emit('submit')"
         v-model:show="showMassUpdateModal"></TimeEntryMassUpdateModal>
     <MainContainer
-        v-if="selectedTimeEntries.length > 0"
         :class="
             twMerge(
                 props.class,
-                'text-sm py-1.5 font-medium border-b border-t border-border-primary flex items-center space-x-3'
+                'text-sm py-1.5 font-medium border-b border-t border-border-secondary flex items-center space-x-3'
             )
         ">
-        <div>{{ selectedTimeEntries.length }} selected</div>
+        <Checkbox
+            :checked="allSelected"
+            id="selectAll"
+            @update:checked="
+                allSelected ? emit('unselectAll') : emit('selectAll')
+            ">
+        </Checkbox>
+        <InputLabel
+            for="selectAll"
+            class="select-none text-text-secondary"
+            v-if="selectedTimeEntries.length > 0">
+            {{ selectedTimeEntries.length }} selected
+        </InputLabel>
+        <InputLabel
+            for="selectAll"
+            class="text-text-secondary select-none"
+            v-else
+            >Select All</InputLabel
+        >
         <button
             class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-white/80 rounded h-full px-2"
             @click="showMassUpdateModal = true"

diff --git a/resources/js/Pages/ReportingDetailed.vue b/resources/js/Pages/ReportingDetailed.vue
@@ -339,7 +339,12 @@ async function clearSelectionAndState() {
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
             @submit="clearSelectionAndState"
-            :delete-selected="deleteSelected"></TimeEntryMassActionRow>
+            :delete-selected="deleteSelected"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"
+            :all-selected="
+                selectedTimeEntries.length === timeEntries.length
+            "></TimeEntryMassActionRow>
         <div class="w-full relative">
             <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow

diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
@@ -136,6 +136,9 @@ function deleteSelected() {
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
             @submit="clearSelectionAndState"
+            :all-selected="selectedTimeEntries.length === timeEntries.length"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"
             :delete-selected="deleteSelected"></TimeEntryMassActionRow>
         <TimeEntryGroupedTable
             v-model:selected="selectedTimeEntries"

diff --git a/resources/js/packages/ui/src/Input/InputLabel.vue b/resources/js/packages/ui/src/Input/InputLabel.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-defineProps({
-    value: String,
-});
+import { twMerge } from 'tailwind-merge';
+
+const props = defineProps<{
+    value?: string;
+    class?: string;
+}>();
 </script>
 
 <template>
-    <label class="block font-medium text-sm text-white">
+    <label
+        :class="twMerge('block font-medium text-sm text-white', props.class)">
         <span v-if="value">{{ value }}</span>
         <span v-else><slot /></span>
     </label>