From fd099ee41c14a0516749c2dfbf509cdfe1ffee36 Mon Sep 17 00:00:00 2001
From: kfulain <89740818+stadial@users.noreply.github.com>
Date: Sun, 23 Oct 2022 18:27:17 +0300
Subject: [PATCH] feat: add filter by department

---
 components/ClassesFilters.vue | 22 ++++++++++++++++++++--
 pages/index.vue               | 15 ++++++++++++++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/components/ClassesFilters.vue b/components/ClassesFilters.vue
index ceb9cd3..0b6f876 100644
--- a/components/ClassesFilters.vue
+++ b/components/ClassesFilters.vue
@@ -27,6 +27,22 @@
                   @input="$emit('college:change', $event)"
                 ></v-select>
               </v-col>
+
+              <v-col class="d-flex" cols="12" sm="4">
+                <v-select
+                  v-model="selectedDepartments"
+                  :items="allDepartments"
+                  item-text="name"
+                  item-value="abbrv"
+                  label="Departments"
+                  return-object
+                  :disabled="!selectedCollege"
+                  @input="$emit('department:change', $event)"
+				  chips
+				  multiple
+                ></v-select>
+              </v-col>
+
             </v-row>
           </v-container>
         </v-card-actions>
@@ -40,12 +56,14 @@ export default {
     colleges : { type: Array, default: () => [] },
     loading: { type: Boolean, default: false },
 	genders: {type: Array, default: () => []},
+	allDepartments: {type: Array, default: () => []},
   },
-  emits: ['major:change', 'semsters:change', 'department:change'],
+  emits: ['gender:change', 'college:change', 'department:change'],
   data() {
     return {
 	  selectedGender: null, /* "male" or "female" */
-      selectedCollege: null,
+	  selectedCollege: null,
+	  selectedDepartments: [],
     }
   },
   computed: {},
diff --git a/pages/index.vue b/pages/index.vue
index 095cab5..64d724e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,8 +9,10 @@
     <ClassesFilters
       @college:change="collegeChange($event)"
       @gender:change="genderChange($event)"
+	  @department:change="selectedDepartments = $event"
 	  :colleges="colleges"
 	  :genders="genders"
+	  :allDepartments="allDepartments"
     />
     <ClassesList
       :loading="loadingClasses"
@@ -58,12 +60,23 @@ export default {
       loadingClasses: false,
       snackbarText: '',
       snackbarActive: false,
+	  selectedDepartments: [],
     }
   },
   computed: {
+	  allDepartments(){
+		  // with duplicates
+		  let departments = this.rawClasses.map((a)=> a.department);
+		  // without dups
+		  let unique = [...new Set(departments)];
+		  return unique;
+	  },
     filteredClasses() {
       // it no longer filters, this naming is due to historic reasons
-      let filtered = this.rawClasses.map((clas) =>
+		let filtered = this.rawClasses.filter(clas =>
+			this.selectedDepartments.includes(clas.department)
+		)
+        filtered = filtered.map((clas) =>
         findConflicts(clas, this.selectedClasses)
       )
       filtered = filtered.map(buttonOptions)