fix(frontend): my events page, handle start date correctly
This commit is contained in:
parent
cde54249a9
commit
e41ecd377f
|
@ -23,10 +23,27 @@
|
||||||
<div
|
<div
|
||||||
class="rounded p-3 flex-auto md:flex-none bg-zinc-300 dark:bg-zinc-700"
|
class="rounded p-3 flex-auto md:flex-none bg-zinc-300 dark:bg-zinc-700"
|
||||||
>
|
>
|
||||||
<o-field>
|
<o-field
|
||||||
<o-switch v-model="showUpcoming">{{
|
class="date-filter"
|
||||||
showUpcoming ? t("Upcoming events") : t("Past events")
|
expanded
|
||||||
}}</o-switch>
|
:label="
|
||||||
|
showUpcoming
|
||||||
|
? t('Showing events starting on')
|
||||||
|
: t('Showing events before')
|
||||||
|
"
|
||||||
|
labelFor="events-start-datepicker"
|
||||||
|
>
|
||||||
|
<o-datepicker
|
||||||
|
v-model="datePick"
|
||||||
|
:first-day-of-week="firstDayOfWeek"
|
||||||
|
id="events-start-datepicker"
|
||||||
|
/>
|
||||||
|
<o-button
|
||||||
|
@click="datePick = new Date()"
|
||||||
|
class="reset-area !h-auto"
|
||||||
|
icon-left="close"
|
||||||
|
:title="t('Clear date filter field')"
|
||||||
|
/>
|
||||||
</o-field>
|
</o-field>
|
||||||
<o-field v-if="showUpcoming">
|
<o-field v-if="showUpcoming">
|
||||||
<o-checkbox v-model="showDrafts">{{ t("Drafts") }}</o-checkbox>
|
<o-checkbox v-model="showDrafts">{{ t("Drafts") }}</o-checkbox>
|
||||||
|
@ -50,28 +67,6 @@
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</p>
|
</p>
|
||||||
<o-field
|
|
||||||
class="date-filter"
|
|
||||||
expanded
|
|
||||||
:label="
|
|
||||||
showUpcoming
|
|
||||||
? t('Showing events starting on')
|
|
||||||
: t('Showing events before')
|
|
||||||
"
|
|
||||||
labelFor="events-start-datepicker"
|
|
||||||
>
|
|
||||||
<o-datepicker
|
|
||||||
v-model="dateFilter"
|
|
||||||
:first-day-of-week="firstDayOfWeek"
|
|
||||||
id="events-start-datepicker"
|
|
||||||
/>
|
|
||||||
<o-button
|
|
||||||
@click="dateFilter = new Date()"
|
|
||||||
class="reset-area !h-auto"
|
|
||||||
icon-left="close"
|
|
||||||
:title="t('Clear date filter field')"
|
|
||||||
/>
|
|
||||||
</o-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 min-w-[300px]">
|
<div class="flex-1 min-w-[300px]">
|
||||||
<section
|
<section
|
||||||
|
@ -250,27 +245,43 @@ const futurePage = ref(1);
|
||||||
const pastPage = ref(1);
|
const pastPage = ref(1);
|
||||||
const limit = ref(10);
|
const limit = ref(10);
|
||||||
|
|
||||||
|
function startOfDay(d: Date): string {
|
||||||
|
const pad = (n: int): string => {
|
||||||
|
return (n > 9 ? "" : "0") + n.toString();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
d.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
pad(d.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
pad(d.getDate()) +
|
||||||
|
"T00:00:00Z"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const showUpcoming = useRouteQuery("showUpcoming", true, booleanTransformer);
|
const showUpcoming = useRouteQuery("showUpcoming", true, booleanTransformer);
|
||||||
const showDrafts = useRouteQuery("showDrafts", true, booleanTransformer);
|
const showDrafts = useRouteQuery("showDrafts", true, booleanTransformer);
|
||||||
const showAttending = useRouteQuery("showAttending", true, booleanTransformer);
|
const showAttending = useRouteQuery("showAttending", true, booleanTransformer);
|
||||||
const showMyGroups = useRouteQuery("showMyGroups", false, booleanTransformer);
|
const showMyGroups = useRouteQuery("showMyGroups", false, booleanTransformer);
|
||||||
const dateFilter = useRouteQuery("dateFilter", new Date(), {
|
const dateFilter = useRouteQuery("dateFilter", startOfDay(new Date()), {
|
||||||
fromQuery(query) {
|
fromQuery(query) {
|
||||||
if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
|
if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
|
||||||
return new Date(`${query}T00:00:00Z`);
|
return `${query}T00:00:00Z`;
|
||||||
}
|
}
|
||||||
return new Date();
|
return startOfDay(new Date());
|
||||||
},
|
},
|
||||||
toQuery(value: Date) {
|
toQuery(value: string) {
|
||||||
const pad = (number: number) => {
|
return value.slice(0, 10);
|
||||||
if (number < 10) {
|
},
|
||||||
return "0" + number;
|
});
|
||||||
}
|
|
||||||
return number;
|
// bridge between datepicker expecting a Date object and dateFilter being a string
|
||||||
};
|
const datePick = computed({
|
||||||
return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(
|
get: () => {
|
||||||
value.getDate()
|
return new Date(dateFilter.value);
|
||||||
)}`;
|
},
|
||||||
|
set: (d: Date) => {
|
||||||
|
dateFilter.value = startOfDay(d);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -323,10 +334,7 @@ const pastParticipations = computed(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const monthlyEvents = (
|
const monthlyEvents = (elements: Eventable[]): Map<string, Eventable[]> => {
|
||||||
elements: Eventable[],
|
|
||||||
revertSort = false
|
|
||||||
): Map<string, Eventable[]> => {
|
|
||||||
const res = elements.filter((element: Eventable) => {
|
const res = elements.filter((element: Eventable) => {
|
||||||
if ("role" in element) {
|
if ("role" in element) {
|
||||||
return (
|
return (
|
||||||
|
@ -336,19 +344,12 @@ const monthlyEvents = (
|
||||||
}
|
}
|
||||||
return element.beginsOn != null;
|
return element.beginsOn != null;
|
||||||
});
|
});
|
||||||
if (revertSort) {
|
// sort by start date, ascending
|
||||||
res.sort((a: Eventable, b: Eventable) => {
|
res.sort((a: Eventable, b: Eventable) => {
|
||||||
const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
|
const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
|
||||||
const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
|
const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
|
||||||
return new Date(bTime).getTime() - new Date(aTime).getTime();
|
return new Date(aTime).getTime() - new Date(bTime).getTime();
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
res.sort((a: Eventable, b: Eventable) => {
|
|
||||||
const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
|
|
||||||
const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
|
|
||||||
return new Date(aTime).getTime() - new Date(bTime).getTime();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
|
return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
|
||||||
const month = new Date(
|
const month = new Date(
|
||||||
"role" in element ? element.event.beginsOn : element.beginsOn
|
"role" in element ? element.event.beginsOn : element.beginsOn
|
||||||
|
|
Loading…
Reference in a new issue