feat(front): add dedicated page and route for event announcements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-12-01 11:07:01 +01:00
parent 11e42d6601
commit d831dff9fc
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
4 changed files with 89 additions and 4 deletions

View File

@ -107,6 +107,38 @@
{{ t("Actions") }} {{ t("Actions") }}
</o-button> </o-button>
</template> </template>
<o-dropdown-item
aria-role="listitem"
has-link
v-if="canManageEvent || !event?.draft"
>
<router-link
class="flex gap-1"
:to="{
name: RouteName.PARTICIPATIONS,
params: { eventId: event?.uuid },
}"
>
<AccountMultiple />
{{ t("Participations") }}
</router-link>
</o-dropdown-item>
<o-dropdown-item
aria-role="listitem"
has-link
v-if="canManageEvent || !event?.draft"
>
<router-link
class="flex gap-1"
:to="{
name: RouteName.ANNOUNCEMENTS,
params: { eventId: event?.uuid },
}"
>
<Bullhorn />
{{ t("Announcements") }}
</router-link>
</o-dropdown-item>
<o-dropdown-item <o-dropdown-item
aria-role="listitem" aria-role="listitem"
has-link has-link
@ -359,6 +391,8 @@ import { useCreateReport } from "@/composition/apollo/report";
import { useDeleteEvent } from "@/composition/apollo/event"; import { useDeleteEvent } from "@/composition/apollo/event";
import { useProgrammatic } from "@oruga-ui/oruga-next"; import { useProgrammatic } from "@oruga-ui/oruga-next";
import ExternalParticipationButton from "./ExternalParticipationButton.vue"; import ExternalParticipationButton from "./ExternalParticipationButton.vue";
import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
import Bullhorn from "vue-material-design-icons/Bullhorn.vue";
const ShareEventModal = defineAsyncComponent( const ShareEventModal = defineAsyncComponent(
() => import("@/components/Event/ShareEventModal.vue") () => import("@/components/Event/ShareEventModal.vue")

View File

@ -15,6 +15,7 @@ export enum EventRouteName {
EDIT_EVENT = "EditEvent", EDIT_EVENT = "EditEvent",
DUPLICATE_EVENT = "DuplicateEvent", DUPLICATE_EVENT = "DuplicateEvent",
PARTICIPATIONS = "Participations", PARTICIPATIONS = "Participations",
ANNOUNCEMENTS = "ANNOUNCEMENTS",
EVENT = "Event", EVENT = "Event",
EVENT_PARTICIPATE_WITH_ACCOUNT = "EVENT_PARTICIPATE_WITH_ACCOUNT", EVENT_PARTICIPATE_WITH_ACCOUNT = "EVENT_PARTICIPATE_WITH_ACCOUNT",
EVENT_PARTICIPATE_WITHOUT_ACCOUNT = "EVENT_PARTICIPATE_WITHOUT_ACCOUNT", EVENT_PARTICIPATE_WITHOUT_ACCOUNT = "EVENT_PARTICIPATE_WITHOUT_ACCOUNT",
@ -70,6 +71,13 @@ export const eventRoutes: RouteRecordRaw[] = [
meta: { requiredAuth: true, announcer: { skip: true } }, meta: { requiredAuth: true, announcer: { skip: true } },
props: true, props: true,
}, },
{
path: "/events/:eventId/announcements",
name: EventRouteName.ANNOUNCEMENTS,
component: () => import("../views/Event/AnnouncementView.vue"),
meta: { requiredAuth: true, announcer: { skip: true } },
props: true,
},
{ {
path: "/events/:uuid", path: "/events/:uuid",
name: EventRouteName.EVENT, name: EventRouteName.EVENT,

View File

@ -0,0 +1,47 @@
<template>
<section class="container mx-auto" v-if="event">
<breadcrumbs-nav
:links="[
{ name: RouteName.MY_EVENTS, text: t('My events') },
{
name: RouteName.EVENT,
params: { uuid: event.uuid },
text: event.title,
},
{
name: RouteName.ANNOUNCEMENTS,
params: { uuid: event.uuid },
text: t('Announcements'),
},
]"
/>
<EventConversations :event="event" class="my-6" />
<NewPrivateMessage :event="event" />
</section>
</template>
<script lang="ts" setup>
import RouteName from "@/router/name";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useHead } from "@unhead/vue";
import EventConversations from "../../components/Conversations/EventConversations.vue";
import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
import { useFetchEvent } from "@/composition/apollo/event";
const props = defineProps<{
eventId: string;
}>();
const { t } = useI18n({ useScope: "global" });
const eventId = computed(() => props.eventId);
const { event } = useFetchEvent(eventId);
useHead({
title: computed(() =>
t("Announcements for {eventTitle}", { eventTitle: event.value?.title })
),
});
</script>

View File

@ -252,8 +252,6 @@
</div> </div>
</template> </template>
</o-table> </o-table>
<EventConversations :event="event" class="my-6" />
<NewPrivateMessage :event="event" />
</section> </section>
</template> </template>
@ -287,8 +285,6 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
import { Notifier } from "@/plugins/notifier"; import { Notifier } from "@/plugins/notifier";
import Tag from "@/components/TagElement.vue"; import Tag from "@/components/TagElement.vue";
import { useHead } from "@unhead/vue"; import { useHead } from "@unhead/vue";
import EventConversations from "../../components/Conversations/EventConversations.vue";
import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
const PARTICIPANTS_PER_PAGE = 10; const PARTICIPANTS_PER_PAGE = 10;
const MESSAGE_ELLIPSIS_LENGTH = 130; const MESSAGE_ELLIPSIS_LENGTH = 130;