feat(employees): add modal to show employee details, connects successfully to backend and receives data.

src/css/app.scss

@@ -18,4 +18,8 @@
 }
 .bg-authentik-orange {
   background: #fd4b2d !important;
+}
+
+.q-table tbody tr:hover {
+  background: #00ff260c;
 }

src/i18n/en-ca/index.ts

@@ -149,7 +149,7 @@ export default {
     userListRole: 'Role',
     userListSupervisor: 'Supervisor',
     userListCompany: 'Company',
-    addButton: 'Click here to add a new user',
+    addButton: 'Add Employee',
     customer: 'Customer',
     dealer: 'Dealer',
     employee: 'Employee',
@@ -157,6 +157,9 @@ export default {
     admin: 'Administrator',
     support: 'Support',
   },
+  shared:{
+    searchBar: 'Search',
+  },
   editUserPage: {
     title: 'Edit Account',
     passwordTitle: 'Reset Password',

src/i18n/fr-ca/index.ts

@@ -226,6 +226,9 @@ export default {
     submit: 'Envoyer',
     cancel: 'Annuler',
   },
+  shared:{
+    searchBar: 'Rechercher',
+  },
   shiftColumns: {
     title: 'Quarts de travail',
     column_1: 'Type',
@@ -381,7 +384,7 @@ export default {
     userListRole: 'rôle',
     userListSupervisor: 'superviseur',
     userListCompany: 'Compagnie',
-    addButton: 'Cliquez ici pour ajouter un nouvel utilisateur',
+    addButton: 'Ajouter employé',
     customer: 'Client',
     dealer: 'Marchand',
     employee: 'Employé',

src/modules/employee-list/components/employee/employee-list-add-modify-dialog.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useEmployeeStore } from 'src/stores/employee-store';
+
+    const employeeStore = useEmployeeStore();
+</script>
+
+<template>
+    <q-dialog v-model="employeeStore.isShowingEmployeeAddModifyWindow">
+        <q-card>
+            <q-card-section>
+                LOL
+            </q-card-section>
+            <q-inner-loading :showing="employeeStore.isLoadingEmployeeProfile"/>
+        </q-card>
+    </q-dialog>
+</template>

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

@@ -1,19 +1,34 @@
 <script setup lang="ts">
     /* eslint-disable */
-    import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
+    import { useEmployeeStore } from 'src/stores/employee-store';
+import type { EmployeeListTableItem } from 'src/modules/employee-list/types/employee-list-table-interface';
+import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';
 
-    const props = defineProps<{
+    const employeeStore = useEmployeeStore();
-        row: EmployeeListTableItem
+    const employeeListApi = useEmployeeListApi();
-    }>()
 
     const getEmployeeAvatar = (first_name: string, last_name: string) => {
         // add logic here to see if user has an avatar image and return that instead of initials
         return first_name.charAt(0) + last_name.charAt(0);
     };
+    const onProfileCardClick = (email: string) => {
+        employeeStore.isShowingEmployeeAddModifyWindow = true;
+        console.log("clicked profile!");
+        employeeListApi.getEmployeeDetails(email);
+    }
+
+    const props = defineProps<{
+        row: EmployeeListTableItem
+    }>()
 </script>
 
 <template>
-    <q-card class="rounded-15 bg-white col-xs-6 col-sm-4 col-md-3 col-lg-2 column no-wrap" style="max-width: 230px;">
+    <q-card 
+        v-ripple 
+        class="rounded-15 bg-white col-xs-6 col-sm-4 col-md-3 col-lg-2 column no-wrap cursor-pointer" 
+        style="max-width: 230px;"
+        @click="onProfileCardClick(props.row.email)"
+    >
         <q-card-section class="text-center col-5">
             <q-avatar color="primary" size="8em">
                 <img src="src/assets/targo-default-avatar.png" alt="employee avatar" class="q-pa-xs">

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

@@ -3,8 +3,8 @@ 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 SupervisorCrewTableItem from './supervisor-crew-table-item.vue';
+
 import type { EmployeeListTableItem } from '../../types/employee-list-table-interface';
 import type { QTableColumn } from 'quasar';
 
@@ -13,14 +13,16 @@ const employeeStore = useEmployeeStore();
 const isLoadingList = ref<boolean>(true);
 
 const { t } = useI18n();
+const filter = ref("");
+const isGridMode = ref(true);
 
 const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] => [
     {name: 'first_name', label: t('usersListPage.userListFirstName'), field: 'first_name'},
-    {name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name'},
+    {name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name', align: 'left'},
-    {name: 'email', label: t('usersListPage.userListEmail'), field: 'email'},
+    {name: 'email', label: t('usersListPage.userListEmail'), field: 'email', align:'center'},
-    {name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name'},
+    {name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name', align: 'left'},
     {name: 'company_name', label: t('usersListPage.userListCompany'), field: 'company_name'},
-    {name: 'job_title', label: t('usersListPage.userListFirstName'), field: 'job_title'},
+    {name: 'job_title', label: t('usersListPage.userListRole'), field: 'job_title'},
 ]);
 
     onMounted( () => {
@@ -37,13 +39,41 @@ const employeeListColumns = computed((): QTableColumn<EmployeeListTableItem>[] =
             :columns="employeeListColumns" 
             row-key="name"
             :rows-per-page-options="[0]"
+            :filter="filter"
             class="q-pa-md"
+            table-header-class="text-primary text-uppercase"
             card-container-class="justify-center q-gutter-md"
-            grid
+            :grid="isGridMode"
+            :loading="isLoadingList"
+            flat
+            dense
         >
             <template v-slot:item="props">
                 <SupervisorCrewTableItem :row="props.row"/>
             </template>
+
+            <template v-slot:top>
+                <q-btn push icon="person_add" color="primary" :label="$t('usersListPage.addButton')"/>
+                <q-space />
+                <div class="row q-mb-lg">
+                    <q-btn-toggle push class="q-mr-md" color="white" text-color="primary" toggle-color="primary" v-model="isGridMode"
+                    :options="[
+                        {icon: 'grid_view', value: true},
+                        {icon: 'view_list', value: false},
+                    ]"/>
+                    <q-input 
+                        outlined 
+                        dense 
+                        v-model="filter"
+                        :label="$t('shared.searchBar')" 
+                        label-color="primary" bg-color="white" color="primary" 
+                    >
+                        <template v-slot:append>
+                            <q-icon name="search" color="primary"/>
+                        </template>
+                    </q-input>
+                </div>
+            </template>
         </q-table>
     </div>
 </template>

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

@@ -3,50 +3,16 @@ import { useEmployeeStore } from "src/stores/employee-store";
 export const useEmployeeListApi = () => {
     const employeeListStore = useEmployeeStore();
 
-    const getEmployeeList = () => {
+    const getEmployeeList = (): Promise<void> => {
-        employeeListStore.getEmployeeList().catch(err => {
+        return employeeListStore.getEmployeeList();
-            console.log("Ran into an API error fetching employee list: ", err);
-        });
     };
 
+    const getEmployeeDetails = (email: string): Promise<void> => {
+        return employeeListStore.getEmployeeDetails(email);
+    }
+
     return {
         getEmployeeList,
+        getEmployeeDetails,
     };
-};
+};
-
-// import { useAuthStore } from "../../../stores/auth-store";
-// import type { User } from "src/modules/shared/types/user-interface";
-
-// export const useAuthApi = () => {
-//     const authStore = useAuthStore();
-    
-
-    
-//     const login = () => {
-//         authStore.login();
-//     };
-
-//     const oidcLogin = () => {
-//         authStore.oidcLogin();
-//     };
-
-//     const logout = () => {
-//         authStore.logout();
-//     };
-
-//     const isAuthorizedUser = () => {
-//         return authStore.isAuthorizedUser;
-//     };
-
-//     const setUser = (currentUser: User) => {
-//         authStore.user = currentUser;
-//     }
-
-//     return {
-//         login,
-//         oidcLogin,
-//         logout,
-//         isAuthorizedUser,
-//         setUser,
-//     };
-// };

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
+    import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
-
+    import EmployeeListAddModifyDialog from '../components/employee/employee-list-add-modify-dialog.vue';
 </script>
 
 <template>
     <q-page>
+        <EmployeeListAddModifyDialog />
         <div class="text-h4 row justify-center q-py-sm q-mt-lg text-uppercase text-weight-bolder text-primary">
             {{ $t('usersListPage.tableHeader') }}
         </div>

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

@@ -1,43 +1,17 @@
 // /* eslint-disable */
 import { api } from 'src/boot/axios';
 import type { EmployeeListTableItem } from '../types/employee-list-table-interface';
+import type { EmployeeProfile } from '../types/employee-profile-interface';
+
 
 export const EmployeeListService = {
     getEmployeeList: async (): Promise<EmployeeListTableItem[]> => {
-        const res = await api.get<EmployeeListTableItem[]>('/employees/employee-list');
+        const response = await api.get<EmployeeListTableItem[]>('/employees/employee-list')
-        console.log('response from backend: ', res.data);
+        return response.data;
-        return res.data;
+    },
-    }
-};
 
-// export const AuthService = {
+    getEmployeeDetails: async (email: string): Promise<EmployeeProfile> => {
-//     // Will likely be deprecated and relegated to Authentik
+        const response = await api.get<EmployeeProfile>('employees/profile/' + email);
-//     login: () => {
+        return response.data;
-//         //TODO: OIDC customer sign-in, eventually
+    },
-//     },
+};
-
-//     oidcLogin: (): Window | null => {
-//         window.addEventListener('message', (event) => {
-//             if (event.data.type === 'authSuccess') {
-//                 //some kind of logic here to set user in store
-//             }
-//         })
-        
-//         return window.open('http://localhost:3000/auth/v1/login', 'authPopup', 'width=600,height=800');
-//     },
-
-//     logout: () => {
-//         // TODO: logout logic
-//         api.post('/auth/logout')
-//     },
-
-//     refreshToken: () => {
-//         // TODO: token refresh logic
-//         api.post('/auth/refresh')
-//     },
-
-//     getProfile: () => {
-//         // TODO: user info fetch logic
-//         api.get('/auth/me')
-//     },
-// };

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

@@ -1,12 +1,12 @@
 export interface EmployeeProfile {
     first_name: string;
     last_name: string;
+    supervisor_full_name: string;
+    company_name: number;
+    job_title: string;
     email: string;
     phone_number: number;
-    role: string;
-    job_title: string;
-    company_code: number;
-    residence: string;
     first_work_day: string;
     last_work_day: string;
+    residence: string;
 }

src/stores/employee-store.ts

@@ -1,21 +1,41 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import type { EmployeeListTableItem } from "src/modules/employee-list/types/employee-list-table-interface";
 import { EmployeeListService } from "src/modules/employee-list/services/services-employee-list";
+import type { EmployeeProfile } from "src/modules/employee-list/types/employee-profile-interface";
+import type { EmployeeListTableItem } from "src/modules/employee-list/types/employee-list-table-interface";
 
 export const useEmployeeStore = defineStore('employee', () => {  
-    const employee = ref ({});
+    const employee = ref<EmployeeProfile>();
     const employeeList = ref<EmployeeListTableItem[]>([]);
+    const isShowingEmployeeAddModifyWindow = ref<boolean>(false);
+    const isLoadingEmployeeProfile = ref(false);
+    const isLoadingEmployeeList = ref(false);
 
     const getEmployeeList = async () => {
-        const response = await EmployeeListService.getEmployeeList().catch(err => {
+        isLoadingEmployeeList.value = true;
-            console.log("Ran into an error fetching employee list: ", err);
+        try {
-            return [] as EmployeeListTableItem[];
+            const response = await EmployeeListService.getEmployeeList();
-        });
+            employeeList.value = response;
-
+        } catch (error) {
-        employeeList.value = response;
+            console.error("Ran into an error fetching employee list: ", error);
+            //TODO: trigger an alert window with an error message here!
+        }
+        isLoadingEmployeeList.value = false;
     };
 
-    return { employee, employeeList, getEmployeeList };
+    const getEmployeeDetails = async (email: string) => {
+        isLoadingEmployeeProfile.value = true;
+        try {
+            const response = await EmployeeListService.getEmployeeDetails(email);
+            employee.value = response;
+
+        } catch (error) {
+            console.error('There was an error retrieving employee info: ', error);
+            //TODO: trigger an alert window with an error message here!
+        }
+        isLoadingEmployeeProfile.value = false;
+    };
+
+    return { employee, employeeList, isShowingEmployeeAddModifyWindow, isLoadingEmployeeList, isLoadingEmployeeProfile, getEmployeeList, getEmployeeDetails };
 });