code refactor

src/views/base/accounts/ReconciliationStatementPageBase.ts

@@ -111,6 +111,24 @@ export function useReconciliationStatementPageBase() {
         }
     });
 
+    function getDisplayTransactionType(transaction: TransactionReconciliationStatementResponseItem): string {
+        if (transaction.type === TransactionType.ModifyBalance) {
+            return tt('Modify Balance');
+        } else if (transaction.type === TransactionType.Income) {
+            return tt('Income');
+        } else if (transaction.type === TransactionType.Expense) {
+            return tt('Expense');
+        } else if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
+            return tt('Transfer In');
+        } else if (transaction.type === TransactionType.Transfer && transaction.sourceAccountId === accountId.value) {
+            return tt('Transfer Out');
+        } else if (transaction.type === TransactionType.Transfer) {
+            return tt('Transfer');
+        } else {
+            return tt('Unknown');
+        }
+    }
+
     function getDisplayDateTime(transaction: TransactionReconciliationStatementResponseItem): string {
         const transactionTime = getUnixTime(parseDateFromUnixTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value));
         return formatUnixTimeToLongDateTime(transactionTime);
@@ -192,27 +210,15 @@ export function useReconciliationStatementPageBase() {
         const transactions = reconciliationStatements.value?.transactions ?? [];
         const rows = transactions.map(transaction => {
             const transactionTime = getUnixTime(parseDateFromUnixTime(transaction.time, transaction.utcOffset, currentTimezoneOffsetMinutes.value));
-            let type = '';
+            let type = getDisplayTransactionType(transaction);
             let categoryName = allCategoriesMap.value[transaction.categoryId]?.name || '';
             let displayAmount = removeAll(formatAmount(transaction.sourceAmount), digitGroupingSymbol);
             let displayAccountName = allAccountsMap.value[transaction.sourceAccountId]?.name || '';
 
             if (transaction.type === TransactionType.ModifyBalance) {
-                type = tt('Modify Balance');
                 categoryName = tt('Modify Balance');
-            } else if (transaction.type === TransactionType.Income) {
-                type = tt('Income');
-            } else if (transaction.type === TransactionType.Expense) {
-                type = tt('Expense');
             } else if (transaction.type === TransactionType.Transfer && transaction.destinationAccountId === accountId.value) {
-                type = tt('Transfer In');
                 displayAmount = removeAll(formatAmount(transaction.destinationAmount), digitGroupingSymbol);
-            } else if (transaction.type === TransactionType.Transfer && transaction.sourceAccountId === accountId.value) {
-                type = tt('Transfer Out');
-            } else if (transaction.type === TransactionType.Transfer) {
-                type = tt('Transfer');
-            } else {
-                type = tt('Unknown');
             }
 
             if (transaction.type === TransactionType.Transfer && allAccountsMap.value[transaction.destinationAccountId]) {
@@ -274,6 +280,7 @@ export function useReconciliationStatementPageBase() {
         displayOpeningBalance,
         displayClosingBalance,
         // functions
+        getDisplayTransactionType,
         getDisplayDateTime,
         getDisplayDate,
         getDisplayTime,

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

@@ -116,13 +116,9 @@
                             v-if="item.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(item) }}</v-chip>
                 </template>
                 <template #item.type="{ item }">
-                    <v-chip label color="secondary" variant="outlined" size="x-small" v-if="item.type === TransactionType.ModifyBalance">{{ tt('Modify Balance') }}</v-chip>
+                    <v-chip label variant="outlined" size="x-small"
-                    <v-chip label class="text-income" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Income">{{ tt('Income') }}</v-chip>
+                            :class="{ 'text-income' : item.type === TransactionType.Income, 'text-expense': item.type === TransactionType.Expense }"
-                    <v-chip label class="text-expense" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Expense">{{ tt('Expense') }}</v-chip>
+                            :color="getTransactionTypeColor(item)">{{ getDisplayTransactionType(item) }}</v-chip>
-                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer && item.destinationAccountId === accountId">{{ tt('Transfer In') }}</v-chip>
-                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer && item.sourceAccountId === accountId">{{ tt('Transfer Out') }}</v-chip>
-                    <v-chip label color="primary" variant="outlined" size="x-small" v-else-if="item.type === TransactionType.Transfer">{{ tt('Transfer') }}</v-chip>
-                    <v-chip label color="default" variant="outlined" size="x-small" v-else>{{ tt('Unknown') }}</v-chip>
                 </template>
                 <template #item.categoryId="{ item }">
                     <div class="d-flex align-center">
@@ -274,6 +270,7 @@ const {
     displayTotalBalance,
     displayOpeningBalance,
     displayClosingBalance,
+    getDisplayTransactionType,
     getDisplayDateTime,
     getDisplayTimezone,
     getDisplaySourceAmount,
@@ -353,6 +350,20 @@ function getTablePageOptions(linesCount?: number): ReconciliationStatementDialog
     return pageOptions;
 }
 
+function getTransactionTypeColor(transaction: TransactionReconciliationStatementResponseItem): string | undefined {
+    if (transaction.type === TransactionType.ModifyBalance) {
+        return 'secondary';
+    } else if (transaction.type === TransactionType.Income) {
+        return undefined;
+    } else if (transaction.type === TransactionType.Expense) {
+        return undefined;
+    } else if (transaction.type === TransactionType.Transfer) {
+        return 'primary';
+    } else {
+        return 'default';
+    }
+}
+
 function open(options: { accountId: string, startTime: number, endTime: number }): Promise<void> {
     accountId.value = options.accountId;
     startTime.value = options.startTime;