feat(front): add dedicated page and route for event announcements

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

src/components/Event/EventActionSection.vue

@@ -107,6 +107,38 @@
             {{ t("Actions") }}
           </o-button>
         </template>
+        <o-dropdown-item
+          aria-role="listitem"
+          has-link
+          v-if="canManageEvent || !event?.draft"
+        >
+          <router-link
+            class="flex gap-1"
+            :to="{
+              name: RouteName.PARTICIPATIONS,
+              params: { eventId: event?.uuid },
+            }"
+          >
+            <AccountMultiple />
+            {{ t("Participations") }}
+          </router-link>
+        </o-dropdown-item>
+        <o-dropdown-item
+          aria-role="listitem"
+          has-link
+          v-if="canManageEvent || !event?.draft"
+        >
+          <router-link
+            class="flex gap-1"
+            :to="{
+              name: RouteName.ANNOUNCEMENTS,
+              params: { eventId: event?.uuid },
+            }"
+          >
+            <Bullhorn />
+            {{ t("Announcements") }}
+          </router-link>
+        </o-dropdown-item>
         <o-dropdown-item
           aria-role="listitem"
           has-link
@@ -359,6 +391,8 @@ import { useCreateReport } from "@/composition/apollo/report";
 import { useDeleteEvent } from "@/composition/apollo/event";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import ExternalParticipationButton from "./ExternalParticipationButton.vue";
+import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
+import Bullhorn from "vue-material-design-icons/Bullhorn.vue";
 
 const ShareEventModal = defineAsyncComponent(
   () => import("@/components/Event/ShareEventModal.vue")

src/router/event.ts

@@ -15,6 +15,7 @@ export enum EventRouteName {
   EDIT_EVENT = "EditEvent",
   DUPLICATE_EVENT = "DuplicateEvent",
   PARTICIPATIONS = "Participations",
+  ANNOUNCEMENTS = "ANNOUNCEMENTS",
   EVENT = "Event",
   EVENT_PARTICIPATE_WITH_ACCOUNT = "EVENT_PARTICIPATE_WITH_ACCOUNT",
   EVENT_PARTICIPATE_WITHOUT_ACCOUNT = "EVENT_PARTICIPATE_WITHOUT_ACCOUNT",
@@ -70,6 +71,13 @@ export const eventRoutes: RouteRecordRaw[] = [
     meta: { requiredAuth: true, announcer: { skip: true } },
     props: true,
   },
+  {
+    path: "/events/:eventId/announcements",
+    name: EventRouteName.ANNOUNCEMENTS,
+    component: () => import("../views/Event/AnnouncementView.vue"),
+    meta: { requiredAuth: true, announcer: { skip: true } },
+    props: true,
+  },
   {
     path: "/events/:uuid",
     name: EventRouteName.EVENT,

src/views/Event/AnnouncementView.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="container mx-auto" v-if="event">
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.MY_EVENTS, text: t('My events') },
+        {
+          name: RouteName.EVENT,
+          params: { uuid: event.uuid },
+          text: event.title,
+        },
+        {
+          name: RouteName.ANNOUNCEMENTS,
+          params: { uuid: event.uuid },
+          text: t('Announcements'),
+        },
+      ]"
+    />
+    <EventConversations :event="event" class="my-6" />
+    <NewPrivateMessage :event="event" />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@unhead/vue";
+import EventConversations from "../../components/Conversations/EventConversations.vue";
+import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
+import { useFetchEvent } from "@/composition/apollo/event";
+
+const props = defineProps<{
+  eventId: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const eventId = computed(() => props.eventId);
+
+const { event } = useFetchEvent(eventId);
+
+useHead({
+  title: computed(() =>
+    t("Announcements for {eventTitle}", { eventTitle: event.value?.title })
+  ),
+});
+</script>

src/views/Event/ParticipantsView.vue

@@ -252,8 +252,6 @@
         </div>
       </template>
     </o-table>
-    <EventConversations :event="event" class="my-6" />
-    <NewPrivateMessage :event="event" />
   </section>
 </template>
 
@@ -287,8 +285,6 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { Notifier } from "@/plugins/notifier";
 import Tag from "@/components/TagElement.vue";
 import { useHead } from "@unhead/vue";
-import EventConversations from "../../components/Conversations/EventConversations.vue";
-import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
 
 const PARTICIPANTS_PER_PAGE = 10;
 const MESSAGE_ELLIPSIS_LENGTH = 130;