ofmcc 7380 updates to funding allocation table, to handle multiple line items (#506)

* updates to funding allocation table, to handle multiple line items per row

* updates to check for unique values

* removed a var

Author: jenbeckett

backend/src/components/fundingAgreements.js

@@ -4,7 +4,7 @@ const { MappableObjectForFront, MappableObjectForBack } = require('../util/mappi
 const { buildDateFilterQuery, buildFilterQuery } = require('../util/common')
 const { getTopUpFundingByFilter } = require('./topups')
 const { TOP_UP_FUNDING_STATUS_CODES } = require('../util/constants')
-const { FundingAgreementMappings, FundingReallocationRequestMappings } = require('../util/mapping/Mappings')
+const { FundingAgreementMappings, FundingReallocationRequestMappings, FundingAllocationChangeMappings } = require('../util/mapping/Mappings')
 const { FUNDING_AGREEMENT_STATUS_CODES, FUNDING_AGREEMENT_STATE_CODES } = require('../util/constants')
 const HttpStatus = require('http-status-codes')
 const log = require('./logger')
@@ -107,11 +107,16 @@ async function updateFundingAgreement(req, res) {
 
 async function getFundingReallocationRequests(req, res) {
   try {
-    const fundingReallocationRequests = []
-    const operation = `ofm_funding_envelope_changes?$select=ofm_funding_envelope_changeid,_ofm_funding_value,ofm_funding_envelope_from,ofm_funding_envelope_to,ofm_amount_base,createdon,statuscode
-              &$filter=(_ofm_funding_value eq ${req?.params?.fundingAgreementId})&pageSize=500`
+    const operation = `ofm_funding_envelope_changes?$select=ofm_funding_envelope_changeid,_ofm_funding_value,ofm_funding_envelope_from,ofm_funding_envelope_to,ofm_amount_base,createdon,statuscode&$filter=(_ofm_funding_value eq ${req?.params?.fundingAgreementId})&$expand=ofm_funding_allocation_envelope_change($select=ofm_funding_envelope_from,ofm_funding_envelope_to,ofm_amount_base)&pageSize=500`
     const response = await getOperation(operation)
-    response?.value?.forEach((reallocationRequest) => fundingReallocationRequests.push(new MappableObjectForFront(reallocationRequest, FundingReallocationRequestMappings).toJSON()))
+
+    const fundingReallocationRequests = response?.value.map((reallocationRequest) => {
+      const fundingAllocations = reallocationRequest.ofm_funding_allocation_envelope_change?.map((allocation) => new MappableObjectForFront(allocation, FundingAllocationChangeMappings).toJSON())
+      const fundingRequest = new MappableObjectForFront(reallocationRequest, FundingReallocationRequestMappings).toJSON()
+      fundingRequest.fundingAllocations = fundingAllocations
+      return fundingRequest
+    })
+
     return res.status(HttpStatus.OK).json(fundingReallocationRequests)
   } catch (e) {
     handleError(res, e)

backend/src/util/mapping/Mappings.js

@@ -362,14 +362,18 @@ const FundingAgreementMappings = [
 const FundingReallocationRequestMappings = [
   { back: 'ofm_funding_envelope_changeid', front: 'fundingEnvelopeId' },
   { back: '_ofm_funding_value', front: 'fundingId' },
+  { back: 'createdon', front: 'date' },
+  { back: 'statuscode', front: 'statusCode' },
+  { back: 'statuscode@OData.Community.Display.V1.FormattedValue', front: 'statusName' },
+]
+
+const FundingAllocationChangeMappings = [
+  { back: 'ofm_funding_allocationid', front: 'fundingAllocationId' },
   { back: 'ofm_funding_envelope_from', front: 'envelopeCodeFrom' },
   { back: 'ofm_funding_envelope_from@OData.Community.Display.V1.FormattedValue', front: 'envelopeNameFrom' },
   { back: 'ofm_funding_envelope_to', front: 'envelopeCodeTo' },
   { back: 'ofm_funding_envelope_to@OData.Community.Display.V1.FormattedValue', front: 'envelopeNameTo' },
   { back: 'ofm_amount_base', front: 'amount' },
-  { back: 'createdon', front: 'date' },
-  { back: 'statuscode', front: 'statusCode' },
-  { back: 'statuscode@OData.Community.Display.V1.FormattedValue', front: 'statusName' },
 ]
 
 const PaymentMappings = [
@@ -564,4 +568,5 @@ module.exports = {
   UserProfileOrganizationMappings,
   IrregularExpenseMappings,
   TopUpMappings,
+  FundingAllocationChangeMappings,
 }

frontend/src/components/funding/FundingAllocationPopup.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-container>
+    <AppDialog v-model="isDisplayed" title="Funding Re-allocation Request Details" persistent max-width="60%" @close="closeDialog">
+      <template #content>
+        <v-data-table :headers="fundingRequestsHeaders" :items="allocations" item-key="fundingAllocationId" density="compact" class="soft-outline" :hide-default-footer="true">
+          <template #[`item.amount`]="{ item }">$ {{ format.formatDecimalNumber(item?.amount) }}</template>
+        </v-data-table>
+      </template>
+      <template #button>
+        <v-row justify="space-around">
+          <v-col cols="12" md="6" class="d-flex justify-center">
+            <AppButton id="dialog-go-back" :primary="false" size="large" width="300px" @click="closeDialog">Back to Summary</AppButton>
+          </v-col>
+        </v-row>
+      </template>
+    </AppDialog>
+  </v-container>
+</template>
+
+<script>
+import AppButton from '@/components/ui/AppButton.vue'
+import AppDialog from '@/components/ui/AppDialog.vue'
+import format from '@/utils/format'
+
+export default {
+  name: 'FundingAllocationPopup',
+  components: { AppButton, AppDialog },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    allocations: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['close'],
+  data() {
+    return {
+      isDisplayed: false,
+      fundingRequestsHeaders: [
+        { title: 'From', key: 'envelopeNameFrom' },
+        { title: 'To', key: 'envelopeNameTo' },
+        { title: 'Amount', key: 'amount', align: 'end' },
+      ],
+    }
+  },
+  watch: {
+    show: {
+      handler(value) {
+        this.isDisplayed = value
+      },
+    },
+  },
+  created() {
+    this.format = format
+  },
+  methods: {
+    closeDialog() {
+      this.$emit('close')
+    },
+  },
+}
+</script>

frontend/src/components/funding/FundingReallocationRequestsTable.vue

@@ -16,29 +16,40 @@
         <template #no-data>
           <span v-if="isEmpty(fundingReallocationRequests)">The selected facility has not submitted a funding re-allocation request.</span>
         </template>
+
         <template #[`item.date`]="{ item }">
           {{ format.formatDate(item?.date) }}
         </template>
-        <template #[`item.amount`]="{ item }">$ {{ format.formatDecimalNumber(item?.amount) }}</template>
+        <template #[`item.envelopeNameFrom`]="{ item }">{{ getEnvelopeName(item.fundingAllocations, 'envelopeNameFrom') }}</template>
+        <template #[`item.envelopeNameTo`]="{ item }">{{ getEnvelopeName(item.fundingAllocations, 'envelopeNameTo') }}</template>
+        <template #[`item.amount`]="{ item }">$ {{ sumAmounts(item) }}</template>
         <template #[`item.statusCode`]="{ item }">
           <div class="min-width-column">
             <span :class="getStatusClass(item?.statusCode)">{{ item?.statusName }}</span>
           </div>
         </template>
+        <template #[`item.fundingAllocations`]="{ item }">
+          <div class="min-width-column">
+            <AppButton :primary="false" size="small" @click="toggleDialog(item?.fundingAllocations)">View</AppButton>
+          </div>
+        </template>
       </v-data-table>
     </v-skeleton-loader>
+    <FundingAllocationPopup :allocations="activeAllocations" :show="showDialog" @close="toggleDialog()"></FundingAllocationPopup>
   </v-container>
 </template>
 
 <script>
+import AppButton from '@/components/ui/AppButton.vue'
 import { isEmpty } from 'lodash'
 import StatusFilter from '@/components/funding/StatusFilter.vue'
 import { FUNDING_REALLOCATION_REQUEST_STATUS_CODES } from '@/utils/constants'
 import format from '@/utils/format'
+import FundingAllocationPopup from '@/components/funding/FundingAllocationPopup.vue'
 
 export default {
   name: 'FundingReallocationRequestsTable',
-  components: { StatusFilter },
+  components: { AppButton, FundingAllocationPopup, StatusFilter },
   props: {
     loading: {
       type: Boolean,
@@ -55,10 +66,13 @@ export default {
         { title: 'Date', key: 'date' },
         { title: 'From', key: 'envelopeNameFrom' },
         { title: 'To', key: 'envelopeNameTo' },
-        { title: 'Amount', key: 'amount' },
+        { title: 'Amount', key: 'amount', align: 'end' },
         { title: 'Status', key: 'statusCode' },
+        { title: 'Actions', key: 'fundingAllocations' },
       ],
       statusFilter: null,
+      showDialog: false,
+      activeAllocations: undefined,
     }
   },
   computed: {
@@ -90,6 +104,21 @@ export default {
     statusFilterChanged(newVal) {
       this.statusFilter = newVal
     },
+    sumAmounts(allocationRequest) {
+      //ofmcc 7380- allocation requests can have multiple line items with dollar values. The table updates need to show the value of all line items together in the table.
+      return format.formatDecimalNumber(allocationRequest.fundingAllocations.reduce((acc, curr) => acc + (Number(curr.amount) || 0), 0))
+    },
+    toggleDialog(allocations = []) {
+      this.showDialog = !this.showDialog
+      this.activeAllocations = allocations
+    },
+    getEnvelopeName(allocations, key) {
+      if (!allocations?.length) return ''
+
+      const uniqueNames = [...new Set(allocations.map((allocation) => allocation[key]))]
+
+      return uniqueNames.length === 1 ? uniqueNames[0] : 'Multiple'
+    },
   },
 }
 </script>

frontend/src/utils/format.js

@@ -19,6 +19,7 @@ function formatBooleanToYesNo(value) {
 
 function formatDate(date) {
   if (!date) return BLANK_FIELD
+  //jb- I think we should remove .utc from here?
   return moment.utc(date).format('YYYY-MMM-DD')
 }