visit API, is_admin badge API, is_active badge API,

src/stores/acctMgmt.js

@@ -6,7 +6,8 @@ export default defineStore('acctMgmtStore', {
     allUserAccoutList: [],
     isAcctMenuOpen: false,
     currentViewingUser: {
-      detail: null,
+      username: "",
+      detail: {},
     },
     response: {
       deleteAccount: null,
@@ -58,7 +59,6 @@ export default defineStore('acctMgmtStore', {
         const response = await this.$axios.get(apiGetUserList);
         const customizedResponseData = await this.customizeAllUserList(response.data);
         this.allUserAccoutList = customizedResponseData;
-        console.log('getAllUserAccounts success');
       } catch(error) {
         apiError(error, 'Failed to get all users.');
       }
@@ -110,7 +110,6 @@ export default defineStore('acctMgmtStore', {
         }
       }
       catch(error) {
-        console.log('error', error, error.status, error.code);
         apiError(error, 'Failed to delete the account.');
         return false;
       };
@@ -124,7 +123,10 @@ export default defineStore('acctMgmtStore', {
 
       try{
         const response = await this.$axios.get(apiUserDetail);
-        this.currentViewingUser.detail = response.data;
+        this.currentViewingUser = {
+          ...this.currentViewingUser,
+          detail: response.data,
+        }
         if(response.status === 200) {
           return true;
         }        

src/views/AccountManagement/AccountAdmin/index.vue

@@ -16,7 +16,7 @@
                         <template #body="slotProps">
                             <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
-                                <div @dblclick="onAcctDoubleClick()" class="cursor-pointer">
+                                <div @dblclick="onAcctDoubleClick(slotProps.data.username)" class="cursor-pointer">
                                     {{ slotProps.data.username }}
                                 </div>
                             </div>
@@ -178,13 +178,17 @@ export default {
             modalStore.openModal(MODAL_CREATE_NEW);
         };
 
+        
+        const onAcctDoubleClick = (username) => {
+            acctMgmtStore.setCurrentViewingUser(username);
+            modalStore.openModal(MODAL_ACCT_INFO);
+        }
+
         const getFirstPageUserData = async() => {
             await acctMgmtStore.getAllUserAccounts();
             infiniteAcctData.value = allUserAccoutList.value.slice(0, ONCE_RENDER_NUM_OF_DATA)
         };
 
-        const isInfiniteFinish = ref(true);
-
         const handleDeleteMouseOver = (username) => {
             acctMgmtStore.changeIsDeleteHoveredByUser(username, true);
         };
@@ -276,6 +280,7 @@ export default {
             loginUserData,
             infiniteAcctData,
             onCreateNewClick,
+            onAcctDoubleClick,
             handleScroll,
             getRowClass,
             onDeleteBtnClick,
@@ -312,9 +317,6 @@ export default {
         ...mapState(useAcctMgmtStore, ['allUserAccoutList']),
     },
     methods: {
-        onAcctDoubleClick(){
-
-        },
         onAdminRightsBtnClick(isOn){
 
         },

src/views/AccountManagement/ModalAccountInfo.vue

@@ -5,11 +5,13 @@
         <main class="flex main-part flex-col px-6 mt-6">
             <h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium">{{ fullName }}</h1>
             <div class="status-container">
-                <Badge displayText="Admin" isActivated/>
+                <Badge displayText="Admin" :isActivated="is_admin"/>
-                <Badge displayText="Suspended" :isActivated="false"/>
+                <Badge displayText="Suspended" :isActivated="is_active"/>
             </div>
             <div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
-                Account: <span class="text-[#0099FF]">{{ account }}</span>, total visits <span class="text-[#0099FF]">{{ visitTiime }}</span> times.
+                Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
+                    {{ visitTime }}
+                </span> times.
             </div>
         </main>
         <main class="flex main-part flex-col px-6 py-4">
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from './ModalHeader.vue';
@@ -32,25 +35,29 @@ import Badge from '../../components/Badge.vue';
 export default {
     setup(){
         const acctMgmtStore = useAcctMgmtStore();
-        const visitTiime = 23;
+        const visitTime = ref(0);
-        const { currentViewingUser } = acctMgmtStore;
+        const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
         const {
-            id,
+            username,
-            account,
+            name,
-            fullName,
+            is_admin,
-            adminRights,
+            is_active,
-            accountActivation,
+            is_sso,
-            detail
+            has_data,
-        } = currentViewingUser;
+        } = currentViewingUser.value;
+
+        onBeforeMount(async() => {
+            await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
+            visitTime.value = currentViewingUser.value.detail.visits;
+        });
+
         return {
             i18next,
-            visitTiime,
+            username,
-            id,
+            name,
-            account,
+            is_admin,
-            fullName,
+            is_active,
-            adminRights,
+            visitTime,
-            accountActivation,
-            detail
         };
     },
     components: {