fix(announcements): load group announcements

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

src/components/Conversations/AnnouncementListItem.vue

@@ -0,0 +1,97 @@
+<template>
+  <router-link
+    class="flex gap-4 w-full items-center px-2 py-4 border-b-stone-200 border-b bg-white dark:bg-transparent my-2 rounded"
+    dir="auto"
+    :to="{
+      name: RouteName.CONVERSATION,
+      params: { id: announcement.conversationParticipantId },
+    }"
+  >
+    <div class="overflow-hidden flex-1">
+      <div class="flex items-center justify-between">
+        <p>
+          {{
+            t("Sent to {count} participants", otherParticipants.length, {
+              count: otherParticipants.length,
+            })
+          }}
+        </p>
+        <div class="inline-flex items-center px-1.5">
+          <time
+            class="whitespace-nowrap"
+            :datetime="actualDate.toString()"
+            :title="formatDateTimeString(actualDate)"
+          >
+            {{ distanceToNow }}</time
+          >
+        </div>
+      </div>
+      <div
+        class="line-clamp-4 my-1"
+        dir="auto"
+        v-if="!announcement.lastComment?.deletedAt"
+      >
+        {{ htmlTextEllipsis }}
+      </div>
+      <div v-else class="">
+        {{ t("[This comment has been deleted]") }}
+      </div>
+    </div>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import { formatDistanceToNowStrict } from "date-fns";
+import { IConversation } from "../../types/conversation";
+import RouteName from "../../router/name";
+import { computed, inject } from "vue";
+import { formatDateTimeString } from "../../filters/datetime";
+import type { Locale } from "date-fns";
+import { useI18n } from "vue-i18n";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+
+const props = defineProps<{
+  announcement: IConversation;
+}>();
+
+const announcement = computed(() => props.announcement);
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+const { t } = useI18n({ useScope: "global" });
+
+const distanceToNow = computed(() => {
+  return (
+    formatDistanceToNowStrict(new Date(actualDate.value), {
+      locale: dateFnsLocale,
+    }) ?? t("Right now")
+  );
+});
+
+const htmlTextEllipsis = computed((): string => {
+  const element = document.createElement("div");
+  if (announcement.value.lastComment && announcement.value.lastComment.text) {
+    element.innerHTML = announcement.value.lastComment.text
+      .replace(/<br\s*\/?>/gi, " ")
+      .replace(/<p>/gi, " ");
+  }
+  return element.innerText;
+});
+
+const actualDate = computed((): string => {
+  if (
+    announcement.value.updatedAt === announcement.value.insertedAt &&
+    announcement.value.lastComment?.publishedAt
+  ) {
+    return announcement.value.lastComment.publishedAt;
+  }
+  return announcement.value.updatedAt;
+});
+
+const { currentActor } = useCurrentActorClient();
+
+const otherParticipants = computed(
+  () =>
+    announcement.value?.participants.filter(
+      (participant) => participant.id !== currentActor.value?.id
+    ) ?? []
+);
+</script>

src/components/Conversations/EventConversations.vue

@@ -2,18 +2,10 @@
   <div class="container mx-auto section">
     <breadcrumbs-nav :links="[]" />
     <section>
-      <h1>{{ t("Conversations") }}</h1>
-      <!-- <o-button
-        tag="router-link"
-        :to="{
-          name: RouteName.CREATE_CONVERSATION,
-          params: { uuid: event.uuid },
-        }"
-        >{{ t("New private message") }}</o-button
-      > -->
+      <h1>{{ t("Announcements") }}</h1>
       <div v-if="conversations.elements.length > 0">
-        <conversation-list-item
-          :conversation="conversation"
+        <announcement-list-item
+          :announcement="conversation"
           v-for="conversation in conversations.elements"
           :key="conversation.id"
         />
@@ -30,15 +22,14 @@
         >
         </o-pagination>
       </div>
-      <empty-content v-else icon="chat">
-        {{ t("There's no conversations yet") }}
+      <empty-content v-else icon="bullhorn" inline>
+        {{ t("There's no announcements yet") }}
       </empty-content>
     </section>
   </div>
 </template>
 <script lang="ts" setup>
-import ConversationListItem from "../../components/Conversations/ConversationListItem.vue";
-// import RouteName from "../../router/name";
+import AnnouncementListItem from "../../components/Conversations/AnnouncementListItem.vue";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { useI18n } from "vue-i18n";
 import { useRouteQuery, integerTransformer } from "vue-use-route-query";

src/components/Participation/NewPrivateMessage.vue

@@ -42,7 +42,12 @@
     >
       {{ error }}
     </o-notification>
-    <o-button class="mt-3" nativeType="submit">{{ t("Send") }}</o-button>
+    <o-button
+      class="mt-3"
+      nativeType="submit"
+      :disabled="selectedRoles.length == 0"
+      >{{ t("Send") }}</o-button
+    >
   </form>
 </template>