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

<script setup>
import { ref, computed } from "vue";
import PrimaryButton from "@/Components/Dashboard/Button/Primary.vue";
import Selectable from "@/Components/Dashboard/Form/Selectable.vue";

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

const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
  skills: {
    type: Array, // Ya filtradas por departamento
    required: true,
  },
  scores: {
    type: Array,
    required: true,
  },
  selectedDepartment: {
    type: Object,
    required: true,
  },
  selectedMainRole: {
    type: Object,
    required: true,
  },
});

const skillId = ref("");
const scoredId = ref("");
const todos = ref([]);

function addTodo() {
  if (skillId.value && scoredId.value) {
    const selectedSkill = props.skills.find(
      skill => skill.id === (skillId.value.id || skillId.value)
    );
    const selectedScore = props.scores.find(
      score => score.id === (scoredId.value.id || scoredId.value)
    );

    if (selectedSkill && selectedScore) {
      // Verificar que no esté duplicada
      const isDuplicate = todos.value.some(
        todo => todo.skill_id === selectedSkill.id
      );

      if (!isDuplicate) {
        const newItem = {
          skill_id: selectedSkill.id,
          scored_id: selectedScore.id,
          skill_name: selectedSkill.name,
          score_alias: selectedScore.alias,
        };

        todos.value.push(newItem);

        // Limpiar campos
        skillId.value = "";
        scoredId.value = "";
      }
    }
  }
}

function removeTodo(index) {
  todos.value.splice(index, 1);
}

const isFormValid = computed(() => {
  return todos.value.length > 0;
});

const submitForm = () => {
  if (isFormValid.value) {
    emit("submit", todos.value);
  }
};
</script>

<template>
  <div class="w-full">
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">
        Asignar Habilidades al Rol: {{ selectedMainRole.name }}
      </h2>
      <p class="text-gray-600">
        Departamento: {{ selectedDepartment.name }}
      </p>
    </div>

    <!-- Formulario para agregar habilidades -->
    <div class="bg-white rounded-lg shadow-sm border p-6 mb-6">
      <div class="grid gap-6 grid-cols-1 md:grid-cols-2">
        <Selectable
          id="skill_id"
          v-model="skillId"
          :options="skills"
          :title="$t('skill.title')"
          placeholder="Selecciona una habilidad..."
          label="name"
          track-by="id"
          required
        />

        <Selectable
          id="scored_id"
          v-model="scoredId"
          :options="scores"
          :title="$t('scores.title')"
          placeholder="Selecciona una puntuación..."
          label="alias"
          track-by="id"
          required
        />
      </div>

      <div class="flex justify-center mt-6">
        <button
          @click="addTodo"
          type="button"
          :disabled="!skillId || !scoredId"
          class="rounded-lg px-4 py-2 bg-primary text-white border disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Agregar Habilidad
        </button>
      </div>
    </div>

    <!-- Lista de habilidades agregadas -->
    <div class="space-y-3 mb-6">
      <template v-for="(todo, index) in todos" :key="index">
        <div class="flex bg-white items-center justify-between rounded-lg px-4 py-3 border shadow-sm">
          <div class="flex-1">
            <div class="font-bold text-black">{{ todo.skill_name }}</div>
            <div class="text-sm text-gray-600">Puntuación: {{ todo.score_alias }}</div>
          </div>
          <button
            @click="removeTodo(index)"
            class="rounded-lg px-4 py-2 bg-red-600 text-white hover:bg-red-700 transition-colors"
          >
            Quitar
          </button>
        </div>
      </template>

      <div v-if="todos.length === 0" class="text-gray-500 text-center py-8 bg-gray-50 rounded-lg">
        No hay habilidades agregadas
      </div>
    </div>

    <!-- Botón de envío -->
    <div class="flex justify-center">
      <PrimaryButton
        :class="{ 'opacity-25': form.processing }"
        :disabled="form.processing || !isFormValid"
        type="button"
        @click="submitForm"
      >
        <span>Crear Asignación</span>
      </PrimaryButton>
    </div>
  </div>
</template>