Compare commits
No commits in common. "ae225ce5c72f6a4afa4bba56566bc2210f5e83b1" and "20c844a98b62d4a4bde455765ba8b259919ace48" have entirely different histories.
ae225ce5c7
...
20c844a98b
@ -16,13 +16,13 @@
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<InputField
|
||||
v-model="form.password"
|
||||
id="password"
|
||||
type="password"
|
||||
:required="true"
|
||||
/>
|
||||
<label for="password">Password</label>
|
||||
<InputField
|
||||
v-model="form.password"
|
||||
id="password"
|
||||
type="password"
|
||||
:required="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label for="peran">Peran</label>
|
||||
@ -78,13 +78,7 @@ export default {
|
||||
methods: {
|
||||
async createAkun() {
|
||||
try {
|
||||
await axios.post("api/user", this.form, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
},
|
||||
});
|
||||
await axios.post("api/user", this.form);
|
||||
this.form = { nama: "", password: "", role: "" };
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
|
||||
@ -113,11 +113,7 @@ const selectedNampanName = computed(() => {
|
||||
// Methods
|
||||
const loadNampanList = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/nampan', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
const response = await axios.get('/api/nampan');
|
||||
nampanList.value = response.data;
|
||||
positionListOptions.value = [
|
||||
{ value: '', label: 'Brankas', selected: !selectedNampan.value },
|
||||
@ -146,11 +142,7 @@ const createItem = async () => {
|
||||
payload.id_nampan = selectedNampan.value;
|
||||
}
|
||||
|
||||
const response = await axios.post('/api/item', payload, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
const response = await axios.post('/api/item', payload);
|
||||
|
||||
success.value = true;
|
||||
createdItem.value = response.data.data
|
||||
|
||||
@ -61,17 +61,9 @@ import InputField from './InputField.vue'
|
||||
const saveKategori = async () => {
|
||||
try {
|
||||
if (props.product) {
|
||||
await axios.put(`/api/kategori/${props.product.id}`, form.value, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.put(`/api/kategori/${props.product.id}`, form.value)
|
||||
} else {
|
||||
await axios.post('/api/kategori', form.value, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.post('/api/kategori', form.value)
|
||||
}
|
||||
emit('close') // tutup modal
|
||||
} catch (err) {
|
||||
|
||||
@ -71,11 +71,7 @@
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await axios.post("/api/sales", form.value, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.post("/api/sales", form.value)
|
||||
resetForm()
|
||||
emit("saved")
|
||||
emit("close")
|
||||
|
||||
@ -101,11 +101,7 @@
|
||||
const payload = { ...this.form };
|
||||
if (!payload.password) delete payload.password;
|
||||
|
||||
await axios.put(`/api/user/${this.akun.id}`, payload, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
await axios.put(`/api/user/${this.akun.id}`, payload);
|
||||
|
||||
this.$emit("refresh");
|
||||
this.$emit("close");
|
||||
|
||||
@ -65,11 +65,7 @@ import InputField from "./InputField.vue";
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await axios.put(`/api/sales/${props.sales.id}`, form.value, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
await axios.put(`/api/sales/${props.sales.id}`, form.value);
|
||||
emit("close");
|
||||
} catch (error) {
|
||||
console.error("Error updating sales:", error);
|
||||
|
||||
@ -97,11 +97,7 @@ const inputItem = async () => {
|
||||
loadingItem.value = true
|
||||
|
||||
try {
|
||||
const response = await axios.get(`/api/item/${kodeItem.value}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
const response = await axios.get(`/api/item/${kodeItem.value}`);
|
||||
item.value = response.data;
|
||||
hargaJual.value = item.value.produk.harga_jual
|
||||
|
||||
|
||||
@ -187,11 +187,7 @@ const fetchRingkasan = async (page = 1) => {
|
||||
loading.value = true;
|
||||
pendapatanElements.value = [];
|
||||
try {
|
||||
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
|
||||
ringkasanLaporan.value = response.data.data;
|
||||
pagination.value = {
|
||||
current_page: response.data.current_page,
|
||||
|
||||
@ -185,11 +185,7 @@ const fetchRingkasan = async (page = 1) => {
|
||||
loading.value = true;
|
||||
pendapatanElements.value = [];
|
||||
try {
|
||||
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});;
|
||||
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
|
||||
ringkasanLaporan.value = response.data.data;
|
||||
pagination.value = {
|
||||
current_page: response.data.current_page,
|
||||
|
||||
@ -138,18 +138,16 @@ const closePopup = () => {
|
||||
const saveMove = async () => {
|
||||
if (!selectedTrayId.value || !selectedItem.value) return;
|
||||
try {
|
||||
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 axios.put(`/api/item/${selectedItem.value.id}`, {
|
||||
header:{
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
body:{
|
||||
id_nampan: selectedTrayId.value,
|
||||
id_produk: selectedItem.value.id_produk,
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
await refreshData();
|
||||
closePopup();
|
||||
|
||||
@ -1,219 +1,112 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item -->
|
||||
<CreateItemModal
|
||||
:isOpen="openItemModal"
|
||||
:product="editedProduct"
|
||||
@close="closeItemModal"
|
||||
/>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item -->
|
||||
<CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
|
||||
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">Edit Produk</p>
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">Edit Produk</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row mt-5 gap-6">
|
||||
<!-- Form Section -->
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row mt-5 gap-6">
|
||||
<!-- Form Section -->
|
||||
<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" />
|
||||
</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"
|
||||
/>
|
||||
</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" />
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Foto</label>
|
||||
|
||||
<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"
|
||||
>
|
||||
×
|
||||
</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"
|
||||
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,
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</svg>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
|
||||
<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"
|
||||
>
|
||||
{{ uploadError }}
|
||||
</div>
|
||||
</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" />
|
||||
</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>
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Kadar (K)</label>
|
||||
<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" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
|
||||
<!-- Image Upload Section -->
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Foto</label>
|
||||
|
||||
<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">
|
||||
×
|
||||
</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"
|
||||
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 }">
|
||||
<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>
|
||||
</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>
|
||||
</svg>
|
||||
</div>
|
||||
<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" />
|
||||
|
||||
<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">
|
||||
{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -231,12 +124,12 @@ const router = useRouter();
|
||||
const productId = route.params.id;
|
||||
|
||||
const form = ref({
|
||||
nama: "",
|
||||
id_kategori: null,
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
nama: "",
|
||||
id_kategori: null,
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
});
|
||||
|
||||
const category = ref([]);
|
||||
@ -252,145 +145,137 @@ const editedProduct = ref(null);
|
||||
const userId = ref(1); // TODO: ambil dari auth
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return (
|
||||
form.value.nama &&
|
||||
form.value.id_kategori &&
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
form.value.harga_jual > 0
|
||||
);
|
||||
return (
|
||||
form.value.nama &&
|
||||
form.value.id_kategori &&
|
||||
form.value.berat > 0 &&
|
||||
form.value.kadar > 0 &&
|
||||
form.value.harga_per_gram > 0 &&
|
||||
form.value.harga_jual > 0
|
||||
);
|
||||
});
|
||||
|
||||
const calculateHargaJual = () => {
|
||||
const berat = parseFloat(form.value.berat) || 0;
|
||||
const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
|
||||
if (berat > 0 && hargaPerGram > 0) {
|
||||
form.value.harga_jual = berat * hargaPerGram;
|
||||
}
|
||||
const berat = parseFloat(form.value.berat) || 0;
|
||||
const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
|
||||
if (berat > 0 && hargaPerGram > 0) {
|
||||
form.value.harga_jual = berat * hargaPerGram;
|
||||
}
|
||||
};
|
||||
|
||||
const loadKategori = async () => {
|
||||
const response = await axios.get("/api/kategori", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
|
||||
const response = await axios.get("/api/kategori", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
|
||||
};
|
||||
|
||||
const loadProduk = async () => {
|
||||
const response = await axios.get(`/api/produk/${productId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const produk = response.data;
|
||||
form.value = {
|
||||
nama: produk.nama,
|
||||
id_kategori: produk.id_kategori,
|
||||
berat: produk.berat,
|
||||
kadar: produk.kadar,
|
||||
harga_per_gram: produk.harga_per_gram,
|
||||
harga_jual: produk.harga_jual,
|
||||
};
|
||||
uploadedImages.value = produk.foto || [];
|
||||
const response = await axios.get(`/api/produk/${productId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const produk = response.data;
|
||||
form.value = {
|
||||
nama: produk.nama,
|
||||
id_kategori: produk.id_kategori,
|
||||
berat: produk.berat,
|
||||
kadar: produk.kadar,
|
||||
harga_per_gram: produk.harga_per_gram,
|
||||
harga_jual: produk.harga_jual,
|
||||
};
|
||||
uploadedImages.value = produk.foto || [];
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
if (!uploadLoading.value && uploadedImages.value.length < 6) {
|
||||
fileInput.value?.click();
|
||||
}
|
||||
if (!uploadLoading.value && uploadedImages.value.length < 6) {
|
||||
fileInput.value?.click();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileSelect = (e) => {
|
||||
const files = Array.from(e.target.files);
|
||||
uploadFiles(files);
|
||||
const files = Array.from(e.target.files);
|
||||
uploadFiles(files);
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
isDragging.value = false;
|
||||
if (uploadLoading.value || uploadedImages.value.length >= 6) return;
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
uploadFiles(files);
|
||||
e.preventDefault();
|
||||
isDragging.value = false;
|
||||
if (uploadLoading.value || uploadedImages.value.length >= 6) return;
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
uploadFiles(files);
|
||||
};
|
||||
|
||||
const uploadFiles = async (files) => {
|
||||
uploadError.value = "";
|
||||
const validFiles = files.filter(
|
||||
(file) =>
|
||||
["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
|
||||
file.size <= 2 * 1024 * 1024
|
||||
);
|
||||
if (!validFiles.length) return;
|
||||
uploadLoading.value = true;
|
||||
try {
|
||||
for (const file of validFiles) {
|
||||
const formData = new FormData();
|
||||
formData.append("foto", file);
|
||||
formData.append("id_user", userId.value);
|
||||
const res = await axios.post("/api/foto/upload", formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
uploadedImages.value.push(res.data);
|
||||
}
|
||||
} finally {
|
||||
uploadLoading.value = false;
|
||||
uploadError.value = "";
|
||||
const validFiles = files.filter(
|
||||
(file) =>
|
||||
["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
|
||||
file.size <= 2 * 1024 * 1024
|
||||
);
|
||||
if (!validFiles.length) return;
|
||||
uploadLoading.value = true;
|
||||
try {
|
||||
for (const file of validFiles) {
|
||||
const formData = new FormData();
|
||||
formData.append("foto", file);
|
||||
formData.append("id_user", userId.value);
|
||||
const res = await axios.post("/api/foto/upload", formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
"Content-Type": "multipart/form-data"
|
||||
},
|
||||
});
|
||||
uploadedImages.value.push(res.data);
|
||||
}
|
||||
} finally {
|
||||
uploadLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const removeImage = async (id) => {
|
||||
try {
|
||||
await axios.delete(`/api/foto/hapus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
|
||||
} catch {
|
||||
uploadError.value = "Gagal menghapus foto";
|
||||
}
|
||||
try {
|
||||
await axios.delete(`/api/foto/hapus/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
|
||||
} catch {
|
||||
uploadError.value = "Gagal menghapus foto";
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
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) {
|
||||
alert("Gagal update produk!");
|
||||
console.error(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
await axios.put(`/api/produk/${productId}`, {
|
||||
...form.value,
|
||||
id_user: userId.value,
|
||||
});
|
||||
alert("Produk berhasil diupdate!");
|
||||
router.push("/produk");
|
||||
} catch (err) {
|
||||
alert("Gagal update produk!");
|
||||
console.error(err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeItemModal = () => {
|
||||
openItemModal.value = false;
|
||||
openItemModal.value = false;
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
router.push("/produk");
|
||||
router.push("/produk");
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadKategori();
|
||||
loadProduk();
|
||||
loadKategori();
|
||||
loadProduk();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -146,11 +146,7 @@ const category = ref([]);
|
||||
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/kategori', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const response = await axios.get('/api/kategori');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
category.value = response.data.map(cat => ({
|
||||
value: cat.id,
|
||||
@ -194,11 +190,7 @@ const calculateHargaJual = () => {
|
||||
|
||||
const loadExistingPhotos = async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/foto/${userId.value}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const response = await axios.get(`/api/foto/${userId.value}`);
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
uploadedImages.value = response.data;
|
||||
}
|
||||
@ -279,9 +271,7 @@ const uploadFiles = async (files) => {
|
||||
|
||||
const response = await axios.post('/api/foto/upload', formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
'Content-Type': 'multipart/form-data',
|
||||
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
|
||||
@ -302,12 +292,7 @@ const uploadFiles = async (files) => {
|
||||
|
||||
const removeImage = async (imageId) => {
|
||||
try {
|
||||
await axios.delete(`/api/foto/hapus/${imageId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
})
|
||||
;
|
||||
await axios.delete(`/api/foto/hapus/${imageId}`);
|
||||
uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
|
||||
uploadError.value = '';
|
||||
} catch (error) {
|
||||
@ -327,10 +312,7 @@ const submitForm = async (addItem) => {
|
||||
try {
|
||||
const response = await axios.post('/api/produk', {
|
||||
...form.value,
|
||||
id_user: userId.value,
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
id_user: userId.value
|
||||
});
|
||||
|
||||
const createdProductData = response.data.data;
|
||||
@ -381,11 +363,7 @@ const resetForm = async () => {
|
||||
harga_jual: 0,
|
||||
};
|
||||
try {
|
||||
await axios.delete(`/api/foto/reset/${userId.value}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.delete(`/api/foto/reset/${userId.value}`);
|
||||
uploadedImages.value = [];
|
||||
} catch (error) {
|
||||
console.error('Error resetting photos:', error);
|
||||
|
||||
@ -59,11 +59,7 @@ const loading = ref(true)
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await axios.get("/api/transaksi?limit=10", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
})
|
||||
const res = await axios.get("/api/transaksi?limit=10")
|
||||
|
||||
transaksi.value = res.data
|
||||
} catch (err) {
|
||||
|
||||
@ -101,11 +101,7 @@ const kategoriToDelete = ref(null);
|
||||
const fetchKategoris = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.get("/api/kategori", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const response = await axios.get("/api/kategori");
|
||||
kategori.value = response.data;
|
||||
console.log("Data kategori:", response.data);
|
||||
} catch (error) {
|
||||
@ -142,11 +138,7 @@ const hapusKategori = (item) => {
|
||||
// 🔵 Ditambahkan: aksi konfirmasi hapus
|
||||
const confirmDelete = async () => {
|
||||
try {
|
||||
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
|
||||
console.log("Kategori berhasil dihapus");
|
||||
fetchKategoris();
|
||||
} catch (error) {
|
||||
|
||||
@ -1,160 +1,150 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item -->
|
||||
<CreateItemModal
|
||||
:isOpen="creatingItem"
|
||||
:product="detail"
|
||||
@close="closeItemModal"
|
||||
/>
|
||||
<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?"
|
||||
/>
|
||||
<!-- 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>
|
||||
<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"
|
||||
/>
|
||||
<!-- 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>
|
||||
<!-- 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"
|
||||
<!-- 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"
|
||||
>
|
||||
<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>
|
||||
Tambah Produk
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Nama Produk -->
|
||||
<p class="text-lg font-semibold text-center mb-4">
|
||||
{{ detail.nama }}
|
||||
</p>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
</mainLayout>
|
||||
|
||||
<!-- 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>
|
||||
@ -180,119 +170,113 @@ 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);
|
||||
try {
|
||||
const response = await axios.get('/api/kategori');
|
||||
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 {
|
||||
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);
|
||||
try {
|
||||
const response = await axios.get('/api/produk');
|
||||
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;
|
||||
creatingItem.value = true;
|
||||
};
|
||||
const closeItemModal = () => {
|
||||
creatingItem.value = false;
|
||||
creatingItem.value = false;
|
||||
};
|
||||
|
||||
// Fetch data awal
|
||||
onMounted(async () => {
|
||||
loadKategori();
|
||||
loadProduk();
|
||||
loadKategori()
|
||||
loadProduk();
|
||||
});
|
||||
|
||||
// Filter produk (kategori + search)
|
||||
const filteredProducts = computed(() => {
|
||||
let hasil = products.value;
|
||||
let hasil = products.value;
|
||||
|
||||
if (selectedCategory.value != 0) {
|
||||
hasil = hasil.filter((p) => p.id_kategori == selectedCategory.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())
|
||||
);
|
||||
}
|
||||
if (searchQuery.value) {
|
||||
hasil = hasil.filter((p) =>
|
||||
p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
return hasil;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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);
|
||||
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!");
|
||||
}
|
||||
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>
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
<!-- Table Section -->
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
|
||||
class="bg-white rounded-lg shadow-md border border-C overflow-hidden"
|
||||
>
|
||||
<table class="w-full">
|
||||
<thead class="">
|
||||
@ -76,33 +76,35 @@
|
||||
>
|
||||
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-gray-200\ hover:bg-gray-50 transition duration-150"
|
||||
class="border-b border-C hover:bg-gray-50 transition duration-150"
|
||||
:class="{ 'bg-gray-50': index % 2 === 1 }"
|
||||
>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900"
|
||||
class="px-6 py-4 border-r border-C text-center font-medium text-gray-900"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-D"
|
||||
class="px-6 py-4 border-r border-C text-D"
|
||||
>
|
||||
{{ item.nama }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
|
||||
class="px-6 py-4 border-r border-C text-gray-800"
|
||||
>
|
||||
{{ item.no_hp }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 border-r border-gray-200\ text-gray-800"
|
||||
class="px-6 py-4 border-r border-C text-gray-800"
|
||||
>
|
||||
{{ item.alamat }}
|
||||
</td>
|
||||
@ -184,11 +186,7 @@ const salesToDelete = ref(null);
|
||||
const fetchSales = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.get("/api/sales", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
const response = await axios.get("/api/sales");
|
||||
sales.value = response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching sales:", error);
|
||||
@ -217,11 +215,7 @@ const hapusSales = (item) => {
|
||||
|
||||
const confirmDelete = async () => {
|
||||
try {
|
||||
await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
await axios.delete(`/api/sales/${salesToDelete.value.id}`);
|
||||
fetchSales();
|
||||
confirmDeleteOpen.value = false;
|
||||
} catch (error) {
|
||||
|
||||
@ -1,230 +1,180 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Header -->
|
||||
<div class="mb-4">
|
||||
<!-- Judul -->
|
||||
<p
|
||||
style="
|
||||
font-family: 'IM FELL Great Primer', serif;
|
||||
font-style: italic;
|
||||
font-size: 25px;
|
||||
"
|
||||
>
|
||||
NAMPAN
|
||||
</p>
|
||||
<mainLayout>
|
||||
|
||||
<!-- Searchbar -->
|
||||
<div class="flex justify-end mt-2">
|
||||
<div class="w-64">
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<div class="mb-4">
|
||||
<!-- Judul -->
|
||||
<p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
|
||||
NAMPAN
|
||||
</p>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex gap-2 mt-3 justify-end">
|
||||
<!-- Tambah Nampan -->
|
||||
<button
|
||||
@click="openModal"
|
||||
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
|
||||
>
|
||||
Tambah Nampan
|
||||
</button>
|
||||
<!-- Searchbar -->
|
||||
<div class="flex justify-end mt-2">
|
||||
<div class="w-64">
|
||||
<searchbar v-model:search="searchQuery" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kosongkan -->
|
||||
<button
|
||||
@click="openConfirmModal"
|
||||
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
|
||||
>
|
||||
Kosongkan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Tombol -->
|
||||
<div class="flex gap-2 mt-3 justify-end">
|
||||
<!-- Tambah Nampan -->
|
||||
<button
|
||||
@click="openModal"
|
||||
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">
|
||||
Kosongkan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Search + List -->
|
||||
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
|
||||
|
||||
<!-- Modal Tambah/Edit Nampan -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
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>
|
||||
|
||||
<label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
|
||||
<input
|
||||
v-model="trayName"
|
||||
type="text"
|
||||
placeholder="Contoh: A4"
|
||||
class="w-full border rounded-md p-2 mb-4"
|
||||
/>
|
||||
|
||||
<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">
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="saveTray"
|
||||
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
|
||||
style="color: #102C57;">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search + List -->
|
||||
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
|
||||
|
||||
<!-- Modal Tambah/Edit Nampan -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
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>
|
||||
|
||||
<label
|
||||
class="block mb-2 text-sm font-medium"
|
||||
style="color: #102c57"
|
||||
>Nama Nampan</label
|
||||
>
|
||||
<input
|
||||
v-model="trayName"
|
||||
type="text"
|
||||
placeholder="Contoh: A4"
|
||||
class="w-full border rounded-md p-2 mb-4"
|
||||
/>
|
||||
|
||||
<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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="saveTray"
|
||||
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
|
||||
style="color: #102c57"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal Konfirmasi Kosongkan -->
|
||||
<div
|
||||
v-if="showConfirmModal"
|
||||
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>
|
||||
<p class="text-gray-600 mb-6">
|
||||
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">
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
|
||||
Ya
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Konfirmasi Kosongkan -->
|
||||
<div
|
||||
v-if="showConfirmModal"
|
||||
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>
|
||||
<p class="text-gray-600 mb-6">
|
||||
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"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
|
||||
>
|
||||
Ya
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</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;
|
||||
if (!trayName.value.trim()) {
|
||||
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")
|
||||
} else {
|
||||
await axios.post("/api/nampan", { nama: trayName.value })
|
||||
alert("Nampan berhasil ditambahkan")
|
||||
}
|
||||
try {
|
||||
if (editingTrayId.value) {
|
||||
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 },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
alert("Nampan berhasil ditambahkan");
|
||||
}
|
||||
closeModal();
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("Gagal menyimpan nampan");
|
||||
}
|
||||
};
|
||||
closeModal()
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
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", {
|
||||
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");
|
||||
}
|
||||
};
|
||||
try {
|
||||
await axios.delete("/api/kosongkan-nampan",)
|
||||
alert("Semua item berhasil dipindahkan ke Brankas")
|
||||
closeConfirmModal()
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
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;
|
||||
try {
|
||||
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");
|
||||
}
|
||||
};
|
||||
if (!confirm("Yakin ingin menghapus nampan ini?")) return
|
||||
try {
|
||||
await axios.delete(`/api/nampan/${id}`)
|
||||
alert("Nampan berhasil dihapus")
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
alert("Gagal menghapus nampan")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user