70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="item in filteredItems"
|
|
:key="item.id"
|
|
class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition"
|
|
>
|
|
<!-- Gambar -->
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
v-if="item.produk.foto && item.produk.foto.length > 0"
|
|
:src="item.produk.foto[0].url"
|
|
class="w-12 h-12 object-contain"
|
|
/>
|
|
<!-- Info produk -->
|
|
<div>
|
|
<p class="font-semibold">{{ item.produk.nama }}</p>
|
|
<p class="text-sm text-gray-500">{{ item.produk.id }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Berat -->
|
|
<span class="font-medium">{{ item.produk.berat }}g</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, computed, onMounted } from "vue";
|
|
import axios from "axios";
|
|
|
|
const props = defineProps({
|
|
search: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
|
|
const items = ref([]);
|
|
const produk = ref([])
|
|
const loading = ref(true);
|
|
const error = ref(null);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const res = await axios.get("/api/item",{
|
|
headers:{
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
}
|
|
}); // ganti sesuai URL backend
|
|
items.value = res.data; // pastikan backend return array of items
|
|
console.log(res.data);
|
|
|
|
} catch (err) {
|
|
error.value = err.message || "Gagal mengambil data";
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
|
|
const filteredItems = computed(() => {
|
|
if (!props.search) return items.value;
|
|
return items.value.filter((item) =>
|
|
item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase())
|
|
);
|
|
});
|
|
</script>
|