From b0ae4d40267a73a43f2ad45e4221c8827766d168 Mon Sep 17 00:00:00 2001
From: Le <vietdung.le@cgi.com>
Date: Thu, 17 Oct 2024 16:04:27 -0700
Subject: [PATCH] ofmcc-6113 - move funding envelope assitance requests

---
 .../funding/FundingAllocationTab.vue          | 61 +++++++++++++++++++
 .../components/funding/FundingSearchCard.vue  | 26 +++++++-
 .../components/messages/NewRequestDialog.vue  | 19 +++++-
 frontend/src/utils/constants.js               |  1 +
 .../src/views/funding/FundingOverviewView.vue | 10 ++-
 5 files changed, 112 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/funding/FundingAllocationTab.vue

diff --git a/frontend/src/components/funding/FundingAllocationTab.vue b/frontend/src/components/funding/FundingAllocationTab.vue
new file mode 100644
index 00000000..a8703164
--- /dev/null
+++ b/frontend/src/components/funding/FundingAllocationTab.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="my-2">View or submit a change for your centre's current monthly funding allocations. Funds can be re-allocated based on the rules below.</div>
+    <v-row v-if="hasPermission(PERMISSIONS.SUBMIT_CHANGE_REQUEST)" no-gutters class="my-4 pr-2 justify-end">
+      <AppButton :loading="loading" @click="toggleAssistanceRequestDialog()">Request to Re-allocate Funds</AppButton>
+    </v-row>
+    <h2 class="mb-2">Funding Re-Allocation Rules</h2>
+    <AppAlertBanner type="info">Note: Total funds re-allocated cannot be more than the base funding for each envelope.</AppAlertBanner>
+    <FundingSearchCard :loading="loading" :select-single-facility="true" :show-date-filter="false" class="my-6" @search="loadFundingDetails" />
+    <NewRequestDialog
+      class="pa-0"
+      :show="showAssistanceRequestDialog"
+      :default-facility="selectedFacility"
+      :default-request-category-id="getRequestCategoryIdByName(REQUEST_CATEGORY_NAMES.FUNDING_ENVELOPE_CR)"
+      @close="toggleAssistanceRequestDialog" />
+  </v-container>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+
+import FundingSearchCard from '@/components/funding/FundingSearchCard.vue'
+import NewRequestDialog from '@/components/messages/NewRequestDialog.vue'
+import AppAlertBanner from '@/components/ui/AppAlertBanner.vue'
+import AppButton from '@/components/ui/AppButton.vue'
+import { useAppStore } from '@/stores/app'
+import alertMixin from '@/mixins/alertMixin.js'
+import permissionsMixin from '@/mixins/permissionsMixin'
+import { REQUEST_CATEGORY_NAMES } from '@/utils/constants'
+
+export default {
+  name: 'FundingAllocationTab',
+  components: { AppAlertBanner, AppButton, FundingSearchCard, NewRequestDialog },
+  mixins: [alertMixin, permissionsMixin],
+  data() {
+    return {
+      loading: false,
+      showAssistanceRequestDialog: false,
+      selectedFacility: null,
+    }
+  },
+
+  computed: {
+    ...mapState(useAppStore, ['getRequestCategoryIdByName']),
+  },
+
+  created() {
+    this.REQUEST_CATEGORY_NAMES = REQUEST_CATEGORY_NAMES
+  },
+
+  methods: {
+    loadFundingDetails(searchQueries) {
+      this.selectedFacility = searchQueries?.facilities
+    },
+
+    toggleAssistanceRequestDialog() {
+      this.showAssistanceRequestDialog = !this.showAssistanceRequestDialog
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/funding/FundingSearchCard.vue b/frontend/src/components/funding/FundingSearchCard.vue
index 1606425b..101b7933 100644
--- a/frontend/src/components/funding/FundingSearchCard.vue
+++ b/frontend/src/components/funding/FundingSearchCard.vue
@@ -5,10 +5,22 @@
         <v-col cols="12" lg="6" class="mb-6 mb-lg-0">
           <v-row>
             <v-col cols="12" sm="6" lg="3" xl="2" class="pb-0">
-              <AppLabel>Facility(s):</AppLabel>
+              <AppLabel>{{ selectSingleFacility ? 'Facility:' : 'Facility(s):' }}</AppLabel>
             </v-col>
             <v-col cols="12" sm="9" lg="8">
               <v-select
+                v-if="selectSingleFacility"
+                v-model="selectedFacilities"
+                :items="userInfo.facilities"
+                item-title="facilityName"
+                label="Select Facility"
+                :disabled="loading"
+                :rules="rules.required"
+                density="compact"
+                variant="outlined"
+                return-object />
+              <v-select
+                v-else
                 v-model="selectedFacilities"
                 :items="userInfo.facilities"
                 item-title="facilityName"
@@ -67,7 +79,7 @@
             </v-col>
           </v-row>
         </v-col>
-        <v-col cols="12" lg="6">
+        <v-col v-if="showDateFilter" cols="12" lg="6">
           <v-row>
             <v-col cols="12" sm="5" lg="2" xl="2" class="pb-0">
               <AppLabel>Date:</AppLabel>
@@ -133,6 +145,14 @@ export default {
       type: String,
       default: null,
     },
+    showDateFilter: {
+      type: Boolean,
+      default: true,
+    },
+    selectSingleFacility: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['search'],
@@ -205,7 +225,7 @@ export default {
 
   methods: {
     resetFilter() {
-      this.selectedFacilities = this.userInfo?.facilities
+      this.selectedFacilities = this.selectSingleFacility ? this.userInfo?.facilities[0] : this.userInfo?.facilities
       this.selectedDateFilterType = this.defaultDateFilter
       this.selectedPaymentFilterTypes = this.paymentTypes
       this.selectedDateFrom = null
diff --git a/frontend/src/components/messages/NewRequestDialog.vue b/frontend/src/components/messages/NewRequestDialog.vue
index 3ef6faba..6623aba6 100644
--- a/frontend/src/components/messages/NewRequestDialog.vue
+++ b/frontend/src/components/messages/NewRequestDialog.vue
@@ -211,6 +211,15 @@
           <v-row v-if="showRequestDescription" no-gutters>
             <v-col class="v-col-12 pb-0">
               <AppLabel variant="modal">Request description:</AppLabel>
+              <div v-if="isFundingEnvelopeRequest" class="mt-2 mb-4">
+                <div class="mb-2">
+                  Each Funding Envelope has restrictions for how the funding can be used and if or how it can be re-allocated between the Funding Envelopes and between line items within the Funding
+                  Envelopes, as applicable. Please see the Policy and Procedures Manual for detailed information.
+                </div>
+                <div>
+                  In the box below, please outline your request to re-allocate funds, including the amount and the envelopes you are moving funds between. Please also attach any relevant documents.
+                </div>
+              </div>
             </v-col>
             <v-col class="v-col-12">
               <v-textarea
@@ -417,6 +426,9 @@ export default {
     isReportingRequest() {
       return this.newRequestModel.requestCategoryId === this.getRequestCategoryIdByName(REQUEST_CATEGORY_NAMES.REPORTING)
     },
+    isFundingEnvelopeRequest() {
+      return this.newRequestModel.requestCategoryId === this.getRequestCategoryIdByName(REQUEST_CATEGORY_NAMES.FUNDING_ENVELOPE_CR)
+    },
     isAnySubCategoryChecked() {
       return this.newRequestModel.subCategories.length > 0
     },
@@ -503,7 +515,7 @@ export default {
       return this.documentsToUpload.length
     },
     isMultipleFacilities() {
-      return !(this.isAccountMaintenanceRequest || this.isIrregularExpenseRequest || this.isReportingRequest)
+      return !(this.isAccountMaintenanceRequest || this.isFundingEnvelopeRequest || this.isIrregularExpenseRequest || this.isReportingRequest)
     },
     facilityLabel() {
       return `Facility${this.isMultipleFacilities ? '(s)' : ''}:`
@@ -858,4 +870,9 @@ export default {
 .v-messages {
   opacity: 1;
 }
+
+:deep(.v-select__selection-text) {
+  white-space: normal; /* Wraps the selected item text */
+  word-wrap: break-word;
+}
 </style>
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 34c5955e..ae138566 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -132,6 +132,7 @@ export const SUPPLEMENTARY_TYPES = Object.freeze({
 
 export const REQUEST_CATEGORY_NAMES = Object.freeze({
   ACCOUNT_MAINTENANCE: 'Account Maintenance',
+  FUNDING_ENVELOPE_CR: 'Funding Envelope Change Request',
   REPORTING: 'Reporting',
   IRREGULAR_EXPENSES: 'Irregular Expense',
 })
diff --git a/frontend/src/views/funding/FundingOverviewView.vue b/frontend/src/views/funding/FundingOverviewView.vue
index d9aa0cec..28e7d237 100644
--- a/frontend/src/views/funding/FundingOverviewView.vue
+++ b/frontend/src/views/funding/FundingOverviewView.vue
@@ -12,6 +12,10 @@
           <v-icon size="large">mdi-history</v-icon>
           <strong>Payment Records</strong>
         </v-tab>
+        <v-tab v-if="hasPermission(PERMISSIONS.VIEW_FUNDING_AMOUNTS)" value="funding-allocation">
+          <v-icon size="large">mdi-call-split</v-icon>
+          <strong>Funding Allocation</strong>
+        </v-tab>
       </v-tabs>
       <v-card-text>
         <v-window v-model="tab">
@@ -21,6 +25,9 @@
           <v-window-item v-if="hasPermission(PERMISSIONS.VIEW_FUNDING_AMOUNTS)" value="payment-records">
             <PaymentRecordsTab />
           </v-window-item>
+          <v-window-item v-if="hasPermission(PERMISSIONS.VIEW_FUNDING_AMOUNTS)" value="funding-allocation">
+            <FundingAllocationTab />
+          </v-window-item>
         </v-window>
       </v-card-text>
     </v-card>
@@ -32,13 +39,14 @@
 <script>
 import OrganizationHeader from '@/components/organizations/OrganizationHeader.vue'
 import FundingAgreementsTab from '@/components/funding/FundingAgreementsTab.vue'
+import FundingAllocationTab from '@/components/funding/FundingAllocationTab.vue'
 import PaymentRecordsTab from '@/components/funding/PaymentRecordsTab.vue'
 import AppBackButton from '@/components/ui/AppBackButton.vue'
 import permissionsMixin from '@/mixins/permissionsMixin'
 
 export default {
   name: 'FundingOverviewView',
-  components: { AppBackButton, FundingAgreementsTab, PaymentRecordsTab, OrganizationHeader },
+  components: { AppBackButton, FundingAgreementsTab, FundingAllocationTab, PaymentRecordsTab, OrganizationHeader },
   mixins: [permissionsMixin],
   data() {
     return {