code refactor

src/components/mobile/ColorSelectionSheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet :opened="show" @sheet:closed="onSheetClosed">
+    <f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="left"></div>
             <div class="right">
@@ -11,12 +11,12 @@
                 <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-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === 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-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
                 </f7-row>
             </f7-block>
         </f7-page-content>
@@ -26,18 +26,26 @@
 <script>
 export default {
     props: [
-        'color',
+        'value',
         'columnCount',
         'show',
         'allColorInfos'
     ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value,
+            itemPerRow: self.columnCount || 7
+        }
+    },
     computed: {
         allColorRows() {
             const ret = [];
             let rowCount = -1;
 
             for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.columnCount === 0) {
+                if (i % this.itemPerRow === 0) {
                     ret[++rowCount] = [];
                 }
 
@@ -51,10 +59,14 @@ export default {
     },
     methods: {
         onColorClicked(colorInfo) {
-            this.$emit('color:change', colorInfo.color);
+            this.currentValue = colorInfo.color;
+            this.$emit('input', this.currentValue);
+        },
+        onSheetOpen() {
+            this.currentValue = this.value;
         },
         onSheetClosed() {
-            this.$emit('color:closed');
+            this.$emit('update:show', false);
         }
     }
 }

src/components/mobile/IconSelectionSheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:closed="onSheetClosed">
+    <f7-sheet :class="{ 'icon-selection-huge-sheet': hugeIconRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="left"></div>
             <div class="right">
@@ -11,12 +11,12 @@
                 <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-badge color="default" class="right-bottom-icon" v-if="currentValue && currentValue === 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-col v-for="idx in (itemPerRow - row.length)" :key="idx"></f7-col>
                 </f7-row>
             </f7-block>
         </f7-page-content>
@@ -26,12 +26,20 @@
 <script>
 export default {
     props: [
-        'icon',
+        'value',
         'color',
         'columnCount',
         'show',
         'allIconInfos'
     ],
+    data() {
+        const self = this;
+
+        return {
+            currentValue: self.value,
+            itemPerRow: self.columnCount || 7
+        }
+    },
     computed: {
         allIconRows() {
             const ret = [];
@@ -46,7 +54,7 @@ export default {
 
                 if (!ret[rowCount]) {
                     ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.columnCount) {
+                } else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
                     rowCount++;
                     ret[rowCount] = [];
                 }
@@ -65,10 +73,14 @@ export default {
     },
     methods: {
         onIconClicked(iconInfo) {
-            this.$emit('icon:change', iconInfo.id);
+            this.currentValue = iconInfo.id;
+            this.$emit('input', this.currentValue);
+        },
+        onSheetOpen() {
+            this.currentValue = this.value;
         },
         onSheetClosed() {
-            this.$emit('icon:closed');
+            this.$emit('update:show', false);
         }
     }
 }

src/components/mobile/NumberPadSheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet class="numpad-sheet" :opened="show" @sheet:closed="onSheetClosed">
+    <f7-sheet class="numpad-sheet" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-page-content class="no-margin no-padding-top">
             <f7-row class="numpad-values">
                 <span class="numpad-value">{{ currentDisplay }}</span>
@@ -48,9 +48,9 @@
                     <span class="numpad-button-text numpad-button-text-normal">0</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="backspace" @taphold.native="clear()">
-                    <span class="numpad-button-text numpad-button-text-normal">
+                <span class="numpad-button-text numpad-button-text-normal">
-                        <f7-icon f7="delete_left"></f7-icon>
+                    <f7-icon f7="delete_left"></f7-icon>
-                    </span>
+                </span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-confirm no-right-border no-bottom-border" fill @click="confirm()">
                     <span :class="{ 'numpad-button-text': true, 'numpad-button-text-confirm': !currentSymbol }">{{ confirmText }}</span>
@@ -63,7 +63,7 @@
 <script>
 export default {
     props: [
-        'amount',
+        'value',
         'show'
     ],
     data() {
@@ -72,7 +72,7 @@ export default {
         return {
             previousValue: '',
             currentSymbol: '',
-            currentValue: self.getStringValue(self.amount)
+            currentValue: self.getStringValue(self.value)
         }
     },
     computed: {
@@ -94,11 +94,6 @@ export default {
             }
         }
     },
-    watch: {
-        amount: function(newValue){
-            this.currentValue = this.getStringValue(newValue);
-        }
-    },
     methods: {
         getStringValue(value) {
             let str = this.$utilities.numericCurrencyToString(value);
@@ -225,18 +220,17 @@ export default {
                 this.previousValue = '';
                 this.currentSymbol = '';
             } else {
-                const amount = this.$utilities.stringCurrencyToNumeric(this.currentValue);
+                const value = this.$utilities.stringCurrencyToNumeric(this.currentValue);
-                this.currentValue = '';
 
-                this.$emit('numpad:change', amount);
+                this.$emit('input', value);
+                this.$emit('update:show', false);
             }
         },
+        onSheetOpen() {
+            this.currentValue = this.getStringValue(this.value);
+        },
         onSheetClosed() {
-            this.currentValue = '';
+            this.$emit('update:show', false);
-            this.previousValue = '';
-            this.currentSymbol = '';
-
-            this.$emit('numpad:closed');
         }
     }
 }

src/views/mobile/accounts/Edit.vue

@@ -70,14 +70,23 @@
                         @input="account.name = $event.target.value"
                     ></f7-list-input>
 
-                    <f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
+                    <f7-list-item :header="$t('Account Icon')" link="#"
-                                  @click="showIconSelectionSheet(account)">
+                                  @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <IconSelectionSheet :all-icon-infos="allAccountIcons"
+                                            :show.sync="account.showIconSelectionSheet"
+                                            :color="account.color"
+                                            v-model="account.icon"
+                        ></IconSelectionSheet>
                     </f7-list-item>
 
-                    <f7-list-item :header="$t('Account Color')" key="singleTypeAccountColorSelection" link="#"
+                    <f7-list-item :header="$t('Account Color')" link="#"
-                                  @click="showColorSelectionSheet(account)">
+                                  @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
+                        <ColorSelectionSheet :all-color-infos="allAccountColors"
+                                             :show.sync="account.showColorSelectionSheet"
+                                             v-model="account.color"
+                        ></ColorSelectionSheet>
                     </f7-list-item>
 
                     <f7-list-item
@@ -97,8 +106,12 @@
                         :class="{ 'disabled': editAccountId }"
                         :header="$t('Account Balance')"
                         :after="account.balance | currency(account.currency)"
-                        @click="showBalanceInputSheet(account)"
+                        @click="account.showBalanceSheet = true"
-                    ></f7-list-item>
+                    >
+                        <NumberPadSheet :show.sync="account.showBalanceSheet"
+                                        v-model="account.balance"
+                        ></NumberPadSheet>
+                    </f7-list-item>
 
                     <f7-list-input
                         type="textarea"
@@ -127,14 +140,23 @@
                         @input="account.name = $event.target.value"
                     ></f7-list-input>
 
-                    <f7-list-item :header="$t('Account Icon')" key="multiTypeAccountIconSelection" link="#"
+                    <f7-list-item :header="$t('Account Icon')" link="#"
-                                  @click="showIconSelectionSheet(account)">
+                                  @click="account.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
+                        <IconSelectionSheet :all-icon-infos="allAccountIcons"
+                                            :show.sync="account.showIconSelectionSheet"
+                                            :color="account.color"
+                                            v-model="account.icon"
+                        ></IconSelectionSheet>
                     </f7-list-item>
 
-                    <f7-list-item :header="$t('Account Color')" key="multiTypeAccountColorSelection" link="#"
+                    <f7-list-item :header="$t('Account Color')" link="#"
-                                  @click="showColorSelectionSheet(account)">
+                                  @click="account.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
+                        <ColorSelectionSheet :all-color-infos="allAccountColors"
+                                             :show.sync="account.showColorSelectionSheet"
+                                             v-model="account.color"
+                        ></ColorSelectionSheet>
                     </f7-list-item>
 
                     <f7-list-input
@@ -169,14 +191,23 @@
                             @input="subAccount.name = $event.target.value"
                         ></f7-list-input>
 
-                        <f7-list-item :header="$t('Sub Account Icon')" key="subAccountIconSelection" link="#"
+                        <f7-list-item :header="$t('Sub Account Icon')" link="#"
-                                      @click="showIconSelectionSheet(subAccount)">
+                                      @click="subAccount.showIconSelectionSheet = true">
                             <f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                            <IconSelectionSheet :all-icon-infos="allAccountIcons"
+                                                :show.sync="subAccount.showIconSelectionSheet"
+                                                :color="subAccount.color"
+                                                v-model="subAccount.icon"
+                            ></IconSelectionSheet>
                         </f7-list-item>
 
-                        <f7-list-item :header="$t('Sub Account Color')" key="subAccountColorSelection" link="#"
+                        <f7-list-item :header="$t('Sub Account Color')" link="#"
-                                      @click="showColorSelectionSheet(subAccount)">
+                                      @click="subAccount.showColorSelectionSheet = true">
                             <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
+                            <ColorSelectionSheet :all-color-infos="allAccountColors"
+                                                 :show.sync="subAccount.showColorSelectionSheet"
+                                                 v-model="subAccount.color"
+                            ></ColorSelectionSheet>
                         </f7-list-item>
 
                         <f7-list-item
@@ -196,8 +227,12 @@
                             :class="{ 'disabled': editAccountId }"
                             :header="$t('Sub Account Balance')"
                             :after="subAccount.balance | currency(subAccount.currency)"
-                            @click="showBalanceInputSheet(subAccount)"
+                            @click="subAccount.showBalanceSheet = true"
-                        ></f7-list-item>
+                        >
+                            <NumberPadSheet :show.sync="subAccount.showBalanceSheet"
+                                            v-model="subAccount.balance"
+                            ></NumberPadSheet>
+                        </f7-list-item>
 
                         <f7-list-input
                             type="textarea"
@@ -218,29 +253,6 @@
                 </f7-card-footer>
             </f7-card>
         </f7-block>
-
-        <IconSelectionSheet :icon="accountChoosingIcon ? accountChoosingIcon.icon : null"
-                            :color="accountChoosingIcon ? accountChoosingIcon.color : null"
-                            :column-count="iconCountPerRow"
-                            :show="showIconSelection"
-                            :all-icon-infos="this.$constants.icons.allAccountIcons"
-                            @icon:change="onIconChanged"
-                            @icon:closed="onIconSelectionSheetClosed"
-        ></IconSelectionSheet>
-
-        <ColorSelectionSheet :color="accountChoosingColor ? accountChoosingColor.color : null"
-                             :column-count="iconCountPerRow"
-                             :show="showColorSelection"
-                             :all-color-infos="this.$constants.colors.allAccountColors"
-                             @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>
 
@@ -261,17 +273,13 @@ export default {
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
                 balance: 0,
                 comment: '',
-                visible: true
+                visible: true,
+                showIconSelectionSheet: false,
+                showColorSelectionSheet: false,
+                showBalanceSheet: false
             },
             subAccounts: [],
-            iconCountPerRow: 7,
+            submitting: false
-            accountChoosingIcon: null,
-            accountChoosingColor: null,
-            accountInputingBalance: null,
-            submitting: false,
-            showIconSelection: false,
-            showColorSelection: false,
-            showBalanceInput: false
         };
     },
     computed: {
@@ -292,6 +300,12 @@ export default {
         allAccountCategories() {
             return this.$constants.account.allCategories;
         },
+        allAccountIcons() {
+            return this.$constants.icons.allAccountIcons;
+        },
+        allAccountColors() {
+            return this.$constants.colors.allAccountColors;
+        },
         allCurrencies() {
             return this.$locale.getAllCurrencies();
         }
@@ -342,7 +356,10 @@ export default {
                             currency: subAccount.currency,
                             balance: subAccount.balance,
                             comment: subAccount.comment,
-                            visible: !subAccount.hidden
+                            visible: !subAccount.hidden,
+                            showIconSelectionSheet: false,
+                            showColorSelectionSheet: false,
+                            showBalanceSheet: false
                         });
                     }
                 }
@@ -380,7 +397,10 @@ export default {
                 currency: self.$user.getUserInfo() ? self.$user.getUserInfo().defaultCurrency : self.$t('default.currency'),
                 balance: 0,
                 comment: '',
-                visible: true
+                visible: true,
+                showIconSelectionSheet: false,
+                showColorSelectionSheet: false,
+                showBalanceSheet: false
             });
         },
         removeSubAccount(subAccount) {
@@ -390,57 +410,6 @@ export default {
                 }
             }
         },
-        showIconSelectionSheet(account) {
-            this.accountChoosingIcon = account;
-            this.showIconSelection = true;
-        },
-        onIconChanged(icon) {
-            if (!this.accountChoosingIcon) {
-                return;
-            }
-
-            this.accountChoosingIcon.icon = icon;
-            this.accountChoosingIcon = null;
-            this.showIconSelection = false;
-        },
-        onIconSelectionSheetClosed() {
-            this.accountChoosingIcon = null;
-            this.showIconSelection = false;
-        },
-        showColorSelectionSheet(account) {
-            this.accountChoosingColor = account;
-            this.showColorSelection = true;
-        },
-        onColorChanged(color) {
-            if (!this.accountChoosingColor) {
-                return;
-            }
-
-            this.accountChoosingColor.color = color;
-            this.accountChoosingColor = null;
-            this.showColorSelection = false;
-        },
-        onColorSelectionSheetClosed() {
-            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;

src/views/mobile/categories/Edit.vue

@@ -32,13 +32,22 @@
                     ></f7-list-input>
 
                     <f7-list-item :header="$t('Category Icon')" key="singleTypeCategoryIconSelection" link="#"
-                                  @click="showIconSelectionSheet(category)">
+                                  @click="category.showIconSelectionSheet = true">
                         <f7-icon slot="after" :icon="category.icon | categoryIcon" :style="{ color: '#' + category.color }"></f7-icon>
+                        <IconSelectionSheet :all-icon-infos="allCategoryIcons"
+                                            :show.sync="category.showIconSelectionSheet"
+                                            :color="category.color"
+                                            v-model="category.icon"
+                        ></IconSelectionSheet>
                     </f7-list-item>
 
                     <f7-list-item :header="$t('Category Color')" key="singleTypeCategoryColorSelection" link="#"
-                                  @click="showColorSelectionSheet(category)">
+                                  @click="category.showColorSelectionSheet = true">
                         <f7-icon slot="after" f7="app_fill" :style="{ color: '#' + category.color }"></f7-icon>
+                        <ColorSelectionSheet :all-color-infos="allCategoryColors"
+                                             :show.sync="category.showColorSelectionSheet"
+                                             v-model="category.color"
+                        ></ColorSelectionSheet>
                     </f7-list-item>
 
                     <f7-list-input
@@ -55,23 +64,6 @@
                 </f7-list>
             </f7-card-content>
         </f7-card>
-
-        <IconSelectionSheet :icon="categoryChoosingIcon ? categoryChoosingIcon.icon : null"
-                            :color="categoryChoosingIcon ? categoryChoosingIcon.color : null"
-                            :column-count="iconCountPerRow"
-                            :show="showIconSelection"
-                            :all-icon-infos="this.$constants.icons.allCategoryIcons"
-                            @icon:change="onIconChanged"
-                            @icon:closed="onIconSelectionSheetClosed"
-        ></IconSelectionSheet>
-
-        <ColorSelectionSheet :color="categoryChoosingColor ? categoryChoosingColor.color : null"
-                             :column-count="iconCountPerRow"
-                             :show="showColorSelection"
-                             :all-color-infos="this.$constants.colors.allCategoryColors"
-                             @color:change="onColorChanged"
-                             @color:closed="onColorSelectionSheetClosed"
-        ></ColorSelectionSheet>
     </f7-page>
 </template>
 
@@ -91,14 +83,11 @@ export default {
                 icon: self.$constants.icons.defaultCategoryIconId,
                 color: self.$constants.colors.defaultCategoryColor,
                 comment: '',
-                visible: true
+                visible: true,
+                showIconSelectionSheet: false,
+                showColorSelectionSheet: false
             },
-            iconCountPerRow: 7,
+            submitting: false
-            categoryChoosingIcon: null,
-            categoryChoosingColor: null,
-            submitting: false,
-            showIconSelection: false,
-            showColorSelection: false
         };
     },
     computed: {
@@ -120,6 +109,12 @@ export default {
                 return 'Save';
             }
         },
+        allCategoryIcons() {
+            return this.$constants.icons.allCategoryIcons;
+        },
+        allCategoryColors() {
+            return this.$constants.colors.allCategoryColors;
+        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -190,40 +185,6 @@ export default {
         }
     },
     methods: {
-        showIconSelectionSheet(category) {
-            this.categoryChoosingIcon = category;
-            this.showIconSelection = true;
-        },
-        onIconChanged(icon) {
-            if (!this.categoryChoosingIcon) {
-                return;
-            }
-
-            this.categoryChoosingIcon.icon = icon;
-            this.categoryChoosingIcon = null;
-            this.showIconSelection = false;
-        },
-        onIconSelectionSheetClosed() {
-            this.categoryChoosingIcon = null;
-            this.showIconSelection = false;
-        },
-        showColorSelectionSheet(category) {
-            this.categoryChoosingColor = category;
-            this.showColorSelection = true;
-        },
-        onColorChanged(color) {
-            if (!this.categoryChoosingColor) {
-                return;
-            }
-
-            this.categoryChoosingColor.color = color;
-            this.categoryChoosingColor = null;
-            this.showColorSelection = false;
-        },
-        onColorSelectionSheetClosed() {
-            this.categoryChoosingColor = null;
-            this.showColorSelection = false;
-        },
         save() {
             const self = this;
             const router = self.$f7router;