From d485c7e113c73f988c18b0a6f42f3526d3dab1f8 Mon Sep 17 00:00:00 2001
From: Laurent Gay <laurent@sleto.fr>
Date: Wed, 4 Dec 2024 12:05:17 +0100
Subject: [PATCH] #1591: display end date of events in group page

---
 src/components/Event/EventMinimalistCard.vue | 41 +++++++++++++++++++-
 src/graphql/group.ts                         |  1 +
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/Event/EventMinimalistCard.vue b/src/components/Event/EventMinimalistCard.vue
index 7b93424fe..ba563e18a 100644
--- a/src/components/Event/EventMinimalistCard.vue
+++ b/src/components/Event/EventMinimalistCard.vue
@@ -6,8 +6,23 @@
   >
     <div class="event-preview mr-0 ml-0">
       <div class="relative w-full">
-        <div class="flex absolute bottom-2 left-2 z-10 date-component">
+        <div
+          class="flex absolute bottom-2 left-2 z-10 date-component"
+          :class="{
+            'calendar-double': isDifferentBeginsEndsDate,
+          }"
+        >
           <date-calendar-icon :date="event.beginsOn.toString()" :small="true" />
+          <MenuDown
+            :small="true"
+            class="left-3 relative"
+            v-if="isDifferentBeginsEndsDate"
+          />
+          <date-calendar-icon
+            :date="event.endsOn?.toString()"
+            :small="true"
+            v-if="isDifferentBeginsEndsDate"
+          />
         </div>
         <lazy-image-wrapper
           :picture="event.picture"
@@ -126,6 +141,7 @@
 <script lang="ts" setup>
 import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import MenuDown from "vue-material-design-icons/MenuDown.vue";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
@@ -134,18 +150,39 @@ import Video from "vue-material-design-icons/Video.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
 import Tag from "@/components/TagElement.vue";
+import { computed, inject } from "vue";
+import type { Locale } from "date-fns";
+import { formatDateForEvent } from "@/utils/datetime";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     event: IEvent;
     showOrganizer?: boolean;
   }>(),
   { showOrganizer: false }
 );
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const isDifferentBeginsEndsDate = computed(() => {
+  if (!dateFnsLocale) return;
+  const beginsOnStr = formatDateForEvent(
+    new Date(props.event.beginsOn),
+    dateFnsLocale
+  );
+  const endsOnStr = props.event.endsOn
+    ? formatDateForEvent(new Date(props.event.endsOn), dateFnsLocale)
+    : null;
+  return endsOnStr && endsOnStr != beginsOnStr;
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 
+.calendar-double {
+  display: block;
+}
+
 .event-minimalist-card-wrapper {
   // display: grid;
   // grid-gap: 5px 10px;
diff --git a/src/graphql/group.ts b/src/graphql/group.ts
index d09959cbb..983f8e9f5 100644
--- a/src/graphql/group.ts
+++ b/src/graphql/group.ts
@@ -148,6 +148,7 @@ export const GROUP_BASIC_FIELDS_FRAGMENTS = gql`
         uuid
         title
         beginsOn
+        endsOn
         status
         draft
         longEvent