67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
|
|
<div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
|
|
|
|
<!-- Tombol close -->
|
|
<button @click="$emit('close')" class="absolute top-3 right-3 text-gray-600 hover:text-black">
|
|
✕
|
|
</button>
|
|
|
|
<!-- Judul -->
|
|
<h2 class="text-xl font-bold text-center text-D mb-4">Edit Kategori</h2>
|
|
|
|
<!-- Input Nama Kategori -->
|
|
<div class="mb-4">
|
|
<label for="editKategori" class="block text-sm font-medium text-D mb-1">Nama Kategori</label>
|
|
<input
|
|
v-model="editNamaKategori"
|
|
type="text"
|
|
id="editKategori"
|
|
placeholder="Masukkan nama kategori"
|
|
class="w-full p-2 border rounded-md bg-Focus outline-none"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Tombol Aksi -->
|
|
<div class="flex justify-end gap-3">
|
|
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
|
|
Batal
|
|
</button>
|
|
<button @click="updateKategori" class="px-4 py-2 bg-B text-D rounded-md hover:bg-A">
|
|
Ubah
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue";
|
|
|
|
const props = defineProps({
|
|
kategori: { type: Object, required: true },
|
|
});
|
|
|
|
const editNamaKategori = ref("");
|
|
|
|
watch(
|
|
() => props.kategori,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
editNamaKategori.value = newVal.nama;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const updateKategori = () => {
|
|
if (editNamaKategori.value.trim() === "") {
|
|
alert("Nama kategori tidak boleh kosong!");
|
|
return;
|
|
}
|
|
|
|
// Emit hasil update ke parent
|
|
emit("update", { ...props.kategori, nama: editNamaKategori.value });
|
|
};
|
|
</script>
|