Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update token to luis]

Browse Source
This commit is contained in:
timotiabbauftech 2025-09-08 11:12:18 +07:00
parent ae4b8a3449
commit 6f87bde474
17 changed files with 871 additions and 602 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/CreateAkun.vue
View File

@ -78,7 +78,13 @@ export default {
methods: {
async createAkun() {
try {
await axios.post("api/user", this.form);
await axios.post("api/user", this.form, {
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
});
this.form = { nama: "", password: "", role: "" };
this.$emit("refresh");
this.$emit("close");

12
resources/js/components/CreateItemModal.vue
View File

@ -113,7 +113,11 @@ const selectedNampanName = computed(() => {
// Methods
const loadNampanList = async () => {
try {
const response = await axios.get('/api/nampan');
const response = await axios.get('/api/nampan', {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
nampanList.value = response.data;
positionListOptions.value = [
{ value: '', label: 'Brankas', selected: !selectedNampan.value },
@ -142,7 +146,11 @@ const createItem = async () => {
payload.id_nampan = selectedNampan.value;
}
const response = await axios.post('/api/item', payload);
const response = await axios.post('/api/item', payload, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
success.value = true;
createdItem.value = response.data.data

12
resources/js/components/CreateKategori.vue
View File

@ -61,9 +61,17 @@ import InputField from './InputField.vue'
const saveKategori = async () => {
try {
if (props.product) {
await axios.put(`/api/kategori/${props.product.id}`, form.value)
await axios.put(`/api/kategori/${props.product.id}`, form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
} else {
await axios.post('/api/kategori', form.value)
await axios.post('/api/kategori', form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
}
emit('close') // tutup modal
} catch (err) {

6
resources/js/components/CreateSales.vue
View File

@ -71,7 +71,11 @@
const handleSubmit = async () => {
try {
await axios.post("/api/sales", form.value)
await axios.post("/api/sales", form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
resetForm()
emit("saved")
emit("close")

6
resources/js/components/EditAkun.vue
View File

@ -101,7 +101,11 @@
const payload = { ...this.form };
if (!payload.password) delete payload.password;
await axios.put(`/api/user/${this.akun.id}`, payload);
await axios.put(`/api/user/${this.akun.id}`, payload, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
this.$emit("refresh");
this.$emit("close");

6
resources/js/components/EditSales.vue
View File

@ -65,7 +65,11 @@ import InputField from "./InputField.vue";
const handleSubmit = async () => {
try {
await axios.put(`/api/sales/${props.sales.id}`, form.value);
await axios.put(`/api/sales/${props.sales.id}`, form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
emit("close");
} catch (error) {
console.error("Error updating sales:", error);

6
resources/js/components/KasirForm.vue
View File

@ -97,7 +97,11 @@ const inputItem = async () => {
loadingItem.value = true
try {
const response = await axios.get(`/api/item/${kodeItem.value}`);
const response = await axios.get(`/api/item/${kodeItem.value}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
item.value = response.data;
hargaJual.value = item.value.produk.harga_jual

6
resources/js/components/RingkasanLaporanA.vue
View File

@ -187,7 +187,11 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true;
pendapatanElements.value = [];
try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data;
pagination.value = {
current_page: response.data.current_page,

6
resources/js/components/RingkasanLaporanB.vue
View File

@ -185,7 +185,11 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true;
pendapatanElements.value = [];
try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data;
pagination.value = {
current_page: response.data.current_page,

16
resources/js/components/TrayList.vue
View File

@ -138,16 +138,18 @@ const closePopup = () => {
const saveMove = async () => {
if (!selectedTrayId.value || !selectedItem.value) return;
try {
await axios.put(`/api/item/${selectedItem.value.id}`, {
header:{
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
body:{
await axios.put(`/api/item/${selectedItem.value.id}`,
{
id_nampan: selectedTrayId.value,
id_produk: selectedItem.value.id_produk,
},
});
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
await refreshData();
closePopup();

199
resources/js/pages/EditProduk.vue
View File

@ -1,7 +1,11 @@
<template>
<mainLayout>
<!-- Modal Buat Item -->
<CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
<CreateItemModal
:isOpen="openItemModal"
:product="editedProduct"
@close="closeItemModal"
/>
<div class="p-6">
<p class="font-serif italic text-[25px] text-D">Edit Produk</p>
@ -11,35 +15,64 @@
<div class="flex-1">
<div class="mb-3">
<label class="block text-D mb-1">Nama Produk</label>
<InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
<InputField
v-model="form.nama"
type="text"
placeholder="Masukkan nama produk"
/>
</div>
<div class="mb-3">
<label class="block text-D mb-1">Kategori</label>
<InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
<InputSelect
v-model="form.id_kategori"
:options="category"
placeholder="Pilih kategori"
/>
</div>
<div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1">
<label class="block text-D mb-1">Berat (g)</label>
<InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
@input="calculateHargaJual" />
<InputField
v-model="form.berat"
type="number"
step="0.01"
placeholder="Masukkan berat"
@input="calculateHargaJual"
/>
</div>
<div class="flex-1">
<label class="block text-D mb-1">Kadar (K)</label>
<InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
<InputField
v-model="form.kadar"
type="number"
placeholder="Masukkan kadar"
/>
</div>
</div>
<div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1">
<label class="block text-D mb-1">Harga per Gram</label>
<InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
@input="calculateHargaJual" />
<label class="block text-D mb-1"
>Harga per Gram</label
>
<InputField
v-model="form.harga_per_gram"
type="number"
step="0.01"
placeholder="Masukkan harga per gram"
@input="calculateHargaJual"
/>
</div>
<div class="flex-1">
<label class="block text-D mb-1">Harga Jual</label>
<InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
<InputField
v-model="form.harga_jual"
type="number"
step="0.01"
placeholder="Masukkan harga jual"
/>
</div>
</div>
</div>
@ -50,59 +83,133 @@
<div class="grid grid-cols-3 gap-3">
<!-- Existing Images -->
<div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
<div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
<img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
<button @click="removeImage(image.id)" :disabled="uploadLoading"
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
<div
v-for="(image, index) in uploadedImages"
:key="`img-${image.id}`"
class="relative group aspect-square"
>
<div
class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden"
>
<img
:src="image.url"
:alt="`Foto ${index + 1}`"
class="w-full h-full object-cover"
/>
<button
@click="removeImage(image.id)"
:disabled="uploadLoading"
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
>
×
</button>
</div>
</div>
<!-- Upload Button -->
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
<div
v-if="uploadedImages.length < 6"
@drop="handleDrop"
@dragover.prevent
@dragenter.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@click="triggerFileInput"
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
:class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
:class="{
'border-blue-400 bg-blue-50': isDragging,
'cursor-not-allowed opacity-50': uploadLoading,
}"
>
<div class="text-center">
<div v-if="!uploadLoading"
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
<div
v-if="!uploadLoading"
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors"
>
<svg
class="w-6 h-6 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
></path>
</svg>
</div>
<div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
<div
v-else
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2"
>
<svg
class="animate-spin w-6 h-6 text-white"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
<p class="text-xs text-gray-600 font-medium"
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
<p
class="text-xs text-gray-600 font-medium"
v-html="
uploadLoading
? 'Uploading...'
: 'Unggah<br/>Foto'
"
></p>
</div>
</div>
</div>
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
class="hidden" />
<input
ref="fileInput"
type="file"
multiple
accept="image/jpeg,image/jpg,image/png"
@change="handleFileSelect"
class="hidden"
/>
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
<p class="text-xs text-gray-500 mt-2">
Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)
</p>
<div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
<div
v-if="uploadError"
class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600"
>
{{ uploadError }}
</div>
</div>
</div>
<div class="mt-6 flex justify-end flex-row gap-3">
<button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
<button @click="submitForm" :disabled="loading || !isFormValid"
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
{{ loading ? 'Menyimpan...' : 'Simpan Perubahan' }}
<button
@click="back"
class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white"
>
Batal
</button>
<button
@click="submitForm"
:disabled="loading || !isFormValid"
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed"
>
{{ loading ? "Menyimpan..." : "Simpan Perubahan" }}
</button>
</div>
</div>
@ -226,7 +333,7 @@ const uploadFiles = async (files) => {
const res = await axios.post("/api/foto/upload", formData, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "multipart/form-data"
"Content-Type": "multipart/form-data",
},
});
uploadedImages.value.push(res.data);
@ -252,10 +359,18 @@ const removeImage = async (id) => {
const submitForm = async () => {
loading.value = true;
try {
await axios.put(`/api/produk/${productId}`, {
await axios.put(
`/api/produk/${productId}`,
{
...form.value,
id_user: userId.value,
});
},
{
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
alert("Produk berhasil diupdate!");
router.push("/produk");
} catch (err) {

32
resources/js/pages/InputProduk.vue
View File

@ -146,7 +146,11 @@ const category = ref([]);
const loadKategori = async () => {
try {
const response = await axios.get('/api/kategori');
const response = await axios.get('/api/kategori', {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) {
category.value = response.data.map(cat => ({
value: cat.id,
@ -190,7 +194,11 @@ const calculateHargaJual = () => {
const loadExistingPhotos = async () => {
try {
const response = await axios.get(`/api/foto/${userId.value}`);
const response = await axios.get(`/api/foto/${userId.value}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) {
uploadedImages.value = response.data;
}
@ -271,7 +279,9 @@ const uploadFiles = async (files) => {
const response = await axios.post('/api/foto/upload', formData, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
'Content-Type': 'multipart/form-data',
},
});
@ -292,7 +302,12 @@ const uploadFiles = async (files) => {
const removeImage = async (imageId) => {
try {
await axios.delete(`/api/foto/hapus/${imageId}`);
await axios.delete(`/api/foto/hapus/${imageId}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
;
uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
uploadError.value = '';
} catch (error) {
@ -312,7 +327,10 @@ const submitForm = async (addItem) => {
try {
const response = await axios.post('/api/produk', {
...form.value,
id_user: userId.value
id_user: userId.value,
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const createdProductData = response.data.data;
@ -363,7 +381,11 @@ const resetForm = async () => {
harga_jual: 0,
};
try {
await axios.delete(`/api/foto/reset/${userId.value}`);
await axios.delete(`/api/foto/reset/${userId.value}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
uploadedImages.value = [];
} catch (error) {
console.error('Error resetting photos:', error);

6
resources/js/pages/Kasir.vue
View File

@ -59,7 +59,11 @@ const loading = ref(true)
onMounted(async () => {
try {
loading.value = true
const res = await axios.get("/api/transaksi?limit=10")
const res = await axios.get("/api/transaksi?limit=10", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
transaksi.value = res.data
} catch (err) {

12
resources/js/pages/Kategori.vue
View File

@ -101,7 +101,11 @@ const kategoriToDelete = ref(null);
const fetchKategoris = async () => {
loading.value = true;
try {
const response = await axios.get("/api/kategori");
const response = await axios.get("/api/kategori", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
kategori.value = response.data;
console.log("Data kategori:", response.data);
} catch (error) {
@ -138,7 +142,11 @@ const hapusKategori = (item) => {
// 🔵 Ditambahkan: aksi konfirmasi hapus
const confirmDelete = async () => {
try {
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
console.log("Kategori berhasil dihapus");
fetchKategoris();
} catch (error) {

46
resources/js/pages/Produk.vue
View File

@ -21,9 +21,15 @@
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter -->
<div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
<div
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
>
<!-- Dropdown Kategori -->
<InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
/>
<!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" />
@ -40,7 +46,9 @@
</div>
<!-- Grid Produk -->
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
>
<ProductCard
v-for="item in filteredProducts"
:key="item.id"
@ -102,7 +110,9 @@
</p>
<!-- Detail Harga & Info -->
<div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
<div
class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
>
<p class="col-span-1">Harga Jual :</p>
<p class="col-span-1 text-right">
Rp. {{ formatNumber(detail.harga_jual) }}
@ -171,29 +181,37 @@ const kategori = ref([]);
const loadKategori = async () => {
try {
const response = await axios.get('/api/kategori');
const response = await axios.get("/api/kategori", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) {
kategori.value = [
{ value: 0, label: "Semua" },
...response.data.map(cat => ({
...response.data.map((cat) => ({
value: cat.id,
label: cat.nama
}))
label: cat.nama,
})),
];
}
} catch (error) {
console.error('Error loading categories:', error);
console.error("Error loading categories:", error);
}
};
const loadProduk = async () => {
try {
const response = await axios.get('/api/produk');
await axios.delete(`/api/produk/${detail.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) {
products.value = response.data;
}
} catch (error) {
console.error('Error loading products:', error);
console.error("Error loading products:", error);
}
};
@ -207,7 +225,7 @@ const closeItemModal = () => {
// Fetch data awal
onMounted(async () => {
loadKategori()
loadKategori();
loadProduk();
});
@ -216,9 +234,7 @@ const filteredProducts = computed(() => {
let hasil = products.value;
if (selectedCategory.value != 0) {
hasil = hasil.filter(
(p) => p.id_kategori == selectedCategory.value
);
hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
}
if (searchQuery.value) {

28
resources/js/pages/Sales.vue
View File

@ -51,7 +51,7 @@
<!-- Table Section -->
<div
class="bg-white rounded-lg shadow-md border border-C overflow-hidden"
class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
>
<table class="w-full">
<thead class="">
@ -76,35 +76,33 @@
>
Alamat
</th>
<th class="px-6 py-4 text-center text-D">
Aksi
</th>
<th class="px-6 py-4 text-center text-D">Aksi</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in sales"
:key="item.id"
class="border-b border-C hover:bg-gray-50 transition duration-150"
class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150"
:class="{ 'bg-gray-50': index % 2 === 1 }"
>
<td
class="px-6 py-4 border-r border-C text-center font-medium text-gray-900"
class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900"
>
{{ index + 1 }}
</td>
<td
class="px-6 py-4 border-r border-C text-D"
class="px-6 py-4 border-r border-gray-200\ text-D"
>
{{ item.nama }}
</td>
<td
class="px-6 py-4 border-r border-C text-gray-800"
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
>
{{ item.no_hp }}
</td>
<td
class="px-6 py-4 border-r border-C text-gray-800"
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
>
{{ item.alamat }}
</td>
@ -186,7 +184,11 @@ const salesToDelete = ref(null);
const fetchSales = async () => {
loading.value = true;
try {
const response = await axios.get("/api/sales");
const response = await axios.get("/api/sales", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
sales.value = response.data;
} catch (error) {
console.error("Error fetching sales:", error);
@ -215,7 +217,11 @@ const hapusSales = (item) => {
const confirmDelete = async () => {
try {
await axios.delete(`/api/sales/${salesToDelete.value.id}`);
await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
fetchSales();
confirmDeleteOpen.value = false;
} catch (error) {

178
resources/js/pages/Tray.vue
View File

@ -1,10 +1,15 @@
<template>
<mainLayout>
<!-- Header -->
<div class="mb-4">
<div class="mb-4">
<!-- Judul -->
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
<p
style="
font-family: 'IM FELL Great Primer', serif;
font-style: italic;
font-size: 25px;
"
>
NAMPAN
</p>
@ -20,24 +25,24 @@
<!-- Tambah Nampan -->
<button
@click="openModal"
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
>
Tambah Nampan
</button>
<!-- Kosongkan -->
<button
@click="openConfirmModal"
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
>
Kosongkan
</button>
</div>
</div>
</div>
<!-- Search + List -->
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
<!-- Modal Tambah/Edit Nampan -->
<div
@ -45,9 +50,15 @@
class="fixed inset-0 bg-black/75 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" style="color: #102C57;">Tambah Nampan</h2>
<h2 class="text-lg font-semibold mb-4" style="color: #102c57">
Tambah Nampan
</h2>
<label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
<label
class="block mb-2 text-sm font-medium"
style="color: #102c57"
>Nama Nampan</label
>
<input
v-model="trayName"
type="text"
@ -58,14 +69,16 @@
<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">
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-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
style="color: #102C57;">
style="color: #102c57"
>
Save
</button>
</div>
@ -78,103 +91,140 @@
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 text-center">
<h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
<h2 class="text-xl font-bold mb-3" style="color: #102c57">
Kosongkan semua nampan?
</h2>
<p class="text-gray-600 mb-6">
Semua item akan dimasukkan ke brankas. <br/>
Semua item akan dimasukkan ke brankas. <br />
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
</p>
<div class="flex justify-center gap-4">
<button
@click="closeConfirmModal"
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
>
Batal
</button>
<button
@click="confirmEmptyTray"
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
>
Ya
</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'
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("")
const showModal = ref(false)
const showConfirmModal = ref(false)
const trayName = ref("")
const editingTrayId = ref(null)
const searchQuery = ref("");
const showModal = ref(false);
const showConfirmModal = ref(false);
const trayName = ref("");
const editingTrayId = ref(null);
// buka modal tambah/edit
const openModal = () => { showModal.value = true }
const openModal = () => {
showModal.value = true;
};
const closeModal = () => {
trayName.value = ""
editingTrayId.value = null
showModal.value = false
}
trayName.value = "";
editingTrayId.value = null;
showModal.value = false;
};
// simpan nampan
const saveTray = async () => {
if (!trayName.value.trim()) {
alert("Nama Nampan tidak boleh kosong")
return
alert("Nama Nampan tidak boleh kosong");
return;
}
try {
if (editingTrayId.value) {
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
alert("Nampan berhasil diupdate")
await axios.put(
`/api/nampan/${editingTrayId.value}`,
{ nama: trayName.value },
{
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
}
);
alert("Nampan berhasil diupdate");
} else {
await axios.post("/api/nampan", { nama: trayName.value })
alert("Nampan berhasil ditambahkan")
await axios.post(
"/api/nampan",
{ nama: trayName.value },
{
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
}
closeModal()
location.reload()
);
alert("Nampan berhasil ditambahkan");
}
closeModal();
location.reload();
} catch (error) {
console.error(error)
alert("Gagal menyimpan nampan")
console.error(error);
alert("Gagal menyimpan nampan");
}
}
};
// === Konfirmasi kosongkan nampan ===
const openConfirmModal = () => { showConfirmModal.value = true }
const closeConfirmModal = () => { showConfirmModal.value = false }
const openConfirmModal = () => {
showConfirmModal.value = true;
};
const closeConfirmModal = () => {
showConfirmModal.value = false;
};
const confirmEmptyTray = async () => {
try {
await axios.delete("/api/kosongkan-nampan",)
alert("Semua item berhasil dipindahkan ke Brankas")
closeConfirmModal()
location.reload()
await axios.delete("/api/kosongkan-nampan", {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
alert("Semua item berhasil dipindahkan ke Brankas");
closeConfirmModal();
location.reload();
} catch (error) {
console.error(error)
alert("Gagal mengosongkan nampan")
console.error(error);
alert("Gagal mengosongkan nampan");
}
}
};
const editTray = (tray) => {
trayName.value = tray.nama
editingTrayId.value = tray.id
showModal.value = true
}
trayName.value = tray.nama;
editingTrayId.value = tray.id;
showModal.value = true;
};
const deleteTray = async (id) => {
if (!confirm("Yakin ingin menghapus nampan ini?")) return
if (!confirm("Yakin ingin menghapus nampan ini?")) return;
try {
await axios.delete(`/api/nampan/${id}`)
alert("Nampan berhasil dihapus")
location.reload()
await axios.delete(`/api/nampan/${id}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
alert("Nampan berhasil dihapus");
location.reload();
} catch (error) {
console.error(error)
alert("Gagal menghapus nampan")
console.error(error);
alert("Gagal menghapus nampan");
}
}
};
</script>