WIP: account info modal prototype with a little bit of pinia state mgmt.

src/views/AccountManagement/AccountAdmin/index.vue

@@ -54,8 +54,15 @@
 import { storeToRefs, mapState, mapActions, } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import { useModalStore } from '@/stores/modal.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
 import i18next from '@/i18n/i18n.js';
+import {
+    MODAL_CREATE_NEW,
+    MODAL_ACCT_EDIT,
+    MODAL_ACCT_INFO,
+    accountList,
+  } from "@/constants/constants.js";
 
 const ONCE_RENDER_NUM_OF_DATA = 9;
 
@@ -74,33 +81,6 @@ function repeatAccountList(accountList, N) {
     return repeatedList;
 }
 
-const accountList = [
-    {
-        id: 12345,
-        account: "REDACTED-USER1",
-        fullName: "Alice Zheng",
-        adminRights: true,
-        accountActivation: true,
-        detail: "abcde",
-    },
-    {
-        id:  345,
-        account: "REDACTED-USER2",
-        fullName: "Mike Chen",
-        adminRights: true,
-        accountActivation: true,
-        detail: "abcde",
-    },
-    {
-        id: 88,
-        account: "REDACTED-USER3",
-        fullName: "Tory Cheng",
-        adminRights: true,
-        accountActivation: true,
-        detail: "abcde",
-    },
-];
-
 const repeatedAccountList = repeatAccountList(accountList, 20);
 export default {
     setup() {
@@ -166,12 +146,14 @@ export default {
 
         },
         onDetailBtnClick(dataId){
-            this.openModal();
+            this.openModal(MODAL_ACCT_INFO);
+            this.setCurrentViewingUser(dataId);
         },
         onEditBtnClick(dataId){
-            this.openModal();
+            this.openModal(MODAL_ACCT_EDIT);
         },
         ...mapActions(useModalStore, ['openModal']),
+        ...mapActions(useAcctMgmtStore, ['setCurrentViewingUser']),
     },
     created() {