Add print-button & reformat header

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

 <script setup>
 import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
+import PrimaryActionButton from "aleksis.core/components/generic/buttons/PrimaryActionButton.vue";
 </script>
 
 <template>
@@ -14,43 +15,48 @@ import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
     :enable-edit="false"
   >
     <template #title>
-      <v-card-title class="text-h3"> {{ $d(new Date(date), "dateWithWeekday") }} </v-card-title>
-      <v-container>
-      <v-row>
-        <v-col cols="4"> {{ $t("chronos.substitutions.affected_teachers") }} </v-col>
-        <v-col cols="8">
-          <v-chip
-            v-for="(teacher, i) in affectedTeachers"
-            class="ma-1"
-            :to="{
-              name: 'chronos.timetableWithId',
-              params: {
-                type: 'person',
-                id: teacher.id,
-              },
-            }"
-          >
-            {{ teacher.shortName || teacher.fullName }}
-          </v-chip>
-        </v-col>
-        <v-spacer/>
+      <v-row class="d-flex align-center pt-2 pa-2">
+      <v-card-title class="text-h4"> {{ $d(new Date(date), "dateWithWeekday") }} </v-card-title>
+      <v-spacer/>
+      <primary-action-button
+        class="mr-4"
+        i18n-key="chronos.substitutions.print"
+        :to="{
+          name: 'chronos.printSubstitutionsForDate',
+          params: {
+            date: date,
+          },
+        }"
+        />
       </v-row>
-      <v-row>
-        <v-col> {{ $t("chronos.substitutions.affected_groups") }} </v-col>
-        <v-col>
-          <!-- TODO: Link to group-timetable as well -->
-          <!-- as soon as it becomes possible to resolve a -->
-          <!-- group-timetable from the lesson-event group too. -->
-          <v-chip
-            v-for="group in affectedGroups"
-            class="ma-1"
-          >
-            {{ group.shortName }}
-          </v-chip>
-        </v-col>
-        <v-spacer/>
-      </v-row>
-      </v-container>
+      <v-card-text>
+        <span> {{ $t("chronos.substitutions.affected_teachers") }} </span>
+        <v-chip
+          v-for="(teacher, i) in affectedTeachers"
+          class="ma-1"
+          :to="{
+            name: 'chronos.timetableWithId',
+            params: {
+              type: 'person',
+              id: teacher.id,
+            },
+          }"
+        >
+          {{ teacher.shortName || teacher.fullName }}
+        </v-chip>
+      </v-card-text>
+      <v-card-text>
+        <span> {{ $t("chronos.substitutions.affected_groups") }} </span>
+        <!-- TODO: Link to group-timetable as well -->
+        <!-- as soon as it becomes possible to resolve a -->
+        <!-- group-timetable from the lesson-event group too. -->
+        <v-chip
+          v-for="group in affectedGroups"
+          class="ma-1"
+        >
+          {{ group.shortName }}
+        </v-chip>
+      </v-card-text>
     </template>
     <!-- TODO: Component for strike -> bold || normal -->
     <template #groups="{ item: { oldGroups, newGroups } }">

aleksis/apps/chronos/frontend/messages/de.json

@@ -23,6 +23,7 @@
     "menu_title": "Stundenpläne",
     "substitutions": {
       "menu_title": "Vertretungen",
+      "print": "Drucken",
       "groups": "Gruppen",
       "time": "Zeit",
       "teachers": "Lehrer",

aleksis/apps/chronos/frontend/messages/en.json

@@ -24,6 +24,7 @@
     },
     "substitutions": {
       "menu_title": "Substitutions",
+      "print": "Print",
       "groups": "Groups",
       "time": "Time",
       "teachers": "Teachers",