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

src/constants/constants.js

@@ -1,12 +1,41 @@
 export const PRIME_VUE_TICKS_LIMIT = 6;
 export const GRID_COLOR = '#64748b';
+export const MODAL_CREATE_NEW = 'MODAL_CREATE_NEW';
+export const MODAL_ACCT_EDIT = 'MODAL_ACCT_EDIT';
+export const MODAL_ACCT_INFO = 'MODAL_ACCT_INFO';
 export const knownLayoutChartOption = {
     padding: {
       top: 16,
       left: 8,
       right: 8,
     }
-  };
+};
+export 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",
+    },
+];
 export const knownScaleLineChartOptions =  {
 x: {
     type: 'time',

src/i18n/en.json

@@ -20,7 +20,8 @@
         "AccountActivation": "Account Activation",
         "Detail": "Detail",
         "Edit": "Edit",
-        "AccountEdit": "Account Edit"
+        "AccountEdit": "Account Edit",
+        "AccountInformation": "Account Information"
     },
     "Compare": {
         "timeUsage": "Time Usage",

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;

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() {
 

src/views/AccountManagement/ModalAccountEdit.vue

@@ -1,14 +1,7 @@
 <template>
     <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
         shadow-lg flex flex-col">
-        <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
+        <ModalHeader :headerText="i18next.t('AcctMgmt.AccountEdit')"/>
-            border-b border-b-[1px] border-[#CBD5E1]
-        ">
-            <h1 class="flex text-base font-bold"> {{ i18next.t("AcctMgmt.AccountEdit") }}</h1>
-            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
-                @click="onCloseBtnClick"
-            />
-        </header>
         
         <main class="flex row h-[96px] my-[32px] flex-col px-8">
             <div class="input-row w-full flex py-3">
@@ -38,21 +31,25 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import i18next from "@/i18n/i18n.js";
 import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
+import ModalHeader from "./ModalHeader.vue";
 
-export default {
+export default defineComponent({
     setup() {
-      return {
+        return {
-
+        };
-      };
     },
     data() {
         return {
             i18next: i18next,
         };
     },
+    components: {
+        ModalHeader,
+    },
     methods: {
         onConfirmBtnClick(){
             //TODO:
@@ -65,7 +62,7 @@ export default {
         },
         ...mapActions(useModalStore, ['closeModal']),
     }
-};
+});
 
 </script>
 <style>

src/views/AccountManagement/ModalAccountInfo.vue

@@ -0,0 +1,56 @@
+<template>
+     <div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
+        shadow-lg flex flex-col">
+        <ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
+        <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">Admin Suspended</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.
+            </div>
+        </main>
+        <main class="flex main-part flex-col px-6 py-4">
+            <ul class="leading-[21px] list-disc list-inside">
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+                <li>[2023-01-01 08:30:25] Account created by Lorrie Cheng.</li>
+            </ul>
+        </main>
+    </div>
+</template>
+
+<script>
+import i18next from '@/i18n/i18n.js';
+import ModalHeader from './ModalHeader.vue';
+import useAcctMgmtStore from '@/stores/acctMgmt.js';
+
+export default {
+    setup(){
+        const acctMgmtStore = useAcctMgmtStore();
+        const visitTiime = 23;
+        const { currentViewingUser } = acctMgmtStore;
+        const {
+            id,
+            account,
+            fullName,
+            adminRights,
+            accountActivation,
+            detail
+        } = currentViewingUser;
+        return {
+            i18next,
+            visitTiime,
+            id,
+            account,
+            fullName,
+            adminRights,
+            accountActivation,
+            detail
+        };
+    },
+    components: {
+        ModalHeader,
+    }
+}
+</script>

src/views/AccountManagement/ModalContainer.vue

@@ -3,23 +3,43 @@
         flex justify-center items-center">
 
       <div class="flex">
-        <ModalAccountEdit/>
+        <ModalAccountEdit v-if="whichModal === MODAL_ACCT_EDIT"/>
+        <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO"/>
       </div>
     </div>    
   </template>
   
   <script>
+  import { watch, computed, } from 'vue';
   import { useModalStore } from '@/stores/modal.js';
   import ModalAccountEdit from './ModalAccountEdit.vue';
+  import ModalAccountInfo from './ModalAccountInfo.vue';
+  import {
+    MODAL_CREATE_NEW,
+    MODAL_ACCT_EDIT,
+    MODAL_ACCT_INFO,
+  } from "@/constants/constants.js";
+  
   export default {
     setup() {
       const modalStore = useModalStore();
+      const whichModal = computed(() => modalStore.whichModal);
+
+      watch(() => whichModal, (newVal, oldVal) => {
+        // (`whichModal changed from ${oldVal} to ${newVal}`);
+      });
+
       return {
         modalStore,
+        whichModal,
+        MODAL_CREATE_NEW,
+        MODAL_ACCT_EDIT,
+        MODAL_ACCT_INFO,
       };
     },
     components: {
       ModalAccountEdit,
+      ModalAccountInfo,
     }
   };
   </script>

src/views/AccountManagement/ModalHeader.vue

@@ -0,0 +1,32 @@
+<template>
+    <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
+        border-b border-b-[1px] border-[#CBD5E1]
+    ">
+        <h1 class="flex text-base font-bold"> {{ headerText }}</h1>
+        <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
+            @click="closeModal"
+        />
+    </header>
+</template>
+
+<script>
+import { useModalStore } from '@/stores/modal.js';
+export default {
+    props: {
+        headerText: {
+            type: String,
+            required: true // 确保 headerText 是必填的
+        }
+    },
+    setup(props) {
+        const modalStore = useModalStore();
+        const { headerText, } = props;
+        const { closeModal } = modalStore;
+
+        return {
+            headerText,
+            closeModal,
+        };
+  }
+}
+</script>