add balance setting in creating account page

src/lib/services.js

@@ -172,7 +172,7 @@ export default {
     getAccount: ({ id }) => {
         return axios.get('v1/accounts/get.json?id=' + id);
     },
-    addAccount: ({ category, type, name, icon, color, currency, comment, subAccounts }) => {
+    addAccount: ({ category, type, name, icon, color, currency, balance, comment, subAccounts }) => {
         return axios.post('v1/accounts/add.json', {
             category,
             type,
@@ -180,6 +180,7 @@ export default {
             icon,
             color,
             currency,
+            balance,
             comment,
             subAccounts
         });

src/locales/en.js

@@ -470,6 +470,8 @@ export default {
     'Account Color': 'Account Color',
     'Sub Account Color': 'Sub Account Color',
     'Currency': 'Currency',
+    'Account Balance': 'Account Balance',
+    'Sub Account Balance': 'Sub Account Balance',
     'Description': 'Description',
     'Your account description (optional)': 'Your account description (optional)',
     'Your sub account description (optional)': 'Your sub account description (optional)',

src/locales/zh_Hans.js

@@ -470,6 +470,8 @@ export default {
     'Account Color': '账户颜色',
     'Sub Account Color': '子账户颜色',
     'Currency': '货币',
+    'Account Balance': '账户余额',
+    'Sub Account Balance': '子账户余额',
     'Description': '描述',
     'Your account description (optional)': '你的账户描述 (可选)',
     'Your sub account description (optional)': '你的子账户描述 (可选)',

src/views/mobile/accounts/Edit.vue

@@ -52,6 +52,7 @@
                     <f7-list-item header="Account Icon" after="Icon"></f7-list-item>
                     <f7-list-item header="Account Color" after="Color"></f7-list-item>
                     <f7-list-input label="Currency" placeholder="Currency"></f7-list-input>
+                    <f7-list-input label="Account Balance" placeholder="Balance"></f7-list-input>
                     <f7-list-input type="textarea" label="Description" placeholder="Your account description (optional)"></f7-list-input>
                 </f7-list>
             </f7-card-content>
@@ -91,6 +92,14 @@
                         </select>
                     </f7-list-item>
 
+                    <f7-list-item
+                        link="#"
+                        :class="{ 'disabled': editAccountId }"
+                        :header="$t('Account Balance')"
+                        :after="account.balance | currency(account.currency)"
+                        @click="showBalanceInputSheet(account)"
+                    ></f7-list-item>
+
                     <f7-list-input
                         type="textarea"
                         :label="$t('Description')"
@@ -182,6 +191,14 @@
                             </select>
                         </f7-list-item>
 
+                        <f7-list-item
+                            link="#"
+                            :class="{ 'disabled': editAccountId }"
+                            :header="$t('Sub Account Balance')"
+                            :after="subAccount.balance | currency(subAccount.currency)"
+                            @click="showBalanceInputSheet(subAccount)"
+                        ></f7-list-item>
+
                         <f7-list-input
                             type="textarea"
                             :label="$t('Description')"
@@ -218,6 +235,12 @@
                              @color:change="onColorChanged"
                              @color:closed="onColorSelectionSheetClosed"
         ></ColorSelectionSheet>
+
+        <NumberPadSheet :amount="accountInputingBalance ? accountInputingBalance.balance : 0"
+                        :show="showBalanceInput"
+                        @numpad:change="onBalanceChanged"
+                        @numpad:closed="onBalanceInputSheetClosed"
+        ></NumberPadSheet>
     </f7-page>
 </template>
 
@@ -236,6 +259,7 @@ export default {
                 icon: self.$constants.icons.defaultAccountIconId,
                 color: self.$constants.colors.defaultAccountColor,
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
+                balance: 0,
                 comment: '',
                 visible: true
             },
@@ -243,9 +267,11 @@ export default {
             iconCountPerRow: 7,
             accountChoosingIcon: null,
             accountChoosingColor: null,
+            accountInputingBalance: null,
             submitting: false,
             showIconSelection: false,
-            showColorSelection: false
+            showColorSelection: false,
+            showBalanceInput: false
         };
     },
     computed: {
@@ -298,6 +324,7 @@ export default {
                 self.account.icon = account.icon;
                 self.account.color = account.color;
                 self.account.currency = account.currency;
+                self.account.balance = account.balance;
                 self.account.comment = account.comment;
                 self.account.visible = !account.hidden;
 
@@ -313,6 +340,7 @@ export default {
                             icon: subAccount.icon,
                             color: subAccount.color,
                             currency: subAccount.currency,
+                            balance: subAccount.balance,
                             comment: subAccount.comment,
                             visible: !subAccount.hidden
                         });
@@ -350,6 +378,7 @@ export default {
                 icon: this.account.icon,
                 color: this.account.color,
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
+                balance: 0,
                 comment: ''
             });
         },
@@ -394,6 +423,23 @@ export default {
             this.accountChoosingColor = null;
             this.showColorSelection = false;
         },
+        showBalanceInputSheet(account) {
+            this.accountInputingBalance = account;
+            this.showBalanceInput = true;
+        },
+        onBalanceChanged(amount) {
+            if (!this.accountInputingBalance) {
+                return;
+            }
+
+            this.accountInputingBalance.balance = amount;
+            this.accountInputingBalance = null;
+            this.showBalanceInput = false;
+        },
+        onBalanceInputSheetClosed() {
+            this.accountInputingBalance = null;
+            this.showBalanceInput = false;
+        },
         save() {
             const self = this;
             const router = self.$f7router;
@@ -430,6 +476,7 @@ export default {
                         icon: subAccount.icon,
                         color: subAccount.color,
                         currency: subAccount.currency,
+                        balance: subAccount.balance,
                         comment: subAccount.comment
                     };
 
@@ -449,6 +496,7 @@ export default {
                 icon: self.account.icon,
                 color: self.account.color,
                 currency: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? self.account.currency : self.$constants.currency.parentAccountCurrencyPlaceholder,
+                balance: self.account.balance,
                 comment: self.account.comment,
                 subAccounts: self.account.type === self.$constants.account.allAccountTypes.SingleAccount.toString() ? null : subAccounts,
             };