Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production
This commit is contained in:
Baghaztra
commit
be38f618a0
@ -64,18 +64,23 @@
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
|
||||
<!-- Item rows dengan dynamic height -->
|
||||
<tr v-for="(item, index) in props.pesanan" :key="index"
|
||||
class="text-center"
|
||||
:style="getRowStyle()">
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal">1</span>
|
||||
</td>
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
|
||||
<template v-if="item.produk?.foto?.[0]?.url">
|
||||
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover" />
|
||||
<img :src="item.produk.foto[0].url"
|
||||
:class="getImageClass()"
|
||||
class="object-cover" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-12 h-12"></div>
|
||||
<div :class="getImageClass()"></div>
|
||||
</template>
|
||||
{{ item.produk?.nama || '' }}
|
||||
<span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">{{ item.produk.nama ? (item.nampan?.nama || 'Brankas') : '' }}</td>
|
||||
<td class="border-r border-D">
|
||||
@ -240,6 +245,32 @@ const grandTotal = computed(() => {
|
||||
return props.total + (ongkosBikin.value || 0)
|
||||
})
|
||||
|
||||
// Fungsi untuk menentukan style row berdasarkan jumlah item
|
||||
const getRowStyle = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return { height: '126px' } // 2x lipat dari tinggi normal (48px)
|
||||
}
|
||||
return { height: '63px' } // Tinggi normal
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Fungsi untuk menentukan class gambar berdasarkan jumlah item
|
||||
const getImageClass = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return 'w-25 h-25' // 2x lipat dari ukuran normal (w-10 h-10)
|
||||
}
|
||||
return 'w-12 h-12' // Ukuran normal
|
||||
}
|
||||
|
||||
// Fungsi untuk menentukan class text berdasarkan jumlah item
|
||||
const getTextClass = () => {
|
||||
if (props.pesanan.length === 1) {
|
||||
return 'text-lg font-medium' // Text lebih besar untuk single item
|
||||
}
|
||||
return 'text-sm' // Text normal
|
||||
}
|
||||
|
||||
const getCurrentDate = () => {
|
||||
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
|
||||
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||
@ -354,14 +385,6 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const pesananMinimal = computed(() => {
|
||||
const arr = [...props.pesanan]
|
||||
while (arr.length < 2) {
|
||||
arr.push({ produk: {}, harga_deal: 0, posisi: '' })
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
function formatInput(e) {
|
||||
let value = e.target.value.replace(/\D/g, "");
|
||||
ongkosBikin.value = value ? parseInt(value, 10) : null;
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div v-if="isOpen"
|
||||
class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
|
||||
<div class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
|
||||
|
||||
<!-- print-area untuk fokus saat print -->
|
||||
<div class="print-area bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
|
||||
<div class="bg-yellow-500 h-8 w-full">
|
||||
<div class="bg-D h-6 w-full"></div>
|
||||
</div>
|
||||
@ -66,23 +68,23 @@
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center">
|
||||
<tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center" :style="getRowStyle()">
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal && item.harga_deal > 0">1</span>
|
||||
</td>
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
|
||||
<template v-if="item.produk?.foto?.[0]?.url">
|
||||
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover rounded" />
|
||||
<img :src="item.produk.foto[0].url" :class="getImageClass()" class="object-cover rounded" />
|
||||
</template>
|
||||
<template v-else-if="item.produk?.nama">
|
||||
<div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
|
||||
<div :class="getImageClass() + ' bg-gray-200 rounded flex items-center justify-center'">
|
||||
<span class="text-xs text-gray-500">IMG</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-12 h-12"></div>
|
||||
<div :class="getImageClass()"></div>
|
||||
</template>
|
||||
<span class="text-left">{{ item.produk?.nama || '' }}</span>
|
||||
<span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.produk?.nama">{{ item.posisi_asal || 'Brankas' }}</span>
|
||||
@ -109,8 +111,7 @@
|
||||
<p class="font-semibold">PERHATIAN</p>
|
||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
|
||||
lain harga.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
|
||||
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
@ -133,7 +134,7 @@
|
||||
<p class="font-semibold">Ongkos bikin</p>
|
||||
<p class="text-red-500 text-xs">diluar harga jual</p>
|
||||
</div>
|
||||
<div class="flex items-center w-40">
|
||||
<div class="flex p-1 items-center w-40 bg-B rounded-sm">
|
||||
<p>Rp</p>
|
||||
<p class="px-2 pl-0 text-left text-sm w-full">
|
||||
{{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
|
||||
@ -154,7 +155,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<div class="flex justify-end gap-2 mt-4 no-print">
|
||||
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
|
||||
Tutup
|
||||
</button>
|
||||
@ -196,50 +197,53 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
// Format tanggal sesuai dengan format yang ada
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-'
|
||||
|
||||
const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu']
|
||||
const months = ['01','02','03','04','05','06','07','08','09','10','11','12']
|
||||
|
||||
const date = new Date(dateString)
|
||||
const dayName = days[date.getDay()]
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const month = months[date.getMonth()]
|
||||
const year = date.getFullYear()
|
||||
|
||||
return `${dayName}/${day}-${month}-${year}`
|
||||
}
|
||||
|
||||
// Menambahkan minimal 2 baris untuk tampilan yang konsisten
|
||||
const itemsWithMinimal = computed(() => {
|
||||
console.log('Transaksi data in StrukView:', props.transaksi)
|
||||
|
||||
// Coba berbagai kemungkinan nama field
|
||||
const items = props.transaksi.itemTransaksi ||
|
||||
props.transaksi.items ||
|
||||
props.transaksi.item_transaksi ||
|
||||
[]
|
||||
|
||||
console.log('Items found:', items)
|
||||
|
||||
const arr = [...items]
|
||||
|
||||
// Pastikan minimal ada 2 baris untuk tampilan yang rapi
|
||||
while (arr.length < 2) {
|
||||
arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
|
||||
}
|
||||
|
||||
// biar minimal ada 1 row terlihat
|
||||
if (arr.length === 0) arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
|
||||
return arr
|
||||
})
|
||||
|
||||
// Fungsi print (bisa dikembangkan lebih lanjut)
|
||||
// === Tambahan style/helper sama dengan strukoverlay ===
|
||||
const getRowStyle = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return { height: '126px' }
|
||||
}
|
||||
return { height: '63px' }
|
||||
}
|
||||
const getImageClass = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return 'w-25 h-25'
|
||||
}
|
||||
return 'w-12 h-12'
|
||||
}
|
||||
const getTextClass = () => {
|
||||
if (itemsWithMinimal.value.length === 1) {
|
||||
return 'text-lg font-medium'
|
||||
}
|
||||
return 'text-sm'
|
||||
}
|
||||
|
||||
const handlePrint = () => {
|
||||
window.print()
|
||||
}
|
||||
|
||||
// Format number helper
|
||||
const formatNumber = (number) => {
|
||||
if (!number) return 0
|
||||
return parseFloat(number).toLocaleString('id-ID')
|
||||
@ -256,15 +260,20 @@ const formatNumber = (number) => {
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.fixed {
|
||||
position: static !important;
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bg-black\/75 {
|
||||
background: none !important;
|
||||
.print-area, .print-area * {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
button {
|
||||
.print-area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0.5);
|
||||
transform-origin: top left;
|
||||
}
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<mainLayout>
|
||||
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
|
||||
<!-- Modal Buat Item -->
|
||||
<CreateItemModal :isOpen="openItemModal" :product="createdProduct" @close="closeItemModal" />
|
||||
|
||||
<div class="p-6">
|
||||
<p class="font-serif italic text-[25px] text-D">Produk Baru</p>
|
||||
|
||||
@ -11,9 +12,7 @@
|
||||
<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" @input="errors.nama = null" />
|
||||
<p v-if="errors.nama" class="text-sm text-red-500 mt-1">
|
||||
{{ errors.nama[0] }}
|
||||
</p>
|
||||
<p v-if="errors.nama" class="text-sm text-red-500 mt-1">{{ errors.nama[0] }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
@ -36,12 +35,13 @@
|
||||
<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" />
|
||||
<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" />
|
||||
<InputField v-model="form.harga_jual" type="number" step="0.01"
|
||||
placeholder="Masukkan harga jual" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,13 +50,11 @@
|
||||
<div class="flex-1">
|
||||
<label class="block text-D mb-1">Foto</label>
|
||||
|
||||
<!-- Image Grid -->
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="grid grid-cols-3 gap-3 relative">
|
||||
<!-- Uploaded 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" />
|
||||
<!-- Delete Button -->
|
||||
<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">
|
||||
×
|
||||
@ -65,13 +63,11 @@
|
||||
</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 v-if="uploadedImages.length < 6" class="relative aspect-square">
|
||||
<div @drop="handleDrop" @dragover.prevent @dragenter.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false" @click="toggleUploadMenu"
|
||||
class="w-full h-full 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">
|
||||
@ -92,13 +88,44 @@
|
||||
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
<div v-if="showUploadMenu"
|
||||
class="absolute top-full left-0 mt-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-20">
|
||||
<button @click="triggerFileUpload"
|
||||
class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100">
|
||||
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900">Upload dari File</div>
|
||||
<div class="text-sm text-gray-500">Pilih foto dari galeri</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button @click="openCameraModal"
|
||||
class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900">Ambil dari Kamera</div>
|
||||
<div class="text-sm text-gray-500">Foto langsung dengan kamera</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
|
||||
class="hidden" />
|
||||
<!-- Hidden File Input -->
|
||||
<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>
|
||||
@ -117,6 +144,21 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay -->
|
||||
<div v-if="showUploadMenu" @click="showUploadMenu = false" class="fixed inset-0 z-10"></div>
|
||||
|
||||
<!-- Camera Modal -->
|
||||
<div v-if="showCamera" class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
|
||||
<div class="bg-white w-[480px] rounded-lg shadow-lg p-4 relative">
|
||||
<video ref="video" autoplay playsinline class="w-full h-64 bg-black rounded"></video>
|
||||
<canvas ref="canvas" class="hidden"></canvas>
|
||||
<div class="mt-3 flex justify-between">
|
||||
<button @click="closeCamera" class="px-4 py-2 bg-gray-400 text-white rounded">Batal</button>
|
||||
<button @click="capturePhoto" class="px-4 py-2 bg-blue-500 text-white rounded">Ambil Foto</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
|
||||
@ -129,55 +171,32 @@ import InputField from "../components/InputField.vue";
|
||||
import InputSelect from "../components/InputSelect.vue";
|
||||
import CreateItemModal from "../components/CreateItemModal.vue";
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
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([]);
|
||||
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/kategori', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
category.value = response.data.map(cat => ({
|
||||
value: cat.id,
|
||||
label: cat.nama
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading categories:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const showUploadMenu = ref(false);
|
||||
const fileInput = ref(null);
|
||||
const loading = ref(false);
|
||||
const uploadLoading = ref(false);
|
||||
const uploadedImages = ref([]);
|
||||
const isDragging = ref(false);
|
||||
const uploadError = ref('');
|
||||
const fileInput = ref(null);
|
||||
const errors = ref({});
|
||||
const openItemModal = ref(false);
|
||||
const createdProduct = ref(null);
|
||||
|
||||
// Camera states
|
||||
const showCamera = ref(false);
|
||||
const video = ref(null);
|
||||
const canvas = ref(null);
|
||||
let stream = null;
|
||||
|
||||
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 &&
|
||||
uploadedImages.value.length > 0;
|
||||
});
|
||||
|
||||
@ -189,43 +208,42 @@ const calculateHargaJual = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadFoto = async () => {
|
||||
loading.value = true;
|
||||
const loadKategori = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/kategori', {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
category.value = response.data.map(cat => ({ value: cat.id, label: cat.nama }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading categories:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadFoto = async () => {
|
||||
try {
|
||||
const response = await axios.get(`/api/foto`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
uploadedImages.value = response.data;
|
||||
console.log(uploadedImages.value);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
||||
uploadError.value = "Gagal memuat foto";
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const openCreateItemModal = (product) => {
|
||||
createdProduct.value = product;
|
||||
openItemModal.value = true;
|
||||
};
|
||||
|
||||
const closeItemModal = () => {
|
||||
openItemModal.value = false;
|
||||
createdProduct.value = null;
|
||||
resetForm();
|
||||
router.replace('/produk');
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
const toggleUploadMenu = () => {
|
||||
if (!uploadLoading.value && uploadedImages.value.length < 6) {
|
||||
fileInput.value?.click();
|
||||
showUploadMenu.value = !showUploadMenu.value;
|
||||
}
|
||||
};
|
||||
|
||||
const triggerFileUpload = () => {
|
||||
showUploadMenu.value = false;
|
||||
fileInput.value?.click();
|
||||
};
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
uploadFiles(files);
|
||||
@ -234,62 +252,36 @@ const handleFileSelect = (event) => {
|
||||
const handleDrop = (event) => {
|
||||
event.preventDefault();
|
||||
isDragging.value = false;
|
||||
|
||||
if (uploadLoading.value || uploadedImages.value.length >= 6) return;
|
||||
|
||||
const files = Array.from(event.dataTransfer.files);
|
||||
uploadFiles(files);
|
||||
};
|
||||
|
||||
const uploadFiles = async (files) => {
|
||||
uploadError.value = '';
|
||||
|
||||
if (uploadedImages.value.length + files.length > 6) {
|
||||
uploadError.value = 'Maksimal 6 foto yang dapat diupload';
|
||||
return;
|
||||
}
|
||||
|
||||
const validFiles = files.filter(file => {
|
||||
const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
|
||||
const isValidSize = file.size <= 2 * 1024 * 1024;
|
||||
|
||||
if (!isValidType) {
|
||||
uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isValidSize) {
|
||||
uploadError.value = 'Ukuran file maksimal 2MB';
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isValidType) { uploadError.value = 'Format file harus JPG, JPEG, atau PNG'; return false; }
|
||||
if (!isValidSize) { uploadError.value = 'Ukuran file maksimal 2MB'; return false; }
|
||||
return true;
|
||||
});
|
||||
|
||||
if (validFiles.length === 0) return;
|
||||
|
||||
uploadLoading.value = true;
|
||||
|
||||
try {
|
||||
for (const file of validFiles) {
|
||||
const formData = new FormData();
|
||||
formData.append('foto', file);
|
||||
|
||||
const response = await axios.post('/api/foto', formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
'Content-Type': 'multipart/form-data',
|
||||
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
|
||||
uploadedImages.value.push(response.data);
|
||||
}
|
||||
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
if (fileInput.value) fileInput.value.value = '';
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
|
||||
@ -301,9 +293,7 @@ const uploadFiles = async (files) => {
|
||||
const removeImage = async (id) => {
|
||||
try {
|
||||
await axios.delete(`/api/foto/${id}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
|
||||
} catch {
|
||||
@ -311,42 +301,56 @@ const removeImage = async (id) => {
|
||||
}
|
||||
};
|
||||
|
||||
// CAMERA FUNCTIONS
|
||||
const openCameraModal = async () => {
|
||||
showUploadMenu.value = false;
|
||||
showCamera.value = true;
|
||||
try {
|
||||
stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
video.value.srcObject = stream;
|
||||
} catch (err) {
|
||||
console.error("Gagal akses kamera:", err);
|
||||
alert("Tidak bisa mengakses kamera, cek izin browser!");
|
||||
closeCamera();
|
||||
}
|
||||
};
|
||||
|
||||
const closeCamera = () => {
|
||||
showCamera.value = false;
|
||||
if (stream) {
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
stream = null;
|
||||
}
|
||||
};
|
||||
|
||||
const capturePhoto = () => {
|
||||
const ctx = canvas.value.getContext("2d");
|
||||
canvas.value.width = video.value.videoWidth;
|
||||
canvas.value.height = video.value.videoHeight;
|
||||
ctx.drawImage(video.value, 0, 0);
|
||||
canvas.value.toBlob(async (blob) => {
|
||||
if (!blob) return;
|
||||
await uploadFiles([new File([blob], "camera_photo.png", { type: "image/png" })]);
|
||||
closeCamera();
|
||||
}, "image/png");
|
||||
};
|
||||
|
||||
const submitForm = async (addItem) => {
|
||||
if (!isFormValid.value) {
|
||||
alert('Mohon lengkapi semua field yang diperlukan');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const response = await axios.post('/api/produk', form.value,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const response = await axios.post('/api/produk', form.value, {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
});
|
||||
const createdProductData = response.data.data;
|
||||
|
||||
// Reset form
|
||||
form.value = {
|
||||
nama: '',
|
||||
id_kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
};
|
||||
|
||||
form.value = { nama: '', id_kategori: '', berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0 };
|
||||
uploadedImages.value = [];
|
||||
uploadError.value = '';
|
||||
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
|
||||
showUploadMenu.value = false;
|
||||
if (fileInput.value) fileInput.value.value = '';
|
||||
if (addItem) {
|
||||
openCreateItemModal(createdProductData);
|
||||
} else {
|
||||
@ -354,51 +358,19 @@ const submitForm = async (addItem) => {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Submit error:', error);
|
||||
|
||||
if (error.response?.status === 422 && error.response.data?.errors) {
|
||||
// 🔥 simpan error validasi dari backend
|
||||
errors.value = error.response.data.errors;
|
||||
if (error.response?.status === 422) {
|
||||
errors.value = error.response.data.errors || {};
|
||||
} else {
|
||||
uploadError.value = error.response?.data?.message || 'Gagal menyimpan produk';
|
||||
errors.value = { general: "Terjadi kesalahan saat menyimpan produk" };
|
||||
}
|
||||
}
|
||||
finally {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = async () => {
|
||||
form.value = {
|
||||
nama: '',
|
||||
id_kategori: '',
|
||||
berat: 0,
|
||||
kadar: 0,
|
||||
harga_per_gram: 0,
|
||||
harga_jual: 0,
|
||||
};
|
||||
try {
|
||||
await axios.delete(`/api/foto/reset/${userId.value}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
});
|
||||
uploadedImages.value = [];
|
||||
} catch (error) {
|
||||
console.error('Error resetting photos:', error);
|
||||
}
|
||||
uploadError.value = '';
|
||||
if (fileInput.value) {
|
||||
fileInput.value.value = '';
|
||||
}
|
||||
};
|
||||
const back = () => { router.push('/produk'); };
|
||||
const openCreateItemModal = (product) => { createdProduct.value = product; openItemModal.value = true; };
|
||||
const closeItemModal = () => { openItemModal.value = false; createdProduct.value = null; };
|
||||
|
||||
const back = () => {
|
||||
resetForm();
|
||||
window.history.back();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadFoto();
|
||||
loadKategori();
|
||||
});
|
||||
onMounted(() => { loadFoto(); loadKategori(); });
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user