From 709eb768733767eb0990dbc5323e8081f36a8064 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 9 Jul 2026 15:50:14 +0700
Subject: [PATCH] feat: implement unique material variant initialization in
 QuickCreateProductModal, enhancing product creation process by auto-filling
 variants based on selected materials

---
 .../cuttings/form/QuickCreateProductModal.vue | 81 ++++++++++++++-----
 1 file changed, 63 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/form/QuickCreateProductModal.vue b/resources/js/pages/admin/manage/cuttings/form/QuickCreateProductModal.vue
index 326de0f..2b22f6e 100644
--- a/resources/js/pages/admin/manage/cuttings/form/QuickCreateProductModal.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/QuickCreateProductModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Layers, Plus, Save } from '@lucide/vue';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import {
@@ -22,6 +22,17 @@ const props = defineProps<{
     selectedMaterials?: CuttingMaterialCartItem[];
 }>();
 
+const uniqueMaterialVariants = computed(() => {
+    if (!props.selectedMaterials) {
+        return [];
+    }
+    // Only use single (non-combination) materials for auto-fill
+    const names = props.selectedMaterials
+        .filter((m) => !m.combination_id)
+        .map((m) => m.variant.trim());
+    return [...new Set(names)].filter(Boolean);
+});
+
 const materialGroups = computed(() => {
     if (!props.selectedMaterials) {
         return [];
@@ -145,27 +156,61 @@ function toggleCategory(categoryId: number, checked: boolean) {
 
 const categoryError = computed(() => form.value.errors.category_ids ?? '');
 
+function initFromMaterials() {
+    const materialVariants = uniqueMaterialVariants.value;
+
+    if (materialVariants.length > 0) {
+        variants.value = materialVariants.map((variantName) => ({
+            client_id: createClientId(),
+            name: variantName,
+            stock: '0',
+            retail_stock: '0',
+            prices: {
+                distributor: '0',
+                agent: '0',
+                sub_agent: '0',
+                grosir: '0',
+                retail: '0',
+                tiktok: '0',
+                shopee: '0',
+                harga_modal: '0',
+            },
+            media: createMediaUploadState(),
+        }));
+    } else {
+        variants.value = [{
+            client_id: createClientId(),
+            name: '',
+            stock: '0',
+            retail_stock: '0',
+            prices: {
+                distributor: '0',
+                agent: '0',
+                sub_agent: '0',
+                grosir: '0',
+                retail: '0',
+                tiktok: '0',
+                shopee: '0',
+                harga_modal: '0',
+            },
+            media: createMediaUploadState(),
+        }];
+    }
+}
+
 function resetForm() {
     form.value = { name: '', description: '', category_ids: [], errors: {} };
-    variants.value = [{
-        client_id: createClientId(),
-        name: '',
-        stock: '0',
-        retail_stock: '0',
-        prices: {
-            distributor: '0',
-            agent: '0',
-            sub_agent: '0',
-            grosir: '0',
-            retail: '0',
-            tiktok: '0',
-            shopee: '0',
-            harga_modal: '0',
-        },
-        media: createMediaUploadState(),
-    }];
+    initFromMaterials();
 }
 
+watch(open, (value) => {
+    if (value) {
+        initFromMaterials();
+    } else {
+        resetForm();
+    }
+});
+
 function buildFormData(): FormData {
     const formData = new FormData();