From 0db522d0db1bc8dd2012c1f8e35c7bac79424ba9 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 30 Jan 2024 16:44:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogFormPosition.vue         | 114 +++++++++---------
 1 file changed, 58 insertions(+), 56 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 2e42c936f..00dfc4cdc 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -306,16 +306,21 @@ watch(
     }
   }
 );
-watch(
-  () => selected.value,
-  () => {
-    if (selected.value.length > 0) {
-      rows.value = selected.value;
-    } else {
-      rows.value = [];
-    }
+
+function addPosition(data: RowDetailPositions) {
+  const isIdExist = rows.value.some(item => item.positionId === data.positionId);
+
+  if (!isIdExist) {
+    rows.value = [data, ...rows.value];
   }
-);
+}
+
+
+function deleteData(id:string){
+  const dataRow = rows.value
+  const updatedRows = dataRow.filter((item: any) => item.positionId !== id);
+  rows.value = updatedRows;
+}
 </script>
 <template>
   <template>
@@ -412,6 +417,7 @@ watch(
                                 col.label
                               }}</span>
                             </q-th>
+                            <q-th auto-width></q-th>
                           </q-tr>
                         </template>
                         <template v-slot:body="props">
@@ -428,6 +434,18 @@ watch(
                                 {{ col.value }}
                               </div>
                             </q-td>
+                            <q-td auto-width>
+                              <q-btn
+                                flat
+                                dense
+                                icon="mdi-delete"
+                                class="q-pa-none q-ml-xs"
+                                color="red"
+                                @click="deleteData(props.row.positionId)"
+                              >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            </q-btn>
+                            </q-td>
                           </q-tr>
                         </template>
                       </d-table>
@@ -518,27 +536,9 @@ watch(
                       dense
                       class="custom-header-table"
                       :visible-columns="visibleColumns"
-                      selection="multiple"
-                      v-model:selected="selected"
                     >
-                      <template v-slot:header-selection="scope">
-                        <q-checkbox
-                          keep-color
-                          color="primary"
-                          dense
-                          v-model="scope.checkBox"
-                        />
-                      </template>
                       <template v-slot:header="props">
                         <q-tr :props="props">
-                          <q-th class="text-center">
-                            <q-checkbox
-                              keep-color
-                              color="primary"
-                              dense
-                              v-model="props.selected"
-                            />
-                          </q-th>
                           <q-th
                             v-for="col in props.cols"
                             :key="col.name"
@@ -554,28 +554,15 @@ watch(
                       </template>
                       <template v-slot:body="props">
                         <q-tr :props="props" class="cursor-pointer">
-                          <td class="text-center">
-                            <q-checkbox
-                              keep-color
-                              color="primary"
-                              dense
-                              v-model="props.selected"
-                            />
-                          </td>
                           <q-td
                             v-for="col in props.cols"
                             :key="col.name"
                             :props="props"
+                            @click="addPosition(props.row)"
                           >
                             <div v-if="col.name == 'no'">
                               {{ props.rowIndex + 1 }}
                             </div>
-                            <div v-if="col.name === 'fullName'">
-                              {{ props.prefix }}
-                            </div>
-                            <div v-else-if="col.name === 'salary'">
-                              {{ props.row.salary.toLocaleString() }}
-                            </div>
                             <div v-else>
                               {{ col.value }}
                             </div>
@@ -661,33 +648,48 @@ watch(
                       />
                     </div>
                     <div class="col-6">
-                      <q-input
-                        v-model="formPositionSelect.positionType"
+                      <q-select
                         :class="inputEdit(isReadonly)"
-                        dense
-                        outlined
-                        for="#positionType"
                         label="ประเภทตำแหน่ง"
+                        v-model="formPositionSelect.positionType"
+                        :options="typeOps"
+                        emit-value
+                        dense
+                        @update:model-value="updateSelect"
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
                       />
                     </div>
                     <div class="col-6">
-                      <q-input
-                        v-model="formPositionSelect.positionLevel"
+                      <q-select
                         :class="inputEdit(isReadonly)"
-                        dense
-                        outlined
-                        for="#positionLevel"
                         label="ระดับตำแหน่ง"
+                        v-model="formPositionSelect.positionLevel"
+                        :options="typeOps"
+                        emit-value
+                        dense
+                        @update:model-value="updateSelect"
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
                       />
                     </div>
                     <div class="col-6">
-                      <q-input
-                        v-model="formPositionSelect.positionExecutive"
+                      <q-select
                         :class="inputEdit(isReadonly)"
-                        dense
-                        outlined
-                        for="#positionExecutive"
                         label="ตำแหน่งทางการบริหาร"
+                        v-model="formPositionSelect.positionExecutive"
+                        :options="typeOps"
+                        emit-value
+                        dense
+                        @update:model-value="updateSelect"
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
                       />
                     </div>
                     <div class="col-6">