code refactor

src/components/mobile/ColorSelectionSheet.vue

@@ -0,0 +1,61 @@
+<template>
+    <f7-sheet :opened="show" @sheet:closed="onSheetClosed">
+        <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 class="margin-vertical">
+                <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allColorRows" :key="idx">
+                    <f7-col class="text-align-center" v-for="colorInfo in row" :key="colorInfo.color">
+                        <f7-icon f7="app_fill" :style="{ color: '#' + colorInfo.color }" @click.native="onColorClicked(colorInfo)">
+                            <f7-badge color="default" class="right-bottom-icon" v-if="color && color === colorInfo.color">
+                                <f7-icon f7="checkmark_alt"></f7-icon>
+                            </f7-badge>
+                        </f7-icon>
+                    </f7-col>
+                    <f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
+                </f7-row>
+            </f7-block>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'color',
+        'columnCount',
+        'show',
+        'allColorInfos'
+    ],
+    computed: {
+        allColorRows() {
+            const ret = [];
+            let rowCount = -1;
+
+            for (let i = 0; i < this.allColorInfos.length; i++) {
+                if (i % this.columnCount === 0) {
+                    ret[++rowCount] = [];
+                }
+
+                ret[rowCount].push({
+                    color: this.allColorInfos[i]
+                });
+            }
+
+            return ret;
+        }
+    },
+    methods: {
+        onColorClicked(colorInfo) {
+            this.$emit('color:change', colorInfo.color);
+        },
+        onSheetClosed() {
+            this.$emit('color:closed');
+        }
+    }
+}
+</script>

src/components/mobile/IconSelectionSheet.vue

@@ -0,0 +1,72 @@
+<template>
+    <f7-sheet :opened="show" @sheet:closed="onSheetClosed">
+        <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 class="margin-vertical">
+                <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allIconRows" :key="idx">
+                    <f7-col class="text-align-center" v-for="iconInfo in row" :key="iconInfo.id">
+                        <f7-icon :icon="iconInfo.icon" :style="{ color: '#' + (color || '000000') }" @click.native="onIconClicked(iconInfo)">
+                            <f7-badge color="default" class="right-bottom-icon" v-if="icon && icon === iconInfo.id">
+                                <f7-icon f7="checkmark_alt"></f7-icon>
+                            </f7-badge>
+                        </f7-icon>
+                    </f7-col>
+                    <f7-col v-for="idx in (columnCount - row.length)" :key="idx"></f7-col>
+                </f7-row>
+            </f7-block>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'icon',
+        'color',
+        'columnCount',
+        'show',
+        'allIconInfos'
+    ],
+    computed: {
+        allIconRows() {
+            const ret = [];
+            let rowCount = 0;
+
+            for (let iconInfoId in this.allIconInfos) {
+                if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
+                    continue;
+                }
+
+                const iconInfo = this.allIconInfos[iconInfoId];
+
+                if (!ret[rowCount]) {
+                    ret[rowCount] = [];
+                } else if (ret[rowCount] && ret[rowCount].length >= this.columnCount) {
+                    rowCount++;
+                    ret[rowCount] = [];
+                }
+
+                ret[rowCount].push({
+                    id: iconInfoId,
+                    icon: iconInfo.icon
+                });
+            }
+
+            return ret;
+        }
+    },
+    methods: {
+        onIconClicked(iconInfo) {
+            this.$emit('icon:change', iconInfo.id);
+        },
+        onSheetClosed() {
+            this.$emit('icon:closed');
+        }
+    }
+}
+</script>

src/mobile-main.js

@@ -35,6 +35,9 @@ import accountIconFilter from './filters/accountIcon.js';
 import categoryIconFilter from './filters/categoryIcon.js';
 import tokenDeviceFilter from './filters/tokenDevice.js';
 import tokenIconFilter from './filters/tokenIcon.js';
+
+import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue";
+import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue";
 import App from './Mobile.vue';
 
 Vue.use(VueI18n);
@@ -42,6 +45,8 @@ Vue.use(VueI18nFilter);
 Vue.use(VueMoment, { moment });
 Vue.use(VueClipboard);
 Vue.component('PincodeInput', PincodeInput);
+Vue.component('IconSelectionSheet', IconSelectionSheet);
+Vue.component('ColorSelectionSheet', ColorSelectionSheet);
 Framework7.use(Framework7Vue);
 
 const i18n = new VueI18n(getI18nOptions());

src/views/mobile/accounts/Edit.vue

@@ -202,51 +202,22 @@
             </f7-card>
         </f7-block>
 
-        <f7-sheet :opened="showIconSelection" @sheet:closed="hideIconSelectionSheet">
+        <IconSelectionSheet :icon="accountChoosingIcon ? accountChoosingIcon.icon : null"
-            <f7-toolbar>
+                            :color="accountChoosingIcon ? accountChoosingIcon.color : null"
-                <div class="left"></div>
+                            :column-count="iconCountPerRow"
-                <div class="right">
+                            :show="showIconSelection"
-                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                            :all-icon-infos="this.$constants.icons.allAccountIcons"
-                </div>
+                            @icon:change="onIconChanged"
-            </f7-toolbar>
+                            @icon:closed="onIconSelectionSheetClosed"
-            <f7-page-content>
+        ></IconSelectionSheet>
-                <f7-block class="margin-vertical">
-                    <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allAccountIconRows" :key="idx">
-                        <f7-col class="text-align-center" v-for="accountIcon in row" :key="accountIcon.id">
-                            <f7-icon :icon="accountIcon.icon" :style="{ color: '#' + (accountChoosingIcon ? accountChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(accountIcon)">
-                                <f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingIcon && accountChoosingIcon.icon === accountIcon.id">
-                                    <f7-icon f7="checkmark_alt"></f7-icon>
-                                </f7-badge>
-                            </f7-icon>
-                        </f7-col>
-                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
-                    </f7-row>
-                </f7-block>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
+        <ColorSelectionSheet :color="accountChoosingColor ? accountChoosingColor.color : null"
-            <f7-toolbar>
+                             :column-count="iconCountPerRow"
-                <div class="left"></div>
+                             :show="showColorSelection"
-                <div class="right">
+                             :all-color-infos="this.$constants.colors.allAccountColors"
-                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                             @color:change="onColorChanged"
-                </div>
+                             @color:closed="onColorSelectionSheetClosed"
-            </f7-toolbar>
+        ></ColorSelectionSheet>
-            <f7-page-content>
-                <f7-block class="margin-vertical">
-                    <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allAccountColorRows" :key="idx">
-                        <f7-col class="text-align-center" v-for="accountColor in row" :key="accountColor.color">
-                            <f7-icon f7="app_fill" :style="{ color: '#' + accountColor.color }" @click.native="setSelectedColor(accountColor.color)">
-                                <f7-badge color="default" class="right-bottom-icon" v-if="accountChoosingColor && accountChoosingColor.color === accountColor.color">
-                                    <f7-icon f7="checkmark_alt"></f7-icon>
-                                </f7-badge>
-                            </f7-icon>
-                        </f7-col>
-                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
-                    </f7-row>
-                </f7-block>
-            </f7-page-content>
-        </f7-sheet>
     </f7-page>
 </template>
 
@@ -295,50 +266,6 @@ export default {
         allAccountCategories() {
             return this.$constants.account.allCategories;
         },
-        allAccountIconRows() {
-            const allAccountIcons = this.$constants.icons.allAccountIcons;
-            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 >= this.iconCountPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: accountIconId,
-                    icon: accountIcon.icon
-                });
-            }
-
-            return ret;
-        },
-        allAccountColorRows() {
-            const allAccountColors = this.$constants.colors.allAccountColors;
-            const ret = [];
-            let rowCount = -1;
-
-            for (let i = 0; i < allAccountColors.length; i++) {
-                if (i % this.iconCountPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: allAccountColors[i]
-                });
-            }
-
-            return ret;
-        },
         allCurrencies() {
             return this.$locale.getAllCurrencies();
         }
@@ -437,16 +364,16 @@ export default {
             this.accountChoosingIcon = account;
             this.showIconSelection = true;
         },
-        setSelectedIcon(accountIcon) {
+        onIconChanged(icon) {
             if (!this.accountChoosingIcon) {
                 return;
             }
 
-            this.accountChoosingIcon.icon = accountIcon.id;
+            this.accountChoosingIcon.icon = icon;
             this.accountChoosingIcon = null;
             this.showIconSelection = false;
         },
-        hideIconSelectionSheet() {
+        onIconSelectionSheetClosed() {
             this.accountChoosingIcon = null;
             this.showIconSelection = false;
         },
@@ -454,7 +381,7 @@ export default {
             this.accountChoosingColor = account;
             this.showColorSelection = true;
         },
-        setSelectedColor(color) {
+        onColorChanged(color) {
             if (!this.accountChoosingColor) {
                 return;
             }
@@ -463,7 +390,7 @@ export default {
             this.accountChoosingColor = null;
             this.showColorSelection = false;
         },
-        hideColorSelectionSheet() {
+        onColorSelectionSheetClosed() {
             this.accountChoosingColor = null;
             this.showColorSelection = false;
         },

src/views/mobile/categories/Edit.vue

@@ -56,51 +56,22 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet class="category-icon-sheet" :opened="showIconSelection" @sheet:closed="hideIconSelectionSheet">
+        <IconSelectionSheet :icon="categoryChoosingIcon ? categoryChoosingIcon.icon : null"
-            <f7-toolbar>
+                            :color="categoryChoosingIcon ? categoryChoosingIcon.color : null"
-                <div class="left"></div>
+                            :column-count="iconCountPerRow"
-                <div class="right">
+                            :show="showIconSelection"
-                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                            :all-icon-infos="this.$constants.icons.allCategoryIcons"
-                </div>
+                            @icon:change="onIconChanged"
-            </f7-toolbar>
+                            @icon:closed="onIconSelectionSheetClosed"
-            <f7-page-content>
+        ></IconSelectionSheet>
-                <f7-block class="margin-vertical">
-                    <f7-row class="padding-vertical-half padding-horizontal-half" v-for="(row, idx) in allCategoryIconRows" :key="idx">
-                        <f7-col class="text-align-center" v-for="categoryIcon in row" :key="categoryIcon.id">
-                            <f7-icon :icon="categoryIcon.icon" :style="{ color: '#' + (categoryChoosingIcon ? categoryChoosingIcon.color : '000000') }" @click.native="setSelectedIcon(categoryIcon)">
-                                <f7-badge color="default" class="right-bottom-icon" v-if="categoryChoosingIcon && categoryChoosingIcon.icon === categoryIcon.id">
-                                    <f7-icon f7="checkmark_alt"></f7-icon>
-                                </f7-badge>
-                            </f7-icon>
-                        </f7-col>
-                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
-                    </f7-row>
-                </f7-block>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
+        <ColorSelectionSheet :color="categoryChoosingColor ? categoryChoosingColor.color : null"
-            <f7-toolbar>
+                             :column-count="iconCountPerRow"
-                <div class="left"></div>
+                             :show="showColorSelection"
-                <div class="right">
+                             :all-color-infos="this.$constants.colors.allCategoryColors"
-                    <f7-link sheet-close :text="$t('Done')"></f7-link>
+                             @color:change="onColorChanged"
-                </div>
+                             @color:closed="onColorSelectionSheetClosed"
-            </f7-toolbar>
+        ></ColorSelectionSheet>
-            <f7-page-content>
-                <f7-block class="margin-vertical">
-                    <f7-row class="padding-vertical padding-horizontal-half" v-for="(row, idx) in allCategoryColorRows" :key="idx">
-                        <f7-col class="text-align-center" v-for="categoryColor in row" :key="categoryColor.color">
-                            <f7-icon f7="app_fill" :style="{ color: '#' + categoryColor.color }" @click.native="setSelectedColor(categoryColor.color)">
-                                <f7-badge color="default" class="right-bottom-icon" v-if="categoryChoosingColor && categoryChoosingColor.color === categoryColor.color">
-                                    <f7-icon f7="checkmark_alt"></f7-icon>
-                                </f7-badge>
-                            </f7-icon>
-                        </f7-col>
-                        <f7-col v-for="idx in (iconCountPerRow - row.length)" :key="idx"></f7-col>
-                    </f7-row>
-                </f7-block>
-            </f7-page-content>
-        </f7-sheet>
     </f7-page>
 </template>
 
@@ -149,50 +120,6 @@ export default {
                 return 'Save';
             }
         },
-        allCategoryIconRows() {
-            const allCategoryIcons = this.$constants.icons.allCategoryIcons;
-            const ret = [];
-            let rowCount = 0;
-
-            for (let categoryIconId in allCategoryIcons) {
-                if (!Object.prototype.hasOwnProperty.call(allCategoryIcons, categoryIconId)) {
-                    continue;
-                }
-
-                const categoryIcon = allCategoryIcons[categoryIconId];
-
-                if (!ret[rowCount]) {
-                    ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.iconCountPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: categoryIconId,
-                    icon: categoryIcon.icon
-                });
-            }
-
-            return ret;
-        },
-        allCategoryColorRows() {
-            const allCategoryColors = this.$constants.colors.allCategoryColors;
-            const ret = [];
-            let rowCount = -1;
-
-            for (let i = 0; i < allCategoryColors.length; i++) {
-                if (i % this.iconCountPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: allCategoryColors[i]
-                });
-            }
-
-            return ret;
-        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -267,16 +194,16 @@ export default {
             this.categoryChoosingIcon = category;
             this.showIconSelection = true;
         },
-        setSelectedIcon(categoryIcon) {
+        onIconChanged(icon) {
             if (!this.categoryChoosingIcon) {
                 return;
             }
 
-            this.categoryChoosingIcon.icon = categoryIcon.id;
+            this.categoryChoosingIcon.icon = icon;
             this.categoryChoosingIcon = null;
             this.showIconSelection = false;
         },
-        hideIconSelectionSheet() {
+        onIconSelectionSheetClosed() {
             this.categoryChoosingIcon = null;
             this.showIconSelection = false;
         },
@@ -284,7 +211,7 @@ export default {
             this.categoryChoosingColor = category;
             this.showColorSelection = true;
         },
-        setSelectedColor(color) {
+        onColorChanged(color) {
             if (!this.categoryChoosingColor) {
                 return;
             }
@@ -293,7 +220,7 @@ export default {
             this.categoryChoosingColor = null;
             this.showColorSelection = false;
         },
-        hideColorSelectionSheet() {
+        onColorSelectionSheetClosed() {
             this.categoryChoosingColor = null;
             this.showColorSelection = false;
         },