From abbdaa35275ac0c04a4b4e83f135e95974f4e301 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 10:33:24 -0800
Subject: [PATCH 1/6] Created DIsplayModal and added to Optional Program Rules
 view

---
 frontend/src/components/DisplayModal.vue      | 51 +++++++++++++++
 .../GraduationOptionalProgramRules.vue        | 65 ++++++++++---------
 frontend/src/services/CourseService.js        | 53 +++++++++------
 3 files changed, 118 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/components/DisplayModal.vue

diff --git a/frontend/src/components/DisplayModal.vue b/frontend/src/components/DisplayModal.vue
new file mode 100644
index 00000000..47c2297d
--- /dev/null
+++ b/frontend/src/components/DisplayModal.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="display-modal" v-if="showModal">
+    <b-card :header="header" class="modal-body">
+      <slot name="body"> Hello World </slot>
+      <template #footer>
+        <slot name="footer"></slot>
+        <!-- <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="show = false"
+          >Close</b-btn
+        > -->
+      </template>
+    </b-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DisplayModal",
+  props: ["header", "showModal"],
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+.card-header {
+  font-weight: 700;
+}
+
+.modal-body {
+  height: fit-content;
+  width: fit-content;
+  margin: 5rem auto;
+}
+
+.display-modal {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+</style>
diff --git a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
index 11a278fa..b307db9e 100644
--- a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
@@ -1,5 +1,33 @@
 <template>
   <div id="optional-graduation-program-rules">
+    <DisplayModal
+      :header="ruleMatchType + ' Matching Rule # ' + ruleNumMatch"
+      :showModal="showModal"
+    >
+      <template v-slot:body>
+        <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
+        <div v-else-if="!ruleMatchList.length">Not applicable</div>
+        <DisplayTable
+          v-else
+          v-bind:items="ruleMatchList"
+          title="OptionalProgramRuleMatch"
+          v-bind:fields="ruleMatchFields"
+          id="optionalProgramRuleMatch"
+          :showFilter="false"
+          :pagination="true"
+        >
+        </DisplayTable>
+      </template>
+      <template v-slot:footer>
+        <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="showModal = false"
+          >Close</b-btn
+        >
+      </template>
+    </DisplayModal>
     <DisplayTable
       v-bind:items="optionalProgramRules"
       v-bind:fields="optionalOptionalProgramRulesFields"
@@ -8,37 +36,6 @@
       showFilter="true"
     >
       <template #cell(ruleCode)="row">
-        <b-modal
-          :id="'modal-' + row.item.optionalProgramRequirementID"
-          :title="
-            (row.item.optionalProgramRequirementCode.requirementCategory == 'C'
-              ? 'Courses'
-              : 'Assessments') +
-            ' that match rule #' +
-            row.item.optionalProgramRequirementCode.optProReqCode
-          "
-          size="xl"
-        >
-          <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
-          <div v-else-if="!ruleMatchList.length">Not applicable</div>
-          <div v-else>
-            <DisplayTable
-              v-bind:items="ruleMatchList"
-              title="OptionalProgramRuleMatch"
-              v-bind:fields="ruleMatchFields"
-              id="optionalProgramRuleMatch"
-              :showFilter="false"
-              :pagination="false"
-            >
-            </DisplayTable>
-          </div>
-          <template #modal-footer="{ cancel }">
-            <!-- Emulate built in modal footer ok and cancel button actions -->
-            <b-button size="sm" variant="outline-secondary" v-on:click="cancel">
-              Close
-            </b-button>
-          </template>
-        </b-modal>
         <b-btn
           variant="link"
           size="xs"
@@ -60,6 +57,7 @@
 <script>
 import ProgramManagementService from "@/services/ProgramManagementService.js";
 import DisplayTable from "../DisplayTable.vue";
+import DisplayModal from "../DisplayModal.vue";
 import CourseService from "@/services/CourseService.js";
 import AssessmentService from "@/services/AssessmentService.js";
 import { mapGetters } from "vuex";
@@ -69,6 +67,7 @@ export default {
   computed: { ...mapGetters({}) },
   components: {
     DisplayTable: DisplayTable,
+    DisplayModal: DisplayModal,
   },
   data: function () {
     return {
@@ -212,7 +211,9 @@ export default {
       ruleMatchList: [],
       ruleMatchFields: [],
       ruleMatchType: "",
+      ruleNumMatch: "",
       loadingRuleMatch: false,
+      showModal: false,
     };
   },
   created() {
@@ -227,6 +228,8 @@ export default {
   },
   methods: {
     ruleNumberClicked(categoryCode, ruleNum) {
+      this.showModal = true;
+      this.ruleNumMatch = ruleNum;
       switch (categoryCode) {
         case "A":
           this.ruleMatchFields = this.assessmentFields;
diff --git a/frontend/src/services/CourseService.js b/frontend/src/services/CourseService.js
index e007f374..497a03a6 100644
--- a/frontend/src/services/CourseService.js
+++ b/frontend/src/services/CourseService.js
@@ -1,34 +1,47 @@
-import ApiService from '../common/apiService';
+import ApiService from "../common/apiService";
 
 export default {
   getCoursesByAdvanceSearch(params) {
-    return ApiService.apiAxios.get('/api/v1/course/coursesearch?' + params);
+    return ApiService.apiAxios.get("/api/v1/course/coursesearch?" + params);
   },
-  getCourses(courseCode){
-    return ApiService.apiAxios.get('/api/v1/course/' + courseCode);
+  getCourses(courseCode) {
+    return ApiService.apiAxios.get("/api/v1/course/" + courseCode);
   },
-  getAllCourses(){
-    return ApiService.apiAxios.get('/api/v1/course/');
+  getAllCourses() {
+    return ApiService.apiAxios.get("/api/v1/course/");
   },
-  getAllCourseRequirements(){
-    return ApiService.apiAxios.get('/api/v1/course/requirement');
+  getAllCourseRequirements() {
+    return ApiService.apiAxios.get("/api/v1/course/requirement");
   },
-  getCourseRestrictions(){
-    return ApiService.apiAxios.get('/api/v1/course/restriction');
+  getCourseRestrictions() {
+    return ApiService.apiAxios.get("/api/v1/course/restriction");
   },
-  getCourseRestriction(mainCourseLevel,mainCourseCode){
-    return ApiService.apiAxios.get('/api/v1/course/courserestrictionsearch?mainCourseLevel=' + mainCourseLevel + '&mainCourseCode=' + mainCourseCode);
+  getCourseRestriction(mainCourseLevel, mainCourseCode) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/courserestrictionsearch?mainCourseLevel=" +
+        mainCourseLevel +
+        "&mainCourseCode=" +
+        mainCourseCode
+    );
   },
-  getRuleCourseRequirements(rule){
-    return ApiService.apiAxios.get('/api/v1/course/requirement/rule?rule=' + rule);
+  getRuleCourseRequirements(rule) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/requirement/rule?rule=" + rule + "&pageNo=0&pageSize=600"
+    );
   },
-  getCourseRequirements(params){
-    return ApiService.apiAxios.get('/api/v1/course/courserequirementsearch?' + params);
+  getCourseRequirements(params) {
+    return ApiService.apiAxios.get(
+      "/api/v1/course/courserequirementsearch?" + params
+    );
   },
   getStudentCourseAchievements(pen) {
-    return ApiService.apiAxios.get('/api/v1/course/studentcourse/pen/' + pen + '?sortForUI=true');
+    return ApiService.apiAxios.get(
+      "/api/v1/course/studentcourse/pen/" + pen + "?sortForUI=true"
+    );
   },
   getStudentExamDetails(pen) {
-    return ApiService.apiAxios.get('/api/v1/course/studentexam/pen/' + pen + '?sortForUI=true');
-  }
-}
+    return ApiService.apiAxios.get(
+      "/api/v1/course/studentexam/pen/" + pen + "?sortForUI=true"
+    );
+  },
+};

From 646dfe255b2018b7f5bdb152045ee00a20d80b4d Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 10:54:21 -0800
Subject: [PATCH 2/6] Added modal to program rules table

---
 .../Programs/GraduationProgramRules.vue       | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Programs/GraduationProgramRules.vue b/frontend/src/components/Programs/GraduationProgramRules.vue
index 5b0bd58c..09b2461f 100644
--- a/frontend/src/components/Programs/GraduationProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationProgramRules.vue
@@ -1,5 +1,34 @@
 <template>
   <div id="graduation-program-rules">
+    <DisplayModal
+      :header="ruleMatchType + ' Matching Rule # ' + ruleNumMatch"
+      :showModal="showModal"
+    >
+      <template v-slot:body>
+        <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
+        <div v-else-if="!ruleMatchList.length">Not applicable</div>
+        <DisplayTable
+          v-else
+          v-bind:items="ruleMatchList"
+          title="GradProgramRuleMatch"
+          v-bind:fields="ruleMatchFields"
+          id="gradProgramRuleMatch"
+          :showFilter="false"
+          :pagination="false"
+        >
+        </DisplayTable>
+      </template>
+
+      <template v-slot:footer>
+        <b-btn
+          variant="danger"
+          size="xs"
+          class="float-right"
+          @click="showModal = false"
+          >Close</b-btn
+        >
+      </template>
+    </DisplayModal>
     <div v-if="!selectedProgramCode">
       <DisplayTable
         v-bind:items="graduationProgramRules"
@@ -12,7 +41,7 @@
         pagination="true"
       >
         <template #cell(ruleCode)="row">
-          <b-modal
+          <!-- <b-modal
             :id="
               'modal-' +
               row.item.graduationProgramCode +
@@ -40,7 +69,6 @@
               </DisplayTable>
             </div>
             <template #modal-footer="{ cancel }">
-              <!-- Emulate built in modal footer ok and cancel button actions -->
               <b-button
                 size="sm"
                 variant="outline-secondary"
@@ -49,7 +77,7 @@
                 Close
               </b-button>
             </template>
-          </b-modal>
+          </b-modal> -->
           <b-btn
             variant="link"
             size="xs"
@@ -89,6 +117,7 @@
 <script>
 import ProgramManagementService from "@/services/ProgramManagementService.js";
 import DisplayTable from "../DisplayTable.vue";
+import DisplayModal from "../DisplayModal.vue";
 import CourseService from "@/services/CourseService.js";
 import AssessmentService from "@/services/AssessmentService.js";
 import { mapGetters } from "vuex";
@@ -96,6 +125,7 @@ export default {
   name: "GraduationProgramRules",
   components: {
     DisplayTable: DisplayTable,
+    DisplayModal: DisplayModal,
   },
   props: {},
 
@@ -256,9 +286,11 @@ export default {
       ruleMatchList: [],
       ruleMatchFields: [],
       ruleMatchType: "",
+      ruleNumMatch: "",
       loadingRuleMatch: false,
       selectedProgramCode: "",
       selectedProgramId: "",
+      showModal: false,
     };
   },
   created() {
@@ -273,6 +305,9 @@ export default {
   },
   methods: {
     ruleNumberClicked(categoryCode, ruleNum) {
+      this.showModal = true;
+      this.ruleNumMatch = ruleNum;
+
       switch (categoryCode) {
         case "A":
           this.ruleMatchFields = this.assessmentFields;

From 28c8dfe6ec1d033a6a884dbc14715e22f185571d Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 10:54:40 -0800
Subject: [PATCH 3/6] override grey background in header and footer

---
 frontend/src/components/DisplayModal.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/DisplayModal.vue b/frontend/src/components/DisplayModal.vue
index 47c2297d..cdba8a5e 100644
--- a/frontend/src/components/DisplayModal.vue
+++ b/frontend/src/components/DisplayModal.vue
@@ -37,6 +37,12 @@ export default {
   margin: 5rem auto;
 }
 
+.modal-body .card-footer,
+.modal-body .card-header {
+  background-color: rgb(255, 255, 255);
+  background-color: rgba(255, 255, 255, 0);
+}
+
 .display-modal {
   position: fixed;
   z-index: 1000;

From 93829405e970d42d5c1d4f135d007299a4704067 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 11:29:40 -0800
Subject: [PATCH 4/6] fixed card heading bold being applied everywhere

---
 frontend/src/components/DisplayModal.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/DisplayModal.vue b/frontend/src/components/DisplayModal.vue
index cdba8a5e..c1acc39f 100644
--- a/frontend/src/components/DisplayModal.vue
+++ b/frontend/src/components/DisplayModal.vue
@@ -27,10 +27,6 @@ export default {
 </script>
 
 <style>
-.card-header {
-  font-weight: 700;
-}
-
 .modal-body {
   height: fit-content;
   width: fit-content;
@@ -55,3 +51,9 @@ export default {
   background-color: rgba(0, 0, 0, 0.4);
 }
 </style>
+
+<style scoped>
+:deep(.card-header) {
+  font-weight: 700;
+}
+</style>

From b2e28b33c0087d2a9a24c7f57e358638cd970743 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 12:09:55 -0800
Subject: [PATCH 5/6] added sort on course/assessment code by default

---
 .../GraduationOptionalProgramRules.vue        |  3 ++
 .../Programs/GraduationProgramRules.vue       | 42 ++-----------------
 2 files changed, 7 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
index b307db9e..b2bb47be 100644
--- a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
@@ -15,6 +15,9 @@
           id="optionalProgramRuleMatch"
           :showFilter="false"
           :pagination="true"
+          :sort-by="
+            (ruleMatchType = 'Courses' ? 'courseCode' : 'assessmentCode')
+          "
         >
         </DisplayTable>
       </template>
diff --git a/frontend/src/components/Programs/GraduationProgramRules.vue b/frontend/src/components/Programs/GraduationProgramRules.vue
index 09b2461f..ef496048 100644
--- a/frontend/src/components/Programs/GraduationProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationProgramRules.vue
@@ -14,7 +14,10 @@
           v-bind:fields="ruleMatchFields"
           id="gradProgramRuleMatch"
           :showFilter="false"
-          :pagination="false"
+          :pagination="true"
+          :sort-by="
+            (ruleMatchType = 'Courses' ? 'courseCode' : 'assessmentCode')
+          "
         >
         </DisplayTable>
       </template>
@@ -41,43 +44,6 @@
         pagination="true"
       >
         <template #cell(ruleCode)="row">
-          <!-- <b-modal
-            :id="
-              'modal-' +
-              row.item.graduationProgramCode +
-              row.item.programRequirementCode.proReqCode
-            "
-            :title="
-              'Rule # ' +
-              row.item.programRequirementCode.proReqCode +
-              ' - ' +
-              ruleMatchType
-            "
-            size="xl"
-          >
-            <b-spinner v-if="loadingRuleMatch" class="px-1 my-2"></b-spinner>
-            <div v-else-if="!ruleMatchList.length">Not applicable</div>
-            <div v-else>
-              <DisplayTable
-                v-bind:items="ruleMatchList"
-                title="GradProgramRuleMatch"
-                v-bind:fields="ruleMatchFields"
-                id="gradProgramRuleMatch"
-                :showFilter="false"
-                :pagination="false"
-              >
-              </DisplayTable>
-            </div>
-            <template #modal-footer="{ cancel }">
-              <b-button
-                size="sm"
-                variant="outline-secondary"
-                v-on:click="cancel"
-              >
-                Close
-              </b-button>
-            </template>
-          </b-modal> -->
           <b-btn
             variant="link"
             size="xs"

From c1cc5ca54ed63750a1aa203d309acc0cbda44b03 Mon Sep 17 00:00:00 2001
From: suzalflueck <samflueck95@gmail.com>
Date: Thu, 1 Feb 2024 12:19:26 -0800
Subject: [PATCH 6/6] fix oopsie

---
 .../src/components/Programs/GraduationOptionalProgramRules.vue  | 2 +-
 frontend/src/components/Programs/GraduationProgramRules.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
index b2bb47be..d6c14ecd 100644
--- a/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationOptionalProgramRules.vue
@@ -16,7 +16,7 @@
           :showFilter="false"
           :pagination="true"
           :sort-by="
-            (ruleMatchType = 'Courses' ? 'courseCode' : 'assessmentCode')
+            ruleMatchType == 'Courses' ? 'courseCode' : 'assessmentCode'
           "
         >
         </DisplayTable>
diff --git a/frontend/src/components/Programs/GraduationProgramRules.vue b/frontend/src/components/Programs/GraduationProgramRules.vue
index ef496048..821f031d 100644
--- a/frontend/src/components/Programs/GraduationProgramRules.vue
+++ b/frontend/src/components/Programs/GraduationProgramRules.vue
@@ -16,7 +16,7 @@
           :showFilter="false"
           :pagination="true"
           :sort-by="
-            (ruleMatchType = 'Courses' ? 'courseCode' : 'assessmentCode')
+            ruleMatchType == 'Courses' ? 'courseCode' : 'assessmentCode'
           "
         >
         </DisplayTable>