louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicolas Drolet 2025-08-14 17:03:51 -04:00
parent f45d0c2bd6
commit f33ca127fa
12 changed files with 90 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/i18n/en-ca/index.ts
View File

@ -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',
unActiveStatus: 'Unactive',
userListCompany: 'Company',
addButton: 'Click here to add a new user',
customer: 'Customer',
dealer: 'Dealer',

7
src/i18n/fr-ca/index.ts
View File

@ -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',
unActiveStatus: 'Inactif',
userListCompany: 'Compagnie',
addButton: 'Cliquez ici pour ajouter un nouvel utilisateur',
customer: 'Client',
dealer: 'Marchand',

2
src/layouts/main-layout.vue
View File

@ -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>

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

@ -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>

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

@ -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>[] => [
{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'},
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: 'email', label: t('usersListPage.userListEmail'), field: 'email'},
{name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name'},
{name: 'company_name', label: t('usersListPage.userListCompany'), field: 'company_name'},
{name: 'job_title', label: t('usersListPage.userListFirstName'), 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;
onMounted( () => {
employeeListApi.getEmployeeList();
isLoadingList.value = false;
})
</script>
<template>
<q-table
:title="$t('usersListPage.tableHeader')"
:rows="employeeStore.employeeList"
:columns="employeeListColumns"
row-key="name"
>
</q-table>
<div class="q-pa-lg col">
<q-table
title=" "
:rows="employeeStore.employeeList"
:columns="employeeListColumns"
row-key="name"
:rows-per-page-options="[0]"
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>

11
src/modules/employee-list/composables/use-employee-api.ts
View File

@ -3,17 +3,10 @@ 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 => {
const getEmployeeList = () => {
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 {

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

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

6
src/modules/employee-list/services/services-employee-list.ts
View File

@ -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[]> => {
const res = await api.get<employeeListTableItem[]>('/employees/employee-list');
getEmployeeList: async (): Promise<EmployeeListTableItem[]> => {
const res = await api.get<EmployeeListTableItem[]>('/employees/employee-list');
console.log('response from backend: ', res.data);
return res.data;
}

3
src/modules/employee-list/types/employee-list-table-interface.ts
View File

@ -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;

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

@ -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}">

2
src/pages/test-page.vue
View File

@ -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">

10
src/stores/employee-store.ts
View File

@ -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 };