96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
import { defineStore } from "pinia";
|
|
import apiError from '@/module/apiError.js';
|
|
import iconDeleteGray from '@/assets/icon-delete-gray.svg';
|
|
|
|
export default defineStore('acctMgmtStore', {
|
|
state: () => ({
|
|
allUserAccoutList: [],
|
|
isAcctMenuOpen: false,
|
|
currentViewingUser: {}
|
|
}),
|
|
getters: {
|
|
},
|
|
actions: {
|
|
/**
|
|
* Set related boolean to true
|
|
*/
|
|
openAcctMenu(){
|
|
this.isAcctMenuOpen = true;
|
|
},
|
|
/**
|
|
* Set related boolean to false
|
|
*/
|
|
closeAcctMenu(){
|
|
this.isAcctMenuOpen = false;
|
|
},
|
|
toggleIsAcctMenuOpen() {
|
|
this.isAcctMenuOpen = !this.isAcctMenuOpen;
|
|
},
|
|
/**
|
|
* For convenience, set current viewing data according to unique user ID.
|
|
* @param {string} username
|
|
*/
|
|
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;
|
|
console.log('getAllUserAccounts success');
|
|
} 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: false,
|
|
isEditHovered: false,
|
|
}));
|
|
},
|
|
/**
|
|
* 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;
|
|
}
|
|
},
|
|
/**
|
|
* According to mouseover or mouseleave status, change the bool value.
|
|
* @param {string} username
|
|
* @param {boolean} isEditHovered
|
|
*/
|
|
changeIsEditHoveredByUser(username, isEditHovered) {
|
|
const userToChange = this.allUserAccoutList.find(user => user.username === username);
|
|
if (userToChange) {
|
|
userToChange.isEditHovered = isEditHovered;
|
|
}
|
|
},
|
|
},
|
|
}) |