Add class & course navigation by selection

aleksis/apps/alsijil/frontend/components/Coursebook.vue

@@ -7,6 +7,15 @@
     :enable-edit="false"
     @lastQuery="lastQuery = $event"
   >
+    <template #additionalActions="{ attrs, on }">
+      <v-autocomplete
+        :items="selectable"
+        item-text="name"
+        clearable
+        return-object
+        @input="changeSelection"
+      />
+    </template>
     <template #default="{ items }">
       <v-list-item v-for="day in groupDocsByDay(items)" two-line>
         <v-list-item-content>
@@ -87,8 +96,28 @@ export default {
         dateEnd: this.dateEnd,
       };
     },
+    selectable() {
+      // TODO: i18n
+      return [
+        { header: "Klassen" },
+        ...this.groups.map((group) => ({ type: "group", ...group })),
+        { header: "Kurse" },
+        ...this.courses.map((course) => ({ type: "course", ...course })),
+      ];
+    },
   },
   methods: {
+    changeSelection(selection) {
+      this.$router.push({
+        name: "alsijil.coursebook_by_obj_id_and_date",
+        params: {
+          objType: selection.type,
+          objId: selection.id,
+          dateStart: this.dateStart,
+          dateEnd: this.dateEnd,
+        },
+      });
+    },
     // => [[dt doc ...] ...]
     groupDocsByDay(docs) {
       const byDay = docs.reduce((byDay, doc) => {

aleksis/apps/alsijil/frontend/components/coursebook.graphql

@@ -11,6 +11,7 @@ query coursesOfTeacher {
     name
     groups {
       id
+      name
     }
   }
 }