WIP: can hover icon-delete. can have self on the first row on list.

API get all users done

src/stores/acctMgmt.js

@@ -1,18 +1,12 @@
 import { defineStore } from "pinia";
-import { accountList, } from "@/constants/constants.js";
+import apiError from '@/module/apiError.js';
+import iconDeleteGray from '@/assets/icon-delete-gray.svg';
 
 export default defineStore('acctMgmtStore', {
   state: () => ({
+    allUserAccoutList: [],
     isAcctMenuOpen: false,
-    currentViewingUser: {
-      id: 12345,
-      account: "REDACTED-USER1",
-      fullName: "Alice Zheng",
-      adminRights: true,
-      accountActivation: true,
-      detail: "abcde",
-      isSSO: true,
-    }
+    currentViewingUser: {}
   }),
   getters: {
   },
@@ -34,11 +28,56 @@ export default defineStore('acctMgmtStore', {
     },
     /**
      * For convenience, set current viewing data according to unique user ID.
-     * @param {number} userId 
+     * @param {string} username 
      */
-    setCurrentViewingUser(userId) {
-      const userFind = accountList.find(user => user.id === userId);
+    setCurrentViewingUser(username) {
+      const userFind = this.allUserAccoutList.find(user => user.username === username);
       this.currentViewingUser = userFind ? userFind : {};
     },
+    /**
+     * Get all user accounts
+     */
+    async getAllUserAccounts() {
+      const apiGetUserList = `/api/users`;
+      try {
+        const response = await this.$axios.get(apiGetUserList);
+        const customizedResponseData = await this.customizeAllUserList(response.data);
+        this.allUserAccoutList = customizedResponseData;
+      } catch(error) {
+        apiError(error, 'Failed to get all users.');
+      }
+    },
+    /**
+     * For example, add isHovered field
+     */
+    async customizeAllUserList(rawResponseData){
+      return rawResponseData.map(user => ({
+          ...user, // 保留後端傳來的欄位
+          isDeleteHovered: false, // 針對前端顯示而額外增加的欄位
+          isRowHovered: true,
+      }));
+    },
+    /**
+     * According to mouseover or mouseleave status, change the bool value.
+     * @param {string} username 
+     * @param {boolean} isDeleteHovered 
+     */
+    changeIsDeleteHoveredByUser(username, isDeleteHovered) {
+      const userToChange = this.allUserAccoutList.find(user => user.username === username);
+      if (userToChange) {
+        userToChange.isDeleteHovered = isDeleteHovered;
+      }
+    },
+    /**
+     * According to mouseover or mouseleave status, change the bool value.
+     * @param {string} username 
+     * @param {boolean} isRowHovered 
+     */
+    changeIsRowHoveredByUser(username, isRowHovered){
+      const userToChange = this.allUserAccoutList.find(user => user.username === username);
+      if (userToChange) {
+        userToChange.isRowHovered = isRowHovered;
+      }
+    },
   },
 })