142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<template>
|
|
<mainLayout>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="openModal"
|
|
class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
|
|
style="background-color: #DAC0A3; color: #102C57;">
|
|
Tambah Nampan
|
|
</button>
|
|
|
|
<button
|
|
@click="emptyTray"
|
|
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
|
|
Kosongkan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<searchbar v-model:search="searchQuery" />
|
|
<TrayList :search="searchQuery"
|
|
@edit="editTray"
|
|
@delete="deleteTray"/>
|
|
<div
|
|
v-if="showModal"
|
|
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
|
|
>
|
|
<div class="bg-white rounded-lg shadow-lg p-6 w-96">
|
|
<h2 class="text-lg font-semibold mb-4">Tambah Nampan</h2>
|
|
|
|
<label class="block mb-2 text-sm font-medium">Nama Nampan</label>
|
|
<input
|
|
v-model="trayName"
|
|
type="text"
|
|
placeholder="Contoh: A4"
|
|
class="w-full border rounded-md p-2 mb-4"
|
|
/>
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<button
|
|
@click="closeModal"
|
|
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
|
|
Cancel
|
|
</button>
|
|
|
|
<button
|
|
@click="saveTray"
|
|
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mainLayout>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import axios from 'axios'
|
|
import mainLayout from '../layouts/mainLayout.vue'
|
|
import searchbar from '../components/searchbar.vue'
|
|
import TrayList from '../components/TrayList.vue'
|
|
|
|
const searchQuery = ref("") // buat search
|
|
const showModal = ref(false) // <-- ini penting, biar tidak undefined
|
|
const trayName = ref("") // nama nampan baru
|
|
|
|
// buka modal
|
|
const openModal = () => {
|
|
showModal.value = true
|
|
}
|
|
|
|
// tutup modal
|
|
const closeModal = () => {
|
|
trayName.value = ""
|
|
editingTrayId.value = null
|
|
showModal.value = false
|
|
}
|
|
// simpan nampan baru
|
|
const saveTray = async () => {
|
|
if (!trayName.value.trim()) {
|
|
alert("Nama Nampan tidak boleh kosong")
|
|
return
|
|
}
|
|
|
|
try {
|
|
if (editingTrayId.value) {
|
|
// mode edit
|
|
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
|
|
alert("Nampan berhasil diupdate")
|
|
} else {
|
|
// mode tambah
|
|
await axios.post("/api/nampan", { nama: trayName.value })
|
|
alert("Nampan berhasil ditambahkan")
|
|
}
|
|
closeModal()
|
|
location.reload()
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Gagal menyimpan nampan")
|
|
}
|
|
}
|
|
|
|
|
|
// kosongkan semua nampan
|
|
const emptyTray = async () => {
|
|
if (!confirm("Yakin ingin memindahkan semua item ke Brankas?")) return
|
|
|
|
try {
|
|
await axios.post("/api/brankas", { action: "move_all_from_tray" })
|
|
alert("Semua item berhasil dipindahkan ke Brankas")
|
|
location.reload()
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Gagal mengosongkan nampan")
|
|
}
|
|
}
|
|
|
|
const editTray = (tray) => {
|
|
// buka modal edit, bisa pake sama seperti modal tambah
|
|
trayName.value = tray.nama
|
|
editingTrayId.value = tray.id
|
|
showModal.value = true
|
|
}
|
|
|
|
const deleteTray = async (id) => {
|
|
if (!confirm("Yakin ingin menghapus nampan ini?")) return
|
|
try {
|
|
await axios.delete(`/api/nampan/${id}`)
|
|
alert("Nampan berhasil dihapus")
|
|
location.reload()
|
|
} catch (error) {
|
|
console.error(error)
|
|
alert("Gagal menghapus nampan")
|
|
}
|
|
}
|
|
|
|
const editingTrayId = ref(null)
|
|
|
|
</script>
|