From 47909bf034cd3261bc3d91943818eb95d5a9e2e1 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 21 Jul 2023 11:41:53 +0700
Subject: [PATCH] update filter tree selected

---
 .../components/PersonalList/OrgTree.vue       | 326 +++++++++---------
 1 file changed, 170 insertions(+), 156 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 141f3cc5a..5d2f99365 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -123,8 +123,9 @@ const myFilterMethod = (node: any, filter: string) => {
   const filt = filter;
 
   return (
-    ((node.name && node.name == null) || !node.name) &&
-    ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+    // ((node.name && node.name == null) || !node.name) &&
+    (node.name && node.name.indexOf(filt) > -1) ||
+    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
       (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
       (node.positionName && node.positionName.indexOf(filt) > -1) ||
       (node.governmentCode &&
@@ -139,7 +140,7 @@ const myFilterMethod = (node: any, filter: string) => {
       (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
       (node.executivePositionSide &&
         node.executivePositionSide.indexOf(filt) > -1) ||
-      (node.positionLevel && node.positionLevel.indexOf(filt) > -1))
+    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
   );
 };
 
@@ -354,6 +355,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionTypeId = "";
   }
 };
+
 const checkPosition = (val: string) => {
   const num = placementPosition.value.findIndex((e: string) => e === val);
   return num;
@@ -368,179 +370,191 @@ watch(props, () => {
     });
     console.log("personal", personal.value);
   }
-  if (personal.value.draft === false) {
-    const findData = dataRespone.value.find(findByPerson);
-    console.log(findData);
-    loadTreeData();
-    selectedPosition(findData.children.children.children)
+
+  // console.log("draft===>", personal.value.draft);
+
+  if (personal.value.draft === true) {
+    // const findData = dataRespone.value.find(findByPerson);
+    let findData: any = null;
+    dataRespone.value.map((x: any) => {
+      findData = findByPerson(x);
+      if (findData != null) {
+        console.log("findData===>", findData);
+        selectedPosition(findData)
+      }
+    })
+    // loadTreeData();
+    // selectedPosition(findData.children.children.children)
   }
 });
-const findByPerson = (obj: any) => {
-  if (
-    obj.positionLineId === personal.value.positionLineId &&
-    obj.positionTypeId === personal.value.positionTypeId &&
-    obj.positionNumId === personal.value.posNoId
+
+function findByPerson(element: any) {
+  // console.log("searchTree element===>", element)
+  if (element.positionNumId && element.positionLineId === personal.value.positionLineId &&
+    element.positionTypeId === personal.value.positionTypeId &&
+    element.positionNumId === personal.value.posNoId
   ) {
-    return true;
+    return element;
+  } else if (element.children) {
+    var i;
+    var result = null;
+    for (i = 0; result == null && i < element.children.length; i++) {
+      result = findByPerson(element.children[i]);
+    }
+    return result;
   }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.find(findByPerson);
-    return obj.children;
-  }
-  return false;
-};
+  return null;
+}
 </script>
 
 <template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
-      <q-form ref="myFormPosition">
-        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
+                                                        <q-dialog v-model="props.modal" persistent>
+                                                                          <q-card style="width: 900px; max-width: 80vw">
+                                                                        <q-form ref="myFormPosition">
+                                                                          <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+                                                                          <q-separator />
+                                                                          <q-card-section class="q-pa-sm bg-grey-1">
+                                                                            <div class="row col-12 q-col-gutter-sm">
+                                                                              <div class="col-xs-12 col-sm-7 row">
+                                                                                <q-card flat bordered class="fit q-pa-sm">
+                                                                                  <q-scroll-area visible style="height: 70vh">
+                                                                                    <q-input
+                                                                                      outlined
+                                                                                      dense
+                                                                                      ref="filterRef"
+                                                                                      v-model="search"
+                                                                                      placeholder="ค้นหา"
+                                                                                      class="q-mb-sm"
+                                                                                    >
+                                                                                      <template v-slot:append>
+                                                                                        <q-icon name="mdi-magnify" />
+                                                                                      </template>
+                                                                                    </q-input>
+                                                                                    <div class="q-pa-sm q-gutter-sm">
+                                                                                      <q-tree
+                                                                                        no-transition
+                                                                                        dense
+                                                                                        :nodes="treeData"
+                                                                                        node-key="keyId"
+                                                                                        :filter="search"
+                                                                                        :no-results-label="notFound"
+                                                                                        :no-nodes-label="noData"
+                                                                                        :filter-method="myFilterMethod"
+                                                                                      >
+                                                                                        <template v-slot:header-organization="prop">
+                                                                                          <div class="col">
+                                                                                            <div
+                                                                                              class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+                                                                                            >
+                                                                                              <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                                                                                              <div class="text-weight-medium">
+                                                                                                {{ prop.node.organizationName }}
+                                                                                              </div>
 
-                            <!--แสดง Total Count PositionNum-->
-                            <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                                                              <!--แสดง Total Count PositionNum-->
+                                                                                              <!-- <q-badge rounded color="grey-2" text-color="dark"
                                                             :label="prop.node.totalPositionCount" /> -->
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
+                                                                                              <q-badge
+                                                                                                v-if="prop.node.totalPositionVacant > 0"
+                                                                                                rounded
+                                                                                                color="red"
+                                                                                                outline
+                                                                                                :label="prop.node.totalPositionVacant"
+                                                                                              />
 
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
+                                                                                              <q-space />
+                                                                                            </div>
+                                                                                            <div class="col items-center q-px-xs q-pt-xs">
+                                                                                              <div class="text-weight-medium text-grey-7">
+                                                                                                {{ prop.node.governmentCode }}
+                                                                                                {{ prop.node.organizationShortName }}
+                                                                                              </div>
+                                                                                            </div>
+                                                                                          </div>
+                                                                                        </template>
 
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
+                                                                                        <template v-slot:header-person="prop">
+                                                                                          <q-item
+                                                                                            clickable
+                                                                                            :active="selected == prop.node.keyId"
+                                                                                            @click="selectedPosition(prop.node)"
+                                                                                            :disable="prop.node.name != null ||
+                                                                                              checkPosition(prop.node.positionNumId) != -1
+                                                                                              "
+                                                                                            active-class="my-list-link text-primary text-weight-medium"
+                                                                                            class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                                                                                          >
+                                                                                            <img
+                                                                                              v-if="prop.node.avatar == '' ||
+                                                                                                prop.node.avatar ==
+                                                                                                'https://cdn.quasar.dev/img/boy-avatar.png'
+                                                                                                "
+                                                                                              src="@/assets/avatar_user.jpg"
+                                                                                              class="col-xs-1 col-sm-2"
+                                                                                              style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
+                                                                                            />
+                                                                                            <img
+                                                                                              v-else
+                                                                                              :src="prop.node.avatar"
+                                                                                              class="col-xs-1 col-sm-2"
+                                                                                              style="
                               width: 28px;
                               height: 28px;
                               border-radius: 50%;
                             "
-                          />
-                          <!--=====ตำแหน่งว่าง สีแดง=====-->
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-                          <!--=====หัวหน้า สีเขียว=====-->
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--=====ลูกน้อง สีปกติ=====-->
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-                          <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
+                                                                                            />
+                                                                                            <!--=====ตำแหน่งว่าง สีแดง=====-->
+                                                                                            <div
+                                                                                              v-if="prop.node.name == null"
+                                                                                              class="q-px-sm text-weight-medium text-red"
+                                                                                            >
+                                                                                              ว่าง
+                                                                                            </div>
+                                                                                            <!--=====หัวหน้า สีเขียว=====-->
+                                                                                            <div v-else-if="prop.node.positionLeaderFlag">
+                                                                                              <div
+                                                                                                class="q-px-sm text-weight-medium text-primary"
+                                                                                              >
+                                                                                                {{ prop.node.name }}
+                                                                                              </div>
+                                                                                            </div>
+                                                                                            <!--=====ลูกน้อง สีปกติ=====-->
+                                                                                            <div v-else>
+                                                                                              <div class="q-px-sm text-weight-medium">
+                                                                                                {{ prop.node.name }}
+                                                                                              </div>
+                                                                                            </div>
+                                                                                            <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                                                                                            <div class="q-pr-sm">
+                                                                                              {{ prop.node.positionName }}
+                                                                                            </div>
+                                                                                            <div class="q-pr-sm">
+                                                                                              {{ prop.node.positionNum }}
+                                                                                            </div>
+                                                                                            <div class="q-pr-sm">
+                                                                                              {{ prop.node.positionLevel }}
+                                                                                            </div>
+                                                                                            <q-icon
+                                                                                              v-if="prop.node.positionLeaderFlag"
+                                                                                              class="q-mr-sm"
+                                                                                              size="15px"
+                                                                                              color="primary"
+                                                                                              name="mdi-bookmark"
+                                                                                            ></q-icon>
 
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
+                                                                                            <q-space />
+                                                                                          </q-item>
+                                                                                        </template>
+                                                                                      </q-tree>
+                                                                                    </div>
+                                                                                  </q-scroll-area>
+                                                                                </q-card>
+                                                                              </div>
+                                                                              <div class="col-xs-12 col-sm-5">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
                   <div class="row col-12 q-col-gutter-xs">