From dec3b3285ad388101c5f4dad9f5a759f7b550fc7 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Tue, 28 Nov 2023 17:41:25 -0500
Subject: [PATCH 1/7] Implemented simple dropdown feature to title

---
 src/web/src/pages/CourseExplorer.vue | 33 ++++++++++++++--------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index 9f37af142..6908c68fd 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -3,32 +3,33 @@
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
     <div v-if="!isLoadingCourses && courses.length > 0" class="mx-auto w-75">
       <b-row>
-        <!-- 2 arrays in schoolDepartmentObjects, so 2 columns -->
         <b-col
           v-for="(deptCol, index) in schoolDepartmentObjects"
           :key="`deptCol-${index}`"
-          md="6"
+          cols="12"
         >
           <b-row
             v-for="deptObj in deptCol"
             :key="deptObj.school"
-            class="departmentBox border m-2 mb-4"
+            class="departmentBox m-2 mb-4"
           >
-            <b-col>
-              <!-- Department Title  -->
-              <b-row class="school-name">
-                <h3 class="m-1 ml-2">
+            <b-col cols="12">
+              <!-- Department Title as a button that controls the collapse -->
+              <b-button v-b-toggle="'collapse-' + deptObj.school" class="m-1 ml-2 w-100">
+                <h3>
                   {{ deptObj.school }}
                 </h3>
-              </b-row>
-              <!-- Subject Title  -->
-              <b-row>
-                <DepartmentList
-                  :majors="deptObj.departments"
-                  :deptClassDict="deptClassDict"
-                  v-on:showCourseInfo="showCourseInfo($event)"
-                ></DepartmentList>
-              </b-row>
+              </b-button>
+              <!-- Subject Title inside a b-collapse -->
+              <b-collapse :id="'collapse-' + deptObj.school">
+                <b-row>
+                  <DepartmentList
+                    :majors="deptObj.departments"
+                    :deptClassDict="deptClassDict"
+                    v-on:showCourseInfo="showCourseInfo($event)"
+                  ></DepartmentList>
+                </b-row>
+              </b-collapse>
             </b-col>
           </b-row>
         </b-col>

From 41b7cdb3c8628bded3f03d1f42d81b7dffaf9050 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Wed, 29 Nov 2023 15:38:34 -0500
Subject: [PATCH 2/7] Refactor department title dropdown button styling

---
 src/web/src/pages/CourseExplorer.vue | 46 ++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index 6908c68fd..b698e523f 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -14,12 +14,17 @@
             class="departmentBox m-2 mb-4"
           >
             <b-col cols="12">
-              <!-- Department Title as a button that controls the collapse -->
-              <b-button v-b-toggle="'collapse-' + deptObj.school" class="m-1 ml-2 w-100">
+            <!-- Department Title as a ~button that controls the collapse -->
+              <b-button
+                v-b-toggle="'collapse-' + deptObj.school"
+                class="button"
+                variant="outline-secondary"
+              >
                 <h3>
                   {{ deptObj.school }}
                 </h3>
-              </b-button>
+              </b-button>          
+              <hr />
               <!-- Subject Title inside a b-collapse -->
               <b-collapse :id="'collapse-' + deptObj.school">
                 <b-row>
@@ -158,4 +163,39 @@ export default {
   background: rgba(108, 90, 90, 0.15);
   border-bottom: rgba(108, 90, 90, 0.1), solid, 1px;
 }
+
+.button {
+  width: 100%;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 500;
+  color: #3395ff !important;
+  text-decoration: none;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.button:hover {
+  background-color: rgba(108, 90, 90, 0.15);
+}
+
+.button:focus {
+  background-color: transparent;
+  box-shadow: none !important;
+  outline: none !important;
+
+}
+
+.button:active {
+  background-color: transparent !important;
+  color: #3395ff;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 </style>

From 8958ee3b02c615bbdcae28d7ac26b31563a40abb Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Wed, 29 Nov 2023 16:23:49 -0500
Subject: [PATCH 3/7] Update CourseExplorer.vue with chevron animation

---
 src/web/src/pages/CourseExplorer.vue | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index b698e523f..c84922fb7 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -20,9 +20,10 @@
                 class="button"
                 variant="outline-secondary"
               >
-                <h3>
+                <h4>
                   {{ deptObj.school }}
-                </h3>
+                  <span class="chevron"></span>
+                </h4>
               </b-button>          
               <hr />
               <!-- Subject Title inside a b-collapse -->
@@ -198,4 +199,21 @@ export default {
   outline: none !important;
 }
 
+.chevron {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: auto;
+  border-style: solid;
+  border-width: 0 5px 10px 5px;
+  border-color: transparent transparent #3395ff transparent;
+  transition: transform 0.3s;
+}
+
+/* Rotate the chevron when the button is active */
+.button[aria-expanded="true"] .chevron {
+  transform: rotate(180deg);
+  margin-left: auto;
+}
+
 </style>

From 4b890af37e3c5afa848ba41325b157b212f497d4 Mon Sep 17 00:00:00 2001
From: codefactor-io <support@codefactor.io>
Date: Wed, 29 Nov 2023 21:33:15 +0000
Subject: [PATCH 4/7] [CodeFactor] Apply fixes to commit 8958ee3

---
 src/web/src/pages/CourseExplorer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index c84922fb7..5a1eb4283 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -205,8 +205,8 @@ export default {
   height: 0;
   margin-left: auto;
   border-style: solid;
-  border-width: 0 5px 10px 5px;
-  border-color: transparent transparent #3395ff transparent;
+  border-width: 0 5px 10px;
+  border-color: transparent transparent #3395ff;
   transition: transform 0.3s;
 }
 

From 21d3b7278f61d2f304c3f5b0bbb8fc3772e45d50 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Wed, 29 Nov 2023 21:51:49 -0500
Subject: [PATCH 5/7] Fix collapse button and clean department ID

---
 src/web/src/pages/CourseExplorer.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index 5a1eb4283..017cf4d6c 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -14,10 +14,10 @@
             class="departmentBox m-2 mb-4"
           >
             <b-col cols="12">
-            <!-- Department Title as a ~button that controls the collapse -->
+              <!-- Department Title as a ~button that controls the collapse -->
               <b-button
-                v-b-toggle="'collapse-' + deptObj.school"
-                class="button"
+              v-b-toggle="'collapse-' + cleanId(deptObj.school)"
+              class="button"
                 variant="outline-secondary"
               >
                 <h4>
@@ -27,7 +27,7 @@
               </b-button>          
               <hr />
               <!-- Subject Title inside a b-collapse -->
-              <b-collapse :id="'collapse-' + deptObj.school">
+              <b-collapse visible :id="'collapse-' + cleanId(deptObj.school)">
                 <b-row>
                   <DepartmentList
                     :majors="deptObj.departments"
@@ -79,6 +79,9 @@ export default {
   },
   methods: {
     generateRequirementsText,
+    cleanId(str) {
+      return str.replace(/\s+/g, '-'); 
+    },
   },
   computed: {
     ...mapState(["isLoadingCourses"]),

From c02dbacd7f68ab67bf8728f68f0b46865c6a5955 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Wed, 29 Nov 2023 22:20:28 -0500
Subject: [PATCH 6/7] Refactor dropdowns into two columns

---
 src/web/src/pages/CourseExplorer.vue | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index 017cf4d6c..2d8fceafe 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -3,28 +3,16 @@
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
     <div v-if="!isLoadingCourses && courses.length > 0" class="mx-auto w-75">
       <b-row>
-        <b-col
-          v-for="(deptCol, index) in schoolDepartmentObjects"
-          :key="`deptCol-${index}`"
-          cols="12"
-        >
-          <b-row
-            v-for="deptObj in deptCol"
-            :key="deptObj.school"
-            class="departmentBox m-2 mb-4"
-          >
+        <b-col v-for="(deptCol, index) in schoolDepartmentObjects" :key="`deptCol-${index}`" cols="12" class="col-md-6">
+          <b-row v-for="deptObj in deptCol" :key="deptObj.school" class="departmentBox m-2 mb-4">
             <b-col cols="12">
               <!-- Department Title as a ~button that controls the collapse -->
-              <b-button
-              v-b-toggle="'collapse-' + cleanId(deptObj.school)"
-              class="button"
-                variant="outline-secondary"
-              >
+              <b-button v-b-toggle="'collapse-' + cleanId(deptObj.school)" class="button" variant="outline-secondary">
                 <h4>
                   {{ deptObj.school }}
                   <span class="chevron"></span>
                 </h4>
-              </b-button>          
+              </b-button>
               <hr />
               <!-- Subject Title inside a b-collapse -->
               <b-collapse visible :id="'collapse-' + cleanId(deptObj.school)">
@@ -41,13 +29,7 @@
         </b-col>
       </b-row>
     </div>
-    <CenterSpinner
-      v-else
-      :height="80"
-      :fontSize="1.3"
-      loadingMessage="Departments"
-      :topSpacing="30"
-    />
+    <CenterSpinner v-else :height="80" :fontSize="1.3" loadingMessage="Departments" :topSpacing="30" />
   </b-container>
 </template>
 

From ebd94e655770db7f8b964edef9e8da2e19e057f7 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 19:00:16 -0500
Subject: [PATCH 7/7] Add collapse all button to CourseExplorer.vue

---
 src/web/src/pages/CourseExplorer.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/web/src/pages/CourseExplorer.vue b/src/web/src/pages/CourseExplorer.vue
index 2d8fceafe..a44f4e428 100644
--- a/src/web/src/pages/CourseExplorer.vue
+++ b/src/web/src/pages/CourseExplorer.vue
@@ -1,6 +1,11 @@
 <template>
   <b-container fluid>
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
+    <div style="float: left;" class="w-10">
+      <b-button @click="toggleCollapse" variant="primary" class="open-close-button">
+        {{ collapseAll ? 'Close All' : 'Open All' }}
+      </b-button>
+    </div>
     <div v-if="!isLoadingCourses && courses.length > 0" class="mx-auto w-75">
       <b-row>
         <b-col v-for="(deptCol, index) in schoolDepartmentObjects" :key="`deptCol-${index}`" cols="12" class="col-md-6">
@@ -15,7 +20,7 @@
               </b-button>
               <hr />
               <!-- Subject Title inside a b-collapse -->
-              <b-collapse visible :id="'collapse-' + cleanId(deptObj.school)">
+              <b-collapse :visible="departmentCollapseStates['collapse-' + cleanId(deptObj.school)]" :id="'collapse-' + cleanId(deptObj.school)">
                 <b-row>
                   <DepartmentList
                     :majors="deptObj.departments"
@@ -48,6 +53,7 @@ export default {
   },
   data() {
     return {
+      collapseAll: false,
       breadcrumbNav: [
         {
           text: "YACS",
@@ -64,6 +70,9 @@ export default {
     cleanId(str) {
       return str.replace(/\s+/g, '-'); 
     },
+    toggleCollapse() {
+      this.collapseAll = !this.collapseAll;
+    },
   },
   computed: {
     ...mapState(["isLoadingCourses"]),
@@ -107,6 +116,16 @@ export default {
       }
       return deptClassDict;
     },
+    departmentCollapseStates() {
+      const collapseStates = {};
+      this.schoolDepartmentObjects.forEach((deptCol) => {
+        deptCol.forEach((deptObj) => {
+          const collapseId = 'collapse-' + this.cleanId(deptObj.school);
+          collapseStates[collapseId] = this.collapseAll;
+        });
+      });
+      return collapseStates;
+    },
   },
   metaInfo() {
     return {
@@ -201,4 +220,9 @@ export default {
   margin-left: auto;
 }
 
+.open-close-button {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
 </style>