targo-frontend/src/modules/profile/pages/employee/profile-employee.vue

60 lines
2.5 KiB
Vue

<script setup lang="ts">
import PanelInfoPersonal from 'src/modules/profile/components/employee/profile-panel-info-personal.vue';
import PanelInfoEmployee from 'src/modules/profile/components/employee/profile-panel-info-employee.vue';
import PanelPreferences from 'src/modules/profile/components/shared/profile-panel-preferences.vue';
import ProfileTabMenuTemplate from 'src/modules/profile/components/shared/profile-tab-menu-template.vue';
import { default_employee_profile, type EmployeeProfile } from 'src/modules/employee-list/types/employee-profile-interface';
const PanelNames = {
PERSONAL_INFO: 'personal_info',
EMPLOYEE_INFO: 'employee_info',
PREFERENCES: 'references',
};
const { employeeProfile = default_employee_profile } = defineProps<{
employeeProfile?: EmployeeProfile | undefined;
}>();
</script>
<template>
<q-card flat class="rounded-5 bg-transparent q-pa-none">
<ProfileTabMenuTemplate
:first-name="employeeProfile.first_name"
:last-name="employeeProfile.last_name"
:initial-menu="PanelNames.PERSONAL_INFO"
>
<template #tabs>
<q-tab
:name='PanelNames.PERSONAL_INFO'
icon='person_outline'
:label="$q.screen.lt.md ? '' : $t('profile.personal.tab_title')"
/>
<q-tab
:name="PanelNames.EMPLOYEE_INFO"
icon="work_outline"
:label="$q.screen.lt.md ? '' : $t('profile.employee.tab_title')"
/>
<q-tab
:name="PanelNames.PREFERENCES"
icon="display_settings"
:label="$q.screen.lt.md ? '' : $t('profile.preferences.tab_title')"
/>
</template>
<template #panels>
<q-tab-panel :name="PanelNames.PERSONAL_INFO" class="q-pa-none">
<PanelInfoPersonal :employee-profile="employeeProfile" />
</q-tab-panel>
<q-tab-panel :name="PanelNames.EMPLOYEE_INFO" class="q-pa-none">
<PanelInfoEmployee :employee-profile="employeeProfile" />
</q-tab-panel>
<q-tab-panel :name="PanelNames.PREFERENCES" class="q-pa-none">
<PanelPreferences />
</q-tab-panel>
</template>
</ProfileTabMenuTemplate>
</q-card>
</template>