From 772ee9cd0e9e37e811e6693e5f66b0a84e4b22c1 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Thu, 29 Jun 2023 14:04:50 +0700
Subject: [PATCH] add delete button

---
 .../components/OrderPlacement/step/step03.vue | 123 +++++++++++-------
 1 file changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 802561d14..dd876b604 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -69,46 +69,70 @@
         :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >
-        <template v-slot:body-cell="props">
-          <q-td :props="props">
-            <div v-if="props.col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="props.col.name == 'notification'">
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else-if="col.name == 'notification'">
+                <q-select
+                  :class="getClass(true)"
+                  hide-bottom-space
+                  multiple
+                  :outlined="true"
+                  dense
+                  use-chips
+                  lazy-rules
+                  :readonly="!true"
+                  :borderless="!true"
+                  v-model="col.value"
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
+                  :label="`${'เลือกช่องทาง'}`"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="notificationOption"
+                  option-value="id"
+                  input-debounce="0"
+                  color="primary"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-black">
+                        ไม่พบข้อมูลที่ค้นหา
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+
+              <div v-else @click="click(props)">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td>
+              <q-btn
                 dense
-                use-chips
-                lazy-rules
-                :readonly="!true"
-                :borderless="!true"
-                v-model="props.value"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
-                :label="`${'เลือกช่องทาง'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="notificationOption"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
               >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div v-else @click="click(props)">
-              {{ props.value }}
-            </div>
-          </q-td>
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
         </template>
         <template v-slot:pagination="scope">
           <q-pagination
@@ -126,14 +150,15 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn 
-        dense 
-        outline 
-        color="primary" 
-        icon="chevron_left" 
-        @click="previous" 
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
         class="q-pr-md"
-        label="เลือกรายชื่อ">
+        label="เลือกรายชื่อ"
+      >
       </q-btn>
       <q-btn
         dense
@@ -142,12 +167,12 @@
         color="public"
         @click="next"
         class="q-px-md"
-      ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
+        ><!-- icon="mdi-content-save-outline"
+          <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
+          <q-tooltip>ต่อไป</q-tooltip>
+        </q-btn> -->
     </div>
   </div>
 </template>