From 407020ecb3e4b50add6783d86cd67b6e8f4f5164 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 29 Jan 2026 16:37:51 +0800 Subject: [PATCH] feat:update select color, and gsc --- .../form/product/create-product-form.tsx | 33 ++++++++++++------- .../form/product/detail-product-form.tsx | 4 +-- .../form/product/update-product-form.tsx | 33 ++++++++++++------- public/google162462b69256f396.html | 1 + public/googlede15e50f58ee7487.html | 1 - 5 files changed, 45 insertions(+), 27 deletions(-) create mode 100644 public/google162462b69256f396.html delete mode 100644 public/googlede15e50f58ee7487.html diff --git a/components/form/product/create-product-form.tsx b/components/form/product/create-product-form.tsx index 75dfe00..8a55995 100644 --- a/components/form/product/create-product-form.tsx +++ b/components/form/product/create-product-form.tsx @@ -37,7 +37,7 @@ export default function AddProductForm() { { id: number; name: string; file: File | null }[] >([{ id: 1, name: "", file: null }]); - const [selectedColor, setSelectedColor] = useState(null); + // const [selectedColor, setSelectedColor] = useState(null); const [specs, setSpecs] = useState< { id: number; title: string; images: string[]; files: File[] }[] >([{ id: 1, title: "", images: [], files: [] }]); @@ -234,7 +234,9 @@ export default function AddProductForm() {
- + {errors.name && (

@@ -244,7 +246,9 @@ export default function AddProductForm() {

- +
- + - + {colors.map((color, index) => (
{ const updated = [...colors]; - updated[index].name = colorCode; // 🔥 INI KUNCINYA + updated[index].name = colorCode; setColors(updated); - setSelectedColor(colorCode); }} - className={`w-8 h-8 rounded-full border-2 transition ${ - selectedColor === colorCode - ? "border-teal-700 scale-110" - : "border-gray-200" - }`} + className={`w-8 h-8 rounded-full border-2 transition + ${ + colors[index].name === colorCode + ? "border-teal-700 scale-110" + : "border-gray-200" + } + `} style={{ backgroundColor: colorCode }} /> ))} diff --git a/components/form/product/detail-product-form.tsx b/components/form/product/detail-product-form.tsx index b6f609c..64a2a9d 100644 --- a/components/form/product/detail-product-form.tsx +++ b/components/form/product/detail-product-form.tsx @@ -536,7 +536,7 @@ export default function DetailProductForm(props: { isDetail: boolean }) { {/* Foto mobil */}
- {`warna-${index}`} - {`spec-${i}`}([]); @@ -43,6 +44,7 @@ export default function UpdateProductForm() { const [price, setPrice] = useState(""); const palette = [ + "#000000", "#1E4E52", "#597E8D", "#6B6B6B", @@ -78,6 +80,7 @@ export default function UpdateProductForm() { name: "", preview: "/car-default.png", colorSelected: null, + isImageChanged: false, // ✅ WAJIB }, ]); }; @@ -124,19 +127,19 @@ export default function UpdateProductForm() { // ===================== COLOR ===================== if (uploadTarget.type === "color") { if (uploadTarget.index === undefined) return; - const index = uploadTarget.index; setColors((prev) => { const updated = [...prev]; updated[index].preview = previewUrl; + updated[index].isImageChanged = true; // 🔥 PENTING return updated; }); setColorFiles((prev) => { - const newMap = new Map(prev); - newMap.set(index, file); - return newMap; + const map = new Map(prev); + map.set(index, file); + return map; }); } @@ -185,8 +188,9 @@ export default function UpdateProductForm() { data.colors.map((color: any, index: number) => ({ id: index + 1, name: color.name || "", - preview: color.image_url || data.thumbnail_url || "", + preview: color.image_url || "", colorSelected: color.name || null, + isImageChanged: false, // 🔥 default })), ); } else { @@ -235,12 +239,18 @@ export default function UpdateProductForm() { })); formData.append("colors", JSON.stringify(colorsPayload)); - // Color images (only new files if uploaded) - // Append files in order of color indices - colors.forEach((_, index) => { - const file = colorFiles.get(index); - if (file) { - formData.append("color_images", file); + colors.forEach((color, index) => { + if (color.isImageChanged) { + // image diganti → kirim file baru + const file = colorFiles.get(index); + if (file) { + formData.append("color_images", file); + } else { + formData.append("color_images", new Blob([])); // safety + } + } else { + // image tidak diganti → kirim placeholder + formData.append("color_images", new Blob([])); } }); @@ -473,7 +483,6 @@ export default function UpdateProductForm() { className="rounded-lg border object-cover" /> - {/* 🔴 TOMBOL HAPUS GAMBAR */}