diff --git a/src/assets/icon-delete-gray.svg b/src/assets/icon-delete-gray.svg new file mode 100644 index 0000000..3278c76 --- /dev/null +++ b/src/assets/icon-delete-gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-delete-red.svg b/src/assets/icon-delete-red.svg new file mode 100644 index 0000000..e4b3d5a --- /dev/null +++ b/src/assets/icon-delete-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/constants/constants.js b/src/constants/constants.js index bd6ae1a..a70bb72 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -13,30 +13,30 @@ export const knownLayoutChartOption = { export const accountList = [ { id: 12345, - account: "REDACTED-USER1", - fullName: "Alice Zheng", - adminRights: true, - accountActivation: false, + username: "REDACTED-USER1", + name: "Alice Zheng", + is_admin: true, + is_active: false, detail: "abcde", - isSSO: true, + is_sso: true, }, { id: 345, - account: "REDACTED-USER2", - fullName: "Mike Chen", - adminRights: false, - accountActivation: true, + username: "REDACTED-USER2", + name: "Mike Chen", + is_admin: false, + is_active: true, detail: "abcde", - isSSO: false, + is_sso: false, }, { id: 88, - account: "REDACTED-USER3", - fullName: "Tory Cheng", - adminRights: true, - accountActivation: true, + username: "REDACTED-USER3", + name: "Tory Cheng", + is_admin: true, + is_active: true, detail: "abcde", - isSSO: false, + is_sso: false, }, ]; export const knownScaleLineChartOptions = { diff --git a/src/stores/acctMgmt.js b/src/stores/acctMgmt.js index b013252..87aa4bf 100644 --- a/src/stores/acctMgmt.js +++ b/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; + } + }, }, }) \ No newline at end of file diff --git a/src/views/AccountManagement/AccountAdmin/index.vue b/src/views/AccountManagement/AccountAdmin/index.vue index d60ecee..ed5108d 100644 --- a/src/views/AccountManagement/AccountAdmin/index.vue +++ b/src/views/AccountManagement/AccountAdmin/index.vue @@ -5,20 +5,31 @@
- - + + + - - + - - + - + + Edit + + + + +
@@ -51,10 +74,12 @@