1. npm install --save-dev @types/axios @types/vue @types/vue-router

2. create file vue-router.d.ts
2. pinia use my plugin
3. npm i --save-dev @types/cytoscape. npm i --save-dev @types/cytoscape-dagre. npm i --save-dev @types/cytoscape-popper.
4. add apiError.d.ts npm install --save-dev @types/vue-router.
5. add vue-axios.d.ts

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -110,7 +110,7 @@ import { ref, computed, onMounted, watch, } from 'vue';
 import { storeToRefs, mapState, mapActions, } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import { useModalStore } from '@/stores/modal.js';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import piniaLoginStore from '@/stores/login.js';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
 import i18next from '@/i18n/i18n.js';
@@ -145,10 +145,10 @@ function repeatAccountList(accountList, N) {
 }
 
 // 這是製作假資料，在正式環境不會用到
-const repeatedAccountList = repeatAccountList(accountList, 20);
+// const repeatedAccountList = repeatAccountList(accountList, 20);
 
 export default {
-    setup(props, { emit, }) {
+    setup() {
         const toast = useToast();
         const acctMgmtStore = useAcctMgmtStore();
         const loadingStore = LoadingStore();
@@ -382,7 +382,6 @@ export default {
     data() {
         return {
             i18next: i18next,
-            repeatedAccountList: repeatedAccountList,
             infiniteAcctDataVue2: [],
             infiniteStart: 0,
             isInfiniteFinish: true,
@@ -432,9 +431,10 @@ export default {
             this.openModal(MODAL_ACCT_INFO);
             this.setCurrentViewingUser(dataKey);
         },
-        onEditBtnClick(dataKey){
+        onEditBtnClick(clickedUserName){
             this.openModal(MODAL_ACCT_EDIT);
-            this.setCurrentViewingUser(dataKey);
+            console.log('TODO:', clickedUserName);
+            this.setCurrentViewingUser(clickedUserName);
         },
         moveCurrentLoginUserToFirstRow(){
 

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -142,7 +142,8 @@ import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt';
+import useLoginStore from '@/stores/login';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
 import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, } from '@/constants/constants.js';
@@ -151,6 +152,7 @@ export default defineComponent({
     setup() {
         const acctMgmtStore = useAcctMgmtStore();
         const modalStore = useModalStore();
+        const loginStore = useLoginStore();
 
         const router = useRouter();
         const toast = useToast();
@@ -245,7 +247,7 @@ export default defineComponent({
                     }                
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
-                        password: inputPwd.value,
+                        password: inputPwd.value === undefined ? '' : inputPwd.value,
                         name: inputName.value,
                         is_admin: isSetAsAdminChecked.value,
                         is_active: isSetActivedChecked.value,
@@ -261,7 +263,7 @@ export default defineComponent({
                         currentViewingUser.value.username, {
                         newUsername: inputUserAccount.value,
                         password: inputPwd.value,
-                        name: inputName.value,
+                        name: inputName.value === undefined ? '' : inputName.value,
                         is_active: true,
                         // is_active: isSetActivedChecked.value, //TODO: 待確認需求規格
                     });
@@ -307,6 +309,8 @@ export default defineComponent({
         }
 
         onMounted(() => {
+            console.log('username', username, name, );
+            console.log('userData TODO:', loginStore.userData);
         });
 
         return {

src/views/AccountManagement/ModalAccountInfo.vue

@@ -28,7 +28,7 @@
 <script>
 import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import ModalHeader from './ModalHeader.vue';
 import Badge from '../../components/Badge.vue';