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

src/stores/acctMgmt.js

@@ -1,8 +1,17 @@
 import { defineStore } from "pinia";
+import { accountList, } from "@/constants/constants.js";
 
 export default defineStore('acctMgmtStore', {
   state: () => ({
     isAcctMenuOpen: false,
+    currentViewingUser: {
+      id: 12345,
+      account: "REDACTED-USER1",
+      fullName: "Alice Zheng",
+      adminRights: true,
+      accountActivation: true,
+      detail: "abcde",
+    }
   }),
   getters: {
   },
@@ -22,5 +31,13 @@ export default defineStore('acctMgmtStore', {
     toggleIsAcctMenuOpen() {
       this.isAcctMenuOpen = !this.isAcctMenuOpen;
     },
+    /**
+     * For convenience, set current viewing data according to unique user ID.
+     * @param {number} userId 
+     */
+    setCurrentViewingUser(userId) {
+      const userFind = accountList.find(user => user.id === userId);
+      this.currentViewingUser = userFind ? userFind : {};
+    },
   },
 })

src/stores/modal.js

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia';
-
+import { MODAL_ACCT_INFO, } from '@/constants/constants.js';
 export const useModalStore = defineStore('modalStore', {
   state: () => ({
     isModalOpen: false,
+    whichModal: MODAL_ACCT_INFO,
   }),
   actions: {
-    openModal() {
+    openModal(whichModal) {
       this.isModalOpen = true;
+      this.whichModal = whichModal;
     },
     closeModal() {
       this.isModalOpen = false;