Merge pull request #122 from harvardinformatics/ajk_show_dates

Show product usage start date and end date in billing record display
harvardinformatics · Nov 9, 2022 · 2c89576 · 2c89576
2 parents e87cbcd + 55b5370
commit 2c89576
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 3 deletions.
diff --git a/src/components/billingRecord/IFXBillingRecord.js b/src/components/billingRecord/IFXBillingRecord.js
@@ -172,6 +172,14 @@ export default class BillingRecord extends IFXItemBase {
     return this.data.updated
   }
 
+  get startDate() {
+    return this.productUsage.start_date
+  }
+
+  get endDate() {
+    return this.productUsage.end_date
+  }
+
   addTransaction(transaction) {
     this.data.transactions.push(transaction)
   }

diff --git a/src/components/billingRecord/IFXBillingRecordList.vue b/src/components/billingRecord/IFXBillingRecordList.vue
@@ -65,6 +65,11 @@ export default {
       required: false,
       default: 20,
     },
+    showDates: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   mounted() {
     this.facilityBillingRecords()
@@ -92,10 +97,12 @@ export default {
         { text: 'Lab', value: 'account.organization', sortable: true },
         { text: 'Expense Code / PO', value: 'account.slug', sortable: true },
         { text: 'Product', value: 'product', sortable: true },
+        { text: 'Start Date', value: 'startDate', sortable: true, hide: !this.showDates, namedSlot: true },
+        { text: 'End Date', value: 'endDate', sortable: true, hide: !this.showDates, namedSlot: true },
         { text: 'Charge', value: 'charge', sortable: true, width: '100px' },
         { text: 'Percent', value: 'percent', sortable: true, width: '100px' },
         { text: 'Usage id', value: 'productUsage.id', sortable: true },
-        { text: 'Txn desc', value: 'transactions', sortable: false },
+        { text: 'Transaction Description', value: 'transactions', sortable: false },
         { text: 'Actions', value: 'actions', sortable: false },
       ],
       rowSelectionToggle: [],
@@ -908,7 +915,7 @@ export default {
               <template
               v-slot:group.header="{ group, headers, isOpen, toggle }"
               v-on:rendered="itemRendered('group.header')"
-            >
+              >
                 <IFXBillingRecordHeader
                 :key="group"
                 :item="item"
@@ -951,6 +958,16 @@ export default {
             <template v-slot:item.charge="{ item }">
               {{ item.charge | centsToDollars }}
             </template>
+            <template v-slot:item.startDate="{ item }">
+              <span style="white-space: nowrap">
+                {{ item.startDate | humanDatetime }}
+              </span>
+            </template>
+            <template v-slot:item.endDate="{ item }">
+              <span style="white-space: nowrap">
+                {{ item.endDate | humanDatetime }}
+              </span>
+            </template>
             <template v-slot:item.actions="{ item }">
               <div class="d-flex flex-row">
                 <IFXButton

diff --git a/src/components/billingRecord/IFXBillingRecordListDecimal.vue b/src/components/billingRecord/IFXBillingRecordListDecimal.vue
@@ -65,6 +65,11 @@ export default {
       required: false,
       default: 20,
     },
+    showDates: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   mounted() {
     this.facilityBillingRecords()
@@ -92,10 +97,12 @@ export default {
         { text: 'Lab', value: 'account.organization', sortable: true },
         { text: 'Expense Code / PO', value: 'account.slug', sortable: true },
         { text: 'Product', value: 'product', sortable: true },
+        { text: 'Start Date', value: 'startDate', sortable: true, hide: !this.showDates, namedSlot: true },
+        { text: 'End Date', value: 'endDate', sortable: true, hide: !this.showDates, namedSlot: true },
         { text: 'Charge', value: 'decimalCharge', sortable: true, width: '100px' },
         { text: 'Percent', value: 'percent', sortable: true, width: '100px' },
         { text: 'Usage id', value: 'productUsage.id', sortable: true },
-        { text: 'Txn desc', value: 'transactions', sortable: false },
+        { text: 'Transaction description', value: 'transactions', sortable: false },
         { text: 'Actions', value: 'actions', sortable: false },
       ],
       rowSelectionToggle: [],
@@ -952,6 +959,15 @@ export default {
             <template v-slot:item.decimalCharge="{ item }">
               {{ item.decimalCharge | dollars }}
             </template>
+            <template v-slot:item.startDate="{ item }">
+              <span style="white-space: nowrap">
+                {{ item.startDate | humanDatetime }}
+              </span>
+            </template>
+            <template v-slot:item.endDate="{ item }">
+              <span style="white-space: nowrap">
+                {{ item.endDate | humanDatetime }}
+              </span>
             <template v-slot:item.actions="{ item }">
               <div class="d-flex flex-row">
                 <IFXButton

diff --git a/src/components/billingRecord/IFXBillingRecords.vue b/src/components/billingRecord/IFXBillingRecords.vue
@@ -21,6 +21,11 @@ export default {
       required: false,
       default: false,
     },
+    showDates: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -145,6 +150,7 @@ export default {
             :allowApprovals="false"
             :allowDownloads="allowDownloads"
             :useDefaultMailButton="useDefaultMailButton"
+            :showDates="showDates"
           />
           <IFXBillingRecordList
             v-else
@@ -155,6 +161,7 @@ export default {
             :allowApprovals="false"
             :allowDownloads="allowDownloads"
             :useDefaultMailButton="useDefaultMailButton"
+            :showDates="showDates"
           />
         </v-col>
       </v-row>