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

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

Browse Source
This commit is contained in:
Nicolas Drolet 2025-08-15 17:00:52 -04:00
parent 7230ef01e6
commit b13c8b8b1b
15 changed files with 138 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/app.scss
View File

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

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

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

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

@ -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é',

0
src/modules/employee-list/components/_shared/user-container-add.vue
View File

0
src/modules/employee-list/components/_shared/user-container-update.vue
View File

0
src/modules/employee-list/components/_shared/user-container.vue
View File

16
src/modules/employee-list/components/employee/employee-list-add-modify-dialog.vue Normal file
View File

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

0
src/modules/employee-list/components/employee/employee-profile.vue
View File

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

@ -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<{
row: EmployeeListTableItem
}>()
const employeeStore = useEmployeeStore();
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">

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

@ -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: 'email', label: t('usersListPage.userListEmail'), field: 'email'},
{name: 'supervisor_full_name', label: t('usersListPage.userListSupervisor'), field: 'supervisor_full_name'},
{name: 'last_name', label: t('usersListPage.userListLastName'), field: 'last_name', align: 'left'},
{name: 'email', label: t('usersListPage.userListEmail'), field: 'email', align:'center'},
{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>

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

@ -3,50 +3,16 @@ import { useEmployeeStore } from "src/stores/employee-store";
export const useEmployeeListApi = () => {
const employeeListStore = useEmployeeStore();
const getEmployeeList = () => {
employeeListStore.getEmployeeList().catch(err => {
console.log("Ran into an API error fetching employee list: ", err);
});
const getEmployeeList = (): Promise<void> => {
return employeeListStore.getEmployeeList();
};
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,
// };
// };
};

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

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

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

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

8
src/modules/employee-list/types/employee-profile-interface.ts
View File

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

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

@ -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 => {
console.log("Ran into an error fetching employee list: ", err);
return [] as EmployeeListTableItem[];
});
employeeList.value = response;
isLoadingEmployeeList.value = true;
try {
const response = await EmployeeListService.getEmployeeList();
employeeList.value = response;
} catch (error) {
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 };
});