lucia-frontend/src/stores/acctMgmt.js

import { defineStore } from "pinia";
import apiError from '@/module/apiError.js';

export default defineStore('acctMgmtStore', {
  state: () => ({
    allUserAccoutList: [],
    isAcctMenuOpen: false,
    currentViewingUser: {
      detail: null,
    }
  }),
  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 : {};
    },
    /**
     * We have this method because we want to handle create new modal case.
     */
    clearCurrentViewingUser() {
      this.currentViewingUser = {
        username: '',
        name: '',
        is_admin: false,
        is_sso: false,
      };
    },
    /**
     * 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,
      }));
    },
    /**
     * Create new user in database.
     * @param {object} userToCreate
     * userToCreate {
     * "username": "string",
     * "password": "string",
     * "name": "string",
     * "is_admin": boolean,
     * "is_active": boolean,
     * }
     */
    async createNewAccount(userToCreate) {
      const apiCreateAccount = `/api/users`;

      try{
        const response = await this.$axios.post(apiCreateAccount, userToCreate);
      }
      catch(error) {
        apiError(error, 'Failed to add a new account.');
      };
    },
    /**
     * Get user detail by unique username.
     * @param {string} uniqueUsername
    */
    async getUserDetail(uniqueUsername) {
      const apiUserDetail = `/api/users/${uniqueUsername}`;

      try{
        const response = await this.$axios.get(apiUserDetail);
        this.currentViewingUser.detail = response.data;
      }
      catch(error) {
        apiError(error, 'Failed to get user detail.');
      };
    },
    /**
     * 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;
      }
    },
    /**
     * According to mouseover or mouseleave status, change the bool value.
     * @param {string} username 
     * @param {boolean} isEditHovered 
     */
    changeIsDetailHoveredByUser(username, isDetailHovered) {
      const userToChange = this.allUserAccoutList.find(user => user.username === username);
      if (userToChange) {
        userToChange.isDetailHovered = isDetailHovered;
      }
    },
  },
})