modify ui

This commit is contained in:
MaysWind
2020-11-11 23:29:03 +08:00
parent c21cf9e60d
commit b5a5032bd2
9 changed files with 316 additions and 247 deletions
+61 -53
View File
@@ -1,62 +1,70 @@
<template>
<f7-page>
<f7-navbar :title="$t('Add Account')" :back-link="$t('Back')"></f7-navbar>
<f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title :title="$t('Add Account')"></f7-nav-title>
<f7-nav-right>
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Add')" @click="add"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-list no-hairlines-md>
<f7-list-input
type="select"
:label="$t('Account Category')"
:value="account.category"
@input="account.category = $event.target.value"
>
<option v-for="accountCategory in allAccountCategories"
:key="accountCategory.id"
:value="accountCategory.id">{{ $t(accountCategory.name) }}</option>
</f7-list-input>
<f7-card>
<f7-card-content :padding="false">
<f7-list>
<f7-list-input
type="select"
:label="$t('Account Category')"
:value="account.category"
@input="account.category = $event.target.value"
>
<option v-for="accountCategory in allAccountCategories"
:key="accountCategory.id"
:value="accountCategory.id">{{ $t(accountCategory.name) }}</option>
</f7-list-input>
<f7-list-input
type="select"
disabled
:label="$t('Account Type')"
:value="account.type"
@input="account.type = $event.target.value"
>
<option value="1">{{ $t('Single Account') }}</option>
<option value="2">{{ $t('Multi Sub Accounts') }}</option>
</f7-list-input>
<f7-list-input
type="select"
disabled
:label="$t('Account Type')"
:value="account.type"
@input="account.type = $event.target.value"
>
<option value="1">{{ $t('Single Account') }}</option>
<option value="2">{{ $t('Multi Sub Accounts') }}</option>
</f7-list-input>
<f7-list-input
type="text"
clear-button
:label="$t('Account Name')"
:placeholder="$t('Your account name')"
:value="account.name"
@input="account.name = $event.target.value"
></f7-list-input>
<f7-list-input
type="text"
clear-button
:label="$t('Account Name')"
:placeholder="$t('Your account name')"
:value="account.name"
@input="account.name = $event.target.value"
></f7-list-input>
<f7-list-input
type="select"
:label="$t('Currency')"
:value="account.currency"
@input="account.currency = $event.target.value"
>
<option v-for="currency in allCurrencies"
:key="currency.code"
:value="currency.code">{{ currency.displayName }}</option>
</f7-list-input>
<f7-list-input
type="select"
:label="$t('Currency')"
:value="account.currency"
@input="account.currency = $event.target.value"
>
<option v-for="currency in allCurrencies"
:key="currency.code"
:value="currency.code">{{ currency.displayName }}</option>
</f7-list-input>
<f7-list-input
type="textarea"
:label="$t('Description')"
:placeholder="$t('Your account description (optional)')"
:value="account.comment"
@input="account.comment = $event.target.value"
></f7-list-input>
<f7-list-input
type="textarea"
:label="$t('Description')"
:placeholder="$t('Your account description (optional)')"
:value="account.comment"
@input="account.comment = $event.target.value"
></f7-list-input>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list>
<f7-button large fill :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t('Submit')" @click="submit"></f7-button>
<f7-list-item class="lab-list-item-error-info" v-if="inputIsInvalid" :footer="$t(inputInvalidProblemMessage)"></f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page>
</template>
@@ -108,7 +116,7 @@ export default {
}
},
methods: {
submit() {
add() {
const self = this;
const router = self.$f7router;
@@ -120,7 +128,7 @@ export default {
}
self.submitting = true;
self.$showLoading(() => self.signuping);
self.$showLoading(() => self.submitting);
self.$services.addAccount({
category: parseInt(self.account.category),