Scores/resources/js/Components/App/SkillsRole.vue

<script setup>
import { computed, ref } from "vue";
import { Link } from "@inertiajs/vue3";
import { can, goTo } from "@/Pages/Admin/MainRoleSkills/Component";

import GoogleIcon from "@/Components/Shared/GoogleIcon.vue";
import ModalController from "@/Controllers/ModalController.js";
import DestroyView from "@/Pages/Admin/MainRoleSkills/Destroy.vue";
import EditView from '@/Pages/Admin/MainRoleSkills/Edit.vue';

const emit = defineEmits(["select"]);

const props = defineProps({
  mainRoleSkills: Array,
  selectedRole: Object,
  scores: {
    type: Array,
    default: () => []
  }
});

// Controlador de modal
const Modal = new ModalController();
const destroyModal = ref(Modal.destroyModal);
const editModal    = ref(Modal.editModal);
const modelModal   = ref(Modal.modelModal);

const roleSkills = computed(() => {
  if (!props.mainRoleSkills || !props.selectedRole) {
    return [];
  }
  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 class="flex items-center justify-end mt-4 gap-2">
          <GoogleIcon
            v-if="can('edit')"
            :title="$t('crud.edit')"
            class="btn-icon-danger w-6 h-6 bg-blue-500 text-white rounded hover:bg-blue-600"
            name="edit"
            @click.stop="Modal.switchEditModal(roleSkill)"
          />
          <GoogleIcon
            v-if="can('destroy')"
            :title="$t('crud.destroy')"
            class="btn-icon-danger w-6 h-6 bg-red-500 text-white rounded hover:bg-red-600"
            name="delete"
            @click.stop="Modal.switchDestroyModal(roleSkill)"
          />
        </div>
      </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>
    <EditView
      v-if="can('edit')"
      :show="editModal"
      :model="modelModal"
      :scores="scores"
      @close="Modal.switchEditModal"
      @switchModal="Modal.switchEditModal"
    />
    <DestroyView
      v-if="can('destroy')"
      :show="destroyModal"
      :model="modelModal"
      @close="Modal.switchDestroyModal"
    />
  </div>
</template>