From 73f8446d0730675a6f06b79086346dff90b63d34 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 9 Oct 2025 22:34:58 +0800
Subject: [PATCH] support modifying amount and description when importing
 transactions

---
 src/components/desktop/AmountInput.vue        |  6 ++-
 .../tabs/ImportTransactionCheckDataTab.vue    | 43 +++++++++++++++++--
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index 395c897f..ce534a08 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -1,7 +1,8 @@
 <template>
     <v-text-field type="text" class="text-field-with-colored-label" :class="extraClass"
                   :color="color" :base-color="color"
-                  :density="density" :readonly="!!readonly" :disabled="!!disabled"
+                  :density="density" :variant="variant"
+                  :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
                   :rules="enableRules ? rules : []" v-model="currentValue" v-if="!hide && !formulaMode"
@@ -80,7 +81,7 @@ import { DEFAULT_DECIMAL_NUMBER_COUNT } from '@/consts/numeral.ts';
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
 import { isNumber, replaceAll } from '@/lib/common.ts';
 import { evaluateExpressionToAmount } from '@/lib/evaluator.ts';
-import type { ComponentDensity } from '@/lib/ui/desktop.ts';
+import type { ComponentDensity, InputVariant } from '@/lib/ui/desktop.ts';
 import logger from '@/lib/logger.ts';
 
 import {
@@ -95,6 +96,7 @@ interface DesktopAmountInputProps extends CommonNumberInputProps {
     class?: string;
     color?: string;
     density?: ComponentDensity;
+    variant?: InputVariant;
     currency: string;
     showCurrency?: boolean;
     persistentPlaceholder?: boolean;
diff --git a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
index 1f060ebb..10fccf73 100644
--- a/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
+++ b/src/views/desktop/transactions/import/tabs/ImportTransactionCheckDataTab.vue
@@ -160,9 +160,29 @@
             </div>
         </template>
         <template #item.sourceAmount="{ item }">
-            <span>{{ getTransactionDisplayAmount(item) }}</span>
-            <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
-            <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
+            <div class="d-flex align-center" v-if="editingTransaction !== item">
+                <span>{{ getTransactionDisplayAmount(item) }}</span>
+                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
+                <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
+            </div>
+            <div class="d-flex align-center" :style="`width: ${item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId ? 250 : 100}px`" v-if="editingTransaction === item">
+                <amount-input density="compact" variant="plain"
+                              persistent-placeholder
+                              :currency="item.originalSourceAccountCurrency || defaultCurrency"
+                              :show-currency="true"
+                              :disabled="!!disabled"
+                              :placeholder="tt('Amount')"
+                              v-model="item.sourceAmount"/>
+                <v-icon class="icon-with-direction mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
+                <amount-input density="compact" variant="plain"
+                              persistent-placeholder
+                              :currency="item.originalDestinationAccountCurrency || defaultCurrency"
+                              :show-currency="true"
+                              :disabled="!!disabled"
+                              :placeholder="tt('Transfer In Amount')"
+                              v-model="item.destinationAmount"
+                              v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"/>
+            </div>
         </template>
         <template #item.actualSourceAccountName="{ item }">
             <div class="d-flex align-center" v-if="editingTransaction !== item">
@@ -178,7 +198,7 @@
                     <span>{{ item.originalDestinationAccountName }}</span>
                 </div>
             </div>
-            <div class="d-flex align-center" style="width: 200px" v-if="editingTransaction === item">
+            <div class="d-flex align-center" :style="`width: ${item.type === TransactionType.Transfer ? 450 : 200}px`"  v-if="editingTransaction === item">
                 <two-column-select density="compact" variant="plain"
                                    primary-key-field="id" primary-value-field="category"
                                    primary-title-field="name" primary-footer-field="displayBalance"
@@ -271,6 +291,17 @@
                 </v-autocomplete>
             </div>
         </template>
+        <template #item.comment="{ item }">
+            <span v-if="editingTransaction !== item">{{ item.comment || '' }}</span>
+            <div v-if="editingTransaction === item">
+                <v-text-field style="width: 200px" type="text"
+                              density="compact" variant="plain"
+                              persistent-placeholder
+                              :placeholder="tt('Description')"
+                              :disabled="!!disabled"
+                              v-model="item.comment" />
+            </div>
+        </template>
         <template #bottom>
             <div class="title-and-toolbar d-flex align-center text-no-wrap mt-2" v-if="importTransactions">
                 <span :class="{ 'text-error': selectedInvalidTransactionCount > 0 }">
@@ -1934,4 +1965,8 @@ defineExpose({
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.import-transaction-table .v-text-field.v-input.v-input--density-compact .v-field__input {
+    padding-top: 0;
+}
 </style>