refactor(employees): finish connection to backend api, design cards to display employees, fine-tunning element placement

src/i18n/en-ca/index.ts

@@ -140,16 +140,15 @@ export default {
     card_4: 'Customers',
   },
   usersListPage: {
-    tableHeader: 'Users list',
+    tableHeader: 'Employee list',
     searchInput: 'Search',
-    UserListFirstName: 'First name',
+    userListFirstName: 'First name',
     userListLastName: 'Last name',
     userListEmail: 'Email',
     userListPhone: 'Phone number',
     userListRole: 'Role',
     userListSupervisor: 'Supervisor',
-    activeStatus: 'Active',
+    userListCompany: 'Company',
-    unActiveStatus: 'Unactive',
     addButton: 'Click here to add a new user',
     customer: 'Customer',
     dealer: 'Dealer',

src/i18n/fr-ca/index.ts

@@ -372,16 +372,15 @@ export default {
     unlockToolTip: 'Déverrouiller la semaine',
   },
   usersListPage: {
-    tableHeader: 'Liste d`employées',
+    tableHeader: 'Liste d’employées',
     searchInput: 'rechercher',
-    UserListFirstName: 'prénom',
+    userListFirstName: 'prénom',
     userListLastName: 'nom de famille',
     userListEmail: 'courriel',
     userListPhone: '# téléphone',
     userListRole: 'rôle',
     userListSupervisor: 'superviseur',
-    activeStatus: 'Actif',
+    userListCompany: 'Compagnie',
-    unActiveStatus: 'Inactif',
     addButton: 'Cliquez ici pour ajouter un nouvel utilisateur',
     customer: 'Client',
     dealer: 'Marchand',

src/layouts/main-layout.vue

@@ -10,7 +10,7 @@
     <HeaderBar />
     <RightDrawer />
     <q-page-container>
-      <router-view class="q-pa-sm" />
+      <router-view class="q-pa-sm bg-secondary" />
     </q-page-container>
     <FooterBar />
   </q-layout>

src/modules/employee-list/components/supervisor/supervisor-crew-table-item.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+    import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
+
+    const props = defineProps<{
+        row: EmployeeListTableItem
+    }>()
+</script>
+
+<template>
+    <q-btn align="right" outline color="primary" class="q-py-none bg-white col-xs-12 col-sm-6 col-md-4 col-lg-2">
+        <div class="full-width">
+            <div class="text-h6 text-primary text-weight-bold q-pb-none q-pt-sm text-uppercase ellipsis hug-text text-left">
+                {{ props.row.first_name }} {{ props.row.last_name }}
+                <q-separator color="primary" />
+            </div>
+    
+            <q-card flat square class=" row bg-primary q-my-xs justify-center">
+                <q-card-section class="q-py-xs text-caption text-white">
+                    {{ props.row.job_title }}
+                </q-card-section>
+            </q-card>
+            
+            <div class="q-pt-xs q-pb-sm text-overline text-grey-14 text-lowercase hug-text text-right">
+                {{ props.row.email }}    
+            </div>
+            
+        </div>
+    </q-btn>
+</template>
+
+<style>
+    .hug-text {
+        line-height: 0.7em;
+    }
+</style>

src/modules/employee-list/components/supervisor/supervisor-crew-table.vue

@@ -3,8 +3,10 @@ import { computed, onMounted, ref } from 'vue';
 import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
 import { useEmployeeStore } from 'src/stores/employee-store';
 import { useI18n } from 'vue-i18n';
-import type { employeeListTableItem } from '../../types/employee-list-table-interface';
+
-import { QTableColumn } from 'quasar';
+import SupervisorCrewTableItem from './supervisor-crew-table-item.vue';
+import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
+import type { QTableColumn } from 'quasar';
 
 const employeeListApi =  useEmployeeListApi();
 const employeeStore = useEmployeeStore();
@@ -12,30 +14,36 @@ const isLoadingList = ref<boolean>(true);
 
 const { t } = useI18n();
 
-const employeeListColumns = computed((): QTableColumn<employeeListTableItem>[] => [
+const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] => [
-    {name: 'first_name', label: t('usersListPage.UserListFirstName'), field: 'first_name'},
+    {name: 'first_name', label: t('usersListPage.userListFirstName'), field: 'first_name'},
-    {name: 'last_name', label: 'last name', field: 'last_name'},
+    {name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name'},
-    {name: 'supervisor_full_name', label: 'supervisor', field: 'supervisor_full_name'},
+    {name: 'email', label: t('usersListPage.userListEmail'), field: 'email'},
-    {name: 'company_name', label: 'company', field: 'company_name'},
+    {name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name'},
-    {name: 'job_title', label: 'title', field: 'job_title'},
+    {name: 'company_name', label: t('usersListPage.userListCompany'), field: 'company_name'},
+    {name: 'job_title', label: t('usersListPage.userListFirstName'), field: 'job_title'},
 ]);
 
-    onMounted(async () => {
+    onMounted( () => {
-        const response = await employeeListApi.getEmployeeList().catch(err => {
+        employeeListApi.getEmployeeList();
-            console.log("there was an error on the page fetching employee list: ", err);
+        isLoadingList.value = false;
-        });
-        
-        if (response) isLoadingList.value = false;
     })
 </script>
 
 <template>
-    <q-table
+    <div class="q-pa-lg col">
-        :title="$t('usersListPage.tableHeader')" 
+        <q-table
-        :rows="employeeStore.employeeList" 
+            title=" " 
-        :columns="employeeListColumns" 
+            :rows="employeeStore.employeeList" 
-        row-key="name"
+            :columns="employeeListColumns" 
-    >
+            row-key="name"
-
+            :rows-per-page-options="[0]"
-    </q-table>
+            class="q-pa-md rounded-15"
+            card-container-class="q-gutter-sm justify-center q-pa-sm"
+            grid
+        >
+            <template v-slot:item="props">
+                <SupervisorCrewTableItem :row="props.row"/>
+            </template>
+        </q-table>
+    </div>
 </template>

src/modules/employee-list/composables/use-employee-api.ts

@@ -3,17 +3,10 @@ import { useEmployeeStore } from "src/stores/employee-store";
 export const useEmployeeListApi = () => {
     const employeeListStore = useEmployeeStore();
 
-    const getEmployeeList = async (): Promise<boolean> => {
+    const getEmployeeList = () => {
-        const response = await employeeListStore.getEmployeeList().catch(err => {
+        employeeListStore.getEmployeeList().catch(err => {
             console.log("Ran into an API error fetching employee list: ", err);
         });
-
-        if (response) {
-            console.log("employee api retrieved list successfully")
-            return true;
-        } else {
-            return false;
-        }
     };
 
     return {

src/modules/employee-list/pages/supervisor-crew-page.vue

@@ -5,9 +5,9 @@ import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.
 
 <template>
     <q-page>
-        <SupervisorCrewTable />
+        <div class="text-h4 row justify-center q-pt-md text-uppercase text-weight-bolder text-primary">
-        <div>
+            {{ $t('usersListPage.tableHeader') }}
-            A test of your reflexes!
         </div>
+        <SupervisorCrewTable />
     </q-page>
 </template>

src/modules/employee-list/services/services-employee-list.ts

@@ -1,10 +1,10 @@
 // /* eslint-disable */
 import { api } from 'src/boot/axios';
-import type { employeeListTableItem } from '../types/employee-list-table-interface';
+import type { EmployeeListTableItem } from '../types/employee-list-table-interface';
 
 export const EmployeeListService = {
-    getEmployeeList: async (): Promise<employeeListTableItem[]> => {
+    getEmployeeList: async (): Promise<EmployeeListTableItem[]> => {
-        const res = await api.get<employeeListTableItem[]>('/employees/employee-list');
+        const res = await api.get<EmployeeListTableItem[]>('/employees/employee-list');
         console.log('response from backend: ', res.data);
         return res.data;
     }

src/modules/employee-list/types/employee-list-table-interface.ts

@@ -1,6 +1,7 @@
-export interface employeeListTableItem {
+export interface EmployeeListTableItem {
     first_name: string;
     last_name: string;
+    email: string;
     supervisor_full_name: string | null;
     company_name: number;
     job_title: string;

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

@@ -70,7 +70,7 @@
                             <div class="text-primary text-h5 text-weight-bolder ellipsis">{{ props.row.employee_name }}</div>
                         </q-card-section>
                         <div v-for="col in props.cols.filter(col => col.name !== 'employee_name')" class="q-pa-none q-mx-sm items-center row" :class="{ 'bg-warning': col.name == 'overtime_hours' && col.value as number > 0 }" >
-                            <q-card-section class="text-right text-weight-bolder text-subtitle1 text-primary q-pr-sm q-py-none col-3" style="line-height: 1.2em;">{{ col.value }}</q-card-section>
+                            <q-card-section class="text-right text-weight-bolder text-subtitle1 text-primary q-pr-sm q-py-none col-3 ellipsis" style="line-height: 1.2em;">{{ col.value }}</q-card-section>
                             <q-card-section class="text-weight-bold q-pa-none col-9" >{{ col.label }}</q-card-section>
                         </div>
                         <q-card-section horizontal class="q-pa-sm q-mt-sm" :class="{ 'bg-primary text-white': props.selected}">

src/pages/test-page.vue

@@ -12,7 +12,7 @@
 </script>
 
 <template>
-  <q-page padding class="q-pa-md row items-center justify-center q-gutter-md">
+  <q-page padding class="q-pa-md row items-center justify-center">
     <q-card class="shadow-2 col-9 dark-font">
       <q-img src="src/assets/line-truck-1.jpg">
         <div class="absolute-bottom text-h5">

src/stores/employee-store.ts

@@ -1,17 +1,19 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import type { employeeListTableItem } from "src/modules/employee-list/types/employee-list-table-interface";
+import type { EmployeeListTableItem } from "src/modules/employee-list/types/employee-list-table-interface";
 import { EmployeeListService } from "src/modules/employee-list/services/services-employee-list";
 
 export const useEmployeeStore = defineStore('employee', () => {  
     const employee = ref ({});
-    const employeeList = ref<employeeListTableItem[]>([]);
+    const employeeList = ref<EmployeeListTableItem[]>([]);
 
     const getEmployeeList = async () => {
-        employeeList.value = await EmployeeListService.getEmployeeList().catch(err => {
+        const response = await EmployeeListService.getEmployeeList().catch(err => {
             console.log("Ran into an error fetching employee list: ", err);
+            return [] as EmployeeListTableItem[];
         });
-        console.log("store retrieved list successfully:");
+
+        employeeList.value = response;
     };
 
     return { employee, employeeList, getEmployeeList };