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

modify style

Browse Source
This commit is contained in:
MaysWind
2021-05-04 22:10:08 +08:00
parent 5061b673e9
commit d2d2babf0b
11 changed files with 259 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+9
View File
@@ -225,6 +225,15 @@ i.icon.la, i.icon.las, i.icon.lab {
color: var(--f7-input-error-text-color)
}
.skeleton-text .list-item-toggle .item-after {
height: var(--f7-toggle-height);
}
.skeleton-text .list-item-toggle .item-after > span {
line-height: var(--f7-toggle-height);
font-size: var(--f7-toggle-height);
}
.no-sortable > .sortable-handler {
display: none;
}
src/filters/format.js
+3
View File
@@ -0,0 +1,3 @@
export default function (value, format) {
return format.replaceAll(/#{value}/g, value);
}
src/filters/languageName.js
+11
View File
@@ -0,0 +1,11 @@
import { allLanguages } from '../locales/index.js';
export default function (languageCode) {
const lang = allLanguages[languageCode];
if (!lang) {
return '';
}
return lang.displayName;
}
src/filters/optionName.js
+27
View File
@@ -0,0 +1,27 @@
import utils from '../lib/utils.js';
export default function (value, options, keyName, valueName) {
if (utils.isArray(options)) {
for (let i = 0; i < options.length; i++) {
const option = options[i];
if (option[keyName] === value) {
return option[valueName];
}
}
} else if (utils.isObject(options)) {
for (let key in options) {
if (!Object.prototype.hasOwnProperty.call(options, key)) {
continue;
}
const option = options[key];
if (option[keyName] === value) {
return option[valueName];
}
}
}
return '';
}
src/locales/en.js
+1
View File
@@ -766,6 +766,7 @@ export default {
'Account Type': 'Account Type',
'Account Name': 'Account Name',
'Your account name': 'Your account name',
'Sub Account': 'Sub Account',
'Sub Account Name': 'Sub Account Name',
'Your sub account name': 'Your sub account name',
'Account Icon': 'Account Icon',
src/locales/zh_Hans.js
+1
View File
@@ -766,6 +766,7 @@ export default {
'Account Type': '账户类型',
'Account Name': '账户名称',
'Your account name': '你的账户名称',
'Sub Account': '子账户',
'Sub Account Name': '子账户名称',
'Your sub account name': '你的子账户名称',
'Account Icon': '账户图标',
src/mobile-main.js
+6
View File
@@ -72,7 +72,10 @@ import stores from './store/index.js';
import localizedFilter from './filters/localized.js';
import momentFilter from './filters/moment.js';
import percentFilter from './filters/percent.js';
import formatFilter from './filters/format.js';
import optionNameFilter from './filters/optionName.js';
import itemFieldContentFilter from './filters/itemFieldContent.js';
import languageNameFilter from './filters/languageName.js';
import currencyFilter from './filters/currency.js';
import utcOffsetFilter from './filters/utcOffset.js';
import textLimitFilter from './filters/textLimit.js';
@@ -157,7 +160,10 @@ Vue.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
Vue.filter('localized', (value, options) => localizedFilter({ i18n }, value, options));
Vue.filter('moment', (value, format, options) => momentFilter(value, format, options));
Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(value, precision, lowPrecisionValue));
Vue.filter('format', (value, format) => formatFilter(value, format));
Vue.filter('optionName', (value, options, keyName, valueName) => optionNameFilter(value, options, keyName, valueName));
Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
Vue.filter('languageName', (languageCode) => languageNameFilter(languageCode));
Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
Vue.filter('utcOffset', (value) => utcOffsetFilter(value));
Vue.filter('textLimit', (value, maxLength) => textLimitFilter(value, maxLength));
src/views/mobile/Signup.vue
+12 -6
View File
@@ -70,9 +70,11 @@
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:key="currentLocale + '_lang'"
:title="$t('Language')"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
:header="$t('Language')"
:title="currentLocale | languageName"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Language'), searchbar: true, searchbarPlaceholder: $t('Language'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select v-model="currentLocale">
<option v-for="(lang, locale) in allLanguages"
@@ -82,9 +84,11 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:key="currentLocale + '_currency'"
:title="$t('Default Currency')"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
:header="$t('Default Currency')"
:title="`currency.${user.defaultCurrency}` | localized"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Default Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select autocomplete="transaction-currency" v-model="user.defaultCurrency">
<option v-for="currency in allCurrencies"
@@ -94,9 +98,11 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:key="currentLocale + '_firstDayOfWeek'"
:title="$t('First Day of Week')"
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
:header="$t('First Day of Week')"
:title="user.firstDayOfWeek | optionName(allWeekDays, 'type', 'name') | format('datetime.#{value}.long') | localized"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('First Day of Week'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select v-model="user.firstDayOfWeek">
<option v-for="weekDay in allWeekDays"
src/views/mobile/accounts/Edit.vue
+90 -56
View File
@@ -12,8 +12,8 @@
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item link="#" title="Account Category" after="Category"></f7-list-item>
<f7-list-item link="#" title="Account Type" after="Account Type"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Category" title="Category"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title" link="#" header="Account Type" title="Account Type"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
@@ -22,9 +22,10 @@
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form>
<f7-list-item
class="list-item-with-header-and-title"
link="#"
:title="$t('Account Category')"
:after="account.category | accountCategoryName(allAccountCategories) | localized"
:header="$t('Account Category')"
:title="account.category | accountCategoryName(allAccountCategories) | localized"
@click="showAccountCategorySheet = true"
>
<list-item-selection-sheet value-type="item"
@@ -38,10 +39,12 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title"
link="#"
:class="{ 'disabled': editAccountId }"
:title="$t('Account Type')"
:after="account.type | accountTypeName | localized"
:header="$t('Account Type')"
:title="account.type | accountTypeName | localized"
:no-chevron="!!editAccountId"
@click="showAccountTypeSheet = true"
>
<list-item-selection-sheet value-type="item"
@@ -59,17 +62,21 @@
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-input inline-label label="Account Name" placeholder="Your account name"></f7-list-input>
<f7-list-item title="Account Icon" link="#">
<f7-icon f7="app_fill"></f7-icon>
<f7-list-input label="Account Name" placeholder="Your account name"></f7-list-input>
<f7-list-item class="list-item-with-header-and-title" header="Account Icon" link="#">
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"></f7-icon>
</f7-block>
</f7-list-item>
<f7-list-item title="Account Color" link="#">
<f7-icon f7="app_fill"></f7-icon>
<f7-list-item class="list-item-with-header-and-title" header="Account Color" link="#">
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"></f7-icon>
</f7-block>
</f7-list-item>
<f7-list-item title="Currency" after="Currency" link="#"></f7-list-item>
<f7-list-item title="Account Balance" after="Balance" link="#"></f7-list-item>
<f7-list-item title="Visible" after="Visible"></f7-list-item>
<f7-list-input type="textarea" placeholder="Your account description (optional)"></f7-list-input>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency" title="Currency" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title" header="Account Balance" title="Balance" link="#"></f7-list-item>
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
<f7-list-input label="Description" type="textarea" placeholder="Your account description (optional)"></f7-list-input>
</f7-list>
</f7-card-content>
</f7-card>
@@ -79,7 +86,6 @@
<f7-list form>
<f7-list-input
type="text"
inline-label
clear-button
:label="$t('Account Name')"
:placeholder="$t('Your account name')"
@@ -87,11 +93,13 @@
@input="account.name = $event.target.value"
></f7-list-input>
<f7-list-item :title="$t('Account Icon')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Account Icon')" link="#"
@click="account.showIconSelectionSheet = true">
<f7-icon slot="after"
:icon="account.icon | accountIcon"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon :icon="account.icon | accountIcon"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="account.showIconSelectionSheet"
:color="account.color"
@@ -99,11 +107,13 @@
></icon-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Account Color')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Account Color')" link="#"
@click="account.showColorSelectionSheet = true">
<f7-icon slot="after"
f7="app_fill"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="account.showColorSelectionSheet"
v-model="account.color"
@@ -111,8 +121,11 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:class="{ 'disabled': editAccountId }"
:title="$t('Currency')"
:header="$t('Currency')"
:title="`currency.${account.currency}` | localized"
:no-chevron="!!editAccountId"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select autocomplete="transaction-currency" v-model="account.currency">
@@ -123,10 +136,11 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title"
:link="editAccountId ? null : '#'"
:class="{ 'disabled': editAccountId }"
:title="$t('Account Balance')"
:after="account.balance | currency(account.currency)"
:header="$t('Account Balance')"
:title="account.balance | currency(account.currency)"
@click="account.showBalanceSheet = true"
>
<number-pad-sheet :min-value="$constants.transaction.minAmount"
@@ -136,7 +150,7 @@
></number-pad-sheet>
</f7-list-item>
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
</f7-list-item>
@@ -144,6 +158,7 @@
type="textarea"
class="textarea-auto-size"
style="height: auto"
:label="$t('Description')"
:placeholder="$t('Your account description (optional)')"
:value="account.comment"
@input="account.comment = $event.target.value"
@@ -157,7 +172,6 @@
<f7-list form>
<f7-list-input
type="text"
inline-label
clear-button
:label="$t('Account Name')"
:placeholder="$t('Your account name')"
@@ -165,11 +179,13 @@
@input="account.name = $event.target.value"
></f7-list-input>
<f7-list-item :title="$t('Account Icon')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Account Icon')" link="#"
@click="account.showIconSelectionSheet = true">
<f7-icon slot="after"
:icon="account.icon | accountIcon"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon :icon="account.icon | accountIcon"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="account.showIconSelectionSheet"
:color="account.color"
@@ -177,18 +193,20 @@
></icon-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Account Color')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Account Color')" link="#"
@click="account.showColorSelectionSheet = true">
<f7-icon slot="after"
f7="app_fill"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"
:style="account.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="account.showColorSelectionSheet"
v-model="account.color"
></color-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
<f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
</f7-list-item>
@@ -196,6 +214,7 @@
type="textarea"
class="textarea-auto-size"
style="height: auto"
:label="$t('Description')"
:placeholder="$t('Your account description (optional)')"
:value="account.comment"
@input="account.comment = $event.target.value"
@@ -206,10 +225,11 @@
<f7-block class="no-padding no-margin" v-if="!loading && account.type === $constants.account.allAccountTypes.MultiSubAccounts">
<f7-card v-for="(subAccount, idx) in subAccounts" :key="idx">
<f7-card-header v-if="!editAccountId">
<f7-button rasied fill color="red"
icon-f7="trash" icon-size="16px"
<f7-card-header>
<small class="subaccount-header-content">{{ $t('Sub Account') + ' #' + (idx + 1) }}</small>
<f7-button rasied fill color="red" icon-f7="trash" icon-size="16px"
:tooltip="$t('Remove Sub Account')"
v-if="!editAccountId"
@click="removeSubAccount(subAccount, false)">
</f7-button>
</f7-card-header>
@@ -217,7 +237,6 @@
<f7-list>
<f7-list-input
type="text"
inline-label
clear-button
:label="$t('Sub Account Name')"
:placeholder="$t('Your sub account name')"
@@ -225,11 +244,13 @@
@input="subAccount.name = $event.target.value"
></f7-list-input>
<f7-list-item :title="$t('Sub Account Icon')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Sub Account Icon')" link="#"
@click="subAccount.showIconSelectionSheet = true">
<f7-icon slot="after"
:icon="subAccount.icon | accountIcon"
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon :icon="subAccount.icon | accountIcon"
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="subAccount.showIconSelectionSheet"
:color="subAccount.color"
@@ -237,11 +258,13 @@
></icon-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Sub Account Color')" link="#"
<f7-list-item class="list-item-with-header-and-title"
:header="$t('Sub Account Color')" link="#"
@click="subAccount.showColorSelectionSheet = true">
<f7-icon slot="after"
f7="app_fill"
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"
:style="subAccount.color | accountIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="subAccount.showColorSelectionSheet"
v-model="subAccount.color"
@@ -249,8 +272,11 @@
</f7-list-item>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
:class="{ 'disabled': editAccountId }"
:title="$t('Currency')"
:header="$t('Currency')"
:title="`currency.${subAccount.currency}` | localized"
:no-chevron="!!editAccountId"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select autocomplete="transaction-currency" v-model="subAccount.currency">
@@ -261,10 +287,11 @@
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title"
:link="editAccountId ? null : '#'"
:class="{ 'disabled': editAccountId }"
:title="$t('Sub Account Balance')"
:after="subAccount.balance | currency(subAccount.currency)"
:header="$t('Sub Account Balance')"
:title="subAccount.balance | currency(subAccount.currency)"
@click="subAccount.showBalanceSheet = true"
>
<number-pad-sheet :min-value="$constants.transaction.minAmount"
@@ -274,7 +301,7 @@
></number-pad-sheet>
</f7-list-item>
<f7-list-item :title="$t('Visible')" v-if="editAccountId">
<f7-list-item :header="$t('Visible')" v-if="editAccountId">
<f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
</f7-list-item>
@@ -282,6 +309,7 @@
type="textarea"
class="textarea-auto-size"
style="height: auto"
:label="$t('Description')"
:placeholder="$t('Your sub account description (optional)')"
:value="subAccount.comment"
@input="subAccount.comment = $event.target.value"
@@ -663,3 +691,9 @@ export default {
}
}
</script>
<style>
.subaccount-header-content {
opacity: 0.6;
}
</style>
src/views/mobile/categories/Edit.vue
+27 -17
View File
@@ -11,15 +11,19 @@
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-input inline-label label="Category Name" placeholder="Your category name"></f7-list-input>
<f7-list-item title="Category Icon" link="#">
<f7-icon f7="app_fill"></f7-icon>
<f7-list-input label="Category Name" placeholder="Your category name"></f7-list-input>
<f7-list-item class="list-item-with-header-and-title" header="Category Icon" link="#">
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"></f7-icon>
</f7-block>
</f7-list-item>
<f7-list-item title="Category Color" link="#">
<f7-icon f7="app_fill"></f7-icon>
<f7-list-item class="list-item-with-header-and-title" header="Category Color" link="#">
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"></f7-icon>
</f7-block>
</f7-list-item>
<f7-list-item title="Visible" after="Visible"></f7-list-item>
<f7-list-input type="textarea" placeholder="Your category description (optional)"></f7-list-input>
<f7-list-item class="list-item-toggle" header="Visible" after="True"></f7-list-item>
<f7-list-input label="Description" type="textarea" placeholder="Your category description (optional)"></f7-list-input>
</f7-list>
</f7-card-content>
</f7-card>
@@ -29,7 +33,6 @@
<f7-list form>
<f7-list-input
type="text"
inline-label
clear-button
:label="$t('Category Name')"
:placeholder="$t('Your category name')"
@@ -37,11 +40,14 @@
@input="category.name = $event.target.value"
></f7-list-input>
<f7-list-item :title="$t('Category Icon')" key="singleTypeCategoryIconSelection" link="#"
<f7-list-item class="list-item-with-header-and-title"
key="singleTypeCategoryIconSelection" link="#"
:header="$t('Category Icon')"
@click="category.showIconSelectionSheet = true">
<f7-icon slot="after"
:icon="category.icon | categoryIcon"
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon :icon="category.icon | categoryIcon"
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<icon-selection-sheet :all-icon-infos="allCategoryIcons"
:show.sync="category.showIconSelectionSheet"
:color="category.color"
@@ -49,18 +55,21 @@
></icon-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Category Color')" key="singleTypeCategoryColorSelection" link="#"
<f7-list-item class="list-item-with-header-and-title"
key="singleTypeCategoryColorSelection" link="#"
:header="$t('Category Color')"
@click="category.showColorSelectionSheet = true">
<f7-icon slot="after"
f7="app_fill"
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
<f7-block slot="title" class="list-item-custom-title no-padding">
<f7-icon f7="app_fill"
:style="category.color | categoryIconStyle('var(--default-icon-color)')"></f7-icon>
</f7-block>
<color-selection-sheet :all-color-infos="allCategoryColors"
:show.sync="category.showColorSelectionSheet"
v-model="category.color"
></color-selection-sheet>
</f7-list-item>
<f7-list-item :title="$t('Visible')" v-if="editCategoryId">
<f7-list-item :header="$t('Visible')" v-if="editCategoryId">
<f7-toggle :checked="category.visible" @toggle:change="category.visible = $event"></f7-toggle>
</f7-list-item>
@@ -68,6 +77,7 @@
type="textarea"
class="textarea-auto-size"
style="height: auto"
:label="$t('Description')"
:placeholder="$t('Your category description (optional)')"
:value="category.comment"
@input="category.comment = $event.target.value"
src/views/mobile/users/UserProfile.vue
+72 -20
View File
@@ -10,20 +10,28 @@
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list inline-labels>
<f7-list>
<f7-list-input label="Password" placeholder="Your password"></f7-list-input>
<f7-list-input label="Confirmation Password" placeholder="Re-enter the password"></f7-list-input>
<f7-list-input label="E-mail" placeholder="Your email address"></f7-list-input>
<f7-list-input label="Nickname" placeholder="Your nickname"></f7-list-input>
<f7-list-item title="Default Currency" after="Currency"></f7-list-item>
<f7-list-item title="First Day of Week" after="Week Day"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card v-else-if="!loading">
<f7-card class="skeleton-text" v-if="loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form inline-labels>
<f7-list>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Default Currency" title="Currency"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="First Day of Week" title="Week Day"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Editable Transaction Scope" title="All"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card v-if="!loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form>
<f7-list-input
type="password"
autocomplete="new-password"
@@ -64,9 +72,19 @@
@input="newProfile.nickname = $event.target.value"
></f7-list-input>
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
<f7-card v-if="!loading">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list form>
<f7-list-item
:title="$t('Default Currency')"
smart-select :smart-select-params="{ openIn: 'popup', searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
class="list-item-with-header-and-title list-item-no-item-after"
:header="$t('Default Currency')"
:title="`currency.${newProfile.defaultCurrency}` | localized"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Default Currency'), searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
<option v-for="currency in allCurrencies"
@@ -76,8 +94,10 @@
</f7-list-item>
<f7-list-item
:title="$t('First Day of Week')"
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
class="list-item-with-header-and-title list-item-no-item-after"
:header="$t('First Day of Week')"
:title="newProfile.firstDayOfWeek | optionName(allWeekDays, 'type', 'name') | format('datetime.#{value}.long') | localized"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('First Day of Week'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select v-model="newProfile.firstDayOfWeek">
<option v-for="weekDay in allWeekDays"
@@ -87,21 +107,19 @@
</f7-list-item>
<f7-list-item
:title="$t('Editable Transaction Scope')"
smart-select :smart-select-params="{ openIn: 'popup', closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
class="list-item-with-header-and-title list-item-no-item-after"
:header="$t('Editable Transaction Scope')"
:title="newProfile.transactionEditScope | optionName(allTransactionEditScopeTypes, 'value', 'name') | localized"
smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Editable Transaction Scope'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }"
>
<select v-model="newProfile.transactionEditScope">
<option :value="0">{{ $t('None') }}</option>
<option :value="1">{{ $t('All') }}</option>
<option :value="2">{{ $t('Today or later') }}</option>
<option :value="3">{{ $t('Recent 24 hours or later') }}</option>
<option :value="4">{{ $t('This week or later') }}</option>
<option :value="5">{{ $t('This month or later') }}</option>
<option :value="6">{{ $t('This year or later') }}</option>
<option v-for="option in allTransactionEditScopeTypes"
:key="option.value"
:value="option.value">{{ option.name | localized }}</option>
</select>
</f7-list-item>
<f7-list-item class="ebk-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
<f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="$t(extendInvalidProblemMessage)"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
@@ -151,12 +169,39 @@ export default {
allWeekDays() {
return this.$constants.datetime.allWeekDays;
},
allTransactionEditScopeTypes() {
return [{
value: 0,
name: 'None'
},{
value: 1,
name: 'All'
},{
value: 2,
name: 'Today or later'
},{
value: 3,
name: 'Recent 24 hours or later'
},{
value: 4,
name: 'This week or later'
},{
value: 5,
name: 'This month or later'
},{
value: 6,
name: 'This year or later'
}];
},
inputIsNotChanged() {
return !!this.inputIsNotChangedProblemMessage;
},
inputIsInvalid() {
return !!this.inputInvalidProblemMessage;
},
extendInputIsInvalid() {
return !!this.extendInputInvalidProblemMessage;
},
inputIsNotChangedProblemMessage() {
if (!this.newProfile.password && !this.newProfile.confirmPassword && !this.newProfile.email && !this.newProfile.nickname) {
return 'Nothing has been modified';
@@ -187,6 +232,13 @@ export default {
} else {
return null;
}
},
extendInputInvalidProblemMessage() {
if (!this.newProfile.defaultCurrency) {
return 'Default currency cannot be empty';
} else {
return null;
}
}
},
created() {
@@ -227,7 +279,7 @@ export default {
self.showInputPasswordSheet = false;
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage;
let problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage;
if (problemMessage) {
self.$alert(problemMessage);