diff --git a/src/Mobile.vue b/src/Mobile.vue
index f986b8bf..626a288f 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -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)
}
diff --git a/src/consts/account.js b/src/consts/account.js
index 26bb7bd0..3d4b255f 100644
--- a/src/consts/account.js
+++ b/src/consts/account.js
@@ -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'
}
];
diff --git a/src/consts/icon.js b/src/consts/icon.js
new file mode 100644
index 00000000..a9857cbc
--- /dev/null
+++ b/src/consts/icon.js
@@ -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,
+};
diff --git a/src/filters/accountIcon.js b/src/filters/accountIcon.js
new file mode 100644
index 00000000..e6986369
--- /dev/null
+++ b/src/filters/accountIcon.js
@@ -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;
+}
diff --git a/src/locales/en.js b/src/locales/en.js
index c47d09ca..795e9bbe 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -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)',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 3e71eebc..e511209f 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -315,6 +315,7 @@ export default {
'Account Type': '账户类型',
'Account Name': '账户名称',
'Your account name': '你的账户名称',
+ 'Account Icon': '账户图标',
'Currency': '货币',
'Description': '描述',
'Your account description (optional)': '你的账户描述 (可选)',
diff --git a/src/mobile-main.js b/src/mobile-main.js
index c6f7d052..f616035e 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -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());
diff --git a/src/views/mobile/accounts/AccountAdd.vue b/src/views/mobile/accounts/AccountAdd.vue
index 30c889c7..13d60b4b 100644
--- a/src/views/mobile/accounts/AccountAdd.vue
+++ b/src/views/mobile/accounts/AccountAdd.vue
@@ -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"
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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;
+ }
+ }
}
}
}
diff --git a/src/views/mobile/accounts/AccountList.vue b/src/views/mobile/accounts/AccountList.vue
index a10a418e..17f151d5 100644
--- a/src/views/mobile/accounts/AccountList.vue
+++ b/src/views/mobile/accounts/AccountList.vue
@@ -55,6 +55,7 @@
:title="account.name" :after="accountBalance(account) | currency(account.currency)"
link="#" swipeout @taphold.native="setSortable()"
>
+