zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2020-12-12 22:11:08 +08:00
parent 6aa03e5796
commit 75b151da9b
5 changed files with 142 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ColorSelectionSheet.vue
+19 -7
View File
@@ -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
+19 -7
View File
@@ -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
+13 -19
View File
@@ -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">
<f7-icon f7="delete_left"></f7-icon>
</span>
<span class="numpad-button-text numpad-button-text-normal">
<f7-icon f7="delete_left"></f7-icon>
</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);
this.currentValue = '';
const value = this.$utilities.stringCurrencyToNumeric(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.previousValue = '';
this.currentSymbol = '';
this.$emit('numpad:closed');
this.$emit('update:show', false);
}
}
}
src/views/mobile/accounts/Edit.vue
+70 -101
View File
@@ -70,14 +70,23 @@
@input="account.name = $event.target.value"
></f7-list-input>
<f7-list-item :header="$t('Account Icon')" key="singleTypeAccountIconSelection" link="#"
@click="showIconSelectionSheet(account)">
<f7-list-item :header="$t('Account Icon')" link="#"
@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="#"
@click="showColorSelectionSheet(account)">
<f7-list-item :header="$t('Account Color')" link="#"
@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)"
></f7-list-item>
@click="account.showBalanceSheet = true"
>
<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="#"
@click="showIconSelectionSheet(account)">
<f7-list-item :header="$t('Account Icon')" link="#"
@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="#"
@click="showColorSelectionSheet(account)">
<f7-list-item :header="$t('Account Color')" link="#"
@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="#"
@click="showIconSelectionSheet(subAccount)">
<f7-list-item :header="$t('Sub Account Icon')" link="#"
@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="#"
@click="showColorSelectionSheet(subAccount)">
<f7-list-item :header="$t('Sub Account Color')" link="#"
@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)"
></f7-list-item>
@click="subAccount.showBalanceSheet = true"
>
<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,
accountChoosingIcon: null,
accountChoosingColor: null,
accountInputingBalance: null,
submitting: false,
showIconSelection: false,
showColorSelection: false,
showBalanceInput: false
submitting: 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
+21 -60
View File
@@ -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,
categoryChoosingIcon: null,
categoryChoosingColor: null,
submitting: false,
showIconSelection: false,
showColorSelection: false
submitting: 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;