From 80529b85fe37f196a106c4883d5d7a71f85da10a Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 19 Jun 2024 10:12:16 +0800
Subject: [PATCH] WIP: acct mgmt search bar

---
 src/components/AccountMenu/AcctMenu.vue       | 28 ++++++++++---
 src/components/AccountMenu/SearchBar.vue      | 16 ++++++++
 src/components/Navbar.vue                     |  3 +-
 src/router/index.js                           | 12 ++++++
 .../AccountManagement/AccountAdmin/index.vue  | 41 +++++++++++++++++++
 src/views/MainContainer.vue                   |  1 -
 6 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 src/components/AccountMenu/SearchBar.vue
 create mode 100644 src/views/AccountManagement/AccountAdmin/index.vue

diff --git a/src/components/AccountMenu/AcctMenu.vue b/src/components/AccountMenu/AcctMenu.vue
index 2646619..c577766 100644
--- a/src/components/AccountMenu/AcctMenu.vue
+++ b/src/components/AccountMenu/AcctMenu.vue
@@ -1,19 +1,26 @@
 <template>
     <div id="account_menu" v-show="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
-        <span id="greeting" class="m-4 h-[48px]">{{ i18next.t("AcctMgmt.hi") }}</span>
+        <div id="greeting" class="w-full border-b border-[#CBD5E1]">
+          <span class="m-4 h-[48px]">
+          {{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
+          </span>
+        </div>
         <ul class="w-full min-h-10">
           <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
-        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">          
+        <li id="btn_acct_mgmt"
+          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+          items-center" @click="onBtnAcctMgmtClick">          
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
         </li>
-        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+        <li id="btn_mang_ur_acct"
+          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
           items-center">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
         </li>
-        <li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
+        <li id="btn_logout_in_menu"
+          class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
           items-center">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
@@ -25,6 +32,7 @@
 <script>
 import { mapActions, mapState } from 'pinia';
 import i18next from '@/i18n/i18n';
+import loginStore from '@/stores/login.js';
 import AcctMgmtStore from '@/stores/acctMgmt';
 
 export default {
@@ -34,6 +42,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(loginStore, ['userData']),
     ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
   },
   methods: {
@@ -47,7 +56,14 @@ export default {
           }
       });
     },
-    ...mapActions(AcctMgmtStore, ['openAcctMenu', 'closeAcctMenu']),
+    onBtnAcctMgmtClick(){
+      this.$router.push({name: 'AcctAdmin'});
+    },
+    ...mapActions(loginStore, ['getUserData']),
+    ...mapActions(AcctMgmtStore, ['closeAcctMenu']),
+  },
+  created() {
+    this.getUserData();
   },
   mounted(){
     this.clickOtherPlacesThenCloseMenu();
diff --git a/src/components/AccountMenu/SearchBar.vue b/src/components/AccountMenu/SearchBar.vue
new file mode 100644
index 0000000..8928c4b
--- /dev/null
+++ b/src/components/AccountMenu/SearchBar.vue
@@ -0,0 +1,16 @@
+<template>
+    <div id="search_bar_container" class="w-[280px] h-8 px-4 border-[#64748B] border-[1px] rounded-full	">
+
+    </div>
+</template>
+
+<script>
+export default {
+    setup() {
+
+    },
+    created() {
+
+    },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 30e27c7..73fe9cc 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -109,7 +109,8 @@ export default {
         // 舉例：DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
         DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
         // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
-        COMPARE: ['PERFORMANCE']
+        COMPARE: ['PERFORMANCE'],
+        'ACCOUNT MANAGEMENT': ['ALL', 'CREATE',],
       },
       navViewName: 'FILES',
       uploadModal: false,
diff --git a/src/router/index.js b/src/router/index.js
index e40a3ca..d6785d0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import Map from '@/views/Discover/Map/index.vue';
 import Conformance from '@/views/Discover/Conformance/index.vue';
 import Performance from '@/views/Discover/Performance/index.vue';
 import CompareDashboard from '@/views/Compare/Dashboard/index.vue';
+import AccountAdmin from '@/views/AccountManagement/AccountAdmin/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';
 
@@ -47,6 +48,17 @@ const routes = [
         name: "Files",
         component: Files,
       },
+      {
+        path: "/account",
+        name: "Account Management",
+        children: [
+          {
+            path: "/account/account-admin",
+            name: "AcctAdmin",
+            component: AccountAdmin,
+          },
+        ]
+      },
       {
         path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄
         name: "Upload",
diff --git a/src/views/AccountManagement/AccountAdmin/index.vue b/src/views/AccountManagement/AccountAdmin/index.vue
new file mode 100644
index 0000000..4add8be
--- /dev/null
+++ b/src/views/AccountManagement/AccountAdmin/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="flex w-[1216px]  items-center pt-2 flex-col">
+        <div class="flex">Account Admin SSO/General cases</div>
+        <div class="flex justify-end">
+            <div class="flex">
+                <SearchBar/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { storeToRefs, mapState, } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
+
+export default {
+    setup() {
+        const loadingStore = LoadingStore();
+        const { isLoading } = storeToRefs(loadingStore);
+
+        return {
+            isLoading,
+        };
+    },
+    data() {
+        return {
+
+        };
+    },
+    components: {
+        SearchBar,
+    },
+    created() {
+
+    },
+    mounted() {
+        this.isLoading = false; //TODO:
+    },
+};
+</script>
diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 8165ff8..c89c83a 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -67,7 +67,6 @@ export default {
   },
   beforeRouteEnter(to, from, next) { 
     // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
-    const loginStore = LoginStore();  
     if (!getCookie("isLuciaLoggedIn")) {
       next({
         path: '/login',