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

support clicking transaction to show transaction detail

Browse Source
This commit is contained in:
MaysWind
2020-12-30 00:16:54 +08:00
parent c846863c3b
commit 273f8b9c7d
6 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/Home.vue
+1 -1
View File
@@ -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>
src/views/mobile/transactions/Edit.vue
+11 -3
View File
@@ -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);
src/views/mobile/transactions/Detail.vue → src/views/mobile/transactions/List.vue
+10 -9
View File
@@ -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>