support clicking transaction to show transaction detail
This commit is contained in:
MaysWind
+2
-1
@@ -472,7 +472,7 @@ export default {
|
||||
'PIN code is invalid': 'PIN code is invalid',
|
||||
'PIN code is wrong': 'PIN code is wrong',
|
||||
'Sign Up': 'Sign Up',
|
||||
'Transaction Details': 'Transaction Details',
|
||||
'Transaction List': 'Transaction List',
|
||||
'Account List': 'Account List',
|
||||
'Net assets': 'Net assets',
|
||||
'Total assets': 'Total assets',
|
||||
@@ -547,6 +547,7 @@ export default {
|
||||
'You have added a new transaction': 'You have added a new transaction',
|
||||
'You have saved this transaction': 'You have saved this transaction',
|
||||
'Unable to get transaction list': 'Unable to get transaction list',
|
||||
'Transaction Detail': 'Transaction Detail',
|
||||
'No transaction data': 'No transaction data',
|
||||
'Are you sure you want to delete this transaction?': 'Are you sure you want to delete this transaction?',
|
||||
'Unable to delete this transaction': 'Unable to delete this transaction',
|
||||
|
||||
@@ -472,7 +472,7 @@ export default {
|
||||
'PIN code is invalid': 'PIN码无效',
|
||||
'PIN code is wrong': 'PIN码错误',
|
||||
'Sign Up': '注册',
|
||||
'Transaction Details': '交易详情',
|
||||
'Transaction List': '交易列表',
|
||||
'Account List': '账户列表',
|
||||
'Net assets': '净资产',
|
||||
'Total assets': '总资产',
|
||||
@@ -547,6 +547,7 @@ export default {
|
||||
'You have added a new transaction': '您已经添加新交易',
|
||||
'You have saved this transaction': '您已经保存该交易',
|
||||
'Unable to get transaction list': '无法获取交易列表',
|
||||
'Transaction Detail': '交易详情',
|
||||
'No transaction data': '没有交易数据',
|
||||
'Are you sure you want to delete this transaction?': '您确定要删除该交易？',
|
||||
'Unable to delete this transaction': '无法删除该交易',
|
||||
|
||||
@@ -5,7 +5,7 @@ import LoginPage from '../views/mobile/Login.vue';
|
||||
import SignUpPage from '../views/mobile/Signup.vue';
|
||||
import UnlockPage from '../views/mobile/Unlock.vue';
|
||||
|
||||
import TransactionDetailPage from '../views/mobile/transactions/Detail.vue';
|
||||
import TransactionListPage from '../views/mobile/transactions/List.vue';
|
||||
import TransactionEditPage from '../views/mobile/transactions/Edit.vue';
|
||||
|
||||
import AccountListPage from '../views/mobile/accounts/List.vue';
|
||||
@@ -135,8 +135,8 @@ const routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/transaction/details',
|
||||
component: TransactionDetailPage,
|
||||
path: '/transaction/list',
|
||||
component: TransactionListPage,
|
||||
beforeEnter: checkLogin
|
||||
},
|
||||
{
|
||||
@@ -149,6 +149,11 @@ const routes = [
|
||||
component: TransactionEditPage,
|
||||
beforeEnter: checkLogin
|
||||
},
|
||||
{
|
||||
path: '/transaction/detail',
|
||||
component: TransactionEditPage,
|
||||
beforeEnter: checkLogin
|
||||
},
|
||||
{
|
||||
path: '/account/list',
|
||||
component: AccountListPage,
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</f7-list>
|
||||
|
||||
<f7-toolbar tabbar labels bottom>
|
||||
<f7-link href="/transaction/details">
|
||||
<f7-link href="/transaction/list">
|
||||
<f7-icon f7="square_list"></f7-icon>
|
||||
<span class="tabbar-label">{{ $t('Details') }}</span>
|
||||
</f7-link>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t(title)"></f7-nav-title>
|
||||
<f7-nav-right>
|
||||
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
|
||||
<f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save" v-if="!readonly"></f7-link>
|
||||
</f7-nav-right>
|
||||
|
||||
<f7-subnavbar :class="{ 'disabled': editTransactionId }">
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
<f7-card v-else-if="!loading">
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list form>
|
||||
<f7-list form :class="{ 'disabled': readonly }">
|
||||
<f7-list-item
|
||||
class="transaction-edit-amount padding-top-half padding-bottom-half"
|
||||
:class="{ 'color-theme-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'color-theme-red': transaction.type === $constants.transaction.allTransactionTypes.Income }"
|
||||
@@ -259,6 +259,7 @@ export default {
|
||||
categoriedAccounts: [],
|
||||
allCategories: {},
|
||||
allTags: [],
|
||||
readonly: false,
|
||||
loading: true,
|
||||
submitting: false,
|
||||
showAccountBalance: self.$settings.isShowAccountBalance(),
|
||||
@@ -271,7 +272,9 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.editTransactionId) {
|
||||
if (this.readonly) {
|
||||
return 'Transaction Detail';
|
||||
} else if (!this.editTransactionId) {
|
||||
return 'Add Transaction';
|
||||
} else {
|
||||
return 'Edit Transaction';
|
||||
@@ -404,6 +407,7 @@ export default {
|
||||
const query = self.$f7route.query;
|
||||
const router = self.$f7router;
|
||||
|
||||
self.readonly = self.$f7route.path === '/transaction/detail';
|
||||
self.loading = true;
|
||||
|
||||
const promises = [
|
||||
@@ -517,6 +521,10 @@ export default {
|
||||
const self = this;
|
||||
const router = self.$f7router;
|
||||
|
||||
if (self.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.submitting = true;
|
||||
self.$showLoading(() => self.submitting);
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@infinite="loadMore(true)">
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Transaction Details')"></f7-nav-title>
|
||||
<f7-nav-title :title="$t('Transaction List')"></f7-nav-title>
|
||||
<f7-nav-right v-if="false">
|
||||
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
|
||||
</f7-nav-right>
|
||||
@@ -26,7 +26,7 @@
|
||||
</f7-card-header>
|
||||
<f7-card-content class="no-safe-areas" :padding="false">
|
||||
<f7-list media-list>
|
||||
<f7-list-item class="transaction-info">
|
||||
<f7-list-item class="transaction-info" link="#" chevron-center>
|
||||
<div slot="media" class="display-flex no-padding-horizontal">
|
||||
<div class="display-flex flex-direction-column transaction-date">
|
||||
<span class="transaction-day full-line flex-direction-column">DD</span>
|
||||
@@ -44,11 +44,11 @@
|
||||
<span>·</span>
|
||||
<span>Source Account</span>
|
||||
</div>
|
||||
<div slot="content-end" class="padding-right transaction-amount">
|
||||
<div slot="after" class="no-padding transaction-amount">
|
||||
<span>0.00 USD</span>
|
||||
</div>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="transaction-info">
|
||||
<f7-list-item class="transaction-info" link="#" chevron-center>
|
||||
<div slot="media" class="display-flex no-padding-horizontal">
|
||||
<div class="display-flex flex-direction-column transaction-date">
|
||||
<span class="transaction-day full-line flex-direction-column">DD</span>
|
||||
@@ -66,11 +66,11 @@
|
||||
<span>·</span>
|
||||
<span>Source Account</span>
|
||||
</div>
|
||||
<div slot="content-end" class="padding-right transaction-amount">
|
||||
<div slot="after" class="no-padding transaction-amount">
|
||||
<span>0.00 USD</span>
|
||||
</div>
|
||||
</f7-list-item>
|
||||
<f7-list-item class="transaction-info">
|
||||
<f7-list-item class="transaction-info" link="#" chevron-center>
|
||||
<div slot="media" class="display-flex no-padding-horizontal">
|
||||
<div class="display-flex flex-direction-column transaction-date">
|
||||
<span class="transaction-day full-line flex-direction-column">DD</span>
|
||||
@@ -88,7 +88,7 @@
|
||||
<span>·</span>
|
||||
<span>Source Account</span>
|
||||
</div>
|
||||
<div slot="content-end" class="padding-right transaction-amount">
|
||||
<div slot="after" class="no-padding transaction-amount">
|
||||
<span>0.00 USD</span>
|
||||
</div>
|
||||
</f7-list-item>
|
||||
@@ -127,9 +127,10 @@
|
||||
<f7-card-content class="no-safe-areas" :padding="false" accordion-list>
|
||||
<f7-accordion-content :style="{ height: transactionMonthList.opened ? 'auto' : '' }">
|
||||
<f7-list media-list>
|
||||
<f7-list-item class="transaction-info"
|
||||
<f7-list-item class="transaction-info" chevron-center
|
||||
v-for="(transaction, idx) in transactionMonthList.items"
|
||||
:key="transaction.id" :id="transaction | transactionDomId"
|
||||
:link="'/transaction/detail?id=' + transaction.id"
|
||||
swipeout
|
||||
>
|
||||
<div slot="media" class="display-flex no-padding-horizontal">
|
||||
@@ -164,7 +165,7 @@
|
||||
<span v-if="transaction.sourceAccount">·</span>
|
||||
<span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
|
||||
</div>
|
||||
<div slot="content-end" class="padding-right transaction-amount" v-if="transaction.sourceAccount">
|
||||
<div slot="after" class="no-padding transaction-amount" v-if="transaction.sourceAccount">
|
||||
<span :class="{ 'text-color-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'text-color-red': transaction.type === $constants.transaction.allTransactionTypes.Income }">
|
||||
{{ transaction.sourceAmount | currency(transaction.sourceAccount.currency) }}
|
||||
</span>
|
||||
Reference in New Issue
Block a user