Juan Felipe Zapata Moreno 023fd8d2f8 Habilidades Puntuadas (#2)
Co-authored-by: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Reviewed-on: #2
Co-authored-by: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx>
Co-committed-by: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx>
2025-07-17 19:50:45 +00:00

88 lines
2.5 KiB
Vue

<script setup>
import { goTo } from "./Component";
import { router, useForm } from "@inertiajs/vue3";
import Selectable from "@/Components/Dashboard/Form/Selectable.vue";
import EditModal from "@/Components/Dashboard/Modal/Edit.vue";
import Header from "@/Components/Dashboard/Modal/Elements/Header.vue";
const emit = defineEmits(["close", "switchModal"]);
const props = defineProps({
show: Boolean,
model: Object,
scores: Array,
});
const form = useForm({
scored_id: "",
});
const update = (id) => {
form
.transform((data) => ({
scored_id:
typeof data.scored_id === "object" ? data.scored_id.id : data.scored_id,
}))
.put(route(goTo("update"), { id }), {
preserveScroll: true,
onSuccess: () => {
Notify.success(lang("updated"));
emit("switchModal");
router.reload();
},
});
};
</script>
<template>
<EditModal :show="show" @close="$emit('close')" @update="update(model.id)">
<Header :title="model.main_role?.name" />
<div class="py-2 border-b">
<div class="p-4">
<form>
<div class="grid gap-6 mb-6 overflow-auto">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="bg-gray-50 text-gray-700 mb-2 font-medium">
Información:
</h4>
<div class="text-sm text-gray-600 space-y-1">
<p>
<span class="font-medium">Rol: </span
>{{ model.main_role?.name }}
</p>
<p>
<span class="font-medium">Departamento: </span>
{{ model.main_role?.department?.name }}
</p>
<p>
<span class="font-medium">Habilidad: </span
>{{ model.skill?.name }}
</p>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
Cambiar Puntuación
</label>
<Selectable
id="scored_id"
v-model="form.scored_id"
:options="scores"
:onError="form.errors.scored_id"
label="alias"
track-by="id"
required
/>
<p class="text-xs text-gray-500 mt-1">
Puntuación actual:
<span class="font-medium"> {{ model.score?.alias }}</span>
</p>
</div>
</div>
</form>
</div>
</div>
</EditModal>
</template>