Implement frontend handling for cancelled lessons

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

@@ -8,6 +8,7 @@ import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
     :gql-additional-query-args="{ date: date  }"
     :get-gql-data="prepareList"
     :headers="headers"
+    :item-class="itemColor"
     :show-select="false"
     :enable-create="false"
     :enable-edit="false"
@@ -73,6 +74,17 @@ import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
         v-for="r in oldRooms"
       > {{ r.shortName || r.name }} </span>
     </template>
+    <template #notes="{ item: { cancelled, notes } }">
+      <v-chip
+        v-if="cancelled"
+        color="green"
+        text-color="white"
+      >
+        <!-- TODO: i18n -->
+        CANCELLED
+      </v-chip>
+      {{ notes }}
+    </template>
   </c-r-u-d-list>
 </template>
 
@@ -128,6 +140,15 @@ export default {
       this.affectedGroups = data.affectedGroups;
       return data.substitutions;
     },
+    itemColor(item) {
+      return item.cancelled ? "green-text" : "";
+    },
   },
 };
 </script>
+
+<style>
+.green-text {
+  color: green;
+}
+</style>