From 4b021f50e5b63d3c8bfd86008c5520e2d5deb004 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 1 Dec 2020 12:33:58 +0100
Subject: [PATCH] Clearer logic whether to show or not the participation button

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/Event.vue | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index cde8a44a3..b4398d161 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -110,15 +110,7 @@
                   v-if="new Date(endDate) > new Date()"
                 >
                   <participation-button
-                    v-if="
-                      anonymousParticipation === null &&
-                      (config.anonymous.participation.allowed ||
-                        (currentActor.id &&
-                          !actorIsOrganizer &&
-                          !event.draft &&
-                          (eventCapacityOK || actorIsParticipant) &&
-                          event.status !== EventStatus.CANCELLED))
-                    "
+                    v-if="shouldShowParticipationButton"
                     :participation="participations[0]"
                     :event="event"
                     :current-actor="currentActor"
@@ -1206,6 +1198,29 @@ export default class Event extends EventMixin {
     }
     return null;
   }
+
+  get shouldShowParticipationButton(): boolean {
+    // So that people can cancel their participation
+    if (
+      this.actorIsParticipant ||
+      (this.config.anonymous.participation.allowed &&
+        this.anonymousParticipation)
+    )
+      return true;
+
+    // You can participate to draft or cancelled events
+    if (this.event.draft || this.event.status === EventStatus.CANCELLED)
+      return false;
+
+    // Organizer can't participate
+    if (this.actorIsOrganizer) return false;
+
+    // If capacity is OK
+    if (this.eventCapacityOK) return true;
+
+    // Else
+    return false;
+  }
 }
 </script>
 <style lang="scss" scoped>