feat: added buttons

Author: stadial

components/ClassesList.vue

@@ -1,6 +1,6 @@
 <template>
   <v-row justify="center" align="center">
-    <v-col cols="12" sm="12" md="10" lg="8">
+    <v-col cols="12" sm="12" md="12" lg="8">
       <v-card :disabled="loading">
         <v-card-title>
           <v-text-field
@@ -17,27 +17,65 @@
           :items="classes"
           item-key="crn"
           sort-by="semster_index"
-          :dense="true"
+          :dense="false"
           :loading="loading"
           group-by="semster_index"
           class="elevation-1"
           :search="search"
           show-group-by
-        ></v-data-table>
+        >
+          <template v-slot:item.days="{ item }">
+            <v-chip v-for="day in item.days" :key="day">
+              {{ daysNames[day] }}
+            </v-chip>
+          </template>
+
+          <template v-slot:item.button="{ item }">
+            <v-tooltip top :color="item.buttonOptions.color">
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn
+                  elevation="2"
+                  :color="item.buttonOptions.color"
+                  :disabled="item.buttonOptions.disabled"
+                  v-bind="attrs"
+                  v-on="on"
+                  fab
+                  small
+                  @click="$emit('class:action', item)"
+                >
+                  <v-icon> mdi-plus </v-icon>
+                </v-btn>
+              </template>
+              <div v-for="tooltip in item.buttonOptions.tooltips">
+                {{ tooltip }}
+              </div>
+            </v-tooltip>
+          </template>
+        </v-data-table>
       </v-card>
     </v-col>
   </v-row>
 </template>
 
 <script>
 export default {
+  emits: ['class:action'],
   props: {
     classes: { type: Array, default: {} },
     loading: { type: Boolean, default: false },
   },
   data() {
     return {
       search: '',
+      daysNames: {
+        1: 'Sun',
+        2: 'Mon',
+        3: 'Tue',
+        4: 'Wed',
+        5: 'Thu',
+        6: 'Fri',
+        7: 'Sat',
+      },
       headers: [
         { text: 'Course Name', align: 'start', value: 'name' },
         { text: 'Code', value: 'code', align: 'right', groupable: false },
@@ -47,6 +85,7 @@ export default {
         { text: 'time', value: 'time', align: 'right', groupable: false },
         { text: 'Instructor', value: 'instructor', align: 'right' },
         { text: 'Semster', value: 'semster_index', align: 'right' },
+        { text: 'button', value: 'button', align: 'right', groupable: false },
       ],
     }
   },

logic/classes.ts

@@ -0,0 +1,12 @@
+// too lazy to  add types ;)
+export function buttonOptions(todo: any) {
+	let buttonOptions = {
+		disabled: false,
+		color: 'success',
+		tooltips: ['Hello!', 'Error 2'],
+	}
+	return { ...todo, buttonOptions }
+}
+export function findConflicts(todo: any) {
+	return todo
+}

pages/index.vue

@@ -16,6 +16,7 @@
 
 <script>
 const axios = require('axios')
+import { buttonOptions, findConflicts } from '@/logic/classes'
 
 export default {
   data() {
@@ -58,9 +59,14 @@ export default {
   },
   computed: {
     filteredClasses() {
-      return this.rawClasses.filter((c) =>
+      // selected semster (from <ClassesFilters/>
+      let filtered = this.rawClasses.filter((c) =>
         this.selectedSemsters.includes(c.semster_index)
       )
+      filtered = filtered.map(findConflicts)
+      filtered = filtered.map(buttonOptions)
+
+      return filtered
     },
   },
   methods: {