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>
<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">
<h2 class="month-name">
<h2 class="capitalize inline-block relative">
{{ monthName(groupEvents(key)[0]) }}
</h2>
<event-minimalist-card
@ -29,7 +29,7 @@ const props = withDefaults(
const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
const beginsOn = new Date(event.beginsOn);
const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
const month = `${beginsOn.getUTCFullYear()}-${beginsOn.getUTCMonth()}`;
const monthEvents = acc.get(month) || [];
acc.set(month, [...monthEvents, event]);
return acc;
@ -37,9 +37,19 @@ const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
});
const keys = computed((): string[] => {
return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) =>
b.localeCompare(a)
);
return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => {
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[] => {
@ -60,24 +70,4 @@ const monthName = (event: IEvent): string => {
grid-gap: 20px;
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>

View file

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

View file

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