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

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

const emit = defineEmits(["submit", "update:modelValue"]);

const props = defineProps({
  form: {
    type: Object,
    required: true,
  },
  skills: {
    type: Object,
    required: true,
  },
  scores: {
    type: Object,
    required: true,
  },
  selectedDepartment: {
    type: Object,
    required: true,
  },
  selectedMainRole: {
    type: Object,
    required: true,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
});
const skillId = ref("");
const scoredId = ref("");
const todos = ref([]);

function addTodo() {
  if (skillId.value && scoredId.value) {
    // Buscar los objetos completos
    const selectedSkill = departmentSkills.value.find(
      (skill) => skill.id === skillId.value.id || skill.id === skillId.value
    );
    const selectedScore = props.scores.find(
      (score) => score.id === scoredId.value.id || score.id === scoredId.value
    );

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

      todos.value.push(newItem);

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

      // Emitir el arreglo actualizado
      emit("update:modelValue", todos.value);
    }
  }
}

function removeTodo(index) {
  todos.value.splice(index, 1);
  emit("update:modelValue", todos.value);
}

const departmentSkills = computed(() => {
  return props.skills.filter(
    (skill) => skill.department_id === props.selectedDepartment.id
  );
});

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

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

onMounted(() => {
  if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
    todos.value = [...props.modelValue];
  }
});

watch(
  () => props.modelValue,
  (newValue) => {
    if (Array.isArray(newValue)) {
      todos.value = [...newValue];
    }
  }
);
</script>

<template>
  <div class="w-full">
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">
        {{ $t("skill.assignTo", { role: selectedMainRole.name }) }}
      </h2>
      <p class="text-gray-600">
        {{
          $t("skill.assignment.description", {
            department: 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="departmentSkills"
          :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"
          class="rounded-lg px-4 py-2 bg-primary text-white border dark:bg-primary-dark dark:border-primary-dark-on"
        >
          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">Habilidad: {{ todo.skill_name }}</div>
            <div class="font-bold text-black">Puntuación: {{ todo.score_alias }}</div>
          </div>
          <div
            @click="removeTodo(index)"
            class="rounded-lg px-4 py-2 bg-red-600 text-white cursor-pointer hover:bg-red-700 transition-colors"
          >
            Quitar
          </div>
        </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>{{ $t("Crear") }}</span>
      </PrimaryButton>
    </div>
  </div>
</template>