show bill detail

src/_services/bill.service.js

@@ -11,5 +11,5 @@ function getAllBillsByAccount(userId, messages, errors) {
 }
 
 function getBillByAccountAndId(userId, billId, messages, errors) {
-    return fetch(`${config.apiUrl}/users/${userId}/bills/${billId}`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
+    return fetch(`${config.apiUrl}/users/${userId}/bills/${billId}?payments=true`, util.getWithAuth()).then(util.handleCrudResponse(messages, errors));
 }

src/account/payment/BillsPage.vue

@@ -1,6 +1,42 @@
 <template>
     <div>
         <h4>{{messages.title_bills}}<span v-if="this.me === false"> - {{this.userId}}</span></h4>
+
+        <div v-if="billFocus">
+            <div>{{messages.label_bill_period_start}}: {{billFocus.periodStart}}</div>
+            <div>{{messages.label_bill_period_end}}: {{billFocus.periodEnd}}</div>
+            <div>{{messages.label_bill_plan}}: {{messages['plan_name_'+billFocus.planObject.name]}}</div>
+            <div>{{messages.label_bill_status}}: {{messages['bill_status_'+billFocus.status]}}</div>
+            <div>{{messages.label_bill_total}}: {{messages.label_bill_total_format.parseExpression({messages: messages, ...billFocus, totalMajorUnits: billFocus.total/100, totalMinorUnits: billFocus.total%100})}}</div>
+
+            <table border="1">
+                <thead>
+                <tr>
+                    <td>{{messages.label_payment_type}}</td>
+                    <td>{{messages.label_payment_method}}</td>
+                    <td>{{messages.label_payment_status}}</td>
+                    <td>{{messages.label_payment_amount}}</td>
+                    <td>{{messages.label_payment_action}}</td>
+                </tr>
+                </thead>
+                <tbody v-if="billFocus.payments">
+                <tr v-for="payment in billFocus.payments">
+                    <td>{{messages['payment_method_'+payment.paymentMethodObject.paymentMethodType]}}</td>
+                    <td v-if="payment.paymentMethodObject.promotion">{{messages['label_promotion_'+payment.paymentMethodObject.maskedPaymentInfo]}}</td>
+                    <td v-else>{{payment.paymentMethodObject.maskedPaymentInfo}}</td>
+                    <td>{{messages['payment_status_'+payment.status]}}</td>
+                    <td>{{messages.label_payment_amount_format.parseExpression({messages: messages, ...payment, amountMajorUnits: payment.amount/100, amountMinorUnits: payment.amount%100})}}</td>
+                    <td>
+                        {{messages['payment_type_'+payment.type]}}
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            <button @click="showBillDetail(null)">{{messages.button_label_close_bill_detail}}</button>
+        </div>
+
+        <div v-else>
         <table border="1">
             <thead>
             <tr>
@@ -10,17 +46,18 @@
                 <td>{{messages.label_bill_total}}</td>
             </tr>
             </thead>
-            <tbody v-if="billObjects">
-            <tr v-for="bill in billObjects">
-                <td>{{bill.periodStart}} - {{bill.periodEnd}} ({{bill.periodLabel}})</td>
+            <tbody v-if="bills">
+            <tr v-for="bill in bills" @click="showBillDetail(bill)">
+                <td>{{bill.periodStart}}</td>
                 <td>{{messages['plan_name_'+bill.planObject.name]}}</td>
                 <td>{{messages['bill_status_'+bill.status]}}</td>
                 <td>
-                    {{messages.label_bill_total_format.parseExpression({messages: messages, ...bill})}}
+                    {{messages.label_bill_total_format.parseExpression({messages: messages, ...bill, totalMajorUnits: bill.total/100, totalMinorUnits: bill.total%100})}}
                 </td>
             </tr>
             </tbody>
         </table>
+        </div>
     </div>
 </template>
 
@@ -36,28 +73,27 @@
                 userId: null,
                 linkPrefix: null,
                 currentUser: util.currentUser(),
-                billObjects: null
+                billFocus: null
             };
         },
         computed: {
             ...mapState('system', ['messages']),
-            ...mapState('bills', ['bills'])
+            ...mapState('bills', ['bills', 'bill'])
         },
         methods: {
-            ...mapActions('bills', ['getAllBillsByAccount']),
-            ...mapGetters('bills', ['loading'])
+            ...mapActions('bills', ['getAllBillsByAccount', 'getBillByAccountAndId']),
+            ...mapGetters('bills', ['loading']),
+            showBillDetail (bill) {
+                this.billFocus = bill;
+                if (bill !== null) {
+                    this.getBillByAccountAndId({userId: this.userId, billId: bill.uuid, messages: this.messages, errors: this.errors});
+                }
+            }
         },
         watch: {
-            bills (b) {
-                if (b && b.length && b.length > 0) {
-                    const billObjects = [];
-                    for (let i=0; i<b.length; i++) {
-                        const bill = b[i];
-                        bill['totalMajorUnits'] = bill.total / 100;
-                        bill['totalMinorUnits'] = bill.total % 100;
-                        billObjects.push(bill);
-                    }
-                    this.billObjects = billObjects;
+            bill (b) {
+                if (b) {
+                    this.billFocus = b;
                 }
             }
         },