Add status icon

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

 <script setup>
 import PersonChip from "aleksis.core/components/person/PersonChip.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
+import SubstitutionStatus from "./SubstitutionStatus.vue";
 
 import { DateTime } from "luxon";
 </script>
@@ -8,14 +9,7 @@ import { DateTime } from "luxon";
 <template>
   <div class="full-width grid">
     <div class="d-flex">
-      <v-tooltip bottom v-if="substitution.cancelled">
-        <template #activator="{ on, attrs }">
-          <v-icon color="error" class="mr-md-4" v-on="on" v-bind="attrs"
-            >mdi-cancel</v-icon
-          >
-        </template>
-        <span>{{ $t("chronos.event.amend.cancelled") }}</span>
-      </v-tooltip>
+      <substitution-status :substitution="substitution"/>
       <div class="text-right d-flex flex-column fit-content">
         <time :datetime="substitution.datetimeStart" class="text-no-wrap">
           {{ $d(toDateTime(substitution.datetimeStart), "shortTime") }}

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

+<template>
+  <v-tooltip bottom>
+    <template #activator="{ on, attrs }">
+      <v-icon
+        :color="currentStatus?.color"
+        class="mr-md-4"
+        v-on="on"
+        v-bind="attrs"
+        >{{ currentStatus?.icon }}</v-icon
+      >
+    </template>
+    <span>{{ currentStatus?.text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+
+import { DateTime } from "luxon";
+
+export default {
+  name: "SubstitutionStatus",
+  data() {
+    return {
+      statusChoices: [
+        {
+          name: "unedited",
+          text: this.$t("chronos.substitutions.overview.status.unedited"),
+          icon: "mdi-calendar-question-outline",
+          color: "warning",
+        },
+        {
+          name: "substituted",
+          text: this.$t("chronos.substitutions.overview.status.substituted"),
+          icon: "mdi-calendar-edit-outline",
+          color: "success",
+        },
+        {
+          name: "cancelled",
+          text: this.$t("chronos.substitutions.overview.status.cancelled"),
+          icon: "mdi-cancel",
+          color: "error",
+        },
+      ],
+      statusTimeout: null,
+      currentStatusName: "",
+    };
+  },
+  props: {
+    substitution: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    currentStatus() {
+      return this.statusChoices.find((s) => s.name === this.currentStatusName);
+    },
+  },
+  methods: {
+    updateStatus() {
+      if (this.substitution.id.startsWith("DUMMY")) {
+        this.currentStatusName = "unedited";
+      } else if (this.substitution.cancelled) {
+        this.currentStatusName = "cancelled";
+      } else {
+        this.currentStatusName = "substituted";
+      }
+    },
+  },
+  watch: {
+    documentation: {
+      handler() {
+        this.updateStatus();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.updateStatus();
+  },
+};
+</script>

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

@@ -57,6 +57,11 @@
         "cancel": {
           "cancelled": "Cancelled",
           "not_cancelled": "Taking place"
+        },
+        "status": {
+          "unedited": "Unedited",
+          "substituted": "Substituted",
+          "cancelled": "Cancelled"
         }
       }
     }