Introduce additional slots for customization in TimetableWrapper

aleksis/apps/chronos/frontend/components/TimetableWrapper.vue

@@ -118,11 +118,19 @@ export default {
       >
         <v-card>
           <v-toolbar dark color="primary">
+            <v-btn icon dark @click="selectDialog = false">
+              <v-icon>mdi-close</v-icon>
+            </v-btn>
             <v-toolbar-title>{{
               $t("chronos.timetable.select")
             }}</v-toolbar-title>
             <v-spacer></v-spacer>
           </v-toolbar>
+          <slot
+            name="additionalSelect"
+            :selected="selected"
+            :mobile="true"
+          ></slot>
           <select-timetable
             v-model="selected"
             @input="selectDialog = false"
@@ -132,7 +140,11 @@ export default {
       </v-dialog>
 
       <v-col md="3" lg="3" xl="3" v-if="$vuetify.breakpoint.lgAndUp">
-        <slot name="additionalSelect" :selected="selected"></slot>
+        <slot
+          name="additionalSelect"
+          :selected="selected"
+          :mobile="false"
+        ></slot>
         <v-card>
           <select-timetable
             v-model="selected"
@@ -176,11 +188,21 @@ export default {
                 <v-icon>mdi-chevron-right</v-icon>
               </v-btn>
             </v-card-title>
+            <slot
+              name="additionalButton"
+              :selected="selected"
+              :mobile="true"
+            ></slot>
           </div>
 
           <div class="d-flex flex-wrap justify-space-between mb-2" v-else>
             <v-card-title>
               {{ selected.name }}
+              <slot
+                name="additionalButton"
+                :selected="selected"
+                :mobile="false"
+              ></slot>
             </v-card-title>
             <div class="pa-2 mt-1">
               <v-btn