feat(help): added structure to display

src/i18n/en-ca/index.ts

@@ -5,7 +5,9 @@ export default {
     help: {
         label: "Centre d'aide",
         tutorial: {
-            dashboard: "Home Page",
+            dashboard: {
+                title: "Home Page",
+            },
             personal_profile: {
                 title: "Section << Personnal Profile >>",
                 personal_info: "Personal informations",

src/i18n/fr-ca/index.ts

@@ -5,7 +5,9 @@ export default {
     help: {
         label: "Centre d'aide",
         tutorial: {
-            dashboard: "Page d'accueil",
+            dashboard: {
+                title: "Page d'accueil",
+            },
             personal_profile: {
                 title: "Section << Profil >>",
                 personal_info: "Informations personnelles",

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

@@ -1,53 +1,87 @@
 <script setup lang="ts">
 
+import type { HelpModuleKey } from 'src/modules/help/models/help-module.model';
 import { useHelpStore } from 'src/stores/help-store';
+import { ref } from 'vue';
+
+defineProps<{
+    module: HelpModuleKey;
+    moduleIndex: number;
+}>();
 
 const help_store = useHelpStore();
+const current_path = ref('');
 
 
+const switchSide = (index: number) => {
+    if (index % 2 !== 0) {
+        return false
+    }
+    return true
+}
+
 </script>
 
 <template>
-    <q-card
+    <div class="column q-my-xs bg-secondary">
-        class="column q-my-xs bg-secondary"
-        v-for="module, index of help_store.custom_help_module_options"
-        :key="index"
-    >
         <!-- Card Header -->
         <div class="row col-auto text-h5 q-pa-md text-accent bg-primary">
-            {{ $t(`${module}`) }}
+            {{ ($t(`help.tutorial.${module}.title`)).toUpperCase() }}
         </div>
         <!-- Card Body -->
-        <div class="row col">
+        <div class="row col full-width">
             <!-- Object and descriptions zone -->
+            <div
+                class="col-4"
+                v-if="moduleIndex % 2 !== 0"
+            >
+                <transition
+                    appear
+                    enter-active-class="animated fade-in"
+                    leave-active-class="animated fade-out"
+                >
+                    <q-img
+                        :src="current_path"
+                        loading="lazy"
+                    >
+                    </q-img>
+
+                </transition>
+            </div>
             <div class="col-8">
                 <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 "
+                    :class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
                     group="help_page"
-                    :label="($t(index.toString())).toUpperCase()"
+                    :label="($t(option.label)).toUpperCase()"
-                    switch-toggle-side
+                    :switch-toggle-side="switchSide(moduleIndex)"
+                    @before-show="current_path = option.path"
+                    @after-hide="current_path = ''"
                 >
                     <div class="col">
-                        description goes here
+                        {{ ($t(`${option.description}`)) }}
                     </div>
                 </q-expansion-item>
             </div>
             <!-- images of the related selected option -->
             <div
-                v-for="option, index in (help_store.options)"
-                :key="index"
                 class="col-4"
+                v-if="moduleIndex % 2 === 0"
             >
-                <q-img
+                <transition
-                    :src="option.toString()"
+                    appear
-                    loading="lazy"
+                    enter-active-class="animated fade-in"
-                    class="col-4"
+                    leave-active-class="animated fade-out"
                 >
-                    <div class="absolute-top text-subtitle1 text-center">
+                    <q-img
-                        needs to check with v-if to show only the right img
+                        :src="current_path"
-                    </div>
+                        loading="lazy"
-                </q-img>
+                    >
+                    </q-img>
+                </transition>
             </div>
         </div>
-    </q-card>
+    </div>
 </template>

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

@@ -1,55 +1,65 @@
-export interface HelpModule {
+import approvalsBanner from 'src/assets/approvals-banner.png';
-    dashboard: string;
+
-    personal_profile: string;
+
-    timesheet: string;
+export type HelpModuleOptions = {
-    employee_list: string;
+    label: string;
-    employee_management: string;
+    path: string;
-    timesheets_approval: string;
+    description: string;
 };
 
-export const module_access_help: string[] = [
+export type HelpModuleKey =
-    'help.tutorial.personal_profile.title',
+    | 'dashboard'
-    'help.tutorial.timesheets.title',
+    | 'personal_profile'
-    'help.tutorial.employee_list.title',
+    | 'timesheets'
-    'help.tutorial.employee_management.title',
+    | 'employee_list'
-    'help.tutorial.timesheets_approval.title',
+    | 'employee_management'
+    | 'timesheets_approval';
+
+export type Options = Record<HelpModuleKey, HelpModuleOptions[]>;
+
+const personal_infos = "bonjour";
+const professional_info = "Are you chinese?";
+
+export const dashboard_options: HelpModuleOptions[] = [
+    { label: 'help.tutorial.personal_profile.personal_info', path: approvalsBanner, description: personal_infos },
+    { label: 'help.tutorial.personal_profile.professional_info', path: approvalsBanner, description: professional_info },
 ];
 
-export const profile_options = [
+export const profile_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.personal_profile.personal_info', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.personal_profile.personal_info', path: approvalsBanner, description: personal_infos },
-    { label: 'help.tutorial.personal_profile.professional_info', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.personal_profile.professional_info', path: approvalsBanner, description: professional_info },
-    { label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
 ];
 
-export const timesheet_options = [
+export const timesheets_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.timesheet.create_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.create_shift', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheet.update_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.update_shift', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheet.delete_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.delete_shift', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheet.create_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.create_shift', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheet.update_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.update_shift', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheet.delete_shift', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets.delete_shift', path: approvalsBanner, description: '' },
 ];
 
-export const employee_list_options = [
+export const employee_list_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.employee_list.terminated_employees', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_list.terminated_employees', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
 ];
 
-export const employee_management_options = [
+export const employee_management_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.employee_list.terminated_employees', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_list.terminated_employees', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.employee_management.create_employee', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_management.create_employee', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.employee_management.update_employee', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_management.update_employee', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.employee_management.module_access', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_management.module_access', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.employee_management.schedule_preset', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_management.schedule_preset', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.employee_management.terminate_employee', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.employee_management.terminate_employee', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
 ];
 
-export const timesheets_approval = [
+export const timesheets_approval_options: HelpModuleOptions[] = [
-    { label: 'help.tutorial.timesheets_approval.approval', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets_approval.approval', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.timesheets_approval.inspect', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.timesheets_approval.inspect', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
-    { label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
+    { label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
 ]

src/modules/help/services/help.service.ts

@@ -1,10 +1,10 @@
 import { api } from "src/boot/axios";
-import type { HelpModule } from "src/modules/help/models/help-module.model";
+import type { HelpModuleKey } from "src/modules/help/models/help-module.model";
 import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
 
 export const HelpService = {
-    getHelpModules: async (): Promise<BackendResponse<HelpModule[]>> => {
+    getHelpModules: async (): Promise<BackendResponse<HelpModuleKey[]>> => {
-        const response = await api.get<BackendResponse<HelpModule[]>>(`/help`);
+        const response = await api.get<BackendResponse<HelpModuleKey[]>>(`/help`);
         return response.data;
     }
 }

src/pages/help-page.vue

@@ -13,12 +13,19 @@ onMounted(async () => {
 <template>
     <q-page
         flat
-        class="bg-secondary"
+        class="bg-secondary q-px-xl column no-wrap"
     >
-        <PageHeaderTemplate
+        <div class="col q-px-xl">
-            :title="$t('help.label')"
+            <PageHeaderTemplate
-            class="text-accent"
+                :title="$t('help.label')"
-        />
+                class="text-accent"
-        <help-module />
+            />
+            <help-module
+                v-for="module, index in help_store.help_modules"
+                :key="module"
+                :module="module"
+                :module-index="index"
+            />
+        </div>
     </q-page>
 </template>

src/stores/help-store.ts

@@ -1,47 +1,43 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { HelpService } from "src/modules/help/services/help.service";
-import type { HelpModule } from "src/modules/help/models/help-module.model";
+import { type Options, type HelpModuleKey, profile_options, timesheets_options, employee_list_options, employee_management_options, timesheets_approval_options, dashboard_options } from "src/modules/help/models/help-module.model";
 
 export const useHelpStore = defineStore('help', () => {
     const is_loading = ref(false);
-    const help_modules = ref<HelpModule[]>([]);
+    const help_modules = ref<HelpModuleKey[]>([]);
-    const custom_help_module_options: string[] = [];
+    const help_module_options = ref<Options>({
-    const options: { label: string, path: string }[] = [];
+        dashboard: dashboard_options,
+        personal_profile: profile_options,
+        timesheets: timesheets_options,
+        employee_list: employee_list_options,
+        employee_management: employee_management_options,
+        timesheets_approval: timesheets_approval_options,
+    });
 
     const getHelpModules = async (): Promise<boolean> => {
+        is_loading.value = true;
         try {
             const response = await HelpService.getHelpModules();
             if (response.success && response.data) help_modules.value = response.data;
-            for (const module in help_modules) {
+            is_loading.value = false;
-                if (module === 'personal_profile') {
-                    custom_help_module_options.push(module);
-                }
-                if (module === 'timesheet') {
-                    custom_help_module_options.push(module);
-                }
-                if (module === 'employee_list') {
-                    custom_help_module_options.push(module);
-                }
-                if (module === 'employee_management') {
-                    custom_help_module_options.push(module);
-                }
-                if (module === 'timesheets_approval') {
-                    custom_help_module_options.push(module);
-                }
-            }
             return response.success;
         } catch (error) {
             console.error('An error occured while fetching Help modules', error);
+
             return false;
         }
     };
 
+    const buildHelpModuleOptions = () => {
+        //todo: build a custom versions of help_module_options with only the module the employee has access
+    }
+
     return {
         is_loading,
         help_modules,
-        options,
+        help_module_options,
-        custom_help_module_options,
         getHelpModules,
+        buildHelpModuleOptions,
     }
 });