Use chip group for selecting cancellation status

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue

@@ -44,11 +44,30 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
         </template>
       </v-autocomplete>
 
-      <delete-button color="red white--text" outlined :disabled="loading" @click="toggleCancel">{{
-        substitution.cancelled
-          ? $t("chronos.substitutions.overview.cancel.decancel")
-          : $t("chronos.substitutions.overview.cancel.cancel")
-      }}</delete-button>
+      <v-chip-group
+        v-model="cancelled"
+        column
+        mandatory
+        :disabled="loading"
+        @change="changeCancel"
+      >
+        <v-chip
+          filter
+          outlined
+          color="success"
+          :value="false"
+        >
+          {{ $t("chronos.substitutions.overview.cancel.not_cancelled") }}
+        </v-chip>
+        <v-chip
+          filter
+          outlined
+          color="error"
+          :value="true"
+        >
+          {{ $t("chronos.substitutions.overview.cancel.cancelled") }}
+        </v-chip>
+      </v-chip-group>
     </v-card-text>
     <v-divider />
   </v-card>
@@ -63,6 +82,7 @@ export default {
     return {
       loading: false,
       teachers: [],
+      cancelled: undefined,
     };
   },
   props: {
@@ -99,11 +119,11 @@ export default {
         },
       ]);
     },
-    toggleCancel() {
+    changeCancel() {
       this.createOrPatch([
         {
           id: this.substitution.id,
-          cancelled: !this.substitution.cancelled,
+          cancelled: this.cancelled,
         },
       ]);
     },
@@ -113,6 +133,7 @@ export default {
   },
   mounted() {
     this.teachers = this.substitution.teachers.map((teacher) => teacher.id);
+    this.cancelled = this.substitution.cancelled;
   },
 };
 </script>

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

@@ -33,8 +33,8 @@
           "groups": "Nach Gruppen filtern"
         },
         "cancel": {
-          "cancel": "Stunde ausfallen lassen",
-          "decancel": "Stunde nicht ausfallen lassen"
+          "cancelled": "Fällt aus",
+          "not_cancelled": "Findet statt"
         }
       }
     },

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

@@ -55,8 +55,8 @@
           "groups": "Filter by groups"
         },
         "cancel": {
-          "cancel": "Mark as cancelled",
-          "decancel": "Mark as not cancelled"
+          "cancelled": "Cancelled",
+          "not_cancelled": "Regular"
         }
       }
     }