support account icon

src/Mobile.vue

@@ -65,6 +65,19 @@ body {
     margin-left: 6px;
 }
 
+.badge.right-bottom-icon {
+    margin-left: -12px;
+    margin-top: 15px;
+    width: 16px;
+    height: 16px;
+}
+
+.badge.right-bottom-icon > .icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+}
+
 .lab-list-item-error-info div.item-footer {
     color: var(--f7-input-error-text-color)
 }

src/consts/account.js

@@ -1,31 +1,38 @@
 const allAccountCategories = [
     {
         id: 1,
-        name: 'Cash'
+        name: 'Cash',
+        defaultAccountIconId: '1'
     },
     {
         id: 2,
-        name: 'Debit Card'
+        name: 'Debit Card',
+        defaultAccountIconId: '2'
     },
     {
         id: 3,
-        name: 'Credit Card'
+        name: 'Credit Card',
+        defaultAccountIconId: '2'
     },
     {
         id: 4,
-        name: 'Virtual Account'
+        name: 'Virtual Account',
+        defaultAccountIconId: '3'
     },
     {
         id: 5,
-        name: 'Debt Account'
+        name: 'Debt Account',
+        defaultAccountIconId: '4'
     },
     {
         id: 6,
-        name: 'Receivables'
+        name: 'Receivables',
+        defaultAccountIconId: '5'
     },
     {
         id: 7,
-        name: 'Investment Account'
+        name: 'Investment Account',
+        defaultAccountIconId: '6'
     }
 ];
 

src/consts/icon.js

@@ -0,0 +1,75 @@
+const totalAccountIconCount = 22;
+const defaultAccountIcon = {
+    f7Icon: 'bag'
+};
+const allAccountIcons = {
+    '1': {
+        f7Icon: 'bag'
+    },
+    '2': {
+        f7Icon: 'creditcard'
+    },
+    '3': {
+        f7Icon: 'rectangle_dock'
+    },
+    '4': {
+        f7Icon: 'bag_badge_minus'
+    },
+    '5': {
+        f7Icon: 'tray_arrow_down'
+    },
+    '6': {
+        f7Icon: 'graph_square'
+    },
+    '7': {
+        f7Icon: 'cube_box'
+    },
+    '8': {
+        f7Icon: 'tickets'
+    },
+    '9': {
+        f7Icon: 'lock_shield'
+    },
+    '10': {
+        f7Icon: 'infinite'
+    },
+    '11': {
+        f7Icon: 'logo_apple'
+    },
+    '12': {
+        f7Icon: 'person'
+    },
+    '13': {
+        f7Icon: 'person_2'
+    },
+    '14': {
+        f7Icon: 'person_3'
+    },
+    '15': {
+        f7Icon: 'globe'
+    },
+    '16': {
+        f7Icon: 'money_dollar'
+    },
+    '17': {
+        f7Icon: 'money_euro'
+    },
+    '18': {
+        f7Icon: 'money_pound'
+    },
+    '19': {
+        f7Icon: 'money_rubl'
+    },
+    '20': {
+        f7Icon: 'money_yen'
+    },
+    '21': {
+        f7Icon: 'bitcoin'
+    }
+};
+
+export default {
+    allAccountIcons: allAccountIcons,
+    defaultAccountIcon: defaultAccountIcon,
+    totalAccountIconCount: totalAccountIconCount,
+};

src/filters/accountIcon.js

@@ -0,0 +1,14 @@
+import icons from "../consts/icon.js";
+import utils from "../lib/utils.js";
+
+export default function (iconId) {
+    if (utils.isNumber(iconId)) {
+        iconId = iconId.toString();
+    }
+
+    if (iconId <= icons.totalAccountIconCount) {
+        return icons.allAccountIcons[iconId].f7Icon;
+    }
+
+    return icons.defaultAccountIcon.f7Icon;
+}

src/locales/en.js

@@ -315,6 +315,7 @@ export default {
     'Account Type': 'Account Type',
     'Account Name': 'Account Name',
     'Your account name': 'Your account name',
+    'Account Icon': 'Account Icon',
     'Currency': 'Currency',
     'Description': 'Description',
     'Your account description (optional)': 'Your account description (optional)',

src/locales/zh_Hans.js

@@ -315,6 +315,7 @@ export default {
     'Account Type': '账户类型',
     'Account Name': '账户名称',
     'Your account name': '你的账户名称',
+    'Account Icon': '账户图标',
     'Currency': '货币',
     'Description': '描述',
     'Your account description (optional)': '你的账户描述 (可选)',

src/mobile-main.js

@@ -14,6 +14,7 @@ import 'framework7-icons';
 
 import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
 import currency from './consts/currency.js';
+import icons from './consts/icon.js';
 import account from './consts/account.js';
 import version from './lib/version.js';
 import settings from './lib/settings.js';
@@ -21,6 +22,7 @@ import services from './lib/services.js';
 import userstate from './lib/userstate.js';
 import utils from './lib/utils.js';
 import currencyFilter from './filters/currency.js';
+import accountIconFilter from './filters/accountIcon.js';
 import App from './Mobile.vue';
 
 Vue.use(VueI18n);
@@ -33,7 +35,8 @@ const i18n = new VueI18n(getI18nOptions());
 
 Vue.prototype.$version = version.getVersion;
 Vue.prototype.$constants = {
-    account: account
+    icons: icons,
+    account: account,
 };
 Vue.prototype.$utilities = utils;
 Vue.prototype.$settings = settings;
@@ -142,6 +145,7 @@ Vue.prototype.$services = services;
 Vue.prototype.$user = userstate;
 
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
+Vue.filter('accountIcon', (value) => accountIconFilter(value));
 
 Vue.prototype.$setLanguage(settings.getLanguage() || getDefaultLanguage());
 

src/views/mobile/accounts/AccountAdd.vue

@@ -15,7 +15,7 @@
                         type="select"
                         :label="$t('Account Category')"
                         :value="account.category"
-                        @input="account.category = $event.target.value"
+                        @input="chooseSuitableIcon(account.category, $event.target.value); account.category = $event.target.value"
                     >
                         <option v-for="accountCategory in allAccountCategories"
                                 :key="accountCategory.id"
@@ -32,7 +32,13 @@
                         <option value="1">{{ $t('Single Account') }}</option>
                         <option value="2">{{ $t('Multi Sub Accounts') }}</option>
                     </f7-list-input>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
 
+        <f7-card v-if="account.type === '1'">
+            <f7-card-content :padding="false">
+                <f7-list>
                     <f7-list-input
                         type="text"
                         clear-button
@@ -42,6 +48,11 @@
                         @input="account.name = $event.target.value"
                     ></f7-list-input>
 
+                    <f7-list-item :header="$t('Account Icon')" link="#"
+                                  @click="showIconSelection = true">
+                        <f7-icon slot="after" :f7="account.icon | accountIcon"></f7-icon>
+                    </f7-list-item>
+
                     <f7-list-input
                         type="select"
                         :label="$t('Currency')"
@@ -65,6 +76,29 @@
                 </f7-list>
             </f7-card-content>
         </f7-card>
+
+
+        <f7-sheet :opened="showIconSelection" @sheet:closed="showIconSelection = false">
+            <f7-toolbar>
+                <div class="left"></div>
+                <div class="right">
+                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                </div>
+            </f7-toolbar>
+            <f7-page-content>
+                <f7-block>
+                    <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allAccountIconRows" :key="idx">
+                        <f7-col v-for="accountIcon in row" :key="accountIcon.id">
+                            <f7-icon :f7="accountIcon.f7Icon" @click.native="account.icon = accountIcon.id; showIconSelection = false">
+                                <f7-badge color="default" class="right-bottom-icon" v-if="account.icon === accountIcon.id">
+                                    <f7-icon f7="checkmark_alt"></f7-icon>
+                                </f7-badge>
+                            </f7-icon>
+                        </f7-col>
+                    </f7-row>
+                </f7-block>
+            </f7-page-content>
+        </f7-sheet>
     </f7-page>
 </template>
 
@@ -75,20 +109,49 @@ export default {
 
         return {
             account: {
-                category: 1,
+                category: '1',
-                type: 1,
+                type: '1',
                 name: '',
                 icon: "1",
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
                 comment: ''
             },
-            submitting: false
+            submitting: false,
+            showIconSelection: false
         };
     },
     computed: {
         allAccountCategories() {
             return this.$constants.account.allCategories;
         },
+        allAccountIconRows() {
+            const allAccountIcons = this.$constants.icons.allAccountIcons;
+            const iconPerRow = 7;
+            const ret = [];
+            let rowCount = 0;
+
+            for (let accountIconId in allAccountIcons) {
+                if (!Object.prototype.hasOwnProperty.call(allAccountIcons, accountIconId)) {
+                    continue;
+                }
+
+                const accountIcon = allAccountIcons[accountIconId];
+
+                if (!ret[rowCount]) {
+                    ret[rowCount] = [];
+                } else if (ret[rowCount] && ret[rowCount].length >= iconPerRow) {
+                    rowCount++;
+                    ret[rowCount] = [];
+                }
+
+                ret[rowCount].push({
+                    id: accountIconId,
+                    f7Icon: accountIcon.f7Icon
+                });
+            }
+
+            return ret;
+        },
         allCurrencies() {
             return this.$getAllCurrencies();
         },
@@ -159,6 +222,25 @@ export default {
                     self.$alert('Unable to add account');
                 }
             });
+        },
+        chooseSuitableIcon(oldCategory, newCategory) {
+            const allCategories = this.$constants.account.allCategories;
+
+            for (let i = 0; i < allCategories.length; i++) {
+                if (allCategories[i].id.toString() === oldCategory) {
+                    if (this.account.icon !== allCategories[i].defaultAccountIconId) {
+                        return;
+                    } else {
+                        break;
+                    }
+                }
+            }
+
+            for (let i = 0; i < allCategories.length; i++) {
+                if (allCategories[i].id.toString() === newCategory) {
+                    this.account.icon = allCategories[i].defaultAccountIconId;
+                }
+            }
         }
     }
 }

src/views/mobile/accounts/AccountList.vue

@@ -55,6 +55,7 @@
                                   :title="account.name" :after="accountBalance(account) | currency(account.currency)"
                                   link="#" swipeout @taphold.native="setSortable()"
                     >
+                        <f7-icon slot="media" :f7="account.icon | accountIcon"></f7-icon>
                         <f7-swipeout-actions left v-if="sortable">
                             <f7-swipeout-button :color="account.hidden ? 'blue' : 'gray'" class="padding-left padding-right" @click="hide(account, !account.hidden)">
                                 <f7-icon :f7="account.hidden ? 'eye' : 'eye_slash'"></f7-icon>