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-09 01:03:46 +08:00
parent 55cc644aa3
commit 1e2a89a971
5 changed files with 178 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ColorSelectionSheet.vue
+61
View File
@@ -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
+72
View File
@@ -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
+5
View File
@@ -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
+20 -93
View File
@@ -202,51 +202,22 @@
</f7-card>
</f7-block>
<f7-sheet :opened="showIconSelection" @sheet:closed="hideIconSelectionSheet">
<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 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>
<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>
<f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
<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 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>
<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>
</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
+20 -93
View File
@@ -56,51 +56,22 @@
</f7-card-content>
</f7-card>
<f7-sheet class="category-icon-sheet" :opened="showIconSelection" @sheet:closed="hideIconSelectionSheet">
<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 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>
<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>
<f7-sheet :opened="showColorSelection" @sheet:closed="hideColorSelectionSheet">
<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 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>
<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>
@@ -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;
},