From 04fe44f72b6ed1b3e31ff1fc2c2dc5a2e5544148 Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Thu, 21 Nov 2024 21:19:55 +0100
Subject: [PATCH] Issue #1567 : distinction between activities (long_event) and
 normal events on group page

---
 .../Group/Sections/EventsSection.vue          | 28 ++++++++++++++-----
 src/graphql/group.ts                          |  1 +
 src/graphql/search.ts                         |  1 +
 src/i18n/fr_FR.json                           |  6 ++++
 src/types/event.model.ts                      |  3 ++
 src/views/Group/GroupView.vue                 | 22 +++++++++++++--
 6 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/components/Group/Sections/EventsSection.vue b/src/components/Group/Sections/EventsSection.vue
index a1572677c..0931f711e 100644
--- a/src/components/Group/Sections/EventsSection.vue
+++ b/src/components/Group/Sections/EventsSection.vue
@@ -1,6 +1,6 @@
 <template>
   <group-section
-    :title="t('Events')"
+    :title="longEvent ? t('Activities') : t('Events')"
     icon="calendar"
     :route="{
       name: RouteName.GROUP_EVENTS,
@@ -13,13 +13,19 @@
         v-if="group && group.organizedEvents.total > 0"
       >
         <event-minimalist-card
-          v-for="event in group.organizedEvents.elements.slice(0, 3)"
+          v-for="event in group.organizedEvents.elements
+            .filter((event) => (longEvent ? event.longEvent : !event.longEvent))
+            .slice(0, 3)"
           :event="event"
           :key="event.uuid"
         />
       </div>
-      <empty-content v-else-if="group" icon="calendar" :inline="true">
-        {{ t("No public upcoming events") }}
+      <empty-content v-else-if="group" icon="calendar" :inline="true"
+        >{{
+          longEvent
+            ? t("No public upcoming activities")
+            : t("No public upcoming events")
+        }}
       </empty-content>
       <!-- <o-skeleton animated v-else></o-skeleton> -->
     </template>
@@ -33,7 +39,9 @@
           params: { preferredUsername: usernameWithDomain(group) },
           query: { showPassedEvents: true },
         }"
-        >{{ t("View past events") }}</o-button
+        >{{
+          longEvent ? t("+ View past activities") : t("+ View past events")
+        }}</o-button
       >
       <o-button
         tag="router-link"
@@ -43,7 +51,9 @@
           query: { actorId: group?.id },
         }"
         class="button is-primary"
-        >{{ t("+ Create an event") }}</o-button
+        >{{
+          longEvent ? t("+ Create an activity") : t("+ Create an event")
+        }}</o-button
       >
     </template>
   </group-section>
@@ -60,5 +70,9 @@ import GroupSection from "@/components/Group/GroupSection.vue";
 
 const { t } = useI18n({ useScope: "global" });
 
-defineProps<{ group: IGroup; isModerator: boolean }>();
+defineProps<{
+  group: IGroup;
+  isModerator: boolean;
+  longEvent: boolean;
+}>();
 </script>
diff --git a/src/graphql/group.ts b/src/graphql/group.ts
index b53ac350a..d09959cbb 100644
--- a/src/graphql/group.ts
+++ b/src/graphql/group.ts
@@ -150,6 +150,7 @@ export const GROUP_BASIC_FIELDS_FRAGMENTS = gql`
         beginsOn
         status
         draft
+        longEvent
         language
         options {
           maximumAttendeeCapacity
diff --git a/src/graphql/search.ts b/src/graphql/search.ts
index fe13db545..d3e80b6aa 100644
--- a/src/graphql/search.ts
+++ b/src/graphql/search.ts
@@ -70,6 +70,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
         uuid
         beginsOn
         endsOn
+        longEvent
         picture {
           id
           url
diff --git a/src/i18n/fr_FR.json b/src/i18n/fr_FR.json
index dc142b943..a4bf30b31 100644
--- a/src/i18n/fr_FR.json
+++ b/src/i18n/fr_FR.json
@@ -6,7 +6,10 @@
   "+ Add a resource": "+ Ajouter une ressource",
   "+ Create a post": "+ Créer un billet",
   "+ Create an event": "+ Créer un événement",
+  "+ Create an activity": "+ Créer une activité",
   "+ Start a discussion": "+ Lancer une discussion",
+  "+ View past activities": "+ Voir les activités passées",
+  "+ View past events": "+ Voir les événements passés",
   "0 Bytes": "0 octets",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> sera affiché·e comme contact.|<b>{contact}</b> seront affiché·e·s comme contacts.",
   "@{group}": "@{group}",
@@ -778,6 +781,7 @@
   "No posts found": "Aucun billet trouvé",
   "No posts yet": "Pas encore de billets",
   "No profile matches the filters": "Aucun profil ne correspond aux filtres",
+  "No public upcoming activities": "Aucune activité publique à venir",
   "No public upcoming events": "Aucun événement public à venir",
   "No resolved reports yet": "Aucun signalement résolu pour le moment",
   "No resources in this folder": "Aucune ressource dans ce dossier",
@@ -1356,6 +1360,7 @@
   "View more groups around {position}": "Voir plus de groupes près de {position}",
   "View more online events": "Voir plus d'événements en ligne",
   "View page on {hostname} (in a new window)": "Voir la page sur {hostname} (dans une nouvelle fenêtre)",
+  "View past activities": "Voir les activités passées",
   "View past events": "Voir les événements passés",
   "View the group profile on the original instance": "Afficher le profil du groupe sur l'instance d'origine",
   "Visibility was set to an unknown value.": "La visibilité a été définie à une valeur inconnue.",
@@ -1548,6 +1553,7 @@
   "as {identity}": "en tant que {identity}",
   "contact uninformed": "contact non renseigné",
   "create a group": "créer un groupe",
+  "create an activity": "créer une activité",
   "create an event": "créer un événement",
   "default Mobilizon privacy policy": "politique de confidentialité par défaut de Mobilizon",
   "default Mobilizon terms": "conditions d'utilisation par défaut de Mobilizon",
diff --git a/src/types/event.model.ts b/src/types/event.model.ts
index 77b545e4f..b71fdc702 100644
--- a/src/types/event.model.ts
+++ b/src/types/event.model.ts
@@ -71,6 +71,7 @@ export interface IEvent {
   beginsOn: string;
   endsOn: string | null;
   publishAt: string;
+  longEvent: boolean;
   status: EventStatus;
   visibility: EventVisibility;
   joinOptions: EventJoinOptions;
@@ -144,6 +145,8 @@ export class EventModel implements IEvent {
 
   publishAt = new Date().toISOString();
 
+  longEvent = false;
+
   language = "und";
 
   participantStats = {
diff --git a/src/views/Group/GroupView.vue b/src/views/Group/GroupView.vue
index e7d01dba2..9934d7576 100644
--- a/src/views/Group/GroupView.vue
+++ b/src/views/Group/GroupView.vue
@@ -373,7 +373,7 @@
         </div>
       </header>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
+    <div v-if="group" class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
       <!-- Public thing: Members -->
       <group-section :title="t('Members')" icon="account-group">
         <template #default>
@@ -526,11 +526,24 @@
       </group-section>
     </div>
     <div v-if="group">
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+      <div
+        :class="[
+          'grid grid-cols-1 gap-2 mb-2',
+          { 'xl:grid-cols-3': isLongEvents, 'md:grid-cols-2': !isLongEvents },
+        ]"
+      >
+        <!-- Public thing: Long Events -->
+        <Events
+          v-if="isLongEvents"
+          :group="group"
+          :isModerator="isCurrentActorAGroupModerator && !previewPublic"
+          :longEvent="true"
+        />
         <!-- Public thing: Events -->
         <Events
           :group="group"
           :isModerator="isCurrentActorAGroupModerator && !previewPublic"
+          :longEvent="false"
         />
         <!-- Public thing: Posts -->
         <Posts
@@ -538,6 +551,8 @@
           :isModerator="isCurrentActorAGroupModerator && !previewPublic"
           :isMember="isCurrentActorAGroupMember && !previewPublic"
         />
+      </div>
+      <div class="grid grid-cols-1 gap-2 mb-2 md:grid-cols-2">
         <!-- Private thing: Group discussions -->
         <Discussions
           v-if="isCurrentActorAGroupMember && !previewPublic"
@@ -656,6 +671,7 @@ import { Notifier } from "@/plugins/notifier";
 import { useGroupResourcesList } from "@/composition/apollo/resources";
 import { useGroupMembers } from "@/composition/apollo/members";
 import GroupSection from "@/components/Group/GroupSection.vue";
+import { useIsLongEvents } from "@/composition/apollo/config";
 
 const props = defineProps<{
   preferredUsername: string;
@@ -680,6 +696,8 @@ const { group: resourcesGroup } = useGroupResourcesList(preferredUsername, {
 
 const { t } = useI18n({ useScope: "global" });
 
+const { isLongEvents } = useIsLongEvents();
+
 // const { person } = usePersonStatusGroup(group);
 
 const { result, subscribeToMore } = useQuery<{