From 9aba51db93b6a411a0cb9e9fe7c8f761b02969c2 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 9 Jul 2026 15:31:37 +0700
Subject: [PATCH] feat: add raw material selection dropdown to
 CuttingPosCombinationDialog, allowing users to filter materials and enhancing
 the search functionality

---
 .../form/CuttingPosCombinationDialog.vue      | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
index 40ba09e..3c99941 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
@@ -14,6 +14,13 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { Label } from '@/components/ui/label';
 import { apiFetch } from '@/lib/api';
 import draft_combinations from '@/routes/admin/manage/cuttings/draft_combinations';
@@ -50,19 +57,28 @@ const emit = defineEmits<{
 }>();
 
 const search = ref('');
+const selectedRawMaterialId = ref('all');
 const selectedMaterials = ref<SelectedMaterial[]>([]);
 const combinationResult = ref<string>('');
 const loading = ref(false);
+const selectPortalTarget = ref<HTMLElement>();
 
 const filteredRawMaterials = computed(() => {
     const keyword = search.value.trim().toLowerCase();
+    const rawMaterialId = selectedRawMaterialId.value;
     const catalog = props.rawMaterialCatalog;
 
-    if (!keyword) {
-        return catalog;
+    let items = catalog;
+    if (rawMaterialId !== 'all') {
+        const idNum = Number(rawMaterialId);
+        items = catalog.filter((rawMaterial) => rawMaterial.id === idNum);
     }
 
-    return catalog
+    if (!keyword) {
+        return items;
+    }
+
+    return items
         .map((rawMaterial) => {
             const matchingPrices = rawMaterial.prices.filter((price) =>
                 price.variant.toLowerCase().includes(keyword),
@@ -110,6 +126,7 @@ function removeSelected(priceId: number) {
 
 function resetForm() {
     search.value = '';
+    selectedRawMaterialId.value = 'all';
     selectedMaterials.value = [];
     combinationResult.value = '';
 }
@@ -218,10 +235,25 @@ watch(open, (value) => {
                         </div>
                     </div>
 
-                    <div class="relative">
-                        <Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-                        <Input v-model="search" placeholder="Cari bahan baku lain untuk dikombinasikan..."
-                            class="pl-9" />
+                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+                        <div class="relative flex-1">
+                            <Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                            <Input v-model="search" placeholder="Cari bahan baku lain untuk dikombinasikan..."
+                                class="pl-9" />
+                        </div>
+                        <div class="w-full sm:w-60">
+                            <Select v-model:model-value="selectedRawMaterialId">
+                                <SelectTrigger class="w-full">
+                                    <SelectValue placeholder="Semua Bahan Baku" />
+                                </SelectTrigger>
+                                <SelectContent :to="selectPortalTarget">
+                                    <SelectItem value="all">Semua Bahan Baku</SelectItem>
+                                    <SelectItem v-for="item in rawMaterialCatalog" :key="item.id" :value="String(item.id)">
+                                        {{ item.name }}
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
                     </div>
 
                     <div v-if="filteredRawMaterials.length === 0"
@@ -287,6 +319,7 @@ watch(open, (value) => {
                     </Button>
                 </div>
             </div>
+            <div ref="selectPortalTarget" class="contents"></div>
         </DialogContent>
     </Dialog>
 </template>