147 lines
4.6 KiB
Vue
147 lines
4.6 KiB
Vue
<script setup>
|
|
import { transl, can, goTo } from "./Component";
|
|
import { ref, computed } from "vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
|
|
import ModalController from "@/Controllers/ModalController.js";
|
|
import SearcherController from "@/Controllers/SearcherController.js";
|
|
|
|
import SearcherHead from "@/Components/Dashboard/Searcher.vue";
|
|
import Table from "@/Components/Dashboard/Table.vue";
|
|
import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
|
|
import DashboardLayout from "@/Layouts/DashboardLayout.vue";
|
|
import DestroyView from "./Destroy.vue";
|
|
import EditView from "./Edit.vue";
|
|
|
|
const props = defineProps({
|
|
mainRoleSkills: Object,
|
|
});
|
|
|
|
// Controladores
|
|
const Modal = new ModalController();
|
|
const Searcher = new SearcherController(goTo("index"));
|
|
|
|
// Variables de controladores
|
|
const destroyModal = ref(Modal.destroyModal);
|
|
const editModal = ref(Modal.editModal);
|
|
const modelModal = ref(Modal.modelModal);
|
|
const query = ref(Searcher.query);
|
|
|
|
const groupedRoles = computed(() => {
|
|
const groups = {};
|
|
props.mainRoleSkills.data?.forEach(item => {
|
|
const key = item.main_role?.id;
|
|
if(!groups[key]) groups[key] = { ...item, skills: []};
|
|
groups[key].skills.push(item);
|
|
})
|
|
return Object.values(groups);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardLayout :title="transl('system')">
|
|
<SearcherHead @search="Searcher.search">
|
|
<Link v-if="can('create')" :href="route(goTo('create'))">
|
|
<GoogleIcon
|
|
:title="$t('crud.create')"
|
|
class="btn-icon-primary"
|
|
name="add"
|
|
outline
|
|
/>
|
|
</Link>
|
|
</SearcherHead>
|
|
<div class="pt-2 w-full">
|
|
<Table
|
|
:items="mainRoleSkills"
|
|
@send-pagination="Searcher.searchWithPagination"
|
|
>
|
|
<template #head>
|
|
<th class="table-item" v-text="$t('Departamento')" />
|
|
<th class="table-item" v-text="$t('Rol Principal')" />
|
|
<th class="table-item" v-text="$t('Habilidades Puntuadas')" />
|
|
<th class="table-item w-44" v-text="$t('actions')" />
|
|
</template>
|
|
<template #body="{ items }">
|
|
<tr v-for="group in groupedRoles" :key="group.main_role.id">
|
|
<td class="table-item border">
|
|
<div class="flex items-center text-sm">
|
|
<div>
|
|
<p class="font-semibold">
|
|
{{ group.main_role?.department?.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="table-item border">
|
|
<div class="flex items-center text-sm">
|
|
<div>
|
|
<p class="font-semibold">
|
|
{{ group.main_role?.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<div>
|
|
<td class="table-item border">
|
|
<div class="flex items-center text-sm">
|
|
<div>
|
|
<p v-for="skill in group.skills" :key="skill.id" class="font-semibold">
|
|
{{ skill.skill?.name }} - {{ skill.score?.alias }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</div>
|
|
<td class="table-item border">
|
|
<div class="flex justify-center space-x-2">
|
|
<GoogleIcon
|
|
v-if="can('edit')"
|
|
:title="$t('crud.edit')"
|
|
class="btn-icon-primary"
|
|
name="edit"
|
|
outline
|
|
@click="Modal.switchEditModal(model)"
|
|
/>
|
|
<GoogleIcon
|
|
v-if="can('destroy')"
|
|
:title="$t('crud.destroy')"
|
|
class="btn-icon-primary"
|
|
name="delete"
|
|
outline
|
|
@click="Modal.switchDestroyModal(model)"
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template #empty>
|
|
<td class="table-item border">
|
|
<div class="flex items-center text-sm">
|
|
<div>
|
|
<p class="font-semibold">
|
|
{{ $t("registers.empty") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="table-item border">-</td>
|
|
<td class="table-item border">-</td>
|
|
</template>
|
|
</Table>
|
|
</div>
|
|
<EditView
|
|
v-if="can('edit')"
|
|
:show="editModal"
|
|
:model="modelModal"
|
|
@switchModal="Modal.switchShowEditModal"
|
|
@close="Modal.switchEditModal"
|
|
/>
|
|
<DestroyView
|
|
v-if="can('create')"
|
|
:show="destroyModal"
|
|
:model="modelModal"
|
|
@close="Modal.switchDestroyModal"
|
|
/>
|
|
</DashboardLayout>
|
|
</template>
|