feat(employees): add page and components for employee list, connect to backend logic

src/boot/axios.ts

@@ -14,7 +14,7 @@ declare module 'vue' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: import.meta.env.VITE_TARGO_BACKEND_URL });
+const api = axios.create({ baseURL: import.meta.env.VITE_TARGO_BACKEND_AUTH_URL });
 
 export default defineBoot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api

src/i18n/en-ca/index.ts

@@ -141,16 +141,13 @@ export default {
   },
   usersListPage: {
     tableHeader: 'Users list',
-    search_input: 'Search',
-    tableCol_1: 'Status',
-    tableCol_2: 'First name',
-    tableCol_3: 'Last name',
-    tableCol_4: 'Email',
-    tableCol_5: 'Phone number',
-    tableCol_6: 'User type',
-    tableCol_7: 'Role',
-    tableCol_8: 'Created by',
-    tableCol_9: 'Supervisor',
+    searchInput: 'Search',
+    UserListFirstName: 'First name',
+    userListLastName: 'Last name',
+    userListEmail: 'Email',
+    userListPhone: 'Phone number',
+    userListRole: 'Role',
+    userListSupervisor: 'Supervisor',
     activeStatus: 'Active',
     unActiveStatus: 'Unactive',
     addButton: 'Click here to add a new user',

src/i18n/fr-ca/index.ts

@@ -372,17 +372,14 @@ export default {
     unlockToolTip: 'Déverrouiller la semaine',
   },
   usersListPage: {
-    tableHeader: 'Liste des utilisateurs',
-    search_input: 'Rechercher',
-    tableCol_1: 'État',
-    tableCol_2: 'Prénom',
-    tableCol_3: 'Nom de famille',
-    tableCol_4: 'Email',
-    tableCol_5: 'Numéro de téléphone',
-    tableCol_6: 'Type d’utilisateur',
-    tableCol_7: 'Role',
-    tableCol_8: 'Créé par',
-    tableCol_9: 'Superviseur',
+    tableHeader: 'Liste d`employées',
+    searchInput: 'rechercher',
+    UserListFirstName: 'prénom',
+    userListLastName: 'nom de famille',
+    userListEmail: 'courriel',
+    userListPhone: '# téléphone',
+    userListRole: 'rôle',
+    userListSupervisor: 'superviseur',
     activeStatus: 'Actif',
     unActiveStatus: 'Inactif',
     addButton: 'Cliquez ici pour ajouter un nouvel utilisateur',

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+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';
+
+const employeeListApi =  useEmployeeListApi();
+const employeeStore = useEmployeeStore();
+const isLoadingList = ref<boolean>(true);
+
+const { t } = useI18n();
+
+const employeeListColumns = computed((): QTableColumn<employeeListTableItem>[] => [
+    {name: 'first_name', label: t('usersListPage.UserListFirstName'), field: 'first_name'},
+    {name: 'last_name', label: 'last name', field: 'last_name'},
+    {name: 'supervisor_full_name', label: 'supervisor', field: 'supervisor_full_name'},
+    {name: 'company_name', label: 'company', field: 'company_name'},
+    {name: 'job_title', label: 'title', field: 'job_title'},
+]);
+
+    onMounted(async () => {
+        const response = await employeeListApi.getEmployeeList().catch(err => {
+            console.log("there was an error on the page fetching employee list: ", err);
+        });
+        
+        if (response) isLoadingList.value = false;
+    })
+</script>
+
+<template>
+    <q-table
+        :title="$t('usersListPage.tableHeader')" 
+        :rows="employeeStore.employeeList" 
+        :columns="employeeListColumns" 
+        row-key="name"
+    >
+
+    </q-table>
+</template>

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

@@ -0,0 +1,59 @@
+import { useEmployeeStore } from "src/stores/employee-store";
+
+export const useEmployeeListApi = () => {
+    const employeeListStore = useEmployeeStore();
+
+    const getEmployeeList = async (): Promise<boolean> => {
+        const response = await 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 {
+        getEmployeeList,
+    };
+};
+
+// 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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import SupervisorCrewTable from '../components/supervisor/supervisor-crew-table.vue';
+
+</script>
+
+<template>
+    <q-page>
+        <SupervisorCrewTable />
+        <div>
+            A test of your reflexes!
+        </div>
+    </q-page>
+</template>

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

@@ -0,0 +1,43 @@
+// /* eslint-disable */
+import { api } from 'src/boot/axios';
+import type { employeeListTableItem } from '../types/employee-list-table-interface';
+
+export const EmployeeListService = {
+    getEmployeeList: async (): Promise<employeeListTableItem[]> => {
+        const res = await api.get<employeeListTableItem[]>('/employees/employee-list');
+        console.log('response from backend: ', res.data);
+        return res.data;
+    }
+};
+
+// export const AuthService = {
+//     // Will likely be deprecated and relegated to Authentik
+//     login: () => {
+//         //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-list-table-interface.ts

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

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

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

src/router/routes.ts

@@ -17,6 +17,11 @@ const routes: RouteRecordRaw[] = [
         name: RouteNames.TIMESHEET_APPROVALS,
         component: () => import('src/modules/timesheet-approval/pages/timesheet-approval.vue'),
       },
+      {
+        path: 'employees',
+        name: RouteNames.EMPLOYEE_LIST,
+        component: () => import('src/modules/employee-list/pages/supervisor-crew-page.vue'),
+      },
     ],
   },
 

src/stores/auth-store.ts

@@ -11,7 +11,7 @@ const defaultUser: User = {
   };
 
 export const useAuthStore = defineStore('auth', () => {  
-  const user = ref (defaultUser);
+  const user = ref(defaultUser);
   const authError = ref("");
   const isAuthorizedUser = computed(() => user.value.role !== 'guest');
 

src/stores/employee-store.ts

@@ -0,0 +1,19 @@
+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";
+
+export const useEmployeeStore = defineStore('employee', () => {  
+    const employee = ref ({});
+    const employeeList = ref<employeeListTableItem[]>([]);
+
+    const getEmployeeList = async () => {
+        employeeList.value = await EmployeeListService.getEmployeeList().catch(err => {
+            console.log("Ran into an error fetching employee list: ", err);
+        });
+        console.log("store retrieved list successfully:");
+    };
+
+    return { employee, employeeList, getEmployeeList };
+});
+