From e34edf2b47555fccabcdcc51098d03cb55d903c2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 11 Apr 2024 11:01:02 +0700
Subject: [PATCH] =?UTF-8?q?=20=E0=B8=A2=E0=B8=B8=E0=B8=97=E0=B8=98?=
 =?UTF-8?q?=E0=B8=A8=E0=B8=B2=E0=B8=AA=E0=B8=95=E0=B8=A3=E0=B9=8C=20=3D>?=
 =?UTF-8?q?=20Tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/views/Strategic.vue        | 273 +++++++++++++++---
 1 file changed, 235 insertions(+), 38 deletions(-)

diff --git a/src/modules/15_development/views/Strategic.vue b/src/modules/15_development/views/Strategic.vue
index 8b92734c9..f2b84560f 100644
--- a/src/modules/15_development/views/Strategic.vue
+++ b/src/modules/15_development/views/Strategic.vue
@@ -1,57 +1,57 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogConfirm, dialogRemove } =
+  useCounterMixin();
+
+const ListMenu = ref<any>([
+  {
+    label: "เพิ่ม",
+    icon: "add",
+    type: "ADD",
+    color: "primary",
+  },
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+]);
 
 const nodes = ref<any>([
   {
     orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
+    level: "0",
     children: [
       {
         orgTreeName: "ยุทธศาสตร์ที่ 1",
+        level: "1",
         children: [
           {
             orgTreeName: "ยุทธศาสตร์ที่ 2",
+            level: "2",
             children: [
               {
                 orgTreeName: "ยุทธศาสตร์ที่ 3",
-                children: [
-                  {
-                    orgTreeName: "ยุทธศาสตร์ที่ 4",
-                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-                  },
-                ],
+                level: "3",
               },
             ],
           },
         ],
       },
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        children: [
-          {
-            orgTreeName: "ยุทธศาสตร์ที่ 2",
-            children: [
-              {
-                orgTreeName: "ยุทธศาสตร์ที่ 3",
-                children: [
-                  {
-                    orgTreeName: "ยุทธศาสตร์ที่ 4",
-                    children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
-    children: [
-      {
-        orgTreeName: "ยุทธศาสตร์ที่ 1",
-        children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
-      },
     ],
   },
 ]);
@@ -62,16 +62,103 @@ const expanded = ref<Array<any>>([]);
 const nodeId = ref<string>("");
 
 function updateSelected(data: any) {
-  console.log(data);
   nodeId.value = data.orgTreeName;
 }
+
+function onClickAction(type: string, data: any = null) {
+  switch (type) {
+    case "ADD":
+      onClickOpenDialog(false, data);
+      break;
+    case "EDIT":
+      onClickOpenDialog(true, data);
+      break;
+    case "DEL":
+      onDelete();
+      break;
+    default:
+      break;
+  }
+}
+
+const modalDialog = ref<boolean>(false);
+const statusEdit = ref<boolean>(false);
+const strategicName = ref<string>("");
+const titleDialog = ref<string>("");
+function onClickOpenDialog(status: boolean = false, data: any = null) {
+  statusEdit.value = status;
+  // if (data) {
+  //   titleDialog.value =
+  //     data.level === "0"
+  //       ? "ยุทธศาสตร์ที่ 1"
+  //       : data.level === "1"
+  //       ? "ยุทธศาสตร์ย่อย"
+  //       : data.level === "2"
+  //       ? ""
+  //       : data.level === "3"
+  //       ? ""
+  //       : "";
+  // } else {
+  //   titleDialog.value = "ยุทธศาสตร์/แผน";
+  // }
+
+  if (status) {
+    strategicName.value = data.orgTreeName;
+    titleDialog.value =
+      data.level === "0"
+        ? "ยุทธศาสตร์"
+        : data.level === "1"
+        ? "ยุทธศาสตร์ที่ 1"
+        : data.level === "2"
+        ? "ยุทธศาสตร์ย่อย"
+        : data.level === "3"
+        ? "กลยุทธ์ที่/เป้าประสงค์ที่"
+        : "";
+  } else {
+    if (data) {
+      titleDialog.value =
+        data.level === "0"
+          ? "ยุทธศาสตร์ 1"
+          : data.level === "1"
+          ? "ยุทธศาสตร์ย่อย"
+          : data.level === "2"
+          ? "กลยุทธ์ที่/เป้าประสงค์ที่"
+          : "";
+    } else {
+      titleDialog.value = "ยุทธศาสตร์";
+    }
+  }
+  modalDialog.value = true;
+}
+
+function closeDialog() {
+  modalDialog.value = false;
+  strategicName.value = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+}
+
+function onDelete() {
+  dialogRemove($q, () => {});
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm q-pl-sm">
       <q-toolbar class="text-primary">
-        <q-btn dense flat round color="primary" icon="add">
+        <q-btn
+          dense
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="onClickAction('ADD')"
+        >
           <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
         </q-btn>
 
@@ -102,8 +189,8 @@ function updateSelected(data: any) {
       <template v-slot:default-header="prop">
         <q-item
           clickable
+          @click.stop
           :active="nodeId == prop.node.orgTreeName"
-          @click.stop="updateSelected(prop.node)"
           active-class="my-list-link text-primary text-weight-medium"
           class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
         >
@@ -112,10 +199,120 @@ function updateSelected(data: any) {
               {{ prop.node.orgTreeName }}
             </div>
           </div>
+          <q-btn
+            flat
+            dense
+            icon="mdi-dots-vertical"
+            class="q-ml-xs"
+            color="grey-13"
+            size="12px"
+            round
+          >
+            <q-menu>
+              <q-list
+                dense
+                v-for="(item, index) in prop.node.level !== '3'
+                  ? ListMenu
+                  : ListMenu.slice(1, 4)"
+                :key="index"
+                style="min-width: 100px"
+              >
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click.stop="onClickAction(item.type, prop.node)"
+                >
+                  <q-item-section avatar style="min-width: 20px">
+                    <q-icon size="17px" :color="item.color" :name="item.icon" />
+                  </q-item-section>
+
+                  <div v-if="item.type === 'ADD'">
+                    <q-item-section v-if="prop.node.level === '0'">
+                      {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '1'">
+                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '2'">
+                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </div>
+
+                  <div v-else-if="item.type === 'EDIT'">
+                    <q-item-section v-if="prop.node.level === '0'">
+                      {{ `${item.label}ยุทธศาสตร์` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '1'">
+                      {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '2'">
+                      {{ `${item.label}ยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === '3'">
+                      {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </div>
+
+                  <div v-else>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </div>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </q-item>
       </template>
     </q-tree>
   </q-card>
+
+  <q-dialog v-model="modalDialog" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            statusEdit ? `แก้ไข${titleDialog}` : `เพิ่ม${titleDialog}`
+          }`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pt-none">
+          <div class="row q-pa-md">
+            <div class="col">
+              <q-input
+                dense
+                outlined
+                v-model="strategicName"
+                label="ชื่อยุทธศาสตร์"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val:string) =>
+                    !!val || `${'กรุณากรอกชื่อยุทธศาสตร์'}`,
+      
+                ]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>