transaction edit dialog supports duplicate transaction, edit transaction and save new transaction

src/stores/transaction.js

@@ -15,6 +15,8 @@ import { isNumber, isString } from '@/lib/common.js';
 import {
     getCurrentUnixTime,
     getTimezoneOffsetMinutes,
+    getBrowserTimezoneOffsetMinutes,
+    getActualUnixTimeForStore,
     parseDateFromUnixTime,
     getShortDate,
     getYear,
@@ -651,25 +653,55 @@ export const useTransactionsStore = defineStore('transactions', {
                 });
             });
         },
-        saveTransaction({ transaction, defaultCurrency }) {
+        saveTransaction({ transaction, defaultCurrency, isEdit }) {
             const self = this;
             const settingsStore = useSettingsStore();
             const exchangeRatesStore = useExchangeRatesStore();
 
+            const submitTransaction = {
+                type: transaction.type,
+                time: getActualUnixTimeForStore(transaction.time, transaction.utcOffset, getBrowserTimezoneOffsetMinutes()),
+                sourceAccountId: transaction.sourceAccountId,
+                sourceAmount: transaction.sourceAmount,
+                destinationAccountId: '0',
+                destinationAmount: 0,
+                hideAmount: transaction.hideAmount,
+                tagIds: transaction.tagIds,
+                comment: transaction.comment,
+                geoLocation: transaction.geoLocation,
+                utcOffset: transaction.utcOffset
+            };
+
+            if (transaction.type === transactionConstants.allTransactionTypes.Expense) {
+                submitTransaction.categoryId = transaction.expenseCategory;
+            } else if (transaction.type === transactionConstants.allTransactionTypes.Income) {
+                submitTransaction.categoryId = transaction.incomeCategory;
+            } else if (transaction.type === transactionConstants.allTransactionTypes.Transfer) {
+                submitTransaction.categoryId = transaction.transferCategory;
+                submitTransaction.destinationAccountId = transaction.destinationAccountId;
+                submitTransaction.destinationAmount = transaction.destinationAmount;
+            } else {
+                return Promise.reject('An error has occurred');
+            }
+
+            if (isEdit) {
+                submitTransaction.id = transaction.id;
+            }
+
             return new Promise((resolve, reject) => {
                 let promise = null;
 
-                if (!transaction.id) {
+                if (!submitTransaction.id) {
-                    promise = services.addTransaction(transaction);
+                    promise = services.addTransaction(submitTransaction);
                 } else {
-                    promise = services.modifyTransaction(transaction);
+                    promise = services.modifyTransaction(submitTransaction);
                 }
 
                 promise.then(response => {
                     const data = response.data;
 
                     if (!data || !data.success || !data.result) {
-                        if (!transaction.id) {
+                        if (!submitTransaction.id) {
                             reject({ message: 'Unable to add transaction' });
                         } else {
                             reject({ message: 'Unable to save transaction' });
@@ -677,7 +709,7 @@ export const useTransactionsStore = defineStore('transactions', {
                         return;
                     }
 
-                    if (!transaction.id) {
+                    if (!submitTransaction.id) {
                         if (!self.transactionListStateInvalid) {
                             self.updateTransactionListInvalidState(true);
                         }
@@ -710,7 +742,7 @@ export const useTransactionsStore = defineStore('transactions', {
                     if (error.response && error.response.data && error.response.data.errorMessage) {
                         reject({ error: error.response.data });
                     } else if (!error.processed) {
-                        if (!transaction.id) {
+                        if (!submitTransaction.id) {
                             reject({ message: 'Unable to add transaction' });
                         } else {
                             reject({ message: 'Unable to save transaction' });

src/views/desktop/transactions/ListPage.vue

@@ -839,6 +839,8 @@ export default {
                 if (result && result.message) {
                     self.$refs.snackbar.showMessage(result.message);
                 }
+
+                self.reload(false);
             }).catch(error => {
                 if (error) {
                     self.$refs.snackbar.showError(error);
@@ -855,6 +857,8 @@ export default {
                 if (result && result.message) {
                     self.$refs.snackbar.showMessage(result.message);
                 }
+
+                self.reload(false);
             }).catch(error => {
                 if (error) {
                     self.$refs.snackbar.showError(error);

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

@@ -278,8 +278,17 @@
                         {{ $t(saveButtonTitle) }}
                         <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
                     </v-btn>
-                    <v-btn color="secondary" variant="tonal"
+                    <v-btn variant="tonal" :disabled="loading || submitting"
-                           :disabled="loading || submitting" @click="cancel">{{ $t(cancelButtonTitle) }}</v-btn>
+                           v-if="mode === 'view'" @click="duplicate">{{ $t('Duplicate') }}</v-btn>
+                    <v-btn color="warning" variant="tonal" :disabled="loading || submitting"
+                           v-if="mode === 'view'" @click="edit">{{ $t('Edit') }}</v-btn>
+                    <v-btn color="error" variant="tonal" :disabled="loading || submitting"
+                           v-if="mode === 'view'" @click="remove">
+                        {{ $t('Delete') }}
+                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="submitting"></v-progress-circular>
+                    </v-btn>
+                    <v-btn color="secondary" variant="tonal" :disabled="loading || submitting"
+                           @click="cancel">{{ $t(cancelButtonTitle) }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>
@@ -303,10 +312,9 @@ import categoryConstants from '@/consts/category.js';
 import transactionConstants from '@/consts/transaction.js';
 import logger from '@/lib/logger.js';
 import {
-    getNameByKeyValue
+    getUtcOffsetByUtcOffsetMinutes,
-} from '@/lib/common.js';
+    getTimezoneOffsetMinutes,
-import {
+    getCurrentUnixTime
-    getUtcOffsetByUtcOffsetMinutes
 } from '@/lib/datetime.js';
 import {
     getFirstAvailableCategoryId
@@ -619,7 +627,82 @@ export default {
                 return;
             }
 
+            const doSubmit = function () {
+                self.submitting = true;
 
+                self.transactionsStore.saveTransaction({
+                    transaction: self.transaction,
+                    defaultCurrency: self.defaultCurrency,
+                    isEdit: self.mode === 'edit'
+                }).then(() => {
+                    self.submitting = false;
+
+                    if (self.resolve) {
+                        if (self.mode === 'add') {
+                            self.resolve({
+                                message: 'You have added a new transaction'
+                            });
+                        } else if (self.mode === 'edit') {
+                            self.resolve({
+                                message: 'You have saved this transaction'
+                            });
+                        }
+                    }
+
+                    self.showState = false;
+                }).catch(error => {
+                    self.submitting = false;
+
+                    if (!error.processed) {
+                        self.$refs.snackbar.showError(error);
+                    }
+                });
+            };
+
+            if (self.transaction.sourceAmount === 0) {
+                self.$refs.confirmDialog.open('Are you sure you want to save this transaction whose amount is 0?').then(() => {
+                    doSubmit();
+                });
+            } else {
+                doSubmit();
+            }
+        },
+        duplicate() {
+            this.editTransactionId = null;
+            this.transaction.id = null;
+            this.transaction.time = getCurrentUnixTime();
+            this.transaction.timeZone = this.settingsStore.appSettings.timeZone;
+            this.transaction.utcOffset = getTimezoneOffsetMinutes(this.transaction.timeZone);
+            this.transaction.geoLocation = null;
+            this.mode = 'add';
+        },
+        edit() {
+            this.mode = 'edit';
+        },
+        remove() {
+            const self = this;
+
+            self.$refs.confirmDialog.open('Are you sure you want to delete this transaction?').then(() => {
+                self.submitting = true;
+
+                self.transactionsStore.deleteTransaction({
+                    transaction: self.transaction,
+                    defaultCurrency: self.defaultCurrency
+                }).then(() => {
+                    if (self.resolve) {
+                        self.resolve();
+                    }
+
+                    self.submitting = false;
+                    self.showState = false;
+                }).catch(error => {
+                    self.submitting = false;
+
+                    if (!error.processed) {
+                        self.$refs.snackbar.showError(error);
+                    }
+                });
+            });
         },
         cancel() {
             if (this.reject) {
@@ -676,9 +759,6 @@ export default {
             this.geoLocationStatus = null;
             this.transaction.geoLocation = null;
         },
-        getAccountNameByKeyValue(src, value, keyField, nameField, defaultName) {
-            return getNameByKeyValue(this.allAccounts, src, value, keyField, nameField, defaultName);
-        },
         setTransaction(transaction, options, setContextData) {
             setTransactionModelByTransaction(
                 this.transaction,

src/views/mobile/transactions/EditPage.vue

@@ -674,44 +674,14 @@ export default {
                 return;
             }
 
-            const submitTransaction = {
-                type: self.transaction.type,
-                time: getActualUnixTimeForStore(self.transaction.time, self.transaction.utcOffset, getBrowserTimezoneOffsetMinutes()),
-                sourceAccountId: self.transaction.sourceAccountId,
-                sourceAmount: self.transaction.sourceAmount,
-                destinationAccountId: '0',
-                destinationAmount: 0,
-                hideAmount: self.transaction.hideAmount,
-                tagIds: self.transaction.tagIds,
-                comment: self.transaction.comment,
-                geoLocation: self.transaction.geoLocation,
-                utcOffset: self.transaction.utcOffset
-            };
-
-            if (self.transaction.type === self.allTransactionTypes.Expense) {
-                submitTransaction.categoryId = self.transaction.expenseCategory;
-            } else if (self.transaction.type === self.allTransactionTypes.Income) {
-                submitTransaction.categoryId = self.transaction.incomeCategory;
-            } else if (self.transaction.type === self.allTransactionTypes.Transfer) {
-                submitTransaction.categoryId = self.transaction.transferCategory;
-                submitTransaction.destinationAccountId = self.transaction.destinationAccountId;
-                submitTransaction.destinationAmount = self.transaction.destinationAmount;
-            } else {
-                self.$toast('An error has occurred');
-                return;
-            }
-
-            if (self.mode === 'edit') {
-                submitTransaction.id = self.transaction.id;
-            }
-
             const doSubmit = function () {
                 self.submitting = true;
                 self.$showLoading(() => self.submitting);
 
                 self.transactionsStore.saveTransaction({
-                    transaction: submitTransaction,
+                    transaction: self.transaction,
-                    defaultCurrency: self.defaultCurrency
+                    defaultCurrency: self.defaultCurrency,
+                    isEdit: self.mode === 'edit'
                 }).then(() => {
                     self.submitting = false;
                     self.$hideLoading();
@@ -733,7 +703,7 @@ export default {
                 });
             };
 
-            if (submitTransaction.sourceAmount === 0) {
+            if (self.transaction.sourceAmount === 0) {
                 self.$confirm('Are you sure you want to save this transaction whose amount is 0?', () => {
                     doSubmit();
                 });