93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<script setup>
|
|
import { transl } from "./Component";
|
|
import { ref, computed } from "vue";
|
|
|
|
import DashboardLayout from "@/Layouts/DashboardLayout.vue";
|
|
import DepartmentSelector from "@/Components/App/DepartmentSelector.vue";
|
|
import MainRoleSelector from "@/Components/App/MainRoleSelector.vue";
|
|
import SkillRole from "@/Components/App/SkillsRole.vue";
|
|
import PageHeader from "@/Components/Dashboard/PageHeader.vue";
|
|
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
|
|
|
|
defineEmits(["select"]);
|
|
|
|
const props = defineProps({
|
|
mainRoleSkills: Object,
|
|
departments: Object,
|
|
mainRoles: Object,
|
|
skills: Object,
|
|
scores: Object,
|
|
});
|
|
|
|
const selectedDepartment = ref(null);
|
|
const selectedRole = ref(null);
|
|
|
|
const filteredMainRoleSkills = computed(() => {
|
|
if (!props.mainRoleSkills?.data || !selectedRole.value) {
|
|
return [];
|
|
}
|
|
|
|
return props.mainRoleSkills.data.filter(roleSkill =>
|
|
roleSkill.main_role_id === selectedRole.value.id
|
|
);
|
|
});
|
|
|
|
const handleDepartmentSelect = (department) => {
|
|
selectedDepartment.value = department;
|
|
selectedRole.value= null;
|
|
};
|
|
const handleRoleSelect = (role) => {
|
|
selectedRole.value = role;
|
|
};
|
|
|
|
const handleSkillSelect = (roleSkill) => {
|
|
console.log('Habilidad de rol seleccionada:', roleSkill);
|
|
}
|
|
|
|
const goBack = () => {
|
|
if (selectedRole.value) {
|
|
selectedRole.value = null;
|
|
} else if (selectedDepartment.value) {
|
|
selectedDepartment.value = null;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardLayout :title="transl('system')">
|
|
<PageHeader>
|
|
<button @click="goBack">
|
|
<GoogleIcon
|
|
:title="$t('return')"
|
|
class="btn-icon-primary"
|
|
name="arrow_back"
|
|
outline
|
|
/>
|
|
</button>
|
|
</PageHeader>
|
|
|
|
<!-- Selector de Departamento -->
|
|
<DepartmentSelector
|
|
v-if="!selectedDepartment"
|
|
:departments="departments"
|
|
@select="handleDepartmentSelect"
|
|
/>
|
|
|
|
<!-- Selector de Roles Principales -->
|
|
<MainRoleSelector
|
|
v-if="selectedDepartment"
|
|
:selectedDepartment="selectedDepartment"
|
|
:mainRoles="mainRoles"
|
|
@select="handleRoleSelect"
|
|
/>
|
|
|
|
<SkillRole
|
|
v-if="selectedRole"
|
|
:mainRoleSkills="filteredMainRoleSkills"
|
|
:selectedRole="selectedRole"
|
|
:scores="scores"
|
|
@select="handleSkillSelect"
|
|
/>
|
|
</DashboardLayout>
|
|
</template>
|