From f0f570be21ce32f0af46d34abc624bd89da6aa8c Mon Sep 17 00:00:00 2001 From: dhilanradya Date: Thu, 28 Aug 2025 14:35:04 +0700 Subject: [PATCH 1/3] Update Produk.vue --- resources/js/pages/Produk.vue | 66 +++++++++++++++++------------------ 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue index 566dce7..d9fb1ad 100644 --- a/resources/js/pages/Produk.vue +++ b/resources/js/pages/Produk.vue @@ -42,17 +42,18 @@ +
- -
+ +
- {{ detail.item_count }} pcs -
- - -
- {{ detail.nama }} + {{ detail.items_count }} pcs
@@ -85,40 +79,46 @@
+ +

{{ detail.nama }}

+ -
- -

Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}

-

{{ detail.kadar }} K

-

- Berat : {{ detail.berat }} gram -

-

- Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }} -

+
+

Harga Jual :

+

Rp. {{ formatNumber(detail.harga_jual) }}

+ +

Kadar :

+

{{ detail.kadar }} K

+ +

Berat :

+

{{ detail.berat }} gram

+ +

Harga/gram :

+

Rp. {{ formatNumber(detail.harga_per_gram) }}

-
- - -
+ @@ -170,14 +170,12 @@ const filteredProducts = computed(() => { }); // buka overlay -async function openOverlay(id) { - try { - const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`); - detail.value = res.data; +function openOverlay(id) { + const produk = products.value.find((p) => p.id === id); + if (produk) { + detail.value = produk; currentFotoIndex.value = 0; // reset ke foto pertama showOverlay.value = true; - } catch (error) { - console.error("Gagal fetch detail produk:", error); } } From 5217e2d703b507c86864fc4a1533360ccee2679e Mon Sep 17 00:00:00 2001 From: dhilanradya Date: Fri, 29 Aug 2025 09:42:36 +0700 Subject: [PATCH 2/3] Update Produk.vue --- resources/js/pages/Produk.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue index d9fb1ad..40c66dd 100644 --- a/resources/js/pages/Produk.vue +++ b/resources/js/pages/Produk.vue @@ -50,7 +50,7 @@ >
@@ -141,7 +141,7 @@ const currentFotoIndex = ref(0); // Fetch data awal onMounted(async () => { try { - const res = await axios.get("http://127.0.0.1:8000/api/produk"); + const res = await axios.get("/api/produk"); products.value = res.data; } catch (error) { console.error("Gagal ambil data produk:", error); From e96d973b03f0d53c5dc7132295a7611b10e1ec2a Mon Sep 17 00:00:00 2001 From: dhilanradya Date: Fri, 29 Aug 2025 10:59:49 +0700 Subject: [PATCH 3/3] [feet] hapus produk --- .../js/components/ConfirmDeleteModal.vue | 40 ++++ resources/js/pages/Produk.vue | 222 ++++++++++-------- 2 files changed, 165 insertions(+), 97 deletions(-) create mode 100644 resources/js/components/ConfirmDeleteModal.vue diff --git a/resources/js/components/ConfirmDeleteModal.vue b/resources/js/components/ConfirmDeleteModal.vue new file mode 100644 index 0000000..ffcca4e --- /dev/null +++ b/resources/js/components/ConfirmDeleteModal.vue @@ -0,0 +1,40 @@ + + + diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue index d6219d0..e57a268 100644 --- a/resources/js/pages/Produk.vue +++ b/resources/js/pages/Produk.vue @@ -1,12 +1,19 @@ @@ -142,26 +159,26 @@ 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"; const products = ref([]); const searchQuery = ref(""); const selectedCategory = ref("semua"); const creatingItem = ref(false); +const deleting = ref(false); +const detail = ref({}); +const showOverlay = ref(false); +const currentFotoIndex = ref(0); + +// Buka modal item const openItemModal = () => { - console.log("open item modal", detail.value); - creatingItem.value = true; }; const closeItemModal = () => { creatingItem.value = false; }; -// overlay state -const showOverlay = ref(false); -const detail = ref({}); -const currentFotoIndex = ref(0); - // Fetch data awal onMounted(async () => { try { @@ -172,18 +189,16 @@ onMounted(async () => { } }); -// Filter gabungan (kategori + search) +// Filter produk (kategori + search) const filteredProducts = computed(() => { let hasil = products.value; - // filter kategori if (selectedCategory.value !== "semua") { hasil = hasil.filter( (p) => p.kategori.toLowerCase() === selectedCategory.value ); } - // filter search if (searchQuery.value) { hasil = hasil.filter((p) => p.nama.toLowerCase().includes(searchQuery.value.toLowerCase()) @@ -193,30 +208,29 @@ const filteredProducts = computed(() => { return hasil; }); -// buka overlay +// Buka overlay detail function openOverlay(id) { const produk = products.value.find((p) => p.id === id); if (produk) { detail.value = produk; - currentFotoIndex.value = 0; // reset ke foto pertama + currentFotoIndex.value = 0; showOverlay.value = true; } } -// tutup overlay +// Tutup overlay detail function closeOverlay() { showOverlay.value = false; currentFotoIndex.value = 0; } -// foto navigation +// 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 = @@ -229,4 +243,18 @@ function prevFoto() { 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!"); + } +}