feat: classfilters

Author: stadial

components/ClassesFilters.vue

@@ -1,15 +1,70 @@
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="10" lg="8">
-      <v-card class="py-4 d-flex flex-center">
-        <v-select />
-        <v-select />
-        <v-select />
-        <v-select />
-        <v-select />
+      <v-card>
+        <v-card-title> Filters </v-card-title>
+        <v-card-actions>
+          <v-container fluid>
+            <v-row align="center">
+              <v-col class="d-flex" cols="12" sm="4">
+                <v-select
+                  v-model="selectedDepartment"
+                  :items="Object.keys(departments)"
+                  label="Department"
+                ></v-select>
+              </v-col>
+
+              <v-col class="d-flex" cols="12" sm="4">
+                <v-select
+                  v-model="selectedMajor"
+                  :items="departments[selectedDepartment]"
+                  item-text="name"
+                  item-value="abbrv"
+                  label="Major"
+                  return-object
+                  :disabled="!selectedDepartment"
+                  @input="$emit('major:change', $event)"
+                ></v-select>
+              </v-col>
+              <v-col class="d-flex" cols="12" sm="4">
+                <v-select
+                  :items="semsters"
+                  label="Semsters"
+                  :disabled="!selectedMajor"
+                  @input="$emit('semsters:change', $event)"
+                  chips
+                  multiple
+                ></v-select>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-actions>
       </v-card>
     </v-col>
   </v-row>
 </template>
-
-<script lang="ts"></script>
+<script lang="ts">
+export default {
+  props: {
+    departments: { type: Object },
+  },
+  emits: ['major:change', 'semsters:change'],
+  data() {
+    return {
+      selectedDepartment: null,
+      selectedMajor: null,
+    }
+  },
+  computed: {
+    semsters() {
+      if (this.selectedMajor) {
+        let sems = this.selectedMajor.sems
+        return sems
+      } else {
+        return []
+      }
+    },
+  },
+  methods: {},
+}
+</script>

pages/index.vue

@@ -1,12 +1,76 @@
 <template>
   <div>
-    <ClassesCalendar />
-    <ClassesSelectedStats />
-    <ClassesFilters />
-    <ClassesList />
+    <!-- <ClassesCalendar /> -->
+    <!-- <ClassesSelectedStats /> -->
+    <ClassesFilters :departments="departments" />
+    <ClassesList :classes="classes" />
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+  data() {
+    return {
+      departments: {
+        Engineering: [
+          {
+            name: 'Electrical Engineering',
+            abbrv: 'EE',
+            sems: [...Array(9).keys()],
+          },
+          {
+            name: 'Mechanical Engineering',
+            abbrv: 'ME',
+            sems: [...Array(9).keys()],
+          },
+          {
+            name: 'Chemical   Engineering',
+            abbrv: 'ChE',
+            sems: [...Array(9).keys()],
+          },
+          {
+            name: 'Civil      Engineering',
+            abbrv: 'CE',
+            sems: [...Array(9).keys()],
+          },
+        ],
+        'Computer Science': [
+          { 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,
+        },
+      ],
+    }
+  },
+}
 </script>