update: upgrade pouchdb

remove total tab and merge with balance

package.json

@@ -23,9 +23,9 @@
     "lodash-es": "^4.17.15",
     "md5": "^2.2.1",
     "notyf": "^2.0.1",
-    "pouchdb": "^6.4.3",
+    "pouchdb": "^7.1.1",
     "pouchdb-authentication": "^1.1.3",
-    "pouchdb-browser": "^6.4.3",
+    "pouchdb-browser": "^7.1.1",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
@@ -42,7 +42,7 @@
     "@types/lodash-es": "^4.17.3",
     "@types/md5": "^2.1.33",
     "@types/notyf": "^2.0.0",
-    "@types/pouchdb": "^6.3.3",
+    "@types/pouchdb": "^6.4.0",
     "@vue/cli-plugin-babel": "^3.10.0",
     "@vue/cli-plugin-pwa": "^3.10.0",
     "@vue/cli-plugin-typescript": "^3.10.0",

src/components/ChartBalance.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="chart-balance">
+    <p>{{ $tc('account.total', statOrdered.length, { count: statOrdered.length }) }}</p>
     <table class="table is-hoverable is-striped" v-if="stats.length">
       <tbody>
         <tr v-for="(stat, k) in statOrdered" :key="k">
@@ -13,6 +14,12 @@
           <td v-else class="conclude" :class="getColor(stat.balance.amount)"></td>
         </tr>
       </tbody>
+      <tfoot>
+        <tr class="is-selected">
+          <th scope="row" class="total">total</th>
+          <th class="numeric" colspan="2">{{ totalCost | money(currency) }}</th>
+        </tr>
+      </tfoot>
     </table>
     <div v-else>Aucune dépense faite</div>
   </div>
@@ -43,6 +50,10 @@ export default class ChartBalance extends Vue {
       a.balance.amount < b.balance.amount ? 1 : -1
     )
   }
+
+  public get totalCost(): number {
+    return this.stats.reduce((a: number, b: IStat) => a + b.value, 0)
+  }
 }
 </script>
 

src/views/accounts/AccountItem.vue

@@ -59,11 +59,6 @@
               <awe-icon icon="exchange-alt" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'total' }">
-            <a href="#" @click.prevent="toggleTab('total')">
-              <awe-icon icon="equals" />
-            </a>
-          </li>
         </ul>
       </div>
       <transition-group :name="transitionName" tag="div" mode="out-in" v-if="transactions.length">
@@ -108,32 +103,6 @@
             <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
           </div>
         </div>
-        <div
-          key="total"
-          class="total-panel tab-content columns is-center"
-          v-if="activeTab === 'total'"
-        >
-          <div class="column table-container">
-            <p>{{ $tc('account.total', transactions.length, { count: transactions.length }) }}</p>
-            <table class="table is-striped is-bordered">
-              <tbody v-if="isMultiUser">
-                <tr v-for="(user, k) in totalUserCost" :key="k">
-                  <th scope="row" v-if="user.alias === userAlias">
-                    <em>mes dépenses</em>
-                  </th>
-                  <th scope="row" v-else>{{ user.alias }}</th>
-                  <td class="numeric">{{ user.total | money(account.mainCurrency) }}</td>
-                </tr>
-              </tbody>
-              <tfoot>
-                <tr class="is-selected">
-                  <th scope="row" class="total">total</th>
-                  <th class="numeric">{{ totalCost | money(account.mainCurrency) }}</th>
-                </tr>
-              </tfoot>
-            </table>
-          </div>
-        </div>
       </transition-group>
     </div>
     <fab-button
@@ -439,7 +408,7 @@ export default class AccountItem extends BaseAccount {
 
   @Watch('activeTab')
   public onActiveTabChange(newTab: string, oldTab: string): void {
-    const tabs: string[] = ['transaction', 'tag', 'balance', 'refund', 'total']
+    const tabs: string[] = ['transaction', 'tag', 'balance', 'refund']
     this.transitionName =
       tabs.indexOf(newTab) > tabs.indexOf(oldTab) ? 'slide-left' : 'slide-right'
   }