feat: class list

Author: stadial

components/ClassesList.vue

@@ -1,84 +1,52 @@
 <template>
   <v-row justify="center" align="center">
     <v-col cols="12" sm="12" md="10" lg="8">
-      <v-data-table
-        :headers="headers"
-        :items="desserts"
-        item-key="name"
-        sort-by="name"
-        group-by="category"
-        class="elevation-1"
-        show-group-by
-      ></v-data-table>
+      <v-card>
+        <v-card-title>
+          <v-text-field
+            v-model="search"
+            append-icon="mdi-magnify"
+            label="Search"
+            single-line
+            hide-details
+          ></v-text-field>
+        </v-card-title>
+
+        <v-data-table
+          :headers="headers"
+          :items="classes"
+          item-key="crn"
+          sort-by="semster_index"
+          :dense="true"
+          :loading="loading"
+          group-by="semster_index"
+          class="elevation-1"
+          :search="search"
+          show-group-by
+        ></v-data-table>
+      </v-card>
     </v-col>
   </v-row>
 </template>
 
 <script>
 export default {
+  props: {
+    classes: { type: Array, default: {} },
+    loading: { type: Boolean, default: false },
+  },
   data() {
     return {
+      search: '',
       headers: [
-        {
-          text: 'Dessert (100g serving)',
-          align: 'start',
-          value: 'name',
-          groupable: false,
-        },
-        { text: 'Category', value: 'category', align: 'right' },
-        { text: 'Dairy', value: 'dairy', align: 'right' },
-      ],
-      desserts: [
-        {
-          name: 'Frozen Yogurt',
-          category: 'Ice cream',
-          dairy: 'Yes',
-        },
-        {
-          name: 'Ice cream sandwich',
-          category: 'Ice cream',
-          dairy: 'Yes',
-        },
-        {
-          name: 'Eclair',
-          category: 'Cookie',
-          dairy: 'Yes',
-        },
-        {
-          name: 'Cupcake',
-          category: 'Pastry',
-          dairy: 'Yes',
-        },
-        {
-          name: 'Gingerbread',
-          category: 'Cookie',
-          dairy: 'No',
-        },
-        {
-          name: 'Jelly bean',
-          category: 'Candy',
-          dairy: 'No',
-        },
-        {
-          name: 'Lollipop',
-          category: 'Candy',
-          dairy: 'No',
-        },
-        {
-          name: 'Honeycomb',
-          category: 'Toffee',
-          dairy: 'No',
-        },
-        {
-          name: 'Donut',
-          category: 'Pastry',
-          dairy: 'Yes',
-        },
-        {
-          name: 'KitKat',
-          category: 'Candy',
-          dairy: 'Yes',
-        },
+        { text: 'Course Name', align: 'start', value: 'name' },
+        { text: 'Code', value: 'code', align: 'right', groupable: false },
+        { text: 'CRN', value: 'crn', align: 'right', groupable: false },
+        { text: 'Section', value: 'section', align: 'right', groupable: false },
+        { text: 'Days', value: 'days', align: 'right', groupable: false },
+        { text: 'time', value: 'time', align: 'right', groupable: false },
+        { text: 'Instructor', value: 'instructor', align: 'right' },
+        { text: 'Semster', value: 'semster_index', align: 'right' },
       ],
     }
   },