[update] ui product
This commit is contained in:
dhilanradya
parent
c28be3706e
commit
b578faedd0
@ -17,19 +17,16 @@ const {
|
||||
<template>
|
||||
<div class="md:hidden">
|
||||
<div class="bg-D h-5 shadow-lg"></div>
|
||||
<div class="px-4 fixed flex items-center mt-2">
|
||||
|
||||
<button @click="toggleMobileMenu"
|
||||
class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
|
||||
<svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
|
||||
:class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }"
|
||||
class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
|
||||
<svg class="w-7 h-7" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<svg :class="{ 'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen }" class="w-6 h-6" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
|
||||
class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
|
||||
@ -53,7 +50,7 @@ const {
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<transition
|
||||
enter-active-class="transition-all ease-in-out duration-300"
|
||||
enter-from-class="transform opacity-0 max-h-0"
|
||||
@ -91,4 +88,4 @@ const {
|
||||
|
||||
<div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
|
||||
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
|
||||
@click="$emit('click', product.id)"
|
||||
>
|
||||
<!-- Foto Produk -->
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
Nampan tidak ditemukan.
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
|
||||
<div
|
||||
v-for="tray in filteredTrays"
|
||||
:key="tray.id"
|
||||
class="border rounded-xl p-4 shadow-sm hover:shadow-md transition"
|
||||
class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
|
||||
@ -26,7 +26,7 @@
|
||||
<div
|
||||
v-for="item in tray.items"
|
||||
:key="item.id"
|
||||
class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
|
||||
@click="openMovePopup(item)"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
@ -53,7 +53,7 @@
|
||||
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
|
||||
</div>
|
||||
|
||||
<div class="border-t mt-3 pt-2 text-right font-semibold">
|
||||
<div class="border-t border-C mt-3 pt-2 text-right font-semibold">
|
||||
Berat Total: {{ totalWeight(tray) }}g
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<div class="min-h-screen max-w-screen">
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<!-- Navbar -->
|
||||
<NavigationComponent />
|
||||
<div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
|
||||
|
||||
<!-- Konten utama -->
|
||||
<div class="flex-1 mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
|
||||
<slot />
|
||||
</div>
|
||||
<Footer class="bottom-0 w-full" />
|
||||
|
||||
<!-- Footer selalu di bawah -->
|
||||
<Footer class="w-full" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Footer from '../components/Footer.vue'
|
||||
import NavigationComponent from '../components/NavigationComponent.vue';
|
||||
import NavigationComponent from '../components/NavigationComponent.vue'
|
||||
</script>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
message="Apakah Anda yakin ingin menghapus produk ini?"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="p-6 min-h-[75vh]">
|
||||
<!-- Judul -->
|
||||
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
||||
|
||||
@ -81,9 +81,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid Produk -->
|
||||
<!-- 🔵 Loading State (sama persis dengan kategori) -->
|
||||
<div v-if="loading" class="flex justify-center items-center h-screen">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
|
||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
||||
</div>
|
||||
|
||||
<!-- 🔵 Grid Produk -->
|
||||
<div
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
|
||||
v-else
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0"
|
||||
>
|
||||
<ProductCard
|
||||
v-for="item in filteredProducts"
|
||||
@ -91,6 +98,27 @@
|
||||
:product="item"
|
||||
@click="openOverlay(item.id)"
|
||||
/>
|
||||
|
||||
<!-- 🔵 Empty State (sama kayak kategori) -->
|
||||
<div
|
||||
v-if="filteredProducts.length === 0"
|
||||
class="col-span-full flex flex-col items-center py-10 text-gray-500"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12 text-gray-400 mb-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
|
||||
/>
|
||||
</svg>
|
||||
<p>Tidak ada data produk</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -214,7 +242,9 @@ const showOverlay = ref(false);
|
||||
const currentFotoIndex = ref(0);
|
||||
|
||||
const kategori = ref([]);
|
||||
const loading = ref(false); // 🔥 Loading persis kategori
|
||||
|
||||
// Load kategori
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get("/api/kategori", {
|
||||
@ -236,23 +266,27 @@ const loadKategori = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Load produk
|
||||
const loadProduk = async () => {
|
||||
loading.value = true; // 🔵 start loading
|
||||
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);
|
||||
} finally {
|
||||
loading.value = false; // 🔵 stop loading
|
||||
}
|
||||
};
|
||||
|
||||
// Buka modal item
|
||||
// Modal item
|
||||
const openItemModal = () => {
|
||||
creatingItem.value = true;
|
||||
};
|
||||
@ -260,13 +294,13 @@ const closeItemModal = () => {
|
||||
creatingItem.value = false;
|
||||
};
|
||||
|
||||
// Fetch data awal
|
||||
// Fetch awal
|
||||
onMounted(async () => {
|
||||
loadKategori();
|
||||
loadProduk();
|
||||
await loadKategori();
|
||||
await loadProduk();
|
||||
});
|
||||
|
||||
// Filter produk (kategori + search)
|
||||
// Filter produk
|
||||
const filteredProducts = computed(() => {
|
||||
let hasil = products.value;
|
||||
|
||||
@ -283,7 +317,7 @@ const filteredProducts = computed(() => {
|
||||
return hasil;
|
||||
});
|
||||
|
||||
// Buka overlay detail
|
||||
// Overlay detail
|
||||
function openOverlay(id) {
|
||||
const produk = products.value.find((p) => p.id === id);
|
||||
if (produk) {
|
||||
@ -292,8 +326,6 @@ function openOverlay(id) {
|
||||
showOverlay.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Tutup overlay detail
|
||||
function closeOverlay() {
|
||||
showOverlay.value = false;
|
||||
currentFotoIndex.value = 0;
|
||||
@ -322,7 +354,11 @@ function formatNumber(num) {
|
||||
// Hapus produk
|
||||
async function deleteProduk() {
|
||||
try {
|
||||
await axios.delete(`/api/produk/${detail.value.id}`);
|
||||
await axios.delete(`/api/produk/${detail.value.id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
products.value = products.value.filter((p) => p.id !== detail.value.id);
|
||||
deleting.value = false;
|
||||
showOverlay.value = false;
|
||||
@ -340,7 +376,6 @@ async function deleteProduk() {
|
||||
width: 100% !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.searchbar-mobile:deep(input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user