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

feat(help-page): finished help-page

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-22 16:47:48 -05:00
parent ae374d0888
commit f0413f16b9
6 changed files with 31 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import default_employee_list from 'src/assets/help-ss/default-employee-list.png'
import default_employee_management from 'src/assets/help-ss/default-employee-management.png';
import default_validation_page from 'src/assets/help-ss/default-validation-page.png';
const default_images: Record<ModuleAccessName, string> = {
const default_images: Record<UserModuleAccess, string> = {
dashboard: '',
personal_profile: default_personal_profile,
timesheets: default_timesheet,
@ -17,11 +17,11 @@ const default_images: Record<ModuleAccessName, string> = {
};
import type { HelpModuleOptions } from 'src/modules/help/models/help-module.model';
import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
import { ref } from 'vue';
import { ModuleAccessName } from 'src/modules/employee-list/models/employee-profile.models';
const props = defineProps<{
help_module: ModuleAccessName;
help_module: UserModuleAccess;
options: HelpModuleOptions[];
moduleIndex: number;
}>();
@ -39,7 +39,10 @@ const switchSide = (index: number) => {
</script>
<template>
<div class="column q-my-xs bg-secondary q-py-xl">
<div
v-if="help_module !== 'dashboard'"
class="column q-my-xs bg-secondary q-py-xl"
>
<!-- Card Header -->
<div
class="row col-auto text-h5 q-pa-md text-primary bg-secondary"
@ -91,7 +94,8 @@ const switchSide = (index: number) => {
class="col-auto q-pr-sm"
size="sm"
/>
<span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase() }}</span>
<span class="text-accent col-auto text-weight-bolder">{{ $t(option.label).toUpperCase()
}}</span>
<q-icon
v-if="!switchSide(moduleIndex)"
:name="option.icon"

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

@ -1,10 +1,4 @@
// export type HelpModuleKey =
// // | 'dashboard'
// | 'personal_profile'
// | 'timesheets'
// | 'employee_list'
// | 'employee_management'
// | 'timesheets_approval';
import type { UserModuleAccess } from 'src/modules/shared/models/user.models';
export type HelpModuleOptions = {
label: string;
@ -13,8 +7,8 @@ export type HelpModuleOptions = {
icon: string;
};
export type Options = Record<ModuleAccessName, HelpModuleOptions[]>;
export type PartialOptions = Partial<Record<ModuleAccessName, HelpModuleOptions[]>>;
export type Options = Record<UserModuleAccess, HelpModuleOptions[]>;
export type PartialOptions = Partial<Record<UserModuleAccess, HelpModuleOptions[]>>;
@ -126,7 +120,7 @@ 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';
import timesheet_approval_list from 'src/assets/help-ss/timesheet-appovals-list.png';
import { ModuleAccessName } from 'src/modules/employee-list/models/employee-profile.models';
const comment_expense_desc = "descriptions.timesheets_approval.comment_expense";
const timesheets_approval_desc = "descriptions.timesheets_approval.approval";

6
src/modules/help/services/help.service.ts
View File

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

2
src/modules/shared/models/user.models.ts
View File

@ -3,7 +3,7 @@ export interface User {
last_name: string;
email: string;
role: UserRole;
user_module_access: UserModuleAccess;
user_module_access: UserModuleAccess[];
}
export type UserRole = 'ADMIN' | 'SUPERVISOR' | 'HR' | 'ACCOUNTING' | 'EMPLOYEE' | 'DEALER' | 'CUSTOMER' | 'GUEST';

6
src/pages/help-page.vue
View File

@ -5,8 +5,8 @@ import { onMounted } from 'vue';
import { useHelpStore } from 'src/stores/help-store';
const help_store = useHelpStore();
onMounted(async () => {
await help_store.getHelpModules();
onMounted(() => {
help_store.getFilteredModule();
});
</script>
@ -21,7 +21,7 @@ onMounted(async () => {
class="text-accent"
/>
<help-module
v-for="(options, help_module, index) in help_store.help_module_filters"
v-for="(options, help_module, index) in help_store.user_modules"
:key="help_module"
:help_module="help_module"
:module-index="index"

41
src/stores/help-store.ts
View File

@ -1,56 +1,37 @@
import { defineStore } from "pinia";
import { computed, ref } from "vue";
import { HelpService } from "src/modules/help/services/help.service";
import { ref } from "vue";
import { help_module_details } from "src/modules/help/models/help-module.model";
import type { HelpModuleOptions } from "src/modules/help/models/help-module.model";
import { ModuleAccessName } from "src/modules/employee-list/models/employee-profile.models";
import { useAuthStore } from "src/stores/auth-store";
import type { HelpModuleOptions } from "src/modules/help/models/help-module.model";
import type { UserModuleAccess } from "src/modules/shared/models/user.models";
export const useHelpStore = defineStore('help', () => {
const is_loading = ref(false);
const user_modules = ref<Record<UserModuleAccess, HelpModuleOptions[]>>();
const auth_store = useAuthStore();
const getFilteredModule = () => {
if(!auth_store.user) return;
}
<Record<ModuleAccessName, HelpModuleOptions[]>>(() => {
const entries = help_modules.value
const entries = auth_store.user.user_module_access
.map((key) => {
const options = help_module_details[key];
return options ? ([key, options] as const) : null;
})
.filter(
(entry): entry is readonly [ModuleAccessName, HelpModuleOptions[]] =>
(entry): entry is readonly [UserModuleAccess, HelpModuleOptions[]] =>
entry !== null
);
return Object.fromEntries(entries) as Record<ModuleAccessName, HelpModuleOptions[]>;
});
// 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;
// return response.success;
// } catch (error) {
// console.error('An error occured while fetching Help modules', error);
// return false;
// } finally {
// is_loading.value = false;
// }
// };
user_modules.value = Object.fromEntries(entries) as Record<UserModuleAccess, HelpModuleOptions[]>;
}
return {
is_loading,
help_modules,
user_modules,
help_module_details,
help_module_filters,
// getHelpModules,
getFilteredModule,
};
});