mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

support account icon

Browse Source
This commit is contained in:
MaysWind
2020-11-14 22:02:32 +08:00
parent e6f90d4c22
commit a487b46446
9 changed files with 210 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+13
View File
@@ -65,6 +65,19 @@ body {
margin-left: 6px;
}
.badge.right-bottom-icon {
margin-left: -12px;
margin-top: 15px;
width: 16px;
height: 16px;
}
.badge.right-bottom-icon > .icon {
font-size: 14px;
width: 14px;
height: 14px;
}
.lab-list-item-error-info div.item-footer {
color: var(--f7-input-error-text-color)
}
src/consts/account.js
+14 -7
View File
@@ -1,31 +1,38 @@
const allAccountCategories = [
{
id: 1,
name: 'Cash'
name: 'Cash',
defaultAccountIconId: '1'
},
{
id: 2,
name: 'Debit Card'
name: 'Debit Card',
defaultAccountIconId: '2'
},
{
id: 3,
name: 'Credit Card'
name: 'Credit Card',
defaultAccountIconId: '2'
},
{
id: 4,
name: 'Virtual Account'
name: 'Virtual Account',
defaultAccountIconId: '3'
},
{
id: 5,
name: 'Debt Account'
name: 'Debt Account',
defaultAccountIconId: '4'
},
{
id: 6,
name: 'Receivables'
name: 'Receivables',
defaultAccountIconId: '5'
},
{
id: 7,
name: 'Investment Account'
name: 'Investment Account',
defaultAccountIconId: '6'
}
];
src/consts/icon.js
+75
View File
@@ -0,0 +1,75 @@
const totalAccountIconCount = 22;
const defaultAccountIcon = {
f7Icon: 'bag'
};
const allAccountIcons = {
'1': {
f7Icon: 'bag'
},
'2': {
f7Icon: 'creditcard'
},
'3': {
f7Icon: 'rectangle_dock'
},
'4': {
f7Icon: 'bag_badge_minus'
},
'5': {
f7Icon: 'tray_arrow_down'
},
'6': {
f7Icon: 'graph_square'
},
'7': {
f7Icon: 'cube_box'
},
'8': {
f7Icon: 'tickets'
},
'9': {
f7Icon: 'lock_shield'
},
'10': {
f7Icon: 'infinite'
},
'11': {
f7Icon: 'logo_apple'
},
'12': {
f7Icon: 'person'
},
'13': {
f7Icon: 'person_2'
},
'14': {
f7Icon: 'person_3'
},
'15': {
f7Icon: 'globe'
},
'16': {
f7Icon: 'money_dollar'
},
'17': {
f7Icon: 'money_euro'
},
'18': {
f7Icon: 'money_pound'
},
'19': {
f7Icon: 'money_rubl'
},
'20': {
f7Icon: 'money_yen'
},
'21': {
f7Icon: 'bitcoin'
}
};
export default {
allAccountIcons: allAccountIcons,
defaultAccountIcon: defaultAccountIcon,
totalAccountIconCount: totalAccountIconCount,
};
src/filters/accountIcon.js
+14
View File
@@ -0,0 +1,14 @@
import icons from "../consts/icon.js";
import utils from "../lib/utils.js";
export default function (iconId) {
if (utils.isNumber(iconId)) {
iconId = iconId.toString();
}
if (iconId <= icons.totalAccountIconCount) {
return icons.allAccountIcons[iconId].f7Icon;
}
return icons.defaultAccountIcon.f7Icon;
}
src/locales/en.js
+1
View File
@@ -315,6 +315,7 @@ export default {
'Account Type': 'Account Type',
'Account Name': 'Account Name',
'Your account name': 'Your account name',
'Account Icon': 'Account Icon',
'Currency': 'Currency',
'Description': 'Description',
'Your account description (optional)': 'Your account description (optional)',
src/locales/zh_Hans.js
+1
View File
@@ -315,6 +315,7 @@ export default {
'Account Type': '账户类型',
'Account Name': '账户名称',
'Your account name': '你的账户名称',
'Account Icon': '账户图标',
'Currency': '货币',
'Description': '描述',
'Your account description (optional)': '你的账户描述 (可选)',
src/mobile-main.js
+5 -1
View File
@@ -14,6 +14,7 @@ import 'framework7-icons';
import { getAllLanguages, getLanguage, getDefaultLanguage, getI18nOptions, getLocalizedError, getLocalizedErrorParameters } from './lib/i18n.js';
import currency from './consts/currency.js';
import icons from './consts/icon.js';
import account from './consts/account.js';
import version from './lib/version.js';
import settings from './lib/settings.js';
@@ -21,6 +22,7 @@ import services from './lib/services.js';
import userstate from './lib/userstate.js';
import utils from './lib/utils.js';
import currencyFilter from './filters/currency.js';
import accountIconFilter from './filters/accountIcon.js';
import App from './Mobile.vue';
Vue.use(VueI18n);
@@ -33,7 +35,8 @@ const i18n = new VueI18n(getI18nOptions());
Vue.prototype.$version = version.getVersion;
Vue.prototype.$constants = {
account: account
icons: icons,
account: account,
};
Vue.prototype.$utilities = utils;
Vue.prototype.$settings = settings;
@@ -142,6 +145,7 @@ Vue.prototype.$services = services;
Vue.prototype.$user = userstate;
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
Vue.filter('accountIcon', (value) => accountIconFilter(value));
Vue.prototype.$setLanguage(settings.getLanguage() || getDefaultLanguage());
src/views/mobile/accounts/AccountAdd.vue
+86 -4
View File
@@ -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
+1
View File
@@ -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>