feat(event): 1403 hide number of participants

lib/graphql/schema/event.ex

@@ -263,6 +263,10 @@ defmodule Mobilizon.GraphQL.Schema.EventType do
       description: "Whether or not to show the participation price"
     )
 
+    field(:hide_number_of_participants, :boolean,
+      description: "Whether or not the number of participants is hidden"
+    )
+
     field(:show_start_time, :boolean, description: "Show event start time")
     field(:show_end_time, :boolean, description: "Show event end time")
 
@@ -316,6 +320,10 @@ defmodule Mobilizon.GraphQL.Schema.EventType do
       description: "Whether or not to show the participation price"
     )
 
+    field(:hide_number_of_participants, :boolean,
+      description: "Whether or not the number of participants is hidden"
+    )
+
     field(:show_start_time, :boolean, description: "Show event start time")
     field(:show_end_time, :boolean, description: "Show event end time")
 

lib/mobilizon/events/event_options.ex

@@ -25,6 +25,7 @@ defmodule Mobilizon.Events.EventOptions do
           show_participation_price: boolean,
           offers: [EventOffer.t()],
           participation_condition: [EventParticipationCondition.t()],
+          hide_number_of_participants: boolean,
           show_start_time: boolean,
           show_end_time: boolean,
           timezone: String.t() | nil,
@@ -41,6 +42,7 @@ defmodule Mobilizon.Events.EventOptions do
     :program,
     :comment_moderation,
     :show_participation_price,
+    :hide_number_of_participants,
     :show_start_time,
     :show_end_time,
     :timezone,
@@ -59,6 +61,7 @@ defmodule Mobilizon.Events.EventOptions do
     field(:program, :string)
     field(:comment_moderation, CommentModeration)
     field(:show_participation_price, :boolean)
+    field(:hide_number_of_participants, :boolean, default: false)
     field(:show_start_time, :boolean, default: true)
     field(:show_end_time, :boolean, default: true)
     field(:timezone, :string)

src/components/Event/EventActionSection.vue

@@ -23,7 +23,10 @@
     <div class="flex flex-col gap-1 mt-1">
       <p
         class="inline-flex gap-2 ml-auto"
-        v-if="event.joinOptions !== EventJoinOptions.EXTERNAL"
+        v-if="
+          event.joinOptions !== EventJoinOptions.EXTERNAL &&
+          !event.options.hideNumberOfParticipants
+        "
       >
         <TicketConfirmationOutline />
         <router-link

src/graphql/event_options.ts

@@ -6,6 +6,7 @@ export const EVENT_OPTIONS_FRAGMENT = gql`
     remainingAttendeeCapacity
     showRemainingAttendeeCapacity
     anonymousParticipation
+    hideNumberOfParticipants
     showStartTime
     showEndTime
     timezone

src/types/event-options.model.ts

@@ -24,6 +24,7 @@ export interface IEventOptions {
   program: string;
   commentModeration: CommentModeration;
   showParticipationPrice: boolean;
+  hideNumberOfParticipants: boolean;
   showStartTime: boolean;
   showEndTime: boolean;
   timezone: string | null;
@@ -53,6 +54,8 @@ export class EventOptions implements IEventOptions {
 
   showParticipationPrice = false;
 
+  hideNumberOfParticipants = false;
+
   showStartTime = true;
 
   showEndTime = true;

src/views/Event/EditView.vue

@@ -241,19 +241,36 @@
              {{ t('Page limited to my group (asks for auth)') }}
           </o-radio>
         </div>-->
+      </section>
+      <section class="my-4">
+        <h2>
+          {{ t("How to register") }}
+        </h2>
+
+        <div class="field">
+          <o-radio
+            v-model="registerOption"
+            name="registerOption"
+            :native-value="RegisterOption.MOBILIZON"
+            >{{ t("I want to manage the registration on Mobilizon") }}</o-radio
+          >
+        </div>
+
+        <div class="field">
+          <o-radio
+            v-model="registerOption"
+            name="registerOption"
+            :native-value="RegisterOption.EXTERNAL"
+            >{{
+              t("I want to manage the registration with an external provider")
+            }}</o-radio
+          >
+        </div>
 
         <o-field
-          :label="t('External registration')"
-          v-if="features?.eventExternal"
+          v-if="registerOption === RegisterOption.EXTERNAL"
+          :label="t('URL')"
         >
-          <o-switch v-model="externalParticipation">
-            {{
-              t("I want to manage the registration with an external provider")
-            }}
-          </o-switch>
-        </o-field>
-
-        <o-field v-if="externalParticipation" :label="t('URL')">
           <o-input
             icon="link"
             type="url"
@@ -264,7 +281,10 @@
         </o-field>
 
         <o-field
-          v-if="anonymousParticipationConfig?.allowed && !externalParticipation"
+          v-if="
+            anonymousParticipationConfig?.allowed &&
+            registerOption === RegisterOption.MOBILIZON
+          "
           :label="t('Anonymous participations')"
         >
           <o-switch v-model="eventOptions.anonymousParticipation">
@@ -287,20 +307,35 @@
 
         <o-field
           :label="t('Participation approval')"
-          v-show="!externalParticipation"
+          v-show="registerOption === RegisterOption.MOBILIZON"
         >
           <o-switch v-model="needsApproval">{{
             t("I want to approve every participation request")
           }}</o-switch>
         </o-field>
 
-        <o-field :label="t('Number of places')" v-show="!externalParticipation">
+        <o-field
+          :label="t('Showing participants')"
+          v-show="registerOption === RegisterOption.MOBILIZON"
+        >
+          <o-switch v-model="hideParticipants">{{
+            t("Hide the number of participants")
+          }}</o-switch>
+        </o-field>
+
+        <o-field
+          :label="t('Number of places')"
+          v-show="registerOption === RegisterOption.MOBILIZON"
+        >
           <o-switch v-model="limitedPlaces">{{
             t("Limited number of places")
           }}</o-switch>
         </o-field>
 
-        <div class="" v-if="limitedPlaces && !externalParticipation">
+        <div
+          class=""
+          v-if="limitedPlaces && registerOption === RegisterOption.MOBILIZON"
+        >
           <o-field :label="t('Number of places')" label-for="number-of-places">
             <o-input
               type="number"
@@ -1091,6 +1126,15 @@ const needsApproval = computed({
   },
 });
 
+const hideParticipants = computed({
+  get(): boolean {
+    return event.value?.options.hideNumberOfParticipants;
+  },
+  set(value: boolean) {
+    event.value.options.hideNumberOfParticipants = value;
+  },
+});
+
 const checkTitleLength = computed((): Array<string | undefined> => {
   return event.value.title.length > 80
     ? ["info", t("The event title will be ellipsed.")]
@@ -1359,12 +1403,19 @@ const orderedCategories = computed(() => {
   return sortBy(eventCategories.value, ["label"]);
 });
 
-const externalParticipation = computed({
+const RegisterOption = {
+  MOBILIZON: "mobilizon",
+  EXTERNAL: "external",
+};
+
+const registerOption = computed({
   get() {
-    return event.value?.joinOptions === EventJoinOptions.EXTERNAL;
+    return event.value?.joinOptions === EventJoinOptions.EXTERNAL
+      ? RegisterOption.EXTERNAL
+      : RegisterOption.MOBILIZON;
   },
   set(newValue) {
-    if (newValue === true) {
+    if (newValue === RegisterOption.EXTERNAL) {
       event.value.joinOptions = EventJoinOptions.EXTERNAL;
     } else {
       event.value.joinOptions = EventJoinOptions.FREE;