Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update EditProduk.vue

Browse Source
This commit is contained in:
timotiabbauftech 2025-10-16 14:13:32 +07:00
parent 70c1a7a0bf
commit 065c21e07c
1 changed files with 274 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
resources/js/pages/EditProduk.vue
View File

@ -54,9 +54,7 @@
<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
>
<label class="block text-D mb-1">Harga per Gram</label>
<InputField
v-model="form.harga_per_gram"
type="number"
@ -81,7 +79,7 @@
<div class="flex-1">
<label class="block text-D mb-1">Foto</label>
<div class="grid grid-cols-3 gap-3">
<div class="grid grid-cols-3 gap-3 relative">
<!-- Existing Images -->
<div
v-for="(image, index) in uploadedImages"
@ -110,12 +108,15 @@
<!-- Upload Button -->
<div
v-if="uploadedImages.length < 6"
class="relative aspect-square"
>
<div
@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"
@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,
@ -174,6 +175,72 @@
></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
@ -214,6 +281,43 @@
</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>
@ -225,7 +329,6 @@ import mainLayout from "../layouts/mainLayout.vue";
import InputField from "../components/InputField.vue";
import InputSelect from "../components/InputSelect.vue";
import CreateItemModal from "../components/CreateItemModal.vue";
import { errorMessages } from "@vue/compiler-core";
const route = useRoute();
const router = useRouter();
@ -248,6 +351,11 @@ const uploadLoading = ref(false);
const uploadError = ref("");
const isDragging = ref(false);
const fileInput = ref(null);
const showUploadMenu = ref(false);
const showCamera = ref(false);
const video = ref(null);
const canvas = ref(null);
let stream = null;
const openItemModal = ref(false);
const editedProduct = ref(null);
@ -272,23 +380,26 @@ const calculateHargaJual = () => {
};
const loadKategori = async () => {
try {
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 }));
} catch (error) {
console.error("Error loading categories:", error);
}
};
const loadProduk = async () => {
try {
const response = await axios.get(`/api/produk/edit/${productId}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
const produk = response.data;
// console.log(produk);
form.value = {
nama: produk.nama,
id_kategori: produk.id_kategori,
@ -297,6 +408,9 @@ const loadProduk = async () => {
harga_per_gram: produk.harga_per_gram,
harga_jual: produk.harga_jual,
};
} catch (error) {
console.error("Error loading product:", error);
}
};
const loadFoto = async () => {
@ -307,20 +421,23 @@ const loadFoto = async () => {
},
});
uploadedImages.value = response.data;
// console.log(uploadedImages.value);
} catch (e) {
console.error(e);
} catch (error) {
console.error("Error loading photos:", error);
uploadError.value = "Gagal memuat foto";
}
};
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 = (e) => {
const files = Array.from(e.target.files);
uploadFiles(files);
@ -336,53 +453,40 @@ const handleDrop = (e) => {
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;
}
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',
},
});
uploadedImages.value.push(response.data);
}
if (fileInput.value) {
fileInput.value.value = '';
}
} catch (error) {
console.error('Upload error:', error);
uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@ -404,21 +508,51 @@ const removeImage = async (id) => {
}
};
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 () => {
loading.value = true;
try {
await axios.put(
`/api/produk/${productId}`,form.value,
{
await axios.put(`/api/produk/${productId}`, form.value, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
});
router.push("/produk?message=Produk berhasil diperbarui");
} catch (err) {
errorMessages.value = err.response?.data?.message || "Gagal menyimpan produk";
console.error(err);
console.error("Submit error:", err);
uploadError.value = err.response?.data?.message || "Gagal menyimpan produk";
} finally {
loading.value = false;
}
@ -426,6 +560,7 @@ const submitForm = async () => {
const closeItemModal = () => {
openItemModal.value = false;
editedProduct.value = null;
};
const back = () => {
@ -435,7 +570,6 @@ const back = () => {
onMounted(async () => {
await loadKategori();
await loadProduk();
loadFoto();
await loadFoto();
});
</script>