feat: filterable

Author: stadial

components/ClassesFilters.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="10" lg="8">
-      <v-card>
+      <v-card :loading="loading">
         <v-card-title> Filters </v-card-title>
         <v-card-actions>
           <v-container fluid>
@@ -11,6 +11,7 @@
                   v-model="selectedDepartment"
                   :items="Object.keys(departments)"
                   label="Department"
+                  @input="$emit('department:change', $event)"
                 ></v-select>
               </v-col>
 
@@ -29,7 +30,10 @@
               <v-col class="d-flex" cols="12" sm="4">
                 <v-select
                   :items="semsters"
+                  v-model="selectedSemsters"
                   label="Semsters"
+                  :clearable="true"
+                  :deletable-chips="true"
                   :disabled="!selectedMajor"
                   @input="$emit('semsters:change', $event)"
                   chips
@@ -43,16 +47,19 @@
     </v-col>
   </v-row>
 </template>
-<script lang="ts">
+<script>
 export default {
   props: {
     departments: { type: Object },
+    loading: { type: Boolean, default: false },
+    selectedSemstersProp: { type: Array },
   },
-  emits: ['major:change', 'semsters:change'],
+  emits: ['major:change', 'semsters:change', 'department:change'],
   data() {
     return {
       selectedDepartment: null,
       selectedMajor: null,
+      selectedSemsters: this.selectedSemstersProp,
     }
   },
   computed: {

components/ClassesList.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="10" lg="8">
-      <v-card>
+      <v-card :disabled="loading">
         <v-card-title>
           <v-text-field
             v-model="search"

components/snackBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-snackbar v-model="snackbar" :timeout="timeout">
+    {{ text }}
+
+    <template v-slot:action="{ attrs }">
+      <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  props: {
+    active: { type: Boolean, default: false },
+    timeout: { type: Number, default: 3000 },
+    text: { type: String, required: true },
+  },
+  data() {
+    return {
+      snackbar: false,
+    }
+  },
+  watch: {
+    active(val, oldVal) {
+      this.snackbar = val
+    },
+  },
+}
+</script>

pages/index.vue

@@ -2,12 +2,21 @@
   <div>
     <!-- <ClassesCalendar /> -->
     <!-- <ClassesSelectedStats /> -->
-    <ClassesFilters :departments="departments" />
-    <ClassesList :classes="classes" />
+    <ClassesFilters
+      @major:change="majorChange($event)"
+      @department:change="departmentChange($event)"
+      @semsters:change="selectedSemsters = $event"
+      :selectedSemstersProp="selectedSemsters"
+      :departments="departments"
+    />
+    <ClassesList :loading="loadingClasses" :classes="filteredClasses" />
+    <snackBar :text="snackbarText" :active="snackbarActive" />
   </div>
 </template>
 
 <script>
+const axios = require('axios')
+
 export default {
   data() {
     return {
@@ -38,39 +47,47 @@ export default {
           { name: 'Networking', abbrv: 'Net', sems: [...Array(9).keys()] },
         ],
       },
-      classes: [
-        {
-          code: '00000',
-          name: 'Course Name',
-          crn: '01123',
-          section: '03',
-          days: 'MWT',
-          time: '09:30-12:00',
-          instructor: 'Ins Name',
-          semster_index: 1,
-        },
-        {
-          code: '00010',
-          name: 'Course Name',
-          crn: '01121',
-          section: '03',
-          days: 'MWT',
-          time: '09:30-12:00',
-          instructor: 'Ins Name',
-          semster_index: 1,
-        },
-        {
-          code: '00001',
-          name: 'Course 2',
-          crn: '01122',
-          section: '01',
-          days: 'MWT',
-          time: '09:30-12:00',
-          instructor: 'Ins Name2',
-          semster_index: 2,
-        },
-      ],
+      rawClasses: [],
+      selectedDepartment: null,
+      selectedMajor: null,
+      selectedSemsters: [0],
+      loadingClasses: false,
+      snackbarText: '',
+      snackbarActive: false,
     }
   },
+  computed: {
+    filteredClasses() {
+      return this.rawClasses.filter((c) =>
+        this.selectedSemsters.includes(c.semster_index)
+      )
+    },
+  },
+  methods: {
+    majorChange(e) {
+      this.selectedMajor = e.abbrv
+      this.snackbarActive = false
+      this.getCP()
+    },
+    departmentChange(e) {
+      this.selectedDepartment = e
+    },
+    // gets Classs for Plan/Major
+    async getCP() {
+      let url = `/CP/${this.selectedDepartment}/${this.selectedMajor}.json`
+      this.loadingClasses = true
+      try {
+        const response = await axios.get(url)
+        this.rawClasses = response.data
+        this.loadingClasses = false
+      } catch (error) {
+        this.snackbarActive = true
+        this.snackbarText = `${this.selectedDepartment}, ${this.selectedMajor} Not yet supported!`
+        this.loadingClasses = false
+        this.rawClasses = []
+        console.log(error) //TODO: handle error
+      }
+    },
+  },
 }
 </script>