use for-of statements to replace for and for-in

src/views/desktop/accounts/ListPage.vue

@@ -150,8 +150,8 @@
                                                 handle=".drag-handle"
                                                 ghost-class="dragging-item"
                                                 :disabled="activeAccountCategoryVisibleAccountCount <= 1"
-                                                :list="allCategorizedAccountsMap[activeAccountCategory.type].accounts"
-                                                v-if="activeAccountCategory && allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type].accounts && allCategorizedAccountsMap[activeAccountCategory.type].accounts.length"
+                                                :list="allCategorizedAccountsMap[activeAccountCategory.type]!.accounts"
+                                                v-if="activeAccountCategory && allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type]!.accounts && allCategorizedAccountsMap[activeAccountCategory.type]!.accounts.length"
                                                 @change="onMove"
                                             >
                                                 <template #item="{ element }">
@@ -376,20 +376,24 @@ const activeAccountCategory = computed<AccountCategory | undefined>(() => Accoun
 const activeAccountCategoryTotalBalance = computed<string>(() => accountCategoryTotalBalance(activeAccountCategory.value));
 
 const activeAccountCategoryVisibleAccountCount = computed<number>(() => {
-    if (!activeAccountCategory.value || !allCategorizedAccountsMap.value[activeAccountCategory.value.type] || !allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts) {
+    if (!activeAccountCategory.value) {
         return 0;
     }
 
-    const accounts = allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts;
+    const categorizedAccounts = allCategorizedAccountsMap.value[activeAccountCategory.value.type];
+
+    if (!categorizedAccounts || !categorizedAccounts.accounts || !categorizedAccounts.accounts.length) {
+        return 0;
+    }
 
     if (showHidden.value) {
-        return accounts.length;
+        return categorizedAccounts.accounts.length;
     }
 
     let visibleCount = 0;
 
-    for (let i = 0; i < accounts.length; i++) {
-        if (!accounts[i].hidden) {
+    for (const account of categorizedAccounts.accounts) {
+        if (!account.hidden) {
             visibleCount++;
         }
     }
@@ -407,9 +411,7 @@ function reload(force: boolean): void {
         displayOrderModified.value = false;
 
         if (allAccounts.value) {
-            for (let i = 0; i < allAccounts.value.length; i++) {
-                const account = allAccounts.value[i];
-
+            for (const account of allAccounts.value) {
                 if (account.type === AccountType.MultiSubAccounts.type && !activeSubAccount.value[account.id]) {
                     activeSubAccount.value[account.id] = '';
                 }

src/views/desktop/accounts/list/dialogs/EditDialog.vue

@@ -202,6 +202,7 @@ import { useAccountEditPageBaseBase } from '@/views/base/accounts/AccountEditPag
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
+import { itemAndIndex } from '@/core/base.ts';
 import { AccountType } from '@/core/account.ts';
 import { ALL_ACCOUNT_ICONS } from '@/consts/icon.ts';
 import { ALL_ACCOUNT_COLORS } from '@/consts/color.ts';
@@ -365,11 +366,11 @@ function save(): void {
     });
 }
 
-function removeSubAccount(subAccount: Account): void {
+function removeSubAccount(currentSubAccount: Account): void {
     confirmDialog.value?.open('Are you sure you want to remove this sub-account?').then(() => {
-        for (let i = 0; i < subAccounts.value.length; i++) {
-            if (subAccounts.value[i] === subAccount) {
-                subAccounts.value.splice(i, 1);
+        for (const [subAccount, index] of itemAndIndex(subAccounts.value)) {
+            if (subAccount === currentSubAccount) {
+                subAccounts.value.splice(index, 1);
 
                 if (currentAccountIndex.value >= subAccounts.value.length) {
                     currentAccountIndex.value = subAccounts.value.length - 1;

src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue

@@ -162,15 +162,15 @@
                 <template #item.categoryId="{ item }">
                     <div class="d-flex align-center">
                         <ItemIcon size="24px" icon-type="category"
-                                  :icon-id="allCategoriesMap[item.categoryId].icon"
-                                  :color="allCategoriesMap[item.categoryId].color"
+                                  :icon-id="allCategoriesMap[item.categoryId]?.icon ?? ''"
+                                  :color="allCategoriesMap[item.categoryId]?.color ?? ''"
                                   v-if="allCategoriesMap[item.categoryId] && allCategoriesMap[item.categoryId]?.color"></ItemIcon>
                         <v-icon size="24" :icon="mdiPencilBoxOutline" v-else-if="!allCategoriesMap[item.categoryId] || !allCategoriesMap[item.categoryId]?.color" />
                         <span class="ms-2" v-if="item.type === TransactionType.ModifyBalance">
                             {{ tt('Modify Balance') }}
                         </span>
                         <span class="ms-2" v-else-if="item.type !== TransactionType.ModifyBalance && allCategoriesMap[item.categoryId]">
-                            {{ allCategoriesMap[item.categoryId].name }}
+                            {{ allCategoriesMap[item.categoryId]?.name }}
                         </span>
                     </div>
                 </template>
@@ -181,9 +181,9 @@
                 </template>
                 <template #item.sourceAccountId="{ item }">
                     <div class="d-flex align-center">
-                        <span v-if="item.sourceAccountId && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
+                        <span v-if="item.sourceAccountId && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId]?.name }}</span>
                         <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
-                        <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && allAccountsMap[item.destinationAccountId]">{{ allAccountsMap[item.destinationAccountId].name }}</span>
+                        <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && allAccountsMap[item.destinationAccountId]">{{ allAccountsMap[item.destinationAccountId]?.name }}</span>
                     </div>
                 </template>
                 <template #item.accountBalance="{ item }">
@@ -388,12 +388,7 @@ const totalPageCount = computed<number>(() => {
         return 1;
     }
 
-    let count = 0;
-
-    for (let i = 0; i < reconciliationStatements.value.transactions.length; i++) {
-        count++;
-    }
-
+    const count = reconciliationStatements.value.transactions.length;
     return Math.ceil(count / countPerPage.value);
 });
 
@@ -422,9 +417,7 @@ function getTablePageOptions(linesCount?: number): NameNumeralValue[] {
 
     const availableCountPerPage = [ 5, 10, 15, 20, 25, 30, 50 ];
 
-    for (let i = 0; i < availableCountPerPage.length; i++) {
-        const count = availableCountPerPage[i];
-
+    for (const count of availableCountPerPage) {
         if (linesCount < count) {
             break;
         }