From a07086fa2ecdaa266b3554536f3b9fd72a4e8748 Mon Sep 17 00:00:00 2001
From: Nicolas Drolet <nicolasd@targointernet.com>
Date: Thu, 18 Dec 2025 11:00:31 -0500
Subject: [PATCH] feat(timesheet-approval): add filter template, working on
 filling. Merging with other changes on main.

---
 .../components/overview-list-filters.vue      | 12 ++++
 .../components/overview-list.vue              |  5 +-
 src/pages/timesheet-approval-page.vue         | 59 ++++++++++++++-----
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/modules/timesheet-approval/components/overview-list-filters.vue

diff --git a/src/modules/timesheet-approval/components/overview-list-filters.vue b/src/modules/timesheet-approval/components/overview-list-filters.vue
new file mode 100644
index 0000000..46728a4
--- /dev/null
+++ b/src/modules/timesheet-approval/components/overview-list-filters.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="column bg-accent q-pa-sm">
+        <span class="col">test</span>
+        <span class="col">test</span>
+        <span class="col">test</span>
+        <span class="col">test</span>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/timesheet-approval/components/overview-list.vue b/src/modules/timesheet-approval/components/overview-list.vue
index 46153d8..848c2ef 100644
--- a/src/modules/timesheet-approval/components/overview-list.vue
+++ b/src/modules/timesheet-approval/components/overview-list.vue
@@ -26,10 +26,7 @@
         overview_column_names.IS_APPROVED,
     ]);
 
-    const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
-        [] :
-        timesheet_store.pay_period_overviews
-    )
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview))
 
     const onClickedDetails = async (row: TimesheetOverview) => {
         timesheet_store.current_pay_period_overview = row;
diff --git a/src/pages/timesheet-approval-page.vue b/src/pages/timesheet-approval-page.vue
index 562a618..a4c60b4 100644
--- a/src/pages/timesheet-approval-page.vue
+++ b/src/pages/timesheet-approval-page.vue
@@ -3,19 +3,23 @@
     lang="ts"
 >
     /* eslint-disable */
-    import { onMounted, ref } from 'vue';
-    import { date } from 'quasar';
-    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { useTimesheetStore } from 'src/stores/timesheet-store';
     import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
     import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
     import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
     import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
     import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
+    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';
+
+    import { date } from 'quasar';
+    import { onMounted, ref } from 'vue';
+    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
+    import { useTimesheetStore } from 'src/stores/timesheet-store';
 
     const timesheet_approval_api = useTimesheetApprovalApi();
     const timesheet_store = useTimesheetStore();
 
+    const is_showing_filters = ref(false);
+
     onMounted(async () => {
         await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
     });
@@ -40,14 +44,15 @@
         />
 
         <div
-            class="col-auto full-width q-px-lg"
-            :class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
+            class="col-auto row items-start full-width q-px-lg"
+            :class="($q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md') + (timesheet_store.is_approval_grid_mode ? '' : ' q-mb-md')"
         >
             <PayPeriodNavigator
                 @date-selected="timesheet_approval_api.getTimesheetOverviews"
                 @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
                 @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
-                :class="$q.screen.lt.md ? 'q-mb-sm' : ''"
+                :class="$q.platform.is.mobile ? 'q-mb-sm' : ''"
+                style="height: 40px;"
             />
 
             <q-space />
@@ -59,27 +64,49 @@
                 color="white"
                 text-color="accent"
                 toggle-color="accent"
-                :class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
+                class="col-auto"
+                :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-md'"
                 :options="[
                     { icon: 'grid_view', value: true },
                     { icon: 'view_list', value: false },
                 ]"
+                style="height: 40px;"
             />
 
-            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
-                <q-btn-dropdown
-                    push
-                    rounded
+            <div
+                class="col-auto row no-wrap items-start"
+                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
+            >
+                <q-btn
+                    flat
                     icon="filter_alt"
-                    color="accent"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
-                    class="col-auto q-mr-sm"
+                    color="white"
+                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
+                    class="col q-mr-sm self-stretch bg-accent"
+                    style="border-radius: 10px 10px 0 0;"
+                    @click="is_showing_filters = !is_showing_filters"
                 />
 
-                <QTableFilters v-model:search="timesheet_store.search_filter" />
+                <QTableFilters
+                    v-model:search="timesheet_store.search_filter"
+                    class="col-auto q-mb-xs"
+                />
             </div>
         </div>
 
+        <q-slide-transition>
+            <OverviewListFilters
+                v-if="is_showing_filters"
+                class="q-mx-lg"
+            />
+        </q-slide-transition>
+
+        <q-separator
+            color="accent"
+            size="4px"
+            class="q-mx-lg"
+        />
+
         <OverviewList class="col" />
     </q-page>
 </template>
\ No newline at end of file