From a374a5247466a00c91451471593876ee11e93bfa Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 9 Oct 2024 01:47:55 +0200
Subject: [PATCH] add select and deselect all on time and detailed reporting
 view

---
 .../css/filament/admin/tailwind.config.js     |  4 +--
 .../TimeEntry/TimeEntryMassActionRow.vue      | 27 ++++++++++++++++---
 resources/js/Pages/ReportingDetailed.vue      |  7 ++++-
 resources/js/Pages/Time.vue                   |  3 +++
 .../js/packages/ui/src/Input/Checkbox.vue     |  2 +-
 .../js/packages/ui/src/Input/InputLabel.vue   | 12 ++++++---
 vite.config.js                                |  6 ++++-
 7 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/resources/css/filament/admin/tailwind.config.js b/resources/css/filament/admin/tailwind.config.js
index 67de966a..68171b31 100644
--- a/resources/css/filament/admin/tailwind.config.js
+++ b/resources/css/filament/admin/tailwind.config.js
@@ -1,4 +1,4 @@
-import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
+import preset from '../../../../vendor/filament/filament/tailwind.config.preset';
 
 export default {
     presets: [preset],
@@ -7,4 +7,4 @@ export default {
         './resources/views/filament/**/*.blade.php',
         './vendor/filament/**/*.blade.php',
     ],
-}
+};
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryMassActionRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryMassActionRow.vue
index ff3aafd2..f8913db5 100644
--- 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
index 9ccbd118..fecd0d68 100644
--- 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
index 79a3c0fc..3ad2efee 100644
--- 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/Checkbox.vue b/resources/js/packages/ui/src/Input/Checkbox.vue
index 295b88e4..e8633514 100644
--- a/resources/js/packages/ui/src/Input/Checkbox.vue
+++ b/resources/js/packages/ui/src/Input/Checkbox.vue
@@ -35,5 +35,5 @@ const proxyChecked = computed({
         type="checkbox"
         :id="id"
         :value="value"
-        class="rounded bg-input-background border-input-border text-indigo-600 shadow-sm focus:ring-indigo-500" />
+        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
 </template>
diff --git a/resources/js/packages/ui/src/Input/InputLabel.vue b/resources/js/packages/ui/src/Input/InputLabel.vue
index 3b26709d..ecd4d4f3 100644
--- 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>
diff --git a/vite.config.js b/vite.config.js
index c057f5f7..4c3efdd9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,11 @@ import {
 } from './vite-module-loader.js';
 
 async function getConfig() {
-    const paths = ['resources/js/app.ts', 'resources/css/app.css', 'resources/css/filament/admin/theme.css'];
+    const paths = [
+        'resources/js/app.ts',
+        'resources/css/app.css',
+        'resources/css/filament/admin/theme.css',
+    ];
     const modulePaths = await collectModuleAssetsPaths('extensions');
     const additionalPlugins = await collectModulePlugins('extensions');