feat(help): worked on the appearances and display

src/i18n/en-ca/index.ts

@@ -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",
@@ -27,11 +28,11 @@ export default {
 
             },
             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",

src/i18n/fr-ca/index.ts

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

src/modules/help/components/help-module.vue

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

src/modules/help/models/help-module.model.ts

@@ -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.news_feed', path: menu, 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.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' },
 ]