91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
import { can, goTo } from "@/Pages/Admin/MainRoleSkills/Component";
|
|
|
|
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
|
|
|
|
const emit = defineEmits(["select"]);
|
|
|
|
const props = defineProps({
|
|
mainRoleSkills: Array,
|
|
selectedRole: Object,
|
|
});
|
|
|
|
const roleSkills = computed(() => {
|
|
if (!props.mainRoleSkills || !props.selectedRole) {
|
|
return [];
|
|
}
|
|
// Filtrar habilidades por rol seleccionado
|
|
return props.mainRoleSkills.filter(
|
|
(roleSkill) => roleSkill.main_role_id === props.selectedRole.id
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="mb-6 mt-12">
|
|
<div class="flex gap-6">
|
|
<h2 class="text-xl font-semibold mb-2">
|
|
{{ $t("skill.assignment.title") }}
|
|
</h2>
|
|
<Link
|
|
v-if="can('create')"
|
|
:href="route(goTo('create'), {
|
|
role_id: selectedRole.id,
|
|
department_id: selectedRole.department?.id || selectedRole.department_id
|
|
})"
|
|
>
|
|
<GoogleIcon
|
|
:title="$t('crud.create')"
|
|
class="btn-icon-primary"
|
|
name="add"
|
|
outline
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<p class="text-gray-600">
|
|
Habilidades asignadas al rol: {{ selectedRole.name }}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="roleSkills.length > 0"
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
|
|
>
|
|
<div
|
|
v-for="roleSkill in roleSkills"
|
|
:key="roleSkill.id"
|
|
class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-200 cursor-pointer border"
|
|
@click="emit('select', roleSkill)"
|
|
>
|
|
<h3 class="text-lg font-medium mb-2 text-blue-600">
|
|
{{ roleSkill.skill.name }}
|
|
</h3>
|
|
|
|
<div class="text-sm text-gray-600">
|
|
<span class="font-semibold">Puntuación:</span>
|
|
{{ roleSkill.score.alias }}
|
|
</div>
|
|
|
|
<p
|
|
v-if="roleSkill.skill.description"
|
|
class="text-xs text-gray-500 mt-2"
|
|
>
|
|
{{ roleSkill.skill.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-12">
|
|
<p class="text-gray-500 text-lg">
|
|
No hay habilidades asignadas a este rol
|
|
</p>
|
|
<p class="text-gray-400 text-sm mt-2">
|
|
Las habilidades se pueden asignar desde la sección de creación
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|