feat: expense breakdown to pnldetail

glorat · Jan 17, 2024 · ecf25f6 · ecf25f6
1 parent f4ed52a
commit ecf25f6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/client/src/pages/PnlExplain.vue b/client/src/pages/PnlExplain.vue
@@ -69,7 +69,7 @@
                     <td class="num" v-for="explainData in explains">{{ explainData.totalIncome.toFixed(2) }}</td>
                 </tr>
                 <tr>
-                    <td><q-btn round flat size="xs" :icon="matAddCircleOutline" @click="expansions['expenses'] = !expansions['expenses']"></q-btn>
+                    <td><q-btn round flat size="xs" :icon="expansions['expenses'] ? matRemoveCircleOutline : matAddCircleOutline" @click="expansions['expenses'] = !expansions['expenses']"></q-btn>
                       Expenses</td>
                     <td class="num" v-for="explainData in explains">{{ explainData.totalExpense.toFixed(2) }}</td>
                 </tr>
@@ -107,14 +107,13 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, onMounted, reactive} from 'vue';
+import {computed, onMounted, reactive, ref} from 'vue';
 import HelpTip from '../components/HelpTip.vue';
-import { mapGetters } from 'vuex';
-import { apiPnlExplainMonthly } from '../lib/apiFacade';
-import {matAdd, matAddCircleOutline, matAnalytics, matExpand, matPlusOne} from '@quasar/extras/material-icons';
-import { PLExplainDTO } from 'src/lib/PLExplain'; // Make sure the path is correct
-import { qnotify } from 'boot/notify'; // Make sure the path is correct
-import { useStore } from 'src/store';
+import {apiPnlExplainMonthly} from '../lib/apiFacade';
+import {matAddCircleOutline, matAnalytics, matRemoveCircleOutline} from '@quasar/extras/material-icons';
+import {PLExplainDTO} from 'src/lib/PLExplain';
+import {qnotify} from 'boot/notify'; 
+import {useStore} from 'src/store';
 import {router} from 'src/router';
 
 const store = useStore();

diff --git a/client/src/pages/PnlExplainDetail.vue b/client/src/pages/PnlExplainDetail.vue
@@ -116,16 +116,22 @@
       <!--                <td class="subtitle">Equity</td>-->
       <!--                <td class="num">{{ explainData.totalEquity.toFixed(2) }}</td>-->
       <!--            </tr>-->
+      <template v-if="explainData.expenseByAccount.length">
       <tr v-if="explainData.expenseByAccount.length">
           <td colspan="4" class="subtitle">Expenses</td>
           <td>P&L</td>
       </tr>
-      <template v-if="explainData.expenseByAccount.length">
-          <tr v-for="exp in explainData.expenseByAccount">
-              <td colspan="4">{{ exp.accountId }}</td>
-              <td class="num">{{ exp.value.toFixed(2) }}</td>
-          </tr>
+      <tr v-for="exp in explainData.expenseByAccount">
+          <td colspan="4">{{ exp.accountId }}</td>
+          <td class="num">{{ exp.value.toFixed(2) }}</td>
+      </tr>
+        <tr>
+          <td class="subtotal" colspan="4">Total</td>
+          <td class="subtotal num">{{ explainData.totalExpense.toFixed(2) }}</td>
+        </tr>
+        <tr><td></td><td></td></tr>
       </template>
+
       <tr v-if="explainData.newActivityByAccount.length">
         <td colspan="4" class="subtitle">New Activity</td>
         <td>P&L</td>
@@ -229,7 +235,9 @@ export default defineComponent({
   },
   data() {
     const explains: PLExplainDTO[] = [];
+    const expansions: Record<string, boolean> = {};
     return {
+      expansions,
       explains,
     };
   },