feat: Load current GrantDetail modal as a new page (#2376)

usdigitalresponse · Dec 18, 2023 · a7236db · a7236db
1 parent 61d59ac
commit a7236db
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 9 deletions.
diff --git a/packages/client/src/components/GrantsTable.vue b/packages/client/src/components/GrantsTable.vue
@@ -25,7 +25,7 @@
         <b-table id="grants-table" hover responsive stacked="sm" :items="formattedGrants"
           :fields="fields.filter(field => !field.hideGrantItem)" selectable striped :sort-by.sync="orderBy"
           :sort-desc.sync="orderDesc" :no-local-sorting="true" :bordered="true" select-mode="single" :busy="loading"
-          @row-selected="onRowSelected" show-empty emptyText="No matches found">
+          @row-selected="onRowSelected" @row-clicked="onRowClicked" show-empty emptyText="No matches found">
           <template #cell(award_floor)="row">
             <p> {{ formatMoney(row.item.award_floor) }}</p>
           </template>
@@ -335,6 +335,12 @@ export default {
       }
       return floor;
     },
+    onRowClicked(item) {
+      if (!newGrantsDetailPageEnabled()) {
+        return;
+      }
+      this.$router.push(`grant/${item.grant_id}`);
+    },
     onRowSelected(items) {
       const [row] = items;
       if (row) {

diff --git a/packages/client/src/router/index.js b/packages/client/src/router/index.js
@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import { myProfileEnabled, newTerminologyEnabled } from '@/helpers/featureFlags';
+import { myProfileEnabled, newTerminologyEnabled, newGrantsDetailPageEnabled } from '@/helpers/featureFlags';
 import Login from '../views/Login.vue';
 import Layout from '../components/Layout.vue';
 import ArpaAnnualPerformanceReporter from '../views/ArpaAnnualPerformanceReporter.vue';
+import GrantDetail from '../views/GrantDetails.vue';
 
 import store from '../store';
 
@@ -135,6 +136,16 @@ const routes = [
   },
 ];
 
+if (newGrantsDetailPageEnabled()) {
+  routes.push(
+    {
+      path: '/grant/:id',
+      name: 'grantDetail',
+      component: GrantDetail,
+    },
+  );
+}
+
 const router = new VueRouter({
   base: process.env.BASE_URL,
   routes,

diff --git a/packages/client/src/views/Dashboard.vue b/packages/client/src/views/Dashboard.vue
@@ -15,7 +15,9 @@
                 :sort-by.sync="sortBy" :sort-desc.sync="sortAsc" class='table table-borderless overflow-hidden' thead-class="d-none"
                 selectable
                 select-mode="single"
-                @row-selected="onRowSelected">
+                @row-selected="onRowSelected"
+                @row-clicked="onRowClicked"
+                >
                 <template #cell(icon)="list">
                   <div class="gutter-icon row">
                     <b-icon v-if="list.item.interested === 0" icon="x-circle-fill" scale="1" variant="danger"></b-icon>
@@ -56,7 +58,9 @@
                 class='table table-borderless' thead-class="d-none"
                 selectable
                 select-mode="single"
-                @row-selected="onRowSelected">
+                @row-selected="onRowSelected"
+                @row-clicked="onRowClicked"
+                >
                 <template #cell()="{ field, value, index }">
                   <div v-if="field.key === 'title'">{{value}}</div>
                   <div v-if="field.key === 'close_date' && yellowDate === true" :style="field.trStyle" v-text="value"></div>
@@ -472,6 +476,12 @@ export default {
         });
       }
     },
+    onRowClicked(item) {
+      if (!newGrantsDetailPageEnabled()) {
+        return;
+      }
+      this.$router.push(`grant/${item.grant_id}`);
+    },
   },
 };
 </script>
diff --git a/packages/client/src/views/GrantDetails.vue b/packages/client/src/views/GrantDetails.vue
@@ -1,8 +1,14 @@
 <!-- eslint-disable max-len -->
 <template>
-  <b-modal v-model="showDialog" ok-only :title="selectedGrant && selectedGrant.grant_number"
-     @hide="resetSelectedGrant" scrollable size="xl" ok-title="Close">
-    <div v-if="selectedGrant">
+  <div>
+    Grant ID: {{this.$route.params.id}}
+    <div v-if="loading">
+      Loading...
+    </div>
+    <div v-if="!selectedGrant && !loading">
+      No grant found
+    </div>
+    <div v-if="selectedGrant && !loading">
       <b-row class="mb-3 d-flex align-items-baseline">
         <b-col cols="8">
           <h1 class="mb-0 h2">{{ selectedGrant.title }}</h1>
@@ -22,6 +28,10 @@
       <div v-for="field in dialogFields" :key="field">
         <p><span class="data-label">{{ titleize(field) }}:</span> {{ selectedGrant[field] }}</p>
       </div>
+      <p>
+        <span class="data-label">Category of Funding Activity:</span>
+        {{ selectedGrant['funding_activity_categories']?.join(', ') }}
+      </p>
       <p class="data-label">Description:</p>
       <div style="max-height: 170px; overflow-y: scroll">
         <div style="white-space: pre-line" v-html="selectedGrant.description"></div>
@@ -85,7 +95,7 @@
         </template>
       </b-table>
     </div>
-  </b-modal>
+</div>
 </template>
 
 <script>
@@ -150,9 +160,23 @@ export default {
       selectedInterestedCode: null,
       searchInput: null,
       debouncedSearchInput: null,
+      loading: true,
     };
   },
-  mounted() {
+  created() {
+    // watch the params of the route to fetch the data again
+    this.$watch(
+      () => this.$route.params,
+      () => {
+        this.loading = true;
+        this.fetchData().then(() => {
+          this.loading = false;
+        });
+      },
+      // fetch the data when the view is created and the data is
+      // already being observed
+      { immediate: true },
+    );
   },
   computed: {
     ...mapGetters({
@@ -164,6 +188,7 @@ export default {
       interestedCodes: 'grants/interestedCodes',
       loggedInUser: 'users/loggedInUser',
       selectedAgency: 'users/selectedAgency',
+      currentGrant: 'grants/currentGrant',
     }),
     alreadyViewed() {
       if (!this.selectedGrant) {
@@ -216,6 +241,7 @@ export default {
       unassignAgenciesToGrantAction: 'grants/unassignAgenciesToGrant',
       fetchUsers: 'users/fetchUsers',
       fetchAgencies: 'agencies/fetchAgencies',
+      fetchGrantDetails: 'grants/fetchGrantDetails',
     }),
     titleize,
     debounceSearchInput: debounce(function bounce(newVal) {
@@ -270,6 +296,11 @@ export default {
       this.assignedAgencies = [];
       this.selectedAgencies = [];
     },
+    async fetchData() {
+      await this.fetchGrantDetails({ grantId: this.$route.params.id }).then(() => {
+        this.selectedGrant = this.currentGrant;
+      });
+    },
   },
 };
 </script>
diff --git a/packages/client/src/views/RecentActivity.vue b/packages/client/src/views/RecentActivity.vue
@@ -21,6 +21,7 @@
       selectable
       select-mode="single"
       @row-selected="onRowSelected"
+      @row-clicked="onRowClicked"
     >
       <template #cell(icon)="list">
         <div class="gutter-icon row">
@@ -195,6 +196,12 @@ export default {
         });
       }
     },
+    onRowClicked(item) {
+      if (!newGrantsDetailPageEnabled()) {
+        return;
+      }
+      this.$router.push(`grant/${item.grant_id}`);
+    },
     exportCSV() {
       this.exportCSVRecentActivities();
     },

diff --git a/packages/client/src/views/UpcomingClosingDates.vue b/packages/client/src/views/UpcomingClosingDates.vue
@@ -14,6 +14,7 @@
       selectable
       select-mode="single"
       @row-selected="onRowSelected"
+      @row-clicked="onRowClicked"
     >
       <template #cell()="{ field, value, index }">
         <div v-if="field.key == 'title'">{{value}}</div>
@@ -174,6 +175,12 @@ export default {
         });
       }
     },
+    onRowClicked(item) {
+      if (!newGrantsDetailPageEnabled()) {
+        return;
+      }
+      this.$router.push(`grant/${item.grant_id}`);
+    },
     formatDate(value) {
       // value is the close date of grant
       //                  get threshold of agency