feat(timesheet-approval): add filter template, working on filling. Merging with other changes on main.

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>

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 ?
+    const overview_rows = computed(() => timesheet_store.pay_period_overviews.filter(overview => overview))
-        [] :
-        timesheet_store.pay_period_overviews
-    )
 
     const onClickedDetails = async (row: TimesheetOverview) => {
         timesheet_store.current_pay_period_overview = row;

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="col-auto row items-start 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="($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' : ''">
+            <div
-                <q-btn-dropdown
+                class="col-auto row no-wrap items-start"
-                    push
+                :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
-                    rounded
+            >
+                <q-btn
+                    flat
                     icon="filter_alt"
-                    color="accent"
+                    color="white"
-                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
+                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
-                    class="col-auto q-mr-sm"
+                    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>