From bdab9c9664dfcba67edaecb33db2d4fb6476e747 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 17 Dec 2020 01:01:59 +0800
Subject: [PATCH] add partial transaction edit page ui

---
 src/filters/currency.js               |   6 +-
 src/lib/utils.js                      |   7 +
 src/locales/en.js                     |  14 +-
 src/locales/zh_Hans.js                |  14 +-
 src/views/mobile/transactions/New.vue | 314 ++++++++++++++++++++++++--
 5 files changed, 336 insertions(+), 19 deletions(-)

diff --git a/src/filters/currency.js b/src/filters/currency.js
index aeb48f7a..7e369875 100644
--- a/src/filters/currency.js
+++ b/src/filters/currency.js
@@ -15,7 +15,7 @@ export default function ({i18n}, value, currencyCode) {
 
     const currencyDisplayMode = settings.getCurrencyDisplayMode();
 
-    if (currencyDisplayMode === 'symbol') {
+    if (currencyCode && currencyDisplayMode === 'symbol') {
         const currencyInfo = currency.all[currencyCode];
         let currencySymbol = currency.defaultCurrencySymbol;
 
@@ -29,9 +29,9 @@ export default function ({i18n}, value, currencyCode) {
             amount: value,
             symbol: currencySymbol
         });
-    } else if (currencyDisplayMode === 'code') {
+    } else if (currencyCode && currencyDisplayMode === 'code') {
         return `${value} ${currencyCode}`;
-    } else if (currencyDisplayMode === 'name') {
+    } else if (currencyCode && currencyDisplayMode === 'name') {
         const currencyName = i18n.t(`currency.${currencyCode}`);
         return `${value} ${currencyName}`;
     } else {
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 6a7899d7..681539b4 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,5 +1,7 @@
 import CryptoJS from "crypto-js";
+import moment from 'moment';
 import uaParser from 'ua-parser-js';
+
 import accountConstants from '../consts/account.js';
 import settings from "./settings.js";
 
@@ -31,6 +33,10 @@ function isBoolean(val) {
     return typeof(val) === 'boolean';
 }
 
+function formatDate(date, format) {
+    return moment(date).format(format);
+}
+
 function copyObjectTo(fromObject, toObject) {
     if (!isObject(fromObject)) {
         return toObject;
@@ -340,6 +346,7 @@ export default {
     isString,
     isNumber,
     isBoolean,
+    formatDate,
     copyObjectTo,
     copyArrayTo,
     appendThousandsSeparator,
diff --git a/src/locales/en.js b/src/locales/en.js
index eb9f7b7e..8e4057fd 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -443,7 +443,6 @@ export default {
     'Sign Up': 'Sign Up',
     'Transaction Details': 'Transaction Details',
     'Account List': 'Account List',
-    'New Transaction': 'New Transaction',
     'Net assets': 'Net assets',
     'Total assets': 'Total assets',
     'Total liabilities': 'Total liabilities',
@@ -495,6 +494,19 @@ export default {
     'Unable to move account': 'Unable to move account',
     'Are you sure you want to delete this account?': 'Are you sure you want to delete this account?',
     'Unable to delete this account': 'Unable to delete this account',
+    'Add Transaction': 'Add Transaction',
+    'Edit Transaction': 'Edit Transaction',
+    'Expense Amount': 'Expense Amount',
+    'Income Amount': 'Income Amount',
+    'Transfer Out Amount': 'Transfer Out Amount',
+    'Transfer In Amount': 'Transfer In Amount',
+    'Category': 'Category',
+    'Account': 'Account',
+    'Source Account': 'Source Account',
+    'Destination Account': 'Destination Account',
+    'Transaction Time': 'Transaction Time',
+    'Tags': 'Tags',
+    'Your transaction description (optional)': 'Your transaction description (optional)',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 960da513..3d40e2c4 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -443,7 +443,6 @@ export default {
     'Sign Up': '注册',
     'Transaction Details': '交易详情',
     'Account List': '账户列表',
-    'New Transaction': '新交易',
     'Net assets': '净资产',
     'Total assets': '总资产',
     'Total liabilities': '总负债',
@@ -495,6 +494,19 @@ export default {
     'Unable to move account': '无法移动账户',
     'Are you sure you want to delete this account?': '您确定要删除该账户？',
     'Unable to delete this account': '无法删除该账户',
+    'Add Transaction': '添加交易',
+    'Edit Transaction': '编辑交易',
+    'Expense Amount': '支出金额',
+    'Income Amount': '收入金额',
+    'Transfer Out Amount': '转出金额',
+    'Transfer In Amount': '转入金额',
+    'Category': '分类',
+    'Account': '账户',
+    'Source Account': '来源账户',
+    'Destination Account': '目标账户',
+    'Transaction Time': '交易时间',
+    'Tags': '标签',
+    'Your transaction description (optional)': '你的交易描述 (可选)',
     'User Profile': '用户信息',
     'Language': '语言',
     'Auto Update Exchange Rates Data': '自动更新汇率数据',
diff --git a/src/views/mobile/transactions/New.vue b/src/views/mobile/transactions/New.vue
index 7eac5483..a68041a4 100644
--- a/src/views/mobile/transactions/New.vue
+++ b/src/views/mobile/transactions/New.vue
@@ -1,8 +1,14 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('New Transaction')" :back-link="$t('Back')">
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t(title)"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
+            </f7-nav-right>
+
             <f7-subnavbar>
-                <f7-segmented raised>
+                <f7-segmented strong>
                     <f7-button tab-link="#expense" :text="$t('Expense')" tab-link-active></f7-button>
                     <f7-button tab-link="#income" :text="$t('Income')"></f7-button>
                     <f7-button tab-link="#transfer" :text="$t('Transfer')"></f7-button>
@@ -11,21 +17,301 @@
         </f7-navbar>
 
         <f7-tabs>
-            <f7-tab id="expense" tab-active class="page-content">
-                <f7-list media-list class="skeleton-text">
-                    <f7-list-item title="Placeholder"></f7-list-item>
-                </f7-list>
+            <f7-tab id="expense" tab-active class="page-content no-padding-top">
+                <f7-card>
+                    <f7-card-content class="no-safe-areas" :padding="false">
+                        <f7-list form>
+                            <f7-list-item
+                                class="color-theme-teal transaction-edit-amount padding-top-half padding-bottom-half"
+                                :header="$t('Expense Amount')"
+                                :title="transaction.destinationAmount | currency"
+                                @click="transaction.showDestinationAmountSheet = true"
+                            >
+                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
+                                                v-model="transaction.destinationAmount"
+                                ></NumberPadSheet>
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Category')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Account')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                :label="$t('Transaction Time')"
+                                type="datetime-local"
+                                class="transaction-edit-time"
+                                :value="transaction.time"
+                                @input="transaction.time = $event.target.value"
+                            >
+                            </f7-list-input>
+
+                            <f7-list-item
+                                :header="$t('Tags')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                type="textarea"
+                                :label="$t('Description')"
+                                :placeholder="$t('Your transaction description (optional)')"
+                                :value="transaction.comment"
+                                @input="transaction.comment = $event.target.value"
+                            ></f7-list-input>
+                        </f7-list>
+                    </f7-card-content>
+                </f7-card>
             </f7-tab>
-            <f7-tab id="income" class="page-content">
-                <f7-list media-list class="skeleton-text">
-                    <f7-list-item title="Placeholder"></f7-list-item>
-                </f7-list>
+            <f7-tab id="income" class="page-content no-padding-top">
+                <f7-card>
+                    <f7-card-content class="no-safe-areas" :padding="false">
+                        <f7-list form>
+                            <f7-list-item
+                                class="color-theme-red transaction-edit-amount padding-top-half padding-bottom-half"
+                                :header="$t('Income Amount')"
+                                :title="transaction.destinationAmount | currency"
+                                @click="transaction.showDestinationAmountSheet = true"
+                            >
+                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
+                                                v-model="transaction.destinationAmount"
+                                ></NumberPadSheet>
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Category')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Account')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                :label="$t('Transaction Time')"
+                                type="datetime-local"
+                                class="transaction-edit-time"
+                                :value="transaction.time"
+                                @input="transaction.time = $event.target.value"
+                            >
+                            </f7-list-input>
+
+                            <f7-list-item
+                                :header="$t('Tags')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                type="textarea"
+                                :label="$t('Description')"
+                                :placeholder="$t('Your transaction description (optional)')"
+                                :value="transaction.comment"
+                                @input="transaction.comment = $event.target.value"
+                            ></f7-list-input>
+                        </f7-list>
+                    </f7-card-content>
+                </f7-card>
             </f7-tab>
-            <f7-tab id="transfer" class="page-content">
-                <f7-list media-list class="skeleton-text">
-                    <f7-list-item title="Placeholder"></f7-list-item>
-                </f7-list>
+            <f7-tab id="transfer" class="page-content no-padding-top">
+                <f7-card>
+                    <f7-card-content class="no-safe-areas" :padding="false">
+                        <f7-list form>
+                            <f7-list-item
+                                class="transaction-edit-amount padding-top-half padding-bottom-half"
+                                :header="$t('Transfer Out Amount')"
+                                :title="transaction.sourceAmount | currency"
+                                @click="transaction.showSourceAmountSheet = true"
+                            >
+                                <NumberPadSheet :show.sync="transaction.showSourceAmountSheet"
+                                                v-model="transaction.sourceAmount"
+                                ></NumberPadSheet>
+                            </f7-list-item>
+
+                            <f7-list-item
+                                class="transaction-edit-amount padding-top-half padding-bottom-half"
+                                :header="$t('Transfer In Amount')"
+                                :title="transaction.destinationAmount | currency"
+                                @click="transaction.showDestinationAmountSheet = true"
+                            >
+                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
+                                                v-model="transaction.destinationAmount"
+                                ></NumberPadSheet>
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Category')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Source Account')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-item
+                                :header="$t('Destination Account')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                :label="$t('Transaction Time')"
+                                type="datetime-local"
+                                class="transaction-edit-time"
+                                :value="transaction.time"
+                                @input="transaction.time = $event.target.value"
+                            >
+                            </f7-list-input>
+
+                            <f7-list-item
+                                :header="$t('Tags')"
+                            >
+                            </f7-list-item>
+
+                            <f7-list-input
+                                type="textarea"
+                                :label="$t('Description')"
+                                :placeholder="$t('Your transaction description (optional)')"
+                                :value="transaction.comment"
+                                @input="transaction.comment = $event.target.value"
+                            ></f7-list-input>
+                        </f7-list>
+                    </f7-card-content>
+                </f7-card>
             </f7-tab>
         </f7-tabs>
     </f7-page>
 </template>
+
+<script>
+export default {
+    data() {
+        const self = this;
+
+        return {
+            editTransactionId: null,
+            transaction: {
+                sourceAmount: 0,
+                destinationAmount: 0,
+                time: self.$utilities.formatDate(new Date(), 'YYYY-MM-DDTHH:mm'),
+                comment: '',
+                showSourceAmountSheet: false,
+                showDestinationAmountSheet: false
+            },
+            allAccounts: [],
+            allCategories: {},
+            allTags: [],
+            submitting: false
+        };
+    },
+    computed: {
+        title() {
+            if (!this.editTransactionId) {
+                return 'Add Transaction';
+            } else {
+                return 'Edit Transaction';
+            }
+        },
+        saveButtonTitle() {
+            if (!this.editTransactionId) {
+                return 'Add';
+            } else {
+                return 'Save';
+            }
+        },
+        inputIsEmpty() {
+            return !!this.inputEmptyProblemMessage;
+        },
+        inputEmptyProblemMessage() {
+            return null;
+        }
+    },
+    watch: {
+        'transaction.sourceAmount': function (newValue) {
+            this.transaction.destinationAmount = newValue;
+        },
+        'transaction.destinationAmount': function (newValue) {
+            this.transaction.sourceAmount = newValue;
+        }
+    },
+    created() {
+        const self = this;
+        const router = self.$f7router;
+
+        self.loading = true;
+
+        const promises = [
+            self.$services.getAllAccounts(),
+            self.$services.getAllTransactionCategories({}),
+            self.$services.getAllTransactionTags()
+        ];
+
+        Promise.all(promises).then(function (responses) {
+            const accountDta = responses[0].data;
+            const categoryData = responses[1].data;
+            const tagData = responses[2].data;
+
+            if (!accountDta || !accountDta.success || !accountDta.result) {
+                self.$toast('Unable to get account list');
+                router.back();
+                return;
+            }
+
+            if (!categoryData || !categoryData.success || !categoryData.result) {
+                self.$toast('Unable to get category list');
+                router.back();
+                return;
+            }
+
+            if (!tagData || !tagData.success || !tagData.result) {
+                self.$toast('Unable to get tag list');
+                router.back();
+                return;
+            }
+
+            self.allAccounts = accountDta.result;
+            self.allCategories = categoryData.result;
+            self.allTags = tagData.result;
+
+            self.loading = false;
+        }).catch(errors => {
+            self.$logger.error('failed to load essential data for editing transaction', errors);
+
+            for (let i = 0; i < errors.length; i++) {
+                const error = errors[i];
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$toast({ error: error.response.data });
+                    router.back();
+                    return;
+                } else if (!error.processed) {
+                    self.$toast('An error has occurred');
+                    router.back();
+                    return;
+                }
+            }
+        });
+    },
+    methods: {
+        save() {
+
+        }
+    }
+};
+</script>
+
+<style>
+.transaction-edit-amount {
+    font-size: 40px;
+    font-weight: bolder;
+    color: var(--f7-theme-color);
+}
+
+.transaction-edit-time input[type="datetime-local"] {
+    max-width: inherit;
+}
+</style>