OFMCC-6328 - Add Funding Envelope status filter

frontend/src/components/funding/FundingReallocationRequestsTable.vue

@@ -3,16 +3,19 @@
     <h3>Funding Re-allocation Requests</h3>
     <div class="pt-2 pb-4">The funding re-allocation requests shown include all fiscal years of the selected facility.</div>
     <v-skeleton-loader :loading="loading" type="table-tbody">
+      <StatusFilter v-if="!isEmpty(fundingReallocationRequests)" :loading="loading" class="mb-4" @status-filter-changed="statusFilterChanged" />
       <v-data-table
         id="funding-requests-table"
         :headers="fundingRequestsHeaders"
-        :items="fundingReallocationRequests"
+        :items="filteredFundingReallocationRequests"
         item-key="fundingEnvelopeId"
         density="compact"
         :mobile="null"
         mobile-breakpoint="md"
         class="soft-outline">
-        <template #no-data>The selected facility has not submitted a funding re-allocation request.</template>
+        <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>
@@ -28,11 +31,14 @@
 </template>
 
 <script>
+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'
 
 export default {
   name: 'FundingReallocationRequestsTable',
+  components: { StatusFilter },
   props: {
     loading: {
       type: Boolean,
@@ -52,12 +58,21 @@ export default {
         { title: 'Amount', key: 'amount' },
         { title: 'Status', key: 'statusCode' },
       ],
+      statusFilter: null,
     }
   },
+  computed: {
+    filteredFundingReallocationRequests() {
+      return isEmpty(this.statusFilter)
+        ? this.fundingReallocationRequests
+        : this.fundingReallocationRequests?.filter((request) => request?.statusName?.toUpperCase().includes(this.statusFilter?.toUpperCase()))
+    },
+  },
   created() {
     this.format = format
   },
   methods: {
+    isEmpty,
     getStatusClass(statusCode) {
       switch (statusCode) {
         case FUNDING_REALLOCATION_REQUEST_STATUS_CODES.IN_PROGRESS:
@@ -72,6 +87,9 @@ export default {
           return ''
       }
     },
+    statusFilterChanged(newVal) {
+      this.statusFilter = newVal
+    },
   },
 }
 </script>

frontend/src/components/funding/StatusFilter.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-row no-gutters justify="end">
+    <v-col cols="12" sm="5" lg="3" class="d-flex flex-column align-end">
+      <AppButton id="status-filter-button" variant="text" :disabled="loading" class="pt-2" @click="toggleShowFilter()">
+        Filter by Status
+        <v-icon>mdi-filter</v-icon>
+      </AppButton>
+    </v-col>
+    <v-col cols="12" sm="6" lg="4" class="pb-0">
+      <v-text-field v-show="showFilterInput" v-model.trim="statusFilter" placeholder="Filter by Status" variant="outlined" density="compact" :disabled="loading" hide-details />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import AppButton from '@/components/ui/AppButton.vue'
+
+export default {
+  name: 'StatusFilter',
+  components: { AppButton },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['status-filter-changed'],
+  data() {
+    return {
+      showFilterInput: true,
+      statusFilter: '',
+    }
+  },
+  watch: {
+    statusFilter(newVal) {
+      this.$emit('status-filter-changed', newVal)
+    },
+  },
+  methods: {
+    toggleShowFilter() {
+      this.showFilterInput = !this.showFilterInput
+      if (!this.showFilterInput) {
+        this.statusFilter = ''
+      }
+    },
+  },
+}
+</script>