refactor(approvals): more work on filters, table list view tweaks to columns, plug in list view functionalities

src/i18n/en-ca/index.ts

@@ -285,6 +285,8 @@ export default {
             verified: "approved",
             unverified: "pending",
             inactive: "inactive",
+            filter_active: "show only active employees",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "detailed view",

src/i18n/fr-ca/index.ts

@@ -286,6 +286,8 @@ export default {
             verified: "approuvé",
             unverified: "à vérifier",
             inactive: "inactif",
+            filter_active: "",
+            filter_team: "",
         },
         tooltip: {
             button_detailed_view: "vue détaillée",

src/modules/timesheet-approval/components/overview-list-item.vue

@@ -3,6 +3,7 @@
     lang="ts"
 >
     import type { TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+import { getHoursMinutesStringFromHoursFloat, getMinutes } from 'src/utils/date-and-time-utils';
 
     const modelApproval = defineModel<boolean>();
 
@@ -15,18 +16,6 @@
         'clickDetails': [overview: TimesheetApprovalOverview];
         'clickApprovalAll' : [is_approved: boolean];
     }>();
-
-    const getMinutes = (hours: number) => {
-        const minutes_percent = hours - Math.floor(hours);
-        const minutes = Math.round(minutes_percent * 60);
-        return minutes > 1 ? minutes.toString() : '0';
-    }
-
-    const getHoursMinutesString = (hours: number): string => {
-        const flat_hours = Math.floor(hours);
-        const minutes = Math.round((hours - flat_hours) * 60);
-        return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
-    }
 </script>
 
 <template>
@@ -95,7 +84,7 @@
                                 <span
                                     class="text-weight-bolder text-h3 q-py-none"
                                     :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
-                                > {{ getHoursMinutesString(row.regular_hours) }} </span>
+                                > {{ getHoursMinutesStringFromHoursFloat(row.regular_hours) }} </span>
                                 <q-separator class="q-mr-sm" />
                             </div>
 
@@ -116,7 +105,7 @@
                                     <span
                                         class="text-weight-bolder q-pa-none q-mb-xs"
                                         style="font-size: 1.2em; line-height: 1em;"
-                                    > {{ getHoursMinutesString(hour_type) }} </span>
+                                    > {{ getHoursMinutesStringFromHoursFloat(hour_type) }} </span>
                                 </div>
                             </div>
                         </div>

src/modules/timesheet-approval/components/overview-list.vue

@@ -13,23 +13,28 @@
     import { useAuthStore } from 'src/stores/auth-store';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
-    import { overview_column_names, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { overview_column_names, OverviewColumns, pay_period_overview_columns, PayPeriodOverviewFilters, type TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
 
     const auth_store = useAuthStore();
     const timesheet_store = useTimesheetStore();
     const timesheet_approval_api = useTimesheetApprovalApi();
 
-    const visible_columns = ref<string[]>([
+    const TIME_COLUMNS: OverviewColumns[] = ['REGULAR', 'EVENING', 'EMERGENCY', 'OVERTIME', 'HOLIDAY', 'VACATION'];
-        overview_column_names.REGULAR,
+    const VISIBLE_COLUMNS = ref<OverviewColumns[]>([
-        overview_column_names.EVENING,
+        'employee_first_name',
-        overview_column_names.EMERGENCY,
+        'REGULAR',
-        overview_column_names.SICK,
+        'EVENING',
-        overview_column_names.VACATION,
+        'EMERGENCY',
-        overview_column_names.HOLIDAY,
+        'OVERTIME',
-        overview_column_names.OVERTIME,
+        'HOLIDAY',
-        overview_column_names.IS_APPROVED,
+        'VACATION',
+        'expenses',
+        'mileage',
+        'is_approved',
     ]);
+
     const is_showing_filters = ref(false);
     const search_string = ref('');
 
@@ -60,7 +65,7 @@
         }
 
         if (terms.is_showing_team_only) {
-            result = result.filter(row => row.supervisor !== null && row.supervisor.email === (auth_store.user ? auth_store.user.email : '') );
+            result = result.filter(row => row.supervisor !== null && row.supervisor.email === (auth_store.user ? auth_store.user.email : ''));
         }
 
         if (terms.name_search_string.length > 0) {
@@ -77,15 +82,10 @@
 <template>
     <div class="q-px-md full-height">
         <LoadingOverlay v-model="timesheet_store.is_loading" />
-        <transition
+
-            appear
-            enter-active-class="animated fadeInUp"
-            leave-active-class="animated fadeOutDown"
-            mode="out-in"
-        >
         <q-table
             :key="timesheet_store.is_approval_grid_mode ? 'grid' : 'list'"
-                :visible-columns="visible_columns"
+            :visible-columns="VISIBLE_COLUMNS"
             :rows="overview_rows"
             :columns="pay_period_overview_columns"
             row-key="email"
@@ -100,17 +100,18 @@
             card-container-class="justify-center"
             class="bg-transparent"
             :class="timesheet_store.is_approval_grid_mode ? '' : 'sticky-header-table no-shadow'"
-                table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15"
+            table-class="q-pa-none q-mx-md rounded-10 bg-dark shadow-15 hide-scrollbar"
             :no-data-label="$t('shared.error.no_data_found')"
             :no-results-label="$t('shared.error.no_search_results')"
             :loading-label="$t('shared.label.loading')"
+            :style="$q.platform.is.mobile ? '' : 'max-height: 70vh;'"
         >
             <template #top>
                 <div class="column full-width">
 
                     <div
                         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')"
+                        :class="$q.platform.is.mobile ? 'column flex-center' : 'row q-mt-md'"
                     >
                         <PayPeriodNavigator
                             @date-selected="timesheet_approval_api.getTimesheetOverviews"
@@ -233,18 +234,26 @@
                                     :color="props.value ? 'white' : 'grey-5'"
                                     class="rounded-5 "
                                     :class="props.value ? 'bg-accent' : ''"
-                                        @click.stop="props.row.is_approved = !props.row.is_approved"
+                                    @click.stop="onClickApproveAll(props.row.email, props.row.is_approved)"
                                 />
                             </transition>
 
-                                <div v-else-if="props.col.name === 'employee_name'">
+                            <div v-else-if="props.col.name === 'employee_first_name'">
                                 <span class="text-h5 text-uppercase text-accent q-mr-xs">
-                                        {{ props.value.split(' ')[0] }}
+                                    {{ props.value }}
+                                </span>
+                                <span class="text-uppercase text-weight-light">
+                                    {{ props.row.employee_last_name }}
                                 </span>
-                                    <span class="text-uppercase text-weight-light">{{ props.value.split(' ')[1]
-                                    }}</span>
                             </div>
-                                <span v-else>{{ props.value }}</span>
+
+                            <span
+                                v-else
+                                :class="props.col.name === overview_column_names.REGULAR && props.row.overtime > 0 ? 'text-negative text-weight-bolder' : 'text-weight-regular'"
+                            >
+                                {{ TIME_COLUMNS.includes(props.col.name) ?
+                                    getHoursMinutesStringFromHoursFloat(props.value) : props.value }}
+                            </span>
                         </div>
                     </transition>
                 </q-td>
@@ -276,7 +285,6 @@
                 </div>
             </template>
         </q-table>
-        </transition>
     </div>
 </template>
 

src/modules/timesheet-approval/models/timesheet-overview.models.ts

@@ -63,8 +63,11 @@ export interface PayPeriodOverviewFilters {
     name_search_string: string;
 }
 
+export type OverviewColumns = 'employee_first_name' | 'employee_last_name' | 'email' | 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'SICK' | 'HOLIDAY' | 'VACATION' | 'OVERTIME' | 'expenses' | 'mileage' | 'is_approved' | 'is_active'
+
 export const overview_column_names = {
-    EMPLOYEE_NAME: 'employee_name',
+    FIRST_NAME: 'employee_first_name',
+    LAST_NAME: 'employee_last_name',
     EMAIL: 'email',
     REGULAR: 'REGULAR',
     EVENING: 'EVENING',
@@ -81,18 +84,25 @@ export const overview_column_names = {
 
 export const pay_period_overview_columns: QTableColumn[] = [
     { 
-        name: overview_column_names.EMPLOYEE_NAME, 
+        name: overview_column_names.FIRST_NAME, 
         label: 'timesheet_approvals.table.full_name', 
         align: 'left', 
-        field: 'employee_name',
+        field: overview_column_names.FIRST_NAME,
         sortable: true,
         required: true, 
     },
+    { 
+        name: overview_column_names.LAST_NAME, 
+        label: 'timesheet_approvals.table.full_name', 
+        align: 'left', 
+        field: 'employee_last_name',
+        sortable: true,
+    },
     { 
         name: overview_column_names.EMAIL, 
         label: 'timesheet_approvals.table.email',
         align: 'left', 
-        field: 'email', 
+        field: overview_column_names.EMAIL, 
         sortable: true,
     },
     { 

src/pages/dashboard-page.vue

@@ -70,14 +70,11 @@
             </q-carousel>
         </div>
 
-        <div class="column col flex-center q-pt-md q-pl-md">
+        <div class="column col items-center q-pl-md">
-            <div class="col"></div>
+            <div class="col-auto row justify-end full-width within-iframe" style="height: 50vh;">
-
-            <div class="col-auto row justify-end full-width within-iframe">
                 <iframe
                     title="Environment Canada Weather"
-                    height="100%"
+                    height="400px"
-                    width="100%"
                     src="https://weather.gc.ca/wxlink/wxlink.html?coords=45.159%2C-73.676&lang=e"
                     allowtransparency="true"
                     style="border: 0;"

src/utils/date-and-time-utils.ts

@@ -13,3 +13,15 @@ export const getCurrentPayPeriod = (today = new Date()): number => {
 
     return current_period;
 }
+
+export const getMinutes = (hours: number) => {
+    const minutes_percent = hours - Math.floor(hours);
+    const minutes = Math.round(minutes_percent * 60);
+    return minutes > 1 ? minutes.toString() : '0';
+}
+
+export const getHoursMinutesStringFromHoursFloat = (hours: number): string => {
+    const flat_hours = Math.floor(hours);
+    const minutes = Math.round((hours - flat_hours) * 60);
+    return `${flat_hours}h ${minutes > 1 ? minutes : ''}`
+}