Fix logic in status icon

aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue

@@ -51,7 +51,7 @@ export default {
         {
           name: "cancelled",
           text: this.$t("alsijil.coursebook.status.cancelled"),
-          icon: "$cancel",
+          icon: "mdi-cancel",
           color: "error",
         },
         {
@@ -78,27 +78,21 @@ export default {
   },
   methods: {
     updateStatus() {
-      if (this.documentation.topic) {
+      if (this.documentation?.lessonEvent.cancelled) {
+        this.currentStatusName = "cancelled";
+      } else if (this.documentation.topic) {
         this.currentStatusName = "available";
+      } else if (DateTime.now() > this.documentationDateTimeEnd) {
+        this.currentStatusName = "missing";
+      } else if (this.documentation?.lessonEvent.amends) {
+        this.currentStatusName = "substitution";
+      } else if (
+        DateTime.now() > this.documentationDateTimeStart &&
+        DateTime.now() < this.documentationDateTimeEnd
+      ) {
+        this.currentStatusName = "running";
       } else {
-        if (DateTime.now() > this.documentationDateTimeEnd) {
-          this.currentStatusName = "missing";
-        } else if (
-          DateTime.now() > this.documentationDateTimeStart &&
-          DateTime.now() < this.documentationDateTimeEnd
-        ) {
-          this.currentStatusName = "running";
-        } else {
-          if (this.documentation?.lessonEvent.amends) {
-            if (this.documentation.lessonEvent.amends.cancelled) {
-              this.currentStatusName = "cancelled";
-            } else {
-              this.currentStatusName = "substitution";
-            }
-          } else {
-            this.currentStatusName = "pending";
-          }
-        }
+        this.currentStatusName = "pending";
       }
     },
   },