delete account and later on modal closing effect.

src/i18n/en.json

@@ -35,7 +35,8 @@
         "DelteQuestion": "Are you sure to delete ?",
         "DeleteFirstClause": "deletion is irreversible !",
         "DeleteSecondClause": "You will delete all data and content on this account.",
-        "MsgAccountAdded": "Account added."
+        "MsgAccountAdded": "Account added.",
+        "MsgAccountDeleteSuccess": "Account deleted."
     },
     "Compare": {
         "timeUsage": "Time Usage",

src/stores/acctMgmt.js

@@ -7,7 +7,10 @@ export default defineStore('acctMgmtStore', {
     isAcctMenuOpen: false,
     currentViewingUser: {
       detail: null,
-    }
+    },
+    response: {
+      deleteAccount: null,
+    },
   }),
   getters: {
   },
@@ -92,6 +95,26 @@ export default defineStore('acctMgmtStore', {
         apiError(error, 'Failed to add a new account.');
       };
     },
+    /**
+     * Delete an account from database.
+     * @param {string} userToDelete this value is unique in database.
+     * @returns the result of whether the deletion is success or not.
+     */
+    async deleteAccount(userToDelete) {
+      const apiDelete = `/api/users/${userToDelete}`;
+
+      try{
+        const response = await this.$axios.delete(apiDelete);
+        if(response.status === 200) {
+          return true;
+        }
+      }
+      catch(error) {
+        console.log('error', error, error.status, error.code);
+        apiError(error, 'Failed to delete the account.');
+        return false;
+      };
+    },
     /**
      * Get user detail by unique username.
      * @param {string} uniqueUsername

src/stores/modal.js

@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia';
 import { MODAL_ACCT_INFO, } from '@/constants/constants.js';
+import { delaySecond } from "@/utils/timeUtil.js";
+
 export const useModalStore = defineStore('modalStore', {
   state: () => ({
     isModalOpen: false,
@@ -10,7 +12,8 @@ export const useModalStore = defineStore('modalStore', {
       this.isModalOpen = true;
       this.whichModal = whichModal;
     },
-    closeModal() {
+    async closeModal(){
+      await delaySecond(2);
       this.isModalOpen = false;
     },
   },

src/utils/timeUtil.js

@@ -0,0 +1,4 @@
+export const delaySecond = (s = 2.5) =>  {
+    return new Promise((resolve) => 
+        setTimeout(resolve, s * 1000)
+);}

src/views/AccountManagement/AccountAdmin/index.vue

@@ -219,6 +219,7 @@ export default {
         };
         
         const onDeleteBtnClick = (usernameToDelete) => {
+            acctMgmtStore.setCurrentViewingUser(usernameToDelete);
             modalStore.openModal(MODAL_DELETE);
         };
 

src/views/AccountManagement/ModalAccountEdit.vue

@@ -199,13 +199,6 @@ export default defineComponent({
                         }
                             //TODO: 這邊要記得回來加一個判斷帳號是否已經存在的邏輯
                         checkAccountIsUnique();
-                        console.log('input content to feed in',
-                            inputUserAccount.value,
-                            inputPwd.value,
-                            inputName.value,
-                            isSetAsAdminChecked.value,
-                            isSetActivedChecked.value,
-                            );
                         await acctMgmtStore.createNewAccount({
                             username: inputUserAccount.value,
                             password: inputPwd.value,

src/views/AccountManagement/ModalDeleteAlert.vue

@@ -18,7 +18,9 @@
                 {{ i18next.t("No") }}
             </button>
             <button id="sure_to_delete_acct_btn" class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px]
-                border-2 border-[#FF3366] text-[#FF3366]">
+                border-2 border-[#FF3366] text-[#FF3366]"
+                @click="onDeleteConfirmBtnClick"
+                >
                 {{ i18next.t("Yes") }}
             </button>
         </footer>
@@ -28,13 +30,25 @@
 <script>
 import { defineComponent, ref, computed, onBeforeMount, watch, } from 'vue';
 import { useModalStore } from '@/stores/modal.js';
+import { useRouter } from 'vue-router';
 import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import i18next from '@/i18n/i18n.js';
+import { useToast } from 'vue-toast-notification';
 
 export default defineComponent({
     setup() {
         const acctMgmtStore = useAcctMgmtStore();
         const modalStore = useModalStore();
+        const toast = useToast();
+        const router = useRouter();
+
+        const onDeleteConfirmBtnClick = async() => {
+            if(acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)){
+                toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
+                modalStore.closeModal();
+                router.push("/account/account-admin");
+            }            
+        }
 
         const onNoBtnClick = () => {
             modalStore.closeModal();
@@ -42,6 +56,7 @@ export default defineComponent({
 
         return {
             i18next,
+            onDeleteConfirmBtnClick,
             onNoBtnClick,
         };
     },