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

feat(help): worked on the appearances and display

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-18 12:32:20 -05:00
parent 320212e390
commit 8061184269
4 changed files with 119 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,16 @@ export default {
dashboard: {
title: "Home Page",
news_feed: "News Feed",
chat_bot: "Technical chat-bot"
chat_bot: "Technical chat-bot",
notification: "Notifications",
},
personal_profile: {
title: "Section << Personnal Profile >>",
title: "Personnal Profile",
personal_info: "Personal informations",
professional_info: "Professional informations",
},
timesheets: {
title: "Section << Timesheet >>",
title: "Timesheet",
create_shift: "Add a new shift",
update_shift: "Update an existing shift",
delete_shift: "Removing a shift from the timesheet",
@ -24,14 +25,14 @@ export default {
create_expense: "Add a new expense",
update_expense: "Update an existing expense",
delete_expense: "Removing an expense from the list",
},
employee_list: {
title: "Section << Employee List >>",
title: "Employee List",
terminated_employees: "Inactive employees",
},
employee_management: {
title: "Section << Employee Management >>",
title: "Employee Management",
create_employee: "Creating a new employee",
update_employee: "Updating an existing employee's informations",
module_access: "App managing access tool",
@ -39,7 +40,7 @@ export default {
terminating_employee: "terminate an employee",
},
timesheets_approval: {
title: "Section << Timesheets approval >>",
title: "Timesheets approval",
approval: "timesheet approvals",
inspect: "Inspect timesheets",
comment_expense: "Commenting an expense",

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

@ -9,15 +9,16 @@ export default {
title: "Page d'accueil",
menu: "Menu Principal",
news_feed: "Fil d'actualités",
chat_bot: "Robot conversationnel d'aide technique"
chat_bot: "Robot conversationnel d'aide technique",
notification: "Notifications",
},
personal_profile: {
title: "Section << Profil >>",
title: "Profil",
personal_info: "Informations personnelles",
professional_info: "Informations professionnelles",
},
timesheets: {
title: "Section << Carte de temps >>",
title: "Carte de temps",
create_shift: "Inscrire un nouveau quart de travail",
update_shift: "Modifier un quart de travail existant",
delete_shift: "Supprimer un quart de travail de la carte de temps",
@ -27,11 +28,11 @@ export default {
delete_expense: "Supprimer une dépense",
},
employee_list: {
title: "Section << Répertoire des employés >>",
title: "Répertoire des employés ",
terminated_employees: "Employés inactifs",
},
employee_management: {
title: "Section << Gestion des employés >>",
title: "Gestion des employés ",
create_employee: "Création d'un nouvel employé",
update_employee: "Modifier les informations d'un employé",
module_access: "Outils de gestion des accès de l'application",
@ -39,7 +40,7 @@ export default {
terminating_employee: "Rendre un employé inactif",
},
timesheets_approval: {
title: "Section << Validation de Carte de temps >>",
title: "Validation de Carte de temps",
approval: "Validation des cartes de temps",
inspect: "Inspect timesheets",
comment_expense: "Commenter une dépense",

51
src/modules/help/components/help-module.vue
View File

@ -10,7 +10,7 @@ defineProps<{
}>();
const help_store = useHelpStore();
const current_path = ref('');
const current_path = ref('src/assets/help-ss/login-background.png');
const switchSide = (index: number) => {
@ -23,16 +23,21 @@ const switchSide = (index: number) => {
</script>
<template>
<div class="column q-my-xs bg-secondary">
<div class="column q-my-xs bg-secondary q-py-xl">
<!-- Card Header -->
<div class="row col-auto text-h5 q-pa-md text-accent bg-primary">
<div
class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
:class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
>
{{ ($t(`help.tutorial.${module}.title`)).toUpperCase() }}
</div>
<!-- Card Body -->
<div class="row col full-width">
<div class="row col full-width q-px-none">
<!-- Object and descriptions zone -->
<div
class="col-4"
class="col flex-center row"
v-if="moduleIndex % 2 !== 0"
>
<transition
@ -48,26 +53,48 @@ const switchSide = (index: number) => {
</transition>
</div>
<div class="col-8">
<div class="col column">
<q-expansion-item
v-for="option, index in help_store.help_module_options[module]"
:key="index"
class="bg-gray-2 text-weight-bolder col-auto row "
hide-expand-icon
class="bg-gray-2 text-weight-bolder row"
:class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
group="help_page"
:label="($t(option.label)).toUpperCase()"
:switch-toggle-side="switchSide(moduleIndex)"
@before-show="current_path = option.path"
@after-hide="current_path = ''"
>
<div class="col">
<template #header>
<div
class="row full-width items-center"
:class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
>
<q-icon
v-if="switchSide(moduleIndex)"
:name="option.icon"
class="col-auto q-pr-sm"
size="sm"
/>
<span class="text-accent">{{ $t(option.label).toUpperCase() }}</span>
<q-icon
v-if="!switchSide(moduleIndex)"
:name="option.icon"
class="col-auto q-pl-sm"
size="sm"
/>
</div>
</template>
<div
class="q-px-xl"
:class="switchSide(moduleIndex) ? 'text-left' : 'text-right'"
>
{{ ($t(`${option.description}`)) }}
</div>
</q-expansion-item>
</div>
<!-- images of the related selected option -->
<div
class="col-4"
class="col flex-center row"
v-if="moduleIndex % 2 === 0"
>
<transition

132
src/modules/help/models/help-module.model.ts
View File

@ -1,65 +1,3 @@
import calendar from 'src/assets/help-ss/calendar.png';
import employee_list_display from 'src/assets/help-ss/employee-list.png';
import search_bar from 'src/assets/help-ss/employee-list.png';
import dashboard from 'src/assets/help-ss/dashboard.png';
import personal_info from 'src/assets/help-ss/personal_infos.png';
import professionnal_info from 'src/assets/help-ss/professionnal_infos.png';
import preferences from 'src/assets/help-ss/preferences.png';
import create_shift from 'src/assets/help-ss/timesheets.png';
import update_shift from 'src/assets/help-ss/timesheets.png';
import delete_shift from 'src/assets/help-ss/delete-shift.png';
import comment_shift from 'src/assets/help-ss/commenting-shift.png';
import create_expense from 'src/assets/help-ss/expenses.png';
import delete_expense from 'src/assets/help-ss/delete-expense.png';
import update_expense from 'src/assets/help-ss/update-expense.png';
import timesheets_approval from 'src/assets/help-ss/timesheet-approvals.png';
import timesheet_details from 'src/assets/help-ss/timesheet-details.png';
import timesheet_approval_display from 'src/assets/help-ss/timesheet-approvals.png';
import terminated_employee_display from 'src/assets/help-ss/employee-list.png';
import terminating_employee from 'src/assets/help-ss/employee-list.png';
import create_employee from 'src/assets/help-ss/create-employee.png';
import update_employee from 'src/assets/help-ss/update-employee.png';
import access_management from 'src/assets/help-ss/access-management.png';
import schedule_preset from 'src/assets/help-ss/schedule-preset-management.png';
import comment_expense from 'src/assets/help-ss/timesheet-details.png';
const menu_desc = "Description du menu";
const news_feed_desc = "Description du news feed";
const chat_bot_desc = "description du chat_bot";
const personal_infos_desc = "Description du profil personnel";
const professional_info_desc = "Description du profil professionnel";
const preferences_details_desc = "description des préférences";
const create_shift_desc = "Description create shift";
const update_shift_desc = "Description create shift";
const delete_shift_desc = "Description create shift";
const comment_shift_desc = "Description create shift";
const create_expense_desc = "Description create shift";
const update_expense_desc = "Description create shift";
const delete_expense_desc = "Description create shift";
const comment_expense_desc = "Description create shift";
const terminated_employee_desc = "Description de l'option d'affichage des employés qui ne sont plus à l'emploie";
const terminating_employee_desc = "Description on to how to terminate an employee";
const create_employee_desc = "Description pour la création d'un employé";
const update_employee_desc = "Description pour la mise à jour d'un employé";
const calendar_nav_desc = "Description du calendrier de navigation";
const display_desc = "Description de l'option d'affichage de carte ou liste";
const search_bar_desc = "Decsription des options de recherche";
const module_access_desc = "Description d'attribution des accès";
const schedule_preset_desc = "Description d'attribution d'horaire prédéfinit";
const timesheets_approval_desc = "Description de la page de validation de quart";
const timesheets_approval_inspect_desc = "Description du modal de détails";
export type HelpModuleOptions = {
label: string;
path: string;
@ -77,17 +15,77 @@ export type HelpModuleKey =
export type Options = Record<HelpModuleKey, HelpModuleOptions[]>;
import calendar from 'src/assets/help-ss/calendar.png';
import employee_list_display from 'src/assets/help-ss/employee-list.png';
import search_bar from 'src/assets/help-ss/employee-list.png';
const calendar_nav_desc = "Description du calendrier de navigation";
const display_desc = "Description de l'option d'affichage de carte ou liste";
const search_bar_desc = "Decsription des options de recherche";
import dashboard from 'src/assets/help-ss/dashboard.png';
import menu from 'src/assets/help-ss/dashboard.png';
import notifications from 'src/assets/help-ss/dashboard.png';
import chatbot from 'src/assets/help-ss/dashboard.png';
const menu_desc = "Description du menu";
const news_feed_desc = "Description du news feed";
const chat_bot_desc = "description du chat_bot";
const notification_desc = "Description des notifications"
import personal_info from 'src/assets/help-ss/personal_infos.png';
import professionnal_info from 'src/assets/help-ss/professionnal_infos.png';
import preferences from 'src/assets/help-ss/preferences.png';
const personal_infos_desc = "Description du profil personnel";
const professional_info_desc = "Description du profil professionnel";
const preferences_details_desc = "description des préférences";
import create_shift from 'src/assets/help-ss/timesheets.png';
import update_shift from 'src/assets/help-ss/timesheets.png';
import delete_shift from 'src/assets/help-ss/delete-shift.png';
import comment_shift from 'src/assets/help-ss/commenting-shift.png';
import create_expense from 'src/assets/help-ss/expenses.png';
import delete_expense from 'src/assets/help-ss/delete-expense.png';
import update_expense from 'src/assets/help-ss/update-expense.png';
const create_shift_desc = "Description create shift";
const update_shift_desc = "Description create shift";
const delete_shift_desc = "Description create shift";
const comment_shift_desc = "Description create shift";
const create_expense_desc = "Description create shift";
const update_expense_desc = "Description create shift";
const delete_expense_desc = "Description create shift";
import terminated_employee_display from 'src/assets/help-ss/employee-list.png';
import terminating_employee from 'src/assets/help-ss/employee-list.png';
import create_employee from 'src/assets/help-ss/create-employee.png';
import update_employee from 'src/assets/help-ss/update-employee.png';
import access_management from 'src/assets/help-ss/access-management.png';
import schedule_preset from 'src/assets/help-ss/schedule-preset-management.png';
const terminated_employee_desc = "Description de l'option d'affichage des employés qui ne sont plus à l'emploie";
const terminating_employee_desc = "Description on to how to terminate an employee";
const create_employee_desc = "Description pour la création d'un employé";
const update_employee_desc = "Description pour la mise à jour d'un employé";
const module_access_desc = "Description d'attribution des accès";
const schedule_preset_desc = "Description d'attribution d'horaire prédéfinit";
import comment_expense from 'src/assets/help-ss/timesheet-details.png';
import timesheet_approval_inspect from 'src/assets/help-ss/timesheet-approvals.png';
import timesheet_details from 'src/assets/help-ss/timesheet-details.png';
const comment_expense_desc = "Description create shift";
const timesheets_approval_desc = "Description de la page de validation de quart";
const timesheets_approval_inspect_desc = "Description du modal de détails";
export const dashboard_options: HelpModuleOptions[] = [
{ label: 'help.tutorial.dashboard.menu', path: dashboard, description: menu_desc, icon: 'menu' },
{ label: 'help.tutorial.dashboard.news_feed', path: dashboard, description: news_feed_desc, icon: 'newspaper' },
{ label: 'help.tutorial.dashboard.chat_bot', path: dashboard, description: chat_bot_desc, icon: 'smart_toy' },
{ label: 'help.tutorial.dashboard.news_feed', path: menu, description: news_feed_desc, icon: 'newspaper' },
{ label: 'help.tutorial.dashboard.notification', path: notifications, description: notification_desc, icon: 'notifications_active' },
{ label: 'help.tutorial.dashboard.chat_bot', path: chatbot, description: chat_bot_desc, icon: 'smart_toy' },
];
export const profile_options: HelpModuleOptions[] = [
{ label: 'help.tutorial.personal_profile.personal_info', path: personal_info, description: personal_infos_desc, icon: 'contact_page' },
{ label: 'help.tutorial.personal_profile.professional_info', path: professionnal_info, description: professional_info_desc, icon: 'badge' },
{ label: 'help.tutorial.shared.preferences', path: preferences, description: preferences_details_desc, icon: '' },
{ label: 'help.tutorial.shared.preferences', path: preferences, description: preferences_details_desc, icon: 'display_settings' },
];
export const timesheets_options: HelpModuleOptions[] = [
@ -119,10 +117,10 @@ export const employee_management_options: HelpModuleOptions[] = [
];
export const timesheets_approval_options: HelpModuleOptions[] = [
{ label: 'help.tutorial.timesheets_approval.approval', path: timesheets_approval, description: timesheets_approval_desc, icon: 'verified' },
{ label: 'help.tutorial.timesheets_approval.approval', path: timesheet_approval_inspect, description: timesheets_approval_desc, icon: 'verified' },
{ label: 'help.tutorial.timesheets_approval.inspect', path: timesheet_details, description: timesheets_approval_inspect_desc, icon: 'work_history' },
{ label: 'help.tutorial.timesheets_approval.comment_expense', path: comment_expense, description: comment_expense_desc, icon: 'chat_bubble_outline' },
{ label: 'help.tutorial.shared.display', path: timesheet_approval_display, description: display_desc, icon: 'display_settings' },
{ label: 'help.tutorial.shared.display', path: employee_list_display, description: display_desc, icon: 'display_settings' },
{ label: 'help.tutorial.shared.search', path: search_bar, description: search_bar_desc, icon: 'search' },
{ label: 'help.tutorial.shared.calendar', path: calendar, description: calendar_nav_desc, icon: 'calendar_month' },
]