From 35afb274cbb5235dca5e5b18b9935b0bf95eff8b Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Fri, 18 Oct 2024 13:05:56 -0700
Subject: [PATCH 1/6] #2741 - Ministry Filter: Search Programs & Offerings

- Converted Prime Vue table to Vuetify Data Table
---
 .../src/types/contracts/DataTableContract.ts  |  11 ++
 .../src/views/aest/institution/Programs.vue   | 110 +++++-------------
 2 files changed, 43 insertions(+), 78 deletions(-)

diff --git a/sources/packages/web/src/types/contracts/DataTableContract.ts b/sources/packages/web/src/types/contracts/DataTableContract.ts
index 7963dee59d..beccfa2a49 100644
--- a/sources/packages/web/src/types/contracts/DataTableContract.ts
+++ b/sources/packages/web/src/types/contracts/DataTableContract.ts
@@ -393,3 +393,14 @@ export const ApplicationRestrictionManagementHeaders = [
     key: "removeBypassRule",
   },
 ];
+/**
+ * Program Headers.
+ */
+export const ProgramHeaders = [
+  { title: "Date Submitted", sortable: true, key: "submittedDate" },
+  { title: "Program Name", sortable: true, key: "programName" },
+  { title: "Location", sortable: true, key: "locationName" },
+  { title: "Study Periods", sortable: false, key: "totalOfferings" },
+  { title: "Status", sortable: true, key: "programStatus" },
+  { title: "Action", sortable: false, key: "action" },
+];
diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index 75f8370142..259385e476 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -11,7 +11,6 @@
               density="compact"
               v-model="searchProgramName"
               label="Search Program Name"
-              data-cy="searchProgramName"
               variant="outlined"
               @keyup.enter="goToSearchProgramName()"
               prepend-inner-icon="mdi-magnify"
@@ -21,77 +20,44 @@
         </body-header>
       </template>
       <content-group>
-        <DataTable
-          :value="institutionProgramsSummary.results"
-          :lazy="true"
-          :paginator="true"
-          :rows="DEFAULT_PAGE_LIMIT"
-          :rowsPerPageOptions="PAGINATION_LIST"
-          :totalRecords="institutionProgramsSummary.count"
-          @page="pageSortEvent($event)"
-          @sort="pageSortEvent($event)"
-          :loading="loading"
+        <toggle-content
+          :toggled="!loading && !institutionProgramsSummary.count"
+          message="No bypassed restrictions found."
         >
-          <template #empty>
-            <p class="text-center font-weight-bold">No records found.</p>
-          </template>
-          <Column
-            :field="ProgramSummaryFields.SubmittedDate"
-            header="Date Submitted"
-            :sortable="true"
+          <v-data-table
+            :headers="ProgramHeaders"
+            :items="institutionProgramsSummary.results"
+            :items-per-page="DEFAULT_PAGE_LIMIT"
+            :items-per-page-options="ITEMS_PER_PAGE"
+            :loading="loading"
           >
-            <template #body="slotProps">
-              <div class="p-text-capitalize">
-                {{ slotProps.data.submittedDateFormatted }}
-              </div>
+            <template #[`item.submittedDate`]="{ item }">
+              {{ item.submittedDateFormatted }}
             </template>
-          </Column>
-          <Column
-            :field="ProgramSummaryFields.ProgramName"
-            header="Program Name"
-          >
-            <template #body="slotProps">
-              <div class="p-text-capitalize">
-                {{ slotProps.data.programName }}
-              </div>
+            <template #[`item.programName`]="{ item }">
+              {{ item.programName }}
             </template>
-          </Column>
-          <Column :field="ProgramSummaryFields.LocationName" header="Location">
-            <template #body="slotProps">
-              <div class="p-text-capitalize">
-                {{ slotProps.data.locationName }}
-              </div>
+            <template #[`item.locationName`]="{ item }">
+              {{ item.locationName }}
             </template>
-          </Column>
-          <Column
-            :field="ProgramSummaryFields.TotalOfferings"
-            header="Study periods"
-          >
-          </Column>
-          <Column :field="ProgramSummaryFields.ProgramStatus" header="Status"
-            ><template #body="slotProps">
+            <template #[`item.totalOfferings`]="{ item }">
+              {{ item.totalOfferings }}
+            </template>
+            <template #[`item.programStatus`]="{ item }">
               <status-chip-program
-                :status="slotProps.data.programStatus"
-                :is-active="
-                  slotProps.data.isActive && !slotProps.data.isExpired
-                "
-              ></status-chip-program> </template
-          ></Column>
-          <Column header="Action">
-            <template #body="slotProps">
+                :status="item.programStatus"
+                :is-active="item.isActive && !item.isExpired"
+              ></status-chip-program>
+            </template>
+            <template #[`item.action`]="{ item }">
               <v-btn
                 variant="outlined"
-                @click="
-                  goToViewProgramDetail(
-                    slotProps.data.programId,
-                    slotProps.data.locationId,
-                  )
-                "
+                @click="goToViewProgramDetail(item.programId, item.locationId)"
                 >View</v-btn
               >
             </template>
-          </Column>
-        </DataTable>
+          </v-data-table>
+        </toggle-content>
       </content-group>
     </body-header-container>
   </tab-container>
@@ -104,11 +70,11 @@ import {
   DataTableSortOrder,
   ProgramSummaryFields,
   DEFAULT_PAGE_NUMBER,
-  PAGINATION_LIST,
   DEFAULT_PAGE_LIMIT,
   PaginatedResults,
   EducationProgramsSummary,
-  LayoutTemplates,
+  ProgramHeaders,
+  ITEMS_PER_PAGE,
 } from "@/types";
 import { AESTRoutesConst } from "@/constants/routes/RouteConstants";
 import StatusChipProgram from "@/components/generic/StatusChipProgram.vue";
@@ -129,7 +95,7 @@ export default defineComponent({
     );
     const searchProgramName = ref("");
     const currentPageSize = ref();
-    const loading = ref(false);
+    const loading = ref(true);
 
     const getProgramsSummaryList = async (
       institutionId: number,
@@ -175,17 +141,6 @@ export default defineComponent({
         },
       });
     };
-    const pageSortEvent = async (event: any) => {
-      currentPageSize.value = event?.rows;
-      await getProgramsSummaryList(
-        props.institutionId,
-        event.rows,
-        event.page,
-        searchProgramName.value,
-        event.sortField,
-        event.sortOrder,
-      );
-    };
     const goToSearchProgramName = async () => {
       await getProgramsSummaryList(
         props.institutionId,
@@ -198,13 +153,12 @@ export default defineComponent({
       institutionProgramsSummary,
       goToViewProgramDetail,
       DEFAULT_PAGE_LIMIT,
-      pageSortEvent,
       goToSearchProgramName,
       searchProgramName,
       loading,
       ProgramSummaryFields,
-      PAGINATION_LIST,
-      LayoutTemplates,
+      ProgramHeaders,
+      ITEMS_PER_PAGE,
     };
   },
 });

From a69aabdebef395dda03bf84db0dfeec794ea2c16 Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Fri, 18 Oct 2024 13:12:02 -0700
Subject: [PATCH 2/6] Fixed No records found message

---
 sources/packages/web/src/views/aest/institution/Programs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index 259385e476..7197a13f8a 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -22,7 +22,7 @@
       <content-group>
         <toggle-content
           :toggled="!loading && !institutionProgramsSummary.count"
-          message="No bypassed restrictions found."
+          message="No records found."
         >
           <v-data-table
             :headers="ProgramHeaders"

From 07dbd790a5ca91cbde88cb728089982758179e69 Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Mon, 21 Oct 2024 15:19:55 -0700
Subject: [PATCH 3/6] Code Update

---
 .../src/types/contracts/DataTableContract.ts   |  3 ++-
 .../src/views/aest/institution/Programs.vue    | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/sources/packages/web/src/types/contracts/DataTableContract.ts b/sources/packages/web/src/types/contracts/DataTableContract.ts
index beccfa2a49..047faad9d7 100644
--- a/sources/packages/web/src/types/contracts/DataTableContract.ts
+++ b/sources/packages/web/src/types/contracts/DataTableContract.ts
@@ -393,8 +393,9 @@ export const ApplicationRestrictionManagementHeaders = [
     key: "removeBypassRule",
   },
 ];
+
 /**
- * Program Headers.
+ * Program headers.
  */
 export const ProgramHeaders = [
   { title: "Date Submitted", sortable: true, key: "submittedDate" },
diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index 7197a13f8a..2e4e1a9bc1 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -22,14 +22,15 @@
       <content-group>
         <toggle-content
           :toggled="!loading && !institutionProgramsSummary.count"
-          message="No records found."
         >
           <v-data-table
             :headers="ProgramHeaders"
-            :items="institutionProgramsSummary.results"
+            :items="institutionProgramsSummary?.results"
+            :items-length="institutionProgramsSummary?.count"
             :items-per-page="DEFAULT_PAGE_LIMIT"
             :items-per-page-options="ITEMS_PER_PAGE"
             :loading="loading"
+            @update:options="pageSortEvent"
           >
             <template #[`item.submittedDate`]="{ item }">
               {{ item.submittedDateFormatted }}
@@ -52,6 +53,7 @@
             <template #[`item.action`]="{ item }">
               <v-btn
                 variant="outlined"
+                color="primary"
                 @click="goToViewProgramDetail(item.programId, item.locationId)"
                 >View</v-btn
               >
@@ -141,6 +143,17 @@ export default defineComponent({
         },
       });
     };
+    const pageSortEvent = async (event: any) => {
+      currentPageSize.value = event?.rows;
+      await getProgramsSummaryList(
+        props.institutionId,
+        event.rows,
+        event.page,
+        searchProgramName.value,
+        event.sortField,
+        event.sortOrder,
+      );
+    };
     const goToSearchProgramName = async () => {
       await getProgramsSummaryList(
         props.institutionId,
@@ -153,6 +166,7 @@ export default defineComponent({
       institutionProgramsSummary,
       goToViewProgramDetail,
       DEFAULT_PAGE_LIMIT,
+      pageSortEvent,
       goToSearchProgramName,
       searchProgramName,
       loading,

From 65f02baad3455f3aeb8bcab82a1118562304d9d5 Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Tue, 22 Oct 2024 12:59:24 -0700
Subject: [PATCH 4/6] Code Update: Review Comments

---
 .../src/services/http/EducationProgramApi.ts  |  1 +
 .../src/types/contracts/DataTableContract.ts  |  2 +-
 .../src/views/aest/institution/Programs.vue   | 39 +++++++++++--------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/sources/packages/web/src/services/http/EducationProgramApi.ts b/sources/packages/web/src/services/http/EducationProgramApi.ts
index 19bb234e0a..ccb9c5d98d 100644
--- a/sources/packages/web/src/services/http/EducationProgramApi.ts
+++ b/sources/packages/web/src/services/http/EducationProgramApi.ts
@@ -46,6 +46,7 @@ export class EducationProgramApi extends HttpBaseClient {
   ): Promise<PaginatedResultsAPIOutDTO<EducationProgramsSummaryAPIOutDTO>> {
     const url = `education-program/institution/${institutionId}/summary?${getPaginationQueryString(
       paginationOptions,
+      true,
     )}`;
 
     return this.getCall<
diff --git a/sources/packages/web/src/types/contracts/DataTableContract.ts b/sources/packages/web/src/types/contracts/DataTableContract.ts
index 047faad9d7..ee08a941e4 100644
--- a/sources/packages/web/src/types/contracts/DataTableContract.ts
+++ b/sources/packages/web/src/types/contracts/DataTableContract.ts
@@ -402,6 +402,6 @@ export const ProgramHeaders = [
   { title: "Program Name", sortable: true, key: "programName" },
   { title: "Location", sortable: true, key: "locationName" },
   { title: "Study Periods", sortable: false, key: "totalOfferings" },
-  { title: "Status", sortable: true, key: "programStatus" },
+  { title: "Status", sortable: false, key: "programStatus" },
   { title: "Action", sortable: false, key: "action" },
 ];
diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index 2e4e1a9bc1..7aac375687 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -23,13 +23,14 @@
         <toggle-content
           :toggled="!loading && !institutionProgramsSummary.count"
         >
-          <v-data-table
+          <v-data-table-server
+            v-if="institutionProgramsSummary?.count"
             :headers="ProgramHeaders"
             :items="institutionProgramsSummary?.results"
             :items-length="institutionProgramsSummary?.count"
+            :loading="loading"
             :items-per-page="DEFAULT_PAGE_LIMIT"
             :items-per-page-options="ITEMS_PER_PAGE"
-            :loading="loading"
             @update:options="pageSortEvent"
           >
             <template #[`item.submittedDate`]="{ item }">
@@ -58,7 +59,7 @@
                 >View</v-btn
               >
             </template>
-          </v-data-table>
+          </v-data-table-server>
         </toggle-content>
       </content-group>
     </body-header-container>
@@ -69,14 +70,15 @@
 import { onMounted, ref, defineComponent } from "vue";
 import { useRouter } from "vue-router";
 import {
-  DataTableSortOrder,
   ProgramSummaryFields,
-  DEFAULT_PAGE_NUMBER,
   DEFAULT_PAGE_LIMIT,
   PaginatedResults,
   EducationProgramsSummary,
   ProgramHeaders,
   ITEMS_PER_PAGE,
+  DataTableOptions,
+  DataTableSortByOrder,
+  DEFAULT_DATATABLE_PAGE_NUMBER,
 } from "@/types";
 import { AESTRoutesConst } from "@/constants/routes/RouteConstants";
 import StatusChipProgram from "@/components/generic/StatusChipProgram.vue";
@@ -96,16 +98,17 @@ export default defineComponent({
       {} as PaginatedResults<EducationProgramsSummary>,
     );
     const searchProgramName = ref("");
-    const currentPageSize = ref();
+    const currentPage = ref();
+    const currentPageLimit = ref();
     const loading = ref(true);
 
     const getProgramsSummaryList = async (
       institutionId: number,
-      rowsPerPage: number,
-      page: number,
+      rowsPerPage = DEFAULT_PAGE_LIMIT,
+      page = DEFAULT_DATATABLE_PAGE_NUMBER,
       programName: string,
       sortColumn?: ProgramSummaryFields,
-      sortOrder?: DataTableSortOrder,
+      sortOrder?: DataTableSortByOrder,
     ) => {
       try {
         loading.value = true;
@@ -129,7 +132,7 @@ export default defineComponent({
       await getProgramsSummaryList(
         props.institutionId,
         DEFAULT_PAGE_LIMIT,
-        DEFAULT_PAGE_NUMBER,
+        DEFAULT_DATATABLE_PAGE_NUMBER,
         searchProgramName.value,
       );
     });
@@ -143,22 +146,24 @@ export default defineComponent({
         },
       });
     };
-    const pageSortEvent = async (event: any) => {
-      currentPageSize.value = event?.rows;
+    const pageSortEvent = async (event: DataTableOptions) => {
+      currentPage.value = event.page;
+      currentPageLimit.value = event.itemsPerPage;
+      const [sortByOptions] = event.sortBy;
       await getProgramsSummaryList(
         props.institutionId,
-        event.rows,
+        event.itemsPerPage,
         event.page,
         searchProgramName.value,
-        event.sortField,
-        event.sortOrder,
+        sortByOptions?.key as ProgramSummaryFields,
+        sortByOptions?.order,
       );
     };
     const goToSearchProgramName = async () => {
       await getProgramsSummaryList(
         props.institutionId,
-        currentPageSize.value ? currentPageSize.value : DEFAULT_PAGE_LIMIT,
-        DEFAULT_PAGE_NUMBER,
+        currentPageLimit.value ?? DEFAULT_PAGE_LIMIT,
+        currentPage.value ?? DEFAULT_DATATABLE_PAGE_NUMBER,
         searchProgramName.value,
       );
     };

From 3bc9670f21c09693e620b74ba2ee6e259d06be1a Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Tue, 22 Oct 2024 14:03:35 -0700
Subject: [PATCH 5/6] Code Update: Review Comments

---
 .../web/src/views/aest/institution/Programs.vue  | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index 7aac375687..f5a7e61446 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -104,11 +104,11 @@ export default defineComponent({
 
     const getProgramsSummaryList = async (
       institutionId: number,
-      rowsPerPage = DEFAULT_PAGE_LIMIT,
-      page = DEFAULT_DATATABLE_PAGE_NUMBER,
       programName: string,
       sortColumn?: ProgramSummaryFields,
       sortOrder?: DataTableSortByOrder,
+      rowsPerPage = DEFAULT_PAGE_LIMIT,
+      page = DEFAULT_DATATABLE_PAGE_NUMBER,
     ) => {
       try {
         loading.value = true;
@@ -131,9 +131,11 @@ export default defineComponent({
     onMounted(async () => {
       await getProgramsSummaryList(
         props.institutionId,
+        searchProgramName.value,
+        undefined,
+        undefined,
         DEFAULT_PAGE_LIMIT,
         DEFAULT_DATATABLE_PAGE_NUMBER,
-        searchProgramName.value,
       );
     });
     const goToViewProgramDetail = (programId: number, locationId: number) => {
@@ -152,19 +154,21 @@ export default defineComponent({
       const [sortByOptions] = event.sortBy;
       await getProgramsSummaryList(
         props.institutionId,
-        event.itemsPerPage,
-        event.page,
         searchProgramName.value,
         sortByOptions?.key as ProgramSummaryFields,
         sortByOptions?.order,
+        event.itemsPerPage,
+        event.page,
       );
     };
     const goToSearchProgramName = async () => {
       await getProgramsSummaryList(
         props.institutionId,
+        searchProgramName.value,
+        undefined,
+        undefined,
         currentPageLimit.value ?? DEFAULT_PAGE_LIMIT,
         currentPage.value ?? DEFAULT_DATATABLE_PAGE_NUMBER,
-        searchProgramName.value,
       );
     };
     return {

From 4a5d3e96f42ebc3e6ef705dbeb7ac82658e3565f Mon Sep 17 00:00:00 2001
From: Shashank Shekhar <sh16011993@gmail.com>
Date: Tue, 22 Oct 2024 14:38:26 -0700
Subject: [PATCH 6/6] Code Update: Review Comments

---
 .../web/src/views/aest/institution/Programs.vue  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/sources/packages/web/src/views/aest/institution/Programs.vue b/sources/packages/web/src/views/aest/institution/Programs.vue
index f5a7e61446..80afef947a 100644
--- a/sources/packages/web/src/views/aest/institution/Programs.vue
+++ b/sources/packages/web/src/views/aest/institution/Programs.vue
@@ -104,11 +104,11 @@ export default defineComponent({
 
     const getProgramsSummaryList = async (
       institutionId: number,
+      rowsPerPage: number,
+      page: number,
       programName: string,
       sortColumn?: ProgramSummaryFields,
       sortOrder?: DataTableSortByOrder,
-      rowsPerPage = DEFAULT_PAGE_LIMIT,
-      page = DEFAULT_DATATABLE_PAGE_NUMBER,
     ) => {
       try {
         loading.value = true;
@@ -131,11 +131,9 @@ export default defineComponent({
     onMounted(async () => {
       await getProgramsSummaryList(
         props.institutionId,
-        searchProgramName.value,
-        undefined,
-        undefined,
         DEFAULT_PAGE_LIMIT,
         DEFAULT_DATATABLE_PAGE_NUMBER,
+        searchProgramName.value,
       );
     });
     const goToViewProgramDetail = (programId: number, locationId: number) => {
@@ -154,21 +152,19 @@ export default defineComponent({
       const [sortByOptions] = event.sortBy;
       await getProgramsSummaryList(
         props.institutionId,
+        event.itemsPerPage,
+        event.page,
         searchProgramName.value,
         sortByOptions?.key as ProgramSummaryFields,
         sortByOptions?.order,
-        event.itemsPerPage,
-        event.page,
       );
     };
     const goToSearchProgramName = async () => {
       await getProgramsSummaryList(
         props.institutionId,
-        searchProgramName.value,
-        undefined,
-        undefined,
         currentPageLimit.value ?? DEFAULT_PAGE_LIMIT,
         currentPage.value ?? DEFAULT_DATATABLE_PAGE_NUMBER,
+        searchProgramName.value,
       );
     };
     return {