Always show the cancelled status of an event

Closes #959

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventMinimalistCard.vue

@@ -18,6 +18,20 @@
     </div>
     <div class="title-info-wrapper has-text-grey-dark">
       <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
+        <b-tag
+          type="is-info"
+          class="mr-1"
+          v-if="event.status === EventStatus.TENTATIVE"
+        >
+          {{ $t("Tentative") }}
+        </b-tag>
+        <b-tag
+          type="is-danger"
+          class="mr-1"
+          v-if="event.status === EventStatus.CANCELLED"
+        >
+          {{ $t("Cancelled") }}
+        </b-tag>
         <b-tag
           class="mr-2"
           type="is-warning"
@@ -105,7 +119,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { ParticipantRole } from "@/types/enums";
+import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
@@ -129,6 +143,8 @@ export default class EventMinimalistCard extends Vue {
   organizerDisplayName = organizerDisplayName;
 
   organizer = organizer;
+
+  EventStatus = EventStatus;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Event/EventParticipationCard.vue

@@ -45,6 +45,22 @@
         </div>
         <div class="list-card-content">
           <div class="title-wrapper" dir="auto">
+            <b-tag
+              type="is-info"
+              class="mr-1 mb-1"
+              size="is-medium"
+              v-if="participation.event.status === EventStatus.TENTATIVE"
+            >
+              {{ $t("Tentative") }}
+            </b-tag>
+            <b-tag
+              type="is-danger"
+              class="mr-1 mb-1"
+              size="is-medium"
+              v-if="participation.event.status === EventStatus.CANCELLED"
+            >
+              {{ $t("Cancelled") }}
+            </b-tag>
             <router-link
               :to="{
                 name: RouteName.EVENT,
@@ -257,7 +273,7 @@ import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { mixins } from "vue-class-component";
 import { RawLocation, Route } from "vue-router";
-import { EventVisibility, ParticipantRole } from "@/types/enums";
+import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import {
   IEventCardOptions,
@@ -326,6 +342,8 @@ export default class EventParticipationCard extends mixins(
 
   RouteName = RouteName;
 
+  EventStatus = EventStatus;
+
   get mergedOptions(): IEventCardOptions {
     return { ...defaultOptions, ...this.options };
   }