support account icon

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,
-                type: 1,
+                category: '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>