edit account and logout feature

src/components/AccountMenu/AcctMenu.vue

@@ -21,7 +21,7 @@
         </li>
         <li id="btn_logout_in_menu"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onLogoutBtnClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
         </li>
@@ -30,20 +30,39 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia';
+import { computed, } from 'vue';
+import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
-import loginStore from '@/stores/login.js';
+import LoginStore from '@/stores/login.js';
 import AcctMgmtStore from '@/stores/acctMgmt';
+import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 
 export default {
+  setup() {
+    const { logOut } = LoginStore();
+    const allMapDataStore = AllMapDataStore();
+    const conformanceStore = ConformanceStore();
+    const acctMgmtStore = AcctMgmtStore();
+    const { tempFilterId } = storeToRefs(allMapDataStore);
+    const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
+
+    const isAcctMenuOpen = computed(() => acctMgmtStore.isAcctMenuOpen);
+
+    return { logOut, tempFilterId,
+      conformanceLogTempCheckId,
+      allMapDataStore, conformanceStore,
+      isAcctMenuOpen,
+    };
+  },
   data() {
     return {
       i18next: i18next,
     }
   },
   computed: {
-    ...mapState(loginStore, ['userData']),
-    ...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
+    ...mapState(LoginStore, ['userData']),
   },
   methods: {
     clickOtherPlacesThenCloseMenu(){
@@ -58,8 +77,21 @@ export default {
     },
     onBtnAcctMgmtClick(){
       this.$router.push({name: 'AcctAdmin'});
+      this.closeAcctMenu();
     },
-    ...mapActions(loginStore, ['getUserData']),
+    onLogoutBtnClick(){
+      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
+        // 傳給 Map，通知 Sidebar 要關閉。
+        this.$emitter.emit('leaveFilter', false);
+        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
+      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
+        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
+      } else {
+        this.logOut();
+      }
+    },
+    ...mapActions(LoginStore, ['getUserData']),
     ...mapActions(AcctMgmtStore, ['closeAcctMenu']),
   },
   created() {

src/components/Header.vue

@@ -6,10 +6,6 @@
       </figure>
       <div class="flex justify-between items-center relative"
         v-show="showMember">
-        <!-- TODO: 換成人頭按鈕 帳號管理功能 -->
-        <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
-          Logout
-        </button>
         <img id="acct_mgmt_button" src="@/assets/icon-head-black.svg" width="32" height="32" 
           class="cursor-pointer"  @click="onAcctHeadClick"
         />

src/i18n/en.json

@@ -36,6 +36,7 @@
         "DeleteFirstClause": "deletion is irreversible !",
         "DeleteSecondClause": "You will delete all data and content on this account.",
         "MsgAccountAdded": "Account added.",
+        "MsgAccountEdited": "Saved",
         "MsgAccountDeleteSuccess": "Account deleted.",
         "AccountNotUnique": "Account has already been registered."
     },

src/stores/acctMgmt.js

@@ -123,6 +123,30 @@ export default defineStore('acctMgmtStore', {
         return false;
       };
     },
+    /**
+     * Edit an account.
+     * @param {string} userToEdit this value is unique in database.
+     * @param {object} editDetail
+     */
+    async editAccount(userToEdit, editDetail) {
+      const apiEdit = `/api/users/${userToEdit}`;
+
+      try{
+        const response = await this.$axios.put(apiEdit, {
+          username: editDetail.newUsername,
+          password: editDetail.password,
+          name: editDetail.name,
+          is_active: editDetail.is_active,
+        });
+        if(response.status === 200) {
+          return true;
+        }
+      }
+      catch(error) {
+        apiError(error, 'Failed to edit the account.');
+        return false;
+      };
+    },
     /**
      * Get user detail by unique username.
      * @param {string} uniqueUsername

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -142,7 +142,7 @@ import { useToast } from 'vue-toast-notification';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
-import { MODAL_CREATE_NEW, } from '@/constants/constants.js';
+import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, } from '@/constants/constants.js';
 
 export default defineComponent({
     setup() {
@@ -226,13 +226,14 @@ export default defineComponent({
             if(!isPwdMatched.value){
                 return;
             }
+
+            await checkAccountIsUnique();
+                if(!isAccountUnique.value) {
+                    return;
+                }
             
             switch(whichCurrentModal.value) {
-                case MODAL_CREATE_NEW:
-                    await checkAccountIsUnique();
-                    if(!isAccountUnique.value) {
-                        return;
-                    }
+                case MODAL_CREATE_NEW:                    
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
                         password: inputPwd.value,
@@ -245,6 +246,17 @@ export default defineComponent({
                     acctMgmtStore.setShouldUpdateList(true);
                     await router.push('/account/account-admin');
                 break;
+                case MODAL_ACCT_EDIT:
+                    // 要注意的是舊的username跟新的username可以是不同的
+                    await acctMgmtStore.editAccount(
+                        currentViewingUser.value.username, {
+                        newUsername: inputUserAccount.value,
+                        password: inputPwd.value,
+                        name: inputName.value,
+                        is_active: true,
+                        // is_active: isSetActivedChecked.value, //TODO: 待確認需求規格
+                    });
+                    await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
                 default:
                 break;
             }