Fix group order

Closes #1164

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-27 18:01:26 +02:00
parent 8761556bac
commit 0bc48560e8
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 81 additions and 56 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="events-wrapper"> <div class="flex flex-col gap-6">
<div class="flex flex-col gap-4" v-for="key of keys" :key="key"> <div class="flex flex-col gap-4" v-for="key of keys" :key="key">
<h2 class="month-name"> <h2 class="capitalize inline-block relative">
{{ monthName(groupEvents(key)[0]) }} {{ monthName(groupEvents(key)[0]) }}
</h2> </h2>
<event-minimalist-card <event-minimalist-card
@ -29,7 +29,7 @@ const props = withDefaults(
const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => { const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => { return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
const beginsOn = new Date(event.beginsOn); const beginsOn = new Date(event.beginsOn);
const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`; const month = `${beginsOn.getUTCFullYear()}-${beginsOn.getUTCMonth()}`;
const monthEvents = acc.get(month) || []; const monthEvents = acc.get(month) || [];
acc.set(month, [...monthEvents, event]); acc.set(month, [...monthEvents, event]);
return acc; return acc;
@ -37,9 +37,19 @@ const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
}); });
const keys = computed((): string[] => { const keys = computed((): string[] => {
return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => {
b.localeCompare(a) const aParams = a.split("-").map((x) => parseInt(x, 10)) as [
); number,
number
];
const aDate = new Date(...aParams);
const bParams = b.split("-").map((x) => parseInt(x, 10)) as [
number,
number
];
const bDate = new Date(...bParams);
return bDate.getTime() - aDate.getTime();
});
}); });
const groupEvents = (key: string): IEvent[] => { const groupEvents = (key: string): IEvent[] => {
@ -60,24 +70,4 @@ const monthName = (event: IEvent): string => {
grid-gap: 20px; grid-gap: 20px;
grid-template: 1fr; grid-template: 1fr;
} }
.month-group {
.month-name {
text-transform: capitalize;
text-transform: capitalize;
display: inline-block;
position: relative;
font-size: 1.3rem;
&::after {
position: absolute;
left: 0;
right: 0;
top: 100%;
content: "";
width: calc(100% + 30px);
height: 3px;
max-width: 150px;
}
}
}
</style> </style>

View File

@ -428,7 +428,6 @@ export const FETCH_GROUP_EVENTS = gql`
$organisedEventsLimit: Int $organisedEventsLimit: Int
) { ) {
group(preferredUsername: $name) { group(preferredUsername: $name) {
...ActorFragment
organizedEvents( organizedEvents(
afterDatetime: $afterDateTime afterDatetime: $afterDateTime
beforeDatetime: $beforeDateTime beforeDatetime: $beforeDateTime
@ -465,6 +464,7 @@ export const FETCH_GROUP_EVENTS = gql`
} }
total total
} }
...ActorFragment
} }
} }
${EVENT_OPTIONS_FRAGMENT} ${EVENT_OPTIONS_FRAGMENT}

View File

@ -10,21 +10,21 @@
{ {
name: RouteName.GROUP_EVENTS, name: RouteName.GROUP_EVENTS,
params: { preferredUsername: usernameWithDomain(group) }, params: { preferredUsername: usernameWithDomain(group) },
text: $t('Events'), text: t('Events'),
}, },
]" ]"
/> />
<section> <section>
<h1 class="" v-if="group"> <h1 class="" v-if="group">
{{ {{
$t("{group}'s events", { t("{group}'s events", {
group: displayName(group), group: displayName(group),
}) })
}} }}
</h1> </h1>
<p v-if="isCurrentActorMember"> <p v-if="isCurrentActorMember">
{{ {{
$t( t(
"When a moderator from the group creates an event and attributes it to the group, it will show up here." "When a moderator from the group creates an event and attributes it to the group, it will show up here."
) )
}} }}
@ -37,15 +37,15 @@
name: RouteName.CREATE_EVENT, name: RouteName.CREATE_EVENT,
query: { actorId: group.id }, query: { actorId: group.id },
}" }"
>{{ $t("+ Create an event") }}</o-button >{{ t("+ Create an event") }}</o-button
> >
<o-loading v-model:active="groupLoading"></o-loading> <o-loading v-model:active="groupLoading"></o-loading>
<section v-if="group"> <section v-if="group">
<h2 class="text-2xl"> <h2 class="text-2xl">
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }} {{ showPassedEvents ? t("Past events") : t("Upcoming events") }}
</h2> </h2>
<o-switch class="mb-4" v-model="showPassedEvents">{{ <o-switch class="mb-4" v-model="showPassedEvents">{{
$t("Past events") t("Past events")
}}</o-switch> }}</o-switch>
<grouped-multi-event-minimalist-card <grouped-multi-event-minimalist-card
:events="group.organizedEvents.elements" :events="group.organizedEvents.elements"
@ -60,18 +60,18 @@
:inline="true" :inline="true"
:center="true" :center="true"
> >
{{ $t("No events found") }} {{ t("No events found") }}
<template v-if="group.domain !== null"> <template v-if="group.domain !== null">
<div class="mt-4"> <div class="mt-4">
<p> <p>
{{ {{
$t( t(
"This group is a remote group, it's possible the original instance has more informations." "This group is a remote group, it's possible the original instance has more informations."
) )
}} }}
</p> </p>
<o-button variant="text" tag="a" :href="group.url"> <o-button variant="text" tag="a" :href="group.url">
{{ $t("View the group profile on the original instance") }} {{ t("View the group profile on the original instance") }}
</o-button> </o-button>
</div> </div>
</template> </template>
@ -79,12 +79,12 @@
<o-pagination <o-pagination
class="mt-4" class="mt-4"
:total="group.organizedEvents.total" :total="group.organizedEvents.total"
v-model="page" v-model:current="page"
:per-page="EVENTS_PAGE_LIMIT" :per-page="EVENTS_PAGE_LIMIT"
:aria-next-label="$t('Next page')" :aria-next-label="t('Next page')"
:aria-previous-label="$t('Previous page')" :aria-previous-label="t('Previous page')"
:aria-page-label="$t('Page')" :aria-page-label="t('Page')"
:aria-current-label="$t('Current page')" :aria-current-label="t('Current page')"
> >
</o-pagination> </o-pagination>
</section> </section>
@ -97,10 +97,15 @@ import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEven
import { PERSON_MEMBERSHIPS } from "@/graphql/actor"; import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { FETCH_GROUP_EVENTS } from "@/graphql/event"; import { FETCH_GROUP_EVENTS } from "@/graphql/event";
import EmptyContent from "../../components/Utils/EmptyContent.vue"; import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { displayName, IPerson, usernameWithDomain } from "../../types/actor"; import {
displayName,
IGroup,
IPerson,
usernameWithDomain,
} from "../../types/actor";
import { useQuery } from "@vue/apollo-composable"; import { useQuery } from "@vue/apollo-composable";
import { useCurrentActorClient } from "@/composition/apollo/actor"; import { useCurrentActorClient } from "@/composition/apollo/actor";
import { computed } from "vue"; import { computed, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { import {
booleanTransformer, booleanTransformer,
@ -120,7 +125,10 @@ const { result: membershipsResult } = useQuery<{
}>( }>(
PERSON_MEMBERSHIPS, PERSON_MEMBERSHIPS,
() => ({ id: currentActor.value?.id }), () => ({ id: currentActor.value?.id }),
() => ({ enabled: currentActor.value?.id !== undefined }) () => ({
enabled:
currentActor.value?.id !== undefined && currentActor.value?.id !== null,
})
); );
const memberships = computed( const memberships = computed(
() => membershipsResult.value?.person.memberships?.elements () => membershipsResult.value?.person.memberships?.elements
@ -134,21 +142,48 @@ const showPassedEvents = useRouteQuery(
booleanTransformer booleanTransformer
); );
const { result: groupResult, loading: groupLoading } = useQuery( /**
FETCH_GROUP_EVENTS, * Why is the following hack needed? Page doesn't want to be reactive!
() => ({ * TODO: investigate
name: route.params.preferredUsername, */
const variables = computed(() => ({
name: route.params.preferredUsername as string,
beforeDateTime: showPassedEvents.value ? new Date() : null, beforeDateTime: showPassedEvents.value ? new Date() : null,
afterDateTime: showPassedEvents.value ? null : new Date(), afterDateTime: showPassedEvents.value ? null : new Date(),
organisedEventsPage: page.value, organisedEventsPage: page.value,
organisedEventsLimit: EVENTS_PAGE_LIMIT, organisedEventsLimit: EVENTS_PAGE_LIMIT,
}) }));
watch(
variables,
(newVariables) => {
refetch(newVariables);
},
{ deep: true }
); );
const {
result: groupResult,
loading: groupLoading,
refetch: refetch,
} = useQuery<
{
group: IGroup;
},
{
name: string;
beforeDateTime: Date | null;
afterDateTime: Date | null;
organisedEventsPage: number;
organisedEventsLimit: number;
}
>(FETCH_GROUP_EVENTS, variables);
const group = computed(() => groupResult.value?.group); const group = computed(() => groupResult.value?.group);
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
useHead({ useHead({
title: t("{group} events", { title: () =>
t("{group} events", {
group: displayName(group.value), group: displayName(group.value),
}), }),
}); });