141 lines
4.9 KiB
Vue
141 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
//default images
|
|
import default_dashboard from 'src/assets/help-ss/default-dashboard.png';
|
|
import default_personal_profile from 'src/assets/help-ss/default-personnal_profile.png';
|
|
import default_timesheet from 'src/assets/help-ss/default-timesheet.png';
|
|
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<HelpModuleKey, string> = {
|
|
dashboard: default_dashboard,
|
|
personal_profile: default_personal_profile,
|
|
timesheets: default_timesheet,
|
|
employee_list: default_employee_list,
|
|
employee_management: default_employee_management,
|
|
timesheets_approval: default_validation_page,
|
|
};
|
|
|
|
import type { HelpModuleKey, HelpModuleOptions } from 'src/modules/help/models/help-module.model';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
help_module: HelpModuleKey;
|
|
options: HelpModuleOptions[];
|
|
moduleIndex: number;
|
|
}>();
|
|
|
|
const help_module = props.help_module;
|
|
const current_path = ref<string>(default_images[help_module]);
|
|
|
|
const switchSide = (index: number) => {
|
|
if (index % 2 !== 0) {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div 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"
|
|
:class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
|
|
>
|
|
{{ ($t(`help.tutorial.${help_module}.title`)).toUpperCase() }}
|
|
</div>
|
|
<!-- Card Body -->
|
|
|
|
<div class="row col full-width q-px-none">
|
|
<!-- Object and descriptions zone -->
|
|
<div
|
|
class="col flex-center row"
|
|
v-if="moduleIndex % 2 !== 0"
|
|
>
|
|
<transition
|
|
appear
|
|
enter-active-class="animated fade-in"
|
|
leave-active-class="animated fade-out"
|
|
>
|
|
<q-img
|
|
class="image-wrapper"
|
|
:src="current_path"
|
|
loading="lazy"
|
|
fit="contain"
|
|
>
|
|
</q-img>
|
|
|
|
</transition>
|
|
</div>
|
|
<div class="col column">
|
|
|
|
<q-expansion-item
|
|
v-for="option, index in options"
|
|
:key="index"
|
|
hide-expand-icon
|
|
class="bg-gray-2 text-weight-bolder row"
|
|
:class="switchSide(moduleIndex) ? 'justify-start' : 'justify-end'"
|
|
group="help_page"
|
|
@before-show="current_path = option.path;"
|
|
>
|
|
<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"
|
|
fit="contain"
|
|
/>
|
|
</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 flex-center row"
|
|
v-if="moduleIndex % 2 === 0"
|
|
>
|
|
<transition
|
|
appear
|
|
enter-active-class="animated fade-in"
|
|
leave-active-class="animated fade-out"
|
|
>
|
|
<q-img
|
|
class="image-wrapper"
|
|
:src="current_path"
|
|
loading="lazy"
|
|
>
|
|
</q-img>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.image-wrapper {
|
|
max-width: 480px;
|
|
max-height: 320px;
|
|
width: 100%;
|
|
}
|
|
</style> |