finish transaction adding/editing page

src/lib/services.js

@@ -216,6 +216,38 @@ export default {
     getTransaction: ({ id }) => {
         return axios.get('v1/transactions/get.json?id=' + id);
     },
+    addTransaction: ({ type, categoryId, time, sourceAccountId, destinationAccountId, sourceAmount, destinationAmount, tagIds, comment }) => {
+        return axios.post('v1/transactions/add.json', {
+            type,
+            categoryId,
+            time,
+            sourceAccountId,
+            destinationAccountId,
+            sourceAmount,
+            destinationAmount,
+            tagIds,
+            comment
+        });
+    },
+    modifyTransaction: ({ id, type, categoryId, time, sourceAccountId, destinationAccountId, sourceAmount, destinationAmount, tagIds, comment }) => {
+        return axios.post('v1/transactions/modify.json', {
+            id,
+            type,
+            categoryId,
+            time,
+            sourceAccountId,
+            destinationAccountId,
+            sourceAmount,
+            destinationAmount,
+            tagIds,
+            comment
+        });
+    },
+    deleteTransaction: ({ id }) => {
+        return axios.post('v1/transactions/delete.json', {
+            id
+        });
+    },
     getAllTransactionCategories: ({ type, parentId }) => {
         return axios.get('v1/transaction/categories/list.json?type=' + (type || '0') + '&parent_id=' + (parentId || parentId === 0 ? parentId : '-1'));
     },

src/lib/utils.js

@@ -37,6 +37,10 @@ function formatDate(date, format) {
     return moment(date).format(format);
 }
 
+function formatUnixTime(unixTime, format) {
+    return moment.unix(unixTime).format(format);
+}
+
 function getUnixTime(date) {
     return moment(date).unix();
 }
@@ -395,6 +399,7 @@ export default {
     isNumber,
     isBoolean,
     formatDate,
+    formatUnixTime,
     getUnixTime,
     copyObjectTo,
     copyArrayTo,

src/locales/en.js

@@ -512,6 +512,10 @@ export default {
     'Tags': 'Tags',
     'Your transaction description (optional)': 'Your transaction description (optional)',
     'Unable to get transaction': 'Unable to get transaction',
+    'Unable to add transaction': 'Unable to add transaction',
+    'Unable to save transaction': 'Unable to save transaction',
+    'You have added a new transaction': 'You have added a new transaction',
+    'You have saved this transaction': 'You have saved this transaction',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',

src/locales/zh_Hans.js

@@ -512,6 +512,10 @@ export default {
     'Tags': '标签',
     'Your transaction description (optional)': '你的交易描述 (可选)',
     'Unable to get transaction': '无法获取交易',
+    'Unable to add transaction': '无法添加交易',
+    'Unable to save transaction': '无法保存交易',
+    'You have added a new transaction': '您已经添加新交易',
+    'You have saved this transaction': '您已经保存该交易',
     'User Profile': '用户信息',
     'Language': '语言',
     'Auto Update Exchange Rates Data': '自动更新汇率数据',

src/views/mobile/transactions/Edit.vue

@@ -7,7 +7,7 @@
                 <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
             </f7-nav-right>
 
-            <f7-subnavbar>
+            <f7-subnavbar :class="{ 'disabled': editTransactionId }">
                 <f7-segmented strong>
                     <f7-button :text="$t('Expense')" :active="transaction.type === $constants.transaction.allTransactionTypes.Expense" @click="transaction.type = $constants.transaction.allTransactionTypes.Expense"></f7-button>
                     <f7-button :text="$t('Income')" :active="transaction.type === $constants.transaction.allTransactionTypes.Income" @click="transaction.type = $constants.transaction.allTransactionTypes.Income"></f7-button>
@@ -202,7 +202,7 @@
                                     :key="tag.id"
                                     :value="tag.id">{{ tag.name }}</option>
                         </select>
-                        <f7-block class="margin-top-half no-padding" slot="footer" v-if="transaction.tagIds.length">
+                        <f7-block class="margin-top-half no-padding" slot="footer" v-if="transaction.tagIds && transaction.tagIds.length">
                             <f7-chip class="transaction-edit-tag" media-bg-color="black"
                                      v-for="tagId in transaction.tagIds"
                                      :key="tagId"
@@ -210,7 +210,7 @@
                                 <f7-icon slot="media" f7="number"></f7-icon>
                             </f7-chip>
                         </f7-block>
-                        <f7-block class="margin-top-half no-padding" slot="footer" v-else-if="!transaction.tagIds.length">
+                        <f7-block class="margin-top-half no-padding" slot="footer" v-else-if="!transaction.tagIds || !transaction.tagIds.length">
                             <f7-chip class="transaction-edit-tag" :text="$t('None')">
                             </f7-chip>
                         </f7-block>
@@ -474,6 +474,7 @@ export default {
             if (self.editTransactionId) {
                 const transaction = responses[3].data.result;
 
+                self.transaction.id = transaction.id;
                 self.transaction.type = transaction.type;
 
                 if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Expense) {
@@ -485,12 +486,12 @@ export default {
                 }
 
                 self.transaction.unixTime = transaction.time;
-                self.transaction.time = self.$utilities.formatDate(transaction.time, 'YYYY-MM-DDTHH:mm');
+                self.transaction.time = self.$utilities.formatUnixTime(transaction.time, 'YYYY-MM-DDTHH:mm');
                 self.transaction.sourceAccountId = transaction.sourceAccountId;
                 self.transaction.destinationAccountId = transaction.destinationAccountId;
                 self.transaction.sourceAmount = transaction.sourceAmount;
                 self.transaction.destinationAmount = transaction.destinationAmount;
-                self.transaction.tagIds = transaction.tagIds;
+                self.transaction.tagIds = transaction.tagIds || [];
                 self.transaction.comment = transaction.comment;
             }
 
@@ -515,7 +516,82 @@ export default {
     },
     methods: {
         save() {
+            const self = this;
+            const router = self.$f7router;
 
+            self.submitting = true;
+            self.$showLoading(() => self.submitting);
+
+            const submitTransaction = {
+                type: self.transaction.type,
+                time: self.transaction.unixTime,
+                sourceAccountId: self.transaction.sourceAccountId,
+                destinationAccountId: self.transaction.sourceAccountId,
+                sourceAmount: self.transaction.sourceAmount,
+                destinationAmount: self.transaction.sourceAmount,
+                tagIds: self.transaction.tagIds,
+                comment: self.transaction.comment
+            };
+
+            if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Expense) {
+                submitTransaction.categoryId = self.transaction.expenseCategory;
+            } else if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Income) {
+                submitTransaction.categoryId = self.transaction.incomeCategory;
+            } else if (self.transaction.type === self.$constants.transaction.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;
+            }
+
+            let promise = null;
+
+            if (!self.editTransactionId) {
+                promise = self.$services.addTransaction(submitTransaction);
+            } else {
+                submitTransaction.id = self.transaction.id;
+                promise = self.$services.modifyTransaction(submitTransaction);
+            }
+
+            promise.then(response => {
+                self.submitting = false;
+                self.$hideLoading();
+                const data = response.data;
+
+                if (!data || !data.success || !data.result) {
+                    if (!self.editTransactionId) {
+                        self.$toast('Unable to add transaction');
+                    } else {
+                        self.$toast('Unable to save transaction');
+                    }
+                    return;
+                }
+
+                if (!self.editTransactionId) {
+                    self.$toast('You have added a new transaction');
+                } else {
+                    self.$toast('You have saved this transaction');
+                }
+
+                router.back();
+            }).catch(error => {
+                self.$logger.error('failed to save transaction', error);
+
+                self.submitting = false;
+                self.$hideLoading();
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$toast({ error: error.response.data });
+                } else if (!error.processed) {
+                    if (!self.editAccountId) {
+                        self.$toast('Unable to add transaction');
+                    } else {
+                        self.$toast('Unable to save transaction');
+                    }
+                }
+            });
         },
         getFirstAvailableCategoryId(categories) {
             if (!categories || !categories.length) {