WIP My Account.

src/components/AccountMenu/AcctMenu.vue

@@ -66,6 +66,8 @@ export default {
     
     const onBtnMyAccountClick = async() => {
       acctMgmtStore.closeAcctMenu();
+      await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
+      await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
       await router.push('/my-account');
     }
 

src/components/Discover/Map/SidebarState.vue

@@ -191,6 +191,7 @@
                   </li>
                 </ul>
               </TabPanel>
+              <!-- 從shortest_traces開始迭代 -->
               <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
                 contentClass="text-sm">
                 <p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
@@ -250,7 +251,7 @@ import i18next from '@/i18n/i18n';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
 
 // 刪除第一個和第二個元素
-const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].splice(0, 2);
+const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
 export default {
   props:{
     sidebarState: {
@@ -266,7 +267,7 @@ export default {
       required: false,
     }
   },
-  setup(){
+  setup(props){
     const pageAdmin = PageAdmin();
     const mapPathStore = MapPathStore();
 
@@ -276,18 +277,12 @@ export default {
     const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
 
     const onActiveTraceClick = (clickedActiveTraceIndex) => {
-      if(isBPMNOn.value) {
-        return;
-      }
       mapPathStore.clearAllHighlight();
       activeTrace.value = clickedActiveTraceIndex;
       mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
     }
 
     const onPathOptionClick = (clickedPath) => {
-      if(isBPMNOn.value) {
-        return;
-      }
       clickedPathListIndex.value = clickedPath;
       mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
     };

src/stores/acctMgmt.ts

@@ -61,8 +61,8 @@ export default defineStore('acctMgmtStore', {
      * @param {string} username 
      */
     setCurrentViewingUser(username: string) {
-      const userFind: User | undefined = this.allUserAccoutList.find(user => user.username === username);
-      this.currentViewingUser = userFind || { username: '', detail: {} };
+      const userFind = this.allUserAccoutList.find(user => user.username === username);
+      this.currentViewingUser = userFind;
     },
     /**
      * We have this method because we want to handle create new modal case.

src/views/AccountManagement/MyAccount.vue

@@ -1,26 +1,59 @@
 <template>
-    <div class="div flex justify-center w-[600px]">
-        
+    <div class="general my-account flex justify-center w-full h-full p-8">
+        <main class="flex main-part flex-col px-6 mt-6 w-[536px]">
+            <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
+                {{ name }}
+            </h1>
+            <div class="general-status-container">
+                <Badge displayText="Admin" :isActivated="is_admin"/>
+                <Badge displayText="Suspended" :isActivated="!is_active"/>
+            </div>
+            <div id="general_account_visit_info" class="w-full border-b border-b-[#CBD5E1] border-b-[1px] mt-3 pb-4
+                w-full">
+                Total visits <span class="text-[#0099FF]">
+                    {{ visitTime }}
+                </span> times.
+            </div>
+        </main>
     </div>
 </template>
 
 <script>
-import { onMounted, } from 'vue';
+import { onMounted, onBeforeMount, computed, ref } from 'vue';
+import i18next from '@/i18n/i18n.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
+import ModalHeader from './ModalHeader.vue';
+import Badge from '../../components/Badge.vue';
 import LoadingStore from '@/stores/loading.js';
-export default {
-    props: {
 
-    },
-    setup(props) {
+export default {
+    setup() {
         const loadingStore = LoadingStore();
+        const acctMgmtStore = useAcctMgmtStore();
+        const visitTime = ref(0);
+        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+        const {
+            username,
+            name,
+            is_admin,
+            is_active,
+        } = currentViewingUser.value;
 
         onMounted(() => {
             loadingStore.setIsLoading(false);
         });
 
         return {
-
+            i18next,
+            username,
+            name,
+            is_admin,
+            is_active,
+            visitTime,
         };
-  }
+  },
+  components: {
+        Badge,
+    }
 }
 </script>