feature: set is active API

package.json

@@ -31,6 +31,7 @@
     "javascript-color-gradient": "^2.4.4",
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
+    "npx": "^10.2.2",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",
     "primeicons": "^6.0.1",
@@ -48,6 +49,7 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^20.14.9",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.6",
@@ -64,6 +66,8 @@
     "sass": "^1.57.1",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.2",
     "vite": "^4.0.0",
     "vitest": "^0.25.6"
   }

src/stores/acctMgmt.js

@@ -133,7 +133,7 @@ export default defineStore('acctMgmtStore', {
 
       try{
         const response = await this.$axios.put(apiEdit, {
-          username: editDetail.newUsername,
+          username: editDetail.newUsername ? editDetail.newUsername : editDetail.username,
           password: editDetail.password,
           name: editDetail.name,
           is_active: editDetail.is_active,

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -56,8 +56,10 @@
                             <div class="row-container flex-w-full-hoverable w-full" @mouseenter="handleRowMouseOver(slotProps.data.username)"
                                 @mouseout="handleRowMouseOut(slotProps.data.username)">
                                 <div class="w-full flex justify-center">
-                                    <img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"/>
-                                    <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"/>
+                                    <img v-if="slotProps.data.is_active" src="@/assets/radioOn.svg" alt="Radio On" class="cursor-pointer flex"
+                                        @click="setIsActiveInput(slotProps.data, false)"/>
+                                    <img v-else src="@/assets/radioOff.svg" alt="Radio Off" class="cursor-pointer flex"
+                                        @click="setIsActiveInput(slotProps.data, true)"/>
                                 </div> 
                             </div>                                  
                         </template>
@@ -112,6 +114,7 @@ import useAcctMgmtStore from '@/stores/acctMgmt.js';
 import piniaLoginStore from '@/stores/login.js';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
 import i18next from '@/i18n/i18n.js';
+import { useToast } from 'vue-toast-notification';
 import {
     MODAL_CREATE_NEW,
     MODAL_ACCT_EDIT,
@@ -146,6 +149,7 @@ const repeatedAccountList = repeatAccountList(accountList, 20);
 
 export default {
     setup(props, { emit, }) {
+        const toast = useToast();
         const acctMgmtStore = useAcctMgmtStore();
         const loadingStore = LoadingStore();
         const modalStore = useModalStore();
@@ -268,6 +272,16 @@ export default {
         const onSearchAccountButtonClick = (inputQueryString) => {
             inputQuery.value = inputQueryString;
         };
+        
+        const setIsActiveInput = async(userData, inputIsActiveToSet) => {
+            await acctMgmtStore.editAccount(userData.username, {
+                username: userData.username,
+                name: userData.name,
+                is_active: inputIsActiveToSet,
+            });
+            acctMgmtStore.setShouldUpdateList(true);
+            await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+        }
 
         onMounted(async () => { 
             await fetchLoginUserData();
@@ -332,6 +346,7 @@ export default {
             handleEditMouseOut,
             handleDetailMouseOver,
             handleDetailMouseOut,
+            setIsActiveInput,
             iconDeleteGray,
             iconDeleteRed,
             iconEditOff,