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