feat(help): added structure to display
This commit is contained in:
Matthieu Haineault
parent
f963570f45
commit
75ab52d660
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
class="column q-my-xs bg-secondary"
|
||||
v-for="module, index of help_store.custom_help_module_options"
|
||||
:key="index"
|
||||
>
|
||||
<div class="column q-my-xs bg-secondary">
|
||||
<!-- 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()"
|
||||
switch-toggle-side
|
||||
:label="($t(option.label)).toUpperCase()"
|
||||
: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
|
||||
:src="option.toString()"
|
||||
loading="lazy"
|
||||
class="col-4"
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated fade-in"
|
||||
leave-active-class="animated fade-out"
|
||||
>
|
||||
<div class="absolute-top text-subtitle1 text-center">
|
||||
needs to check with v-if to show only the right img
|
||||
</div>
|
||||
</q-img>
|
||||
<q-img
|
||||
:src="current_path"
|
||||
loading="lazy"
|
||||
>
|
||||
</q-img>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,55 +1,65 @@
|
|||
export interface HelpModule {
|
||||
dashboard: string;
|
||||
personal_profile: string;
|
||||
timesheet: string;
|
||||
employee_list: string;
|
||||
employee_management: string;
|
||||
timesheets_approval: string;
|
||||
import approvalsBanner from 'src/assets/approvals-banner.png';
|
||||
|
||||
|
||||
export type HelpModuleOptions = {
|
||||
label: string;
|
||||
path: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
export const module_access_help: string[] = [
|
||||
'help.tutorial.personal_profile.title',
|
||||
'help.tutorial.timesheets.title',
|
||||
'help.tutorial.employee_list.title',
|
||||
'help.tutorial.employee_management.title',
|
||||
'help.tutorial.timesheets_approval.title',
|
||||
export type HelpModuleKey =
|
||||
| 'dashboard'
|
||||
| 'personal_profile'
|
||||
| 'timesheets'
|
||||
| 'employee_list'
|
||||
| '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 = [
|
||||
{ label: 'help.tutorial.personal_profile.personal_info', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.personal_profile.professional_info', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
|
||||
export const profile_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 },
|
||||
{ label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
|
||||
];
|
||||
|
||||
export const timesheet_options = [
|
||||
{ label: 'help.tutorial.timesheet.create_shift', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheet.update_shift', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheet.delete_shift', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheet.create_shift', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheet.update_shift', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheet.delete_shift', path: "https://picsum.photos/500/300" },
|
||||
export const timesheets_options: HelpModuleOptions[] = [
|
||||
{ label: 'help.tutorial.timesheets.create_shift', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets.update_shift', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets.delete_shift', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets.create_shift', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets.update_shift', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets.delete_shift', path: approvalsBanner, description: '' },
|
||||
];
|
||||
|
||||
export const employee_list_options = [
|
||||
{ label: 'help.tutorial.employee_list.terminated_employees', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
|
||||
export const employee_list_options: HelpModuleOptions[] = [
|
||||
{ label: 'help.tutorial.employee_list.terminated_employees', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
|
||||
];
|
||||
|
||||
export const employee_management_options = [
|
||||
{ label: 'help.tutorial.employee_list.terminated_employees', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.employee_management.create_employee', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.employee_management.update_employee', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.employee_management.module_access', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.employee_management.schedule_preset', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.employee_management.terminate_employee', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
|
||||
export const employee_management_options: HelpModuleOptions[] = [
|
||||
{ label: 'help.tutorial.employee_list.terminated_employees', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.employee_management.create_employee', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.employee_management.update_employee', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.employee_management.module_access', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.employee_management.schedule_preset', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.employee_management.terminate_employee', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
|
||||
];
|
||||
|
||||
export const timesheets_approval = [
|
||||
{ label: 'help.tutorial.timesheets_approval.approval', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.timesheets_approval.inspect', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.display', path: "https://picsum.photos/500/300" },
|
||||
{ label: 'help.tutorial.shared.search', path: "https://picsum.photos/500/300" },
|
||||
export const timesheets_approval_options: HelpModuleOptions[] = [
|
||||
{ label: 'help.tutorial.timesheets_approval.approval', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.timesheets_approval.inspect', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.display', path: approvalsBanner, description: '' },
|
||||
{ label: 'help.tutorial.shared.search', path: approvalsBanner, description: '' },
|
||||
]
|
||||
|
|
@ -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[]>> => {
|
||||
const response = await api.get<BackendResponse<HelpModule[]>>(`/help`);
|
||||
getHelpModules: async (): Promise<BackendResponse<HelpModuleKey[]>> => {
|
||||
const response = await api.get<BackendResponse<HelpModuleKey[]>>(`/help`);
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,12 +13,19 @@ onMounted(async () => {
|
|||
<template>
|
||||
<q-page
|
||||
flat
|
||||
class="bg-secondary"
|
||||
class="bg-secondary q-px-xl column no-wrap"
|
||||
>
|
||||
<PageHeaderTemplate
|
||||
:title="$t('help.label')"
|
||||
class="text-accent"
|
||||
/>
|
||||
<help-module />
|
||||
<div class="col q-px-xl">
|
||||
<PageHeaderTemplate
|
||||
:title="$t('help.label')"
|
||||
class="text-accent"
|
||||
/>
|
||||
<help-module
|
||||
v-for="module, index in help_store.help_modules"
|
||||
:key="module"
|
||||
:module="module"
|
||||
:module-index="index"
|
||||
/>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
|
@ -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 custom_help_module_options: string[] = [];
|
||||
const options: { label: string, path: string }[] = [];
|
||||
const help_modules = ref<HelpModuleKey[]>([]);
|
||||
const help_module_options = ref<Options>({
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
is_loading.value = false;
|
||||
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,
|
||||
custom_help_module_options,
|
||||
help_module_options,
|
||||
getHelpModules,
|
||||
buildHelpModuleOptions,
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user