From 6e6e0d2cf9325c900b1b4a1f9f846e0179ee35b9 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 8 Feb 2024 12:10:34 +0700
Subject: [PATCH] update summary & layout

---
 .../components/listView.vue                   | 32 +++++++--
 .../components/mainTree.vue                   |  8 ++-
 .../components/tableTree.vue                  | 65 +++++++++++++++++--
 .../interface/index/organizational.ts         |  7 +-
 .../interface/response/organizational.ts      |  5 ++
 .../store/organizational.ts                   | 34 +++++++---
 6 files changed, 130 insertions(+), 21 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 78a34c112..61fdb52ad 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -167,6 +167,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <div class="col-12">
     <q-card bordered class="col-12 row caedNone">
@@ -208,19 +209,42 @@ watch(
                 class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
               >
                 <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                  <div class="ellipsis">
+                    ตำแหน่งทั้งหมด
+                  </div>
                   <q-space />
-                  <q-badge color="secondary" :label="store.sumPosition.total" />
+                  <q-badge
+                    color="secondary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.total
+                        : store.sumPosition.totalRoot
+                    "
+                  />
                 </div>
                 <div class="row col q-pa-sm item">
                   <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
                   <q-space />
-                  <q-badge color="primary" :label="store.sumPosition.use" />
+                  <q-badge
+                    color="primary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.use
+                        : store.sumPosition.useRoot
+                    "
+                  />
                 </div>
                 <div class="row col q-pa-sm item">
                   <div class="ellipsis">ตำแหน่งว่าง</div>
                   <q-space />
-                  <q-badge color="red" :label="store.sumPosition.vacant" />
+                  <q-badge
+                    color="red"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.vacant
+                        : store.sumPosition.vacantRoot
+                    "
+                  />
                 </div>
               </q-card>
 
diff --git a/src/modules/02_organizationalNew/components/mainTree.vue b/src/modules/02_organizationalNew/components/mainTree.vue
index d82a32bd8..09c97bb0c 100644
--- a/src/modules/02_organizationalNew/components/mainTree.vue
+++ b/src/modules/02_organizationalNew/components/mainTree.vue
@@ -111,8 +111,12 @@ function updateSelected(data: DataTree) {
     totalPositionCurrentVacant: data.totalPositionCurrentVacant,
     totalPositionNextUse: data.totalPositionNextUse,
     totalPositionNextVacant: data.totalPositionNextVacant,
+    totalRootPosition: data.totalRootPosition,
+    totalRootPositionCurrentUse: data.totalRootPositionCurrentUse,
+    totalRootPositionCurrentVacant: data.totalRootPositionCurrentVacant,
+    totalRootPositionNextUse: data.totalRootPositionNextUse,
+    totalRootPositionNextVacant: data.totalRootPositionNextVacant,
   });
-
   // }
 }
 
@@ -387,7 +391,7 @@ const modaeMenu = ref<boolean>(false);
           </q-input>
         </div>
       </div>
-      <div class="bg-white tree-container">
+      <div class="bg-white tree-container q-pa-xs">
         <q-tree
           class="q-pa-sm q-gutter-sm"
           dense
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index 0e8f237b9..da5885814 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -26,7 +26,7 @@ import { useOrganizational } from "@/modules/02_organizationalNew/store/organiza
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const stroe = useOrganizational();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
   useCounterMixin();
 
@@ -320,12 +320,37 @@ function openSelectPerson(data: DataPosition[]) {
   modalSelectPerson.value = true;
   dataDetailPos.value = data;
 }
+
+/** ลบคนครอง */
+function removePerson(data: DataPosition[]) {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      // await http
+      //   .delete(config.API.orgPosMasterById(id))
+      //   .then(() => {
+      //     success($q, "ลบข้อมูลสำเร็จ");
+      //     props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      hideLoader();
+      //   });
+    },
+    "ยืนยันการลบคนครอง",
+    "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
+  );
+}
 </script>
+
 <template>
   <!-- TOOLBAR -->
   <div class="col-12">
     <q-toolbar style="padding: 0">
-      <div v-if="stroe.typeOrganizational === 'draft'">
+      <div v-if="store.typeOrganizational === 'draft'">
         <q-btn
           flat
           round
@@ -467,21 +492,49 @@ function openSelectPerson(data: DataPosition[]) {
             >
               <q-menu>
                 <q-list dense style="min-width: 150px">
+                  <!-- เลือกคนครอง -->
                   <q-item
-                    v-if="props.row.positionIsSelected == 'ว่าง' && stroe.typeOrganizational === 'draft'"
+                    v-if="
+                      props.row.positionIsSelected == 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
                     clickable
                     v-close-popup
                     @click="openSelectPerson(props.row)"
                   >
                     <q-item-section>
                       <div class="row items-center">
-                        <q-icon color="secondary" size="17px" name="mdi-account-circle" />
+                        <q-icon
+                          color="secondary"
+                          size="17px"
+                          name="mdi-account"
+                        />
                         <div class="q-pl-md">เลือกคนครอง</div>
                       </div>
                     </q-item-section>
                   </q-item>
                   <q-item
-                    v-for="(item, index) in stroe.typeOrganizational === 'draft'
+                    v-else-if="
+                      props.row.positionIsSelected != 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="removePerson(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="red"
+                          size="17px"
+                          name="mdi-account-remove"
+                        />
+                        <div class="q-pl-md">ลบคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-for="(item, index) in store.typeOrganizational === 'draft'
                       ? listMenu
                       : listMenu.filter(
                           (e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
diff --git a/src/modules/02_organizationalNew/interface/index/organizational.ts b/src/modules/02_organizationalNew/interface/index/organizational.ts
index 1ddd9cb4b..34db558a6 100644
--- a/src/modules/02_organizationalNew/interface/index/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/index/organizational.ts
@@ -72,8 +72,13 @@ interface DataTree {
   totalPositionCurrentVacant: number;
   totalPositionNextUse: number;
   totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+
   children?: DataTree[];
 }
 
-
 export type { DataPosition, Position, FormDetailPosition, DataTree };
diff --git a/src/modules/02_organizationalNew/interface/response/organizational.ts b/src/modules/02_organizationalNew/interface/response/organizational.ts
index 6dd00ece6..1604c6c59 100644
--- a/src/modules/02_organizationalNew/interface/response/organizational.ts
+++ b/src/modules/02_organizationalNew/interface/response/organizational.ts
@@ -13,6 +13,11 @@ interface SumPosition {
   totalPositionCurrentVacant: number;
   totalPositionNextUse: number;
   totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
 }
 
 interface OrgTree {
diff --git a/src/modules/02_organizationalNew/store/organizational.ts b/src/modules/02_organizationalNew/store/organizational.ts
index ca1af9179..7db8cdc0e 100644
--- a/src/modules/02_organizationalNew/store/organizational.ts
+++ b/src/modules/02_organizationalNew/store/organizational.ts
@@ -23,18 +23,36 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     total: 0,
     use: 0,
     vacant: 0,
+    totalRoot: 0,
+    useRoot: 0,
+    vacantRoot: 0,
   });
 
   function getSumPosition(data: SumPosition) {
     sumPosition.total = data.totalPosition;
-    sumPosition.use =
-      typeOrganizational.value == "draft"
-        ? data.totalPositionNextUse
-        : data.totalPositionCurrentUse;
-    sumPosition.vacant =
-      typeOrganizational.value == "draft"
-        ? data.totalPositionNextVacant
-        : data.totalPositionCurrentVacant;
+    sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
+
+    if (typeOrganizational.value == "draft") {
+      sumPosition.use = data.totalPositionNextUse;
+      sumPosition.useRoot = data.totalRootPositionNextUse
+        ? data.totalRootPositionNextUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionNextVacant;
+      sumPosition.vacantRoot = data.totalRootPositionNextVacant
+        ? data.totalRootPositionNextVacant
+        : 0;
+    } else {
+      sumPosition.use = data.totalPositionCurrentUse;
+      sumPosition.useRoot = data.totalRootPositionCurrentUse
+        ? data.totalRootPositionCurrentUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionCurrentVacant;
+      sumPosition.vacantRoot = data.totalRootPositionCurrentVacant
+        ? data.totalRootPositionCurrentVacant
+        : 0;
+    }
   }
 
   function fetchDataActive(data: DataActive) {