From 97a2b1e038d4efc58230542685ab220e8552df94 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 11 Apr 2024 17:32:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=3D>=20=20=E0=B8=A5=E0=B8=B1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A9=E0=B8=93=E0=B8=B0=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectDetail.vue              | 121 +++++++++++++++++-
 1 file changed, 119 insertions(+), 2 deletions(-)

diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index 2d49fca57..b4bc80565 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -66,6 +66,38 @@ const formData = reactive<FormProjectDetail>({
   developmentProjectTechniqueActuals: [],
 });
 
+const nodes = ref<any>([
+  {
+    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+    level: "0",
+    children: [
+      {
+        orgTreeName: "ยุทธศาสตร์ที่ 1",
+        level: "1",
+        children: [
+          {
+            orgTreeName: "ยุทธศาสตร์ที่ 2",
+            level: "2",
+            children: [
+              {
+                orgTreeName: "ยุทธศาสตร์ที่ 3",
+                level: "3",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]);
+const filter = ref<string>("");
+const filter2 = ref<string>("");
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<any>>([]);
+const expanded2 = ref<Array<any>>([]);
+const nodeId = ref<string>("");
+const nodeId2 = ref<string>("");
 async function fetchData() {
   showLoader();
   await http
@@ -115,6 +147,14 @@ async function onSubmit() {
   });
 }
 
+function updateSelected(data: any, type: string) {
+  if (type === "1") {
+    nodeId.value = data.orgTreeName;
+  } else if (type === "2") {
+    nodeId2.value = data.orgTreeName;
+  }
+}
+
 onMounted(() => {
   fetchData();
 });
@@ -311,8 +351,85 @@ onMounted(() => {
 
     <q-separator />
     <div class="row">
-      <div class="col-6 q-pa-md">เลือกยุทธศาสตร์ 1</div>
-      <div class="col-6 q-pa-md">เลือกยุทธศาสตร์ 2</div>
+      <div class="col-6 q-pa-md">
+        <q-input dense outlined v-model="filter" label="ค้นหา">
+          <template v-slot:append>
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="filter = ''"
+            />
+            <q-icon v-else name="search" color="grey-5" />
+          </template>
+        </q-input>
+        <q-tree
+          dense
+          :nodes="nodes"
+          selected-color="primary"
+          node-key="orgTreeName"
+          label-key="orgTreeName"
+          :filter="filter"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              @click.stop="updateSelected(prop.node, '1')"
+              :active="nodeId == prop.node.orgTreeName"
+              active-class="my-list-link text-white text-weight-medium bg-primary"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+      <div class="col-6 q-pa-md">
+        <q-input dense outlined v-model="filter2" label="ค้นหา">
+          <template v-slot:append>
+            <q-icon
+              v-if="filter2 !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="filter2 = ''"
+            />
+            <q-icon v-else name="search" color="grey-5" />
+          </template>
+        </q-input>
+        <q-tree
+          dense
+          :nodes="nodes"
+          node-key="orgTreeName"
+          label-key="orgTreeName"
+          :filter="filter2"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          v-model:expanded="expanded2"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              @click.stop="updateSelected(prop.node, '2')"
+              :active="nodeId2 == prop.node.orgTreeName"
+              active-class="my-list-link text-white text-weight-medium bg-primary"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
     </div>
     <q-separator />
     <div class="text-right q-pa-sm">