From 273f8b9c7da5f22fdb357f6a0640f13df952c170 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 30 Dec 2020 00:16:54 +0800
Subject: [PATCH] support clicking transaction to show transaction detail

---
 src/locales/en.js                             |  3 ++-
 src/locales/zh_Hans.js                        |  3 ++-
 src/router/mobile.js                          | 11 ++++++++---
 src/views/mobile/Home.vue                     |  2 +-
 src/views/mobile/transactions/Edit.vue        | 14 +++++++++++---
 .../transactions/{Detail.vue => List.vue}     | 19 ++++++++++---------
 6 files changed, 34 insertions(+), 18 deletions(-)
 rename src/views/mobile/transactions/{Detail.vue => List.vue} (97%)

diff --git a/src/locales/en.js b/src/locales/en.js
index 2a32fe6a..acca3e38 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -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',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index c65b1625..bf1e1820 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -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': '无法删除该交易',
diff --git a/src/router/mobile.js b/src/router/mobile.js
index d58b51b1..57119cff 100644
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@@ -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,
diff --git a/src/views/mobile/Home.vue b/src/views/mobile/Home.vue
index a785a5aa..8a9c92f0 100644
--- a/src/views/mobile/Home.vue
+++ b/src/views/mobile/Home.vue
@@ -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>
diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
index be1615df..d35335c4 100644
--- a/src/views/mobile/transactions/Edit.vue
+++ b/src/views/mobile/transactions/Edit.vue
@@ -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);
 
diff --git a/src/views/mobile/transactions/Detail.vue b/src/views/mobile/transactions/List.vue
similarity index 97%
rename from src/views/mobile/transactions/Detail.vue
rename to src/views/mobile/transactions/List.vue
index e8dce57a..d7473c62 100644
--- a/src/views/mobile/transactions/Detail.vue
+++ b/src/views/mobile/transactions/List.vue
@@ -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>