300 lines
9.4 KiB
Vue
300 lines
9.4 KiB
Vue
<template>
|
||
<mainLayout>
|
||
<!-- Modal Buat Item -->
|
||
<CreateItemModal
|
||
:isOpen="creatingItem"
|
||
:product="detail"
|
||
@close="closeItemModal"
|
||
/>
|
||
|
||
<!-- Modal Konfirmasi Hapus Produk -->
|
||
<ConfirmDeleteModal
|
||
:isOpen="deleting"
|
||
@cancel="deleting = false"
|
||
@confirm="deleteProduk"
|
||
title="Hapus Produk"
|
||
message="Apakah Anda yakin ingin menghapus produk ini?"
|
||
/>
|
||
|
||
<div class="p-6">
|
||
<!-- Judul -->
|
||
<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"
|
||
>
|
||
<!-- Dropdown Kategori -->
|
||
<InputSelect
|
||
v-model="selectedCategory"
|
||
:options="kategori"
|
||
class="w-full md:w-48"
|
||
/>
|
||
|
||
<!-- Search -->
|
||
<searchbar v-model:search="searchQuery" class="flex-1" />
|
||
</div>
|
||
|
||
<!-- Tombol Tambah Produk -->
|
||
<div class="mt-3 flex justify-end">
|
||
<router-link
|
||
to="/produk/baru"
|
||
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||
>
|
||
Tambah Produk
|
||
</router-link>
|
||
</div>
|
||
|
||
<!-- Grid Produk -->
|
||
<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"
|
||
:product="item"
|
||
@click="openOverlay(item.id)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Overlay Detail Produk -->
|
||
<div
|
||
v-if="showOverlay"
|
||
class="fixed inset-0 bg-black/30 flex justify-center items-center"
|
||
@click.self="closeOverlay"
|
||
>
|
||
<div
|
||
class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
|
||
>
|
||
<!-- Foto Produk -->
|
||
<div
|
||
class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
|
||
>
|
||
<img
|
||
v-if="detail.foto && detail.foto.length > 0"
|
||
:src="detail.foto[currentFotoIndex].url"
|
||
:alt="detail.nama"
|
||
class="w-full h-full object-contain"
|
||
/>
|
||
<span v-else class="text-gray-400 text-sm">[gambar]</span>
|
||
|
||
<!-- Stok (pcs) pojok kiri atas -->
|
||
<div
|
||
class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
|
||
>
|
||
{{ detail.items_count }} pcs
|
||
</div>
|
||
|
||
<!-- Tombol Prev -->
|
||
<button
|
||
v-if="detail.foto && detail.foto.length > 1"
|
||
@click.stop="prevFoto"
|
||
class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
|
||
>
|
||
‹
|
||
</button>
|
||
<!-- Tombol Next -->
|
||
<button
|
||
v-if="detail.foto && detail.foto.length > 1"
|
||
@click.stop="nextFoto"
|
||
class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Nama Produk -->
|
||
<p class="text-lg font-semibold text-center mb-4">
|
||
{{ detail.nama }}
|
||
</p>
|
||
|
||
<!-- Detail Harga & Info -->
|
||
<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) }}
|
||
</p>
|
||
|
||
<p class="col-span-1">Kadar :</p>
|
||
<p class="col-span-1 text-right">{{ detail.kadar }} K</p>
|
||
|
||
<p class="col-span-1">Berat :</p>
|
||
<p class="col-span-1 text-right">{{ detail.berat }} gram</p>
|
||
|
||
<p class="col-span-1">Harga/gram :</p>
|
||
<p class="col-span-1 text-right">
|
||
Rp. {{ formatNumber(detail.harga_per_gram) }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tombol Aksi -->
|
||
<div class="flex w-full gap-3">
|
||
<button
|
||
@click="$router.push(`/produk/${detail.id}/edit`)"
|
||
class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
|
||
>
|
||
Ubah
|
||
</button>
|
||
|
||
<button
|
||
@click="openItemModal"
|
||
class="bg-green-400 text-black px-4 py-2 rounded font-bold"
|
||
>
|
||
Tambah
|
||
</button>
|
||
<button
|
||
@click="deleting = true"
|
||
class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
|
||
>
|
||
Hapus
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</mainLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, computed } from "vue";
|
||
import axios from "axios";
|
||
import mainLayout from "../layouts/mainLayout.vue";
|
||
import ProductCard from "../components/ProductCard.vue";
|
||
import searchbar from "../components/searchbar.vue";
|
||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||
import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
|
||
import InputSelect from "../components/InputSelect.vue";
|
||
|
||
const products = ref([]);
|
||
const searchQuery = ref("");
|
||
const selectedCategory = ref(0);
|
||
const creatingItem = ref(false);
|
||
const deleting = ref(false);
|
||
|
||
const detail = ref({});
|
||
const showOverlay = ref(false);
|
||
const currentFotoIndex = ref(0);
|
||
|
||
const kategori = ref([]);
|
||
|
||
const loadKategori = async () => {
|
||
try {
|
||
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) => ({
|
||
value: cat.id,
|
||
label: cat.nama,
|
||
})),
|
||
];
|
||
}
|
||
} catch (error) {
|
||
console.error("Error loading categories:", error);
|
||
}
|
||
};
|
||
|
||
const loadProduk = async () => {
|
||
try {
|
||
const response = await axios.get(`/api/produk`, {
|
||
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);
|
||
}
|
||
};
|
||
|
||
// Buka modal item
|
||
const openItemModal = () => {
|
||
creatingItem.value = true;
|
||
};
|
||
const closeItemModal = () => {
|
||
creatingItem.value = false;
|
||
};
|
||
|
||
// Fetch data awal
|
||
onMounted(async () => {
|
||
loadKategori();
|
||
loadProduk();
|
||
});
|
||
|
||
// Filter produk (kategori + search)
|
||
const filteredProducts = computed(() => {
|
||
let hasil = products.value;
|
||
|
||
if (selectedCategory.value != 0) {
|
||
hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
|
||
}
|
||
|
||
if (searchQuery.value) {
|
||
hasil = hasil.filter((p) =>
|
||
p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
);
|
||
}
|
||
|
||
return hasil;
|
||
});
|
||
|
||
// Buka overlay detail
|
||
function openOverlay(id) {
|
||
const produk = products.value.find((p) => p.id === id);
|
||
if (produk) {
|
||
detail.value = produk;
|
||
currentFotoIndex.value = 0;
|
||
showOverlay.value = true;
|
||
}
|
||
}
|
||
|
||
// Tutup overlay detail
|
||
function closeOverlay() {
|
||
showOverlay.value = false;
|
||
currentFotoIndex.value = 0;
|
||
}
|
||
|
||
// Navigasi foto
|
||
function nextFoto() {
|
||
if (detail.value.foto && detail.value.foto.length > 0) {
|
||
currentFotoIndex.value =
|
||
(currentFotoIndex.value + 1) % detail.value.foto.length;
|
||
}
|
||
}
|
||
function prevFoto() {
|
||
if (detail.value.foto && detail.value.foto.length > 0) {
|
||
currentFotoIndex.value =
|
||
(currentFotoIndex.value - 1 + detail.value.foto.length) %
|
||
detail.value.foto.length;
|
||
}
|
||
}
|
||
|
||
// Format angka
|
||
function formatNumber(num) {
|
||
return new Intl.NumberFormat().format(num || 0);
|
||
}
|
||
|
||
// Hapus produk
|
||
async function deleteProduk() {
|
||
try {
|
||
await axios.delete(`/api/produk/${detail.value.id}`);
|
||
products.value = products.value.filter((p) => p.id !== detail.value.id);
|
||
deleting.value = false;
|
||
showOverlay.value = false;
|
||
alert("Produk berhasil dihapus!");
|
||
} catch (err) {
|
||
console.error("Gagal hapus produk:", err);
|
||
alert("Gagal menghapus produk!");
|
||
}
|
||
}
|
||
</script>
|