Event components enhancements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-10 10:33:16 +02:00
parent dd8096507b
commit 8e59e2f06b
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
6 changed files with 309 additions and 308 deletions

View file

@ -22,7 +22,7 @@ export default class EventBanner extends Vue {
.banner-container {
display: flex;
justify-content: center;
height: 400px;
height: 30vh;
}
::v-deep img {
width: 100%;

View file

@ -24,7 +24,7 @@
<h3 class="title">{{ participation.event.title }}</h3>
</router-link>
</div>
<div class="participation-actor has-text-grey">
<div class="participation-actor">
<span>
<b-icon
icon="earth"
@ -50,17 +50,20 @@
"
>{{ participation.event.physicalAddress.locality }} -</span
>
<span>
<i18n tag="span" path="Organized by {name}">
<popover-actor-card
slot="name"
:actor="organizerActor"
:inline="true"
>
{{ organizerActor.displayName() }}
</popover-actor-card>
</i18n>
</span>
<i18n
tag="span"
path="Organized by {name}"
v-if="organizerActor.id !== currentActor.id"
>
<popover-actor-card
slot="name"
:actor="organizerActor"
:inline="true"
>
{{ organizerActor.displayName() }}
</popover-actor-card>
</i18n>
<span v-else>{{ $t("Organized by you") }}</span>
</div>
<div>
<span
@ -116,7 +119,9 @@
$tc(
"{count} requests waiting",
participation.event.participantStats.notApproved,
{ count: participation.event.participantStats.notApproved }
{
count: participation.event.participantStats.notApproved,
}
)
}}
</b-button>
@ -347,6 +352,7 @@ article.box {
.list-card {
display: flex;
align-items: center;
padding: 0 6px;
.actions {
padding-right: 7.5px;

View file

@ -23,7 +23,7 @@ export default class EventMetadataBlock extends Vue {
h2 {
font-size: 1.8rem;
font-weight: 500;
color: #f7ba30;
color: $violet;
}
div.eventMetadataBlock {

View file

@ -66,7 +66,9 @@ export default class OrganizerPicker extends Vue {
return this.value;
}
if (this.currentActor) {
return this.currentActor;
return this.identities.find(
(identity) => identity.id === this.currentActor.id
);
}
return undefined;
}

View file

@ -110,6 +110,7 @@ import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
import OrganizerPicker from "./OrganizerPicker.vue";
import {
CURRENT_ACTOR_CLIENT,
IDENTITIES,
LOGGED_USER_MEMBERSHIPS,
} from "../../graphql/actor";
import { Paginate } from "../../types/paginate";
@ -152,6 +153,7 @@ const MEMBER_ROLES = [
},
update: (data) => data.loggedUser.memberships,
},
identities: IDENTITIES,
},
})
export default class OrganizerPickerWrapper extends Vue {
@ -161,6 +163,8 @@ export default class OrganizerPickerWrapper extends Vue {
currentActor!: IPerson;
identities!: IPerson[];
isComponentModalActive = false;
@Prop({ type: Array, required: false, default: () => [] })
@ -200,7 +204,9 @@ export default class OrganizerPickerWrapper extends Vue {
return this.value;
}
if (this.currentActor) {
return this.currentActor;
return this.identities.find(
(identity) => identity.id === this.currentActor.id
);
}
return undefined;
}

View file

@ -1,299 +1,296 @@
<template>
<div class="container">
<transition appear name="fade" mode="out-in">
<div>
<div
class="header-picture"
v-if="event.picture"
:style="`background-image: url('${event.picture.url}')`"
/>
<div class="header-picture-default" v-else />
<section class="section intro">
<div class="columns">
<div class="column is-1-tablet">
<date-calendar-icon :date="event.beginsOn" />
</div>
<div class="column">
<h1 class="title" style="margin: 0">{{ event.title }}</h1>
<div class="organizer">
<span v-if="event.organizerActor && !event.attributedTo">
<popover-actor-card
:actor="event.organizerActor"
:inline="true"
<div class="wrapper">
<event-banner :picture="event.picture" />
<div class="intro-wrapper">
<div class="date-calendar-icon-wrapper">
<date-calendar-icon :date="event.beginsOn" />
</div>
<section class="intro">
<div class="columns">
<div class="column">
<h1 class="title" style="margin: 0">{{ event.title }}</h1>
<div class="organizer">
<span v-if="event.organizerActor && !event.attributedTo">
<popover-actor-card
:actor="event.organizerActor"
:inline="true"
>
<span>
{{
$t("By @{username}", {
username: usernameWithDomain(event.organizerActor),
})
}}
</span>
</popover-actor-card>
</span>
<span
v-else-if="
event.attributedTo &&
event.options.hideOrganizerWhenGroupEvent
"
>
<span>
{{
$t("By @{username}", {
username: usernameWithDomain(event.organizerActor),
})
}}
</span>
</popover-actor-card>
</span>
<span
v-else-if="
event.attributedTo &&
event.options.hideOrganizerWhenGroupEvent
"
>
<popover-actor-card
:actor="event.attributedTo"
:inline="true"
>
{{
$t("By @{group}", {
group: usernameWithDomain(event.attributedTo),
})
}}
</popover-actor-card>
</span>
<span v-else-if="event.organizerActor && event.attributedTo">
<i18n path="By {group}">
<popover-actor-card
:actor="event.attributedTo"
slot="group"
:inline="true"
>
{{
$t("By @{group}", {
group: usernameWithDomain(event.attributedTo),
})
}}
</popover-actor-card>
</span>
<span v-else-if="event.organizerActor && event.attributedTo">
<i18n path="By {group}">
<popover-actor-card
:actor="event.attributedTo"
slot="group"
:inline="true"
>
<router-link
:to="{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(
event.attributedTo
),
},
}"
>
{{
$t("@{group}", {
group: usernameWithDomain(event.attributedTo),
})
}}
</router-link>
</popover-actor-card>
</i18n>
</span>
</div>
<p class="tags" v-if="event.tags && event.tags.length > 0">
<router-link
v-for="tag in event.tags"
:key="tag.title"
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
>
<tag>{{ tag.title }}</tag>
</router-link>
</p>
<b-tag type="is-warning" size="is-medium" v-if="event.draft"
>{{ $t("Draft") }}
</b-tag>
<span
class="event-status"
v-if="event.status !== EventStatus.CONFIRMED"
>
<b-tag
type="is-warning"
v-if="event.status === EventStatus.TENTATIVE"
>{{ $t("Event to be confirmed") }}</b-tag
>
<b-tag
type="is-danger"
v-if="event.status === EventStatus.CANCELLED"
>{{ $t("Event cancelled") }}</b-tag
>
</span>
</div>
<div class="column is-3-tablet">
<participation-section
:participation="participations[0]"
:event="event"
:anonymousParticipation="anonymousParticipation"
@join-event="joinEvent"
@join-modal="isJoinModalActive = true"
@join-event-with-confirmation="joinEventWithConfirmation"
@confirm-leave="confirmLeave"
@cancel-anonymous-participation="cancelAnonymousParticipation"
/>
<div class="has-text-right">
<template class="visibility" v-if="!event.draft">
<p v-if="event.visibility === EventVisibility.PUBLIC">
{{ $t("Public event") }}
<b-icon icon="earth" />
</p>
<p v-if="event.visibility === EventVisibility.UNLISTED">
{{ $t("Private event") }}
<b-icon icon="link" />
</p>
</template>
<template v-if="!event.local && organizer">
<a :href="event.url">
<tag>{{ organizer.domain }}</tag>
</a>
</template>
<p>
<router-link
class="participations-link"
v-if="actorIsOrganizer && event.draft === false"
:to="{
name: RouteName.PARTICIPATIONS,
params: { eventId: event.uuid },
}"
>
<!-- We retire one because of the event creator who is a participant -->
<span v-if="event.options.maximumAttendeeCapacity">
{{
$tc(
"{available}/{capacity} available places",
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
{
available:
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
capacity: event.options.maximumAttendeeCapacity,
}
)
}}
</span>
<span v-else>
{{
$tc(
"No one is participating|One person participating|{going} people participating",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</router-link>
<span v-else>
<span v-if="event.options.maximumAttendeeCapacity">
{{
$tc(
"{available}/{capacity} available places",
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
{
available:
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
capacity: event.options.maximumAttendeeCapacity,
}
)
}}
</span>
<span v-else>
{{
$tc(
"No one is participating|One person participating|{going} people participating",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</span>
<b-tooltip
type="is-dark"
v-if="!event.local"
:label="
$t(
'The actual number of participants may differ, as this event is hosted on another instance.'
)
"
>
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
<b-icon icon="ticket-confirmation-outline" />
</p>
<b-dropdown position="is-bottom-left" aria-role="list">
<b-button
slot="trigger"
role="button"
icon-right="dots-horizontal"
>
{{ $t("Actions") }}
</b-button>
<b-dropdown-item
aria-role="listitem"
has-link
v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(
event.attributedTo
),
},
name: RouteName.EDIT_EVENT,
params: { eventId: event.uuid },
}"
>
{{
$t("@{group}", {
group: usernameWithDomain(event.attributedTo),
})
}}
{{ $t("Edit") }}
<b-icon icon="pencil" />
</router-link>
</popover-actor-card>
</i18n>
</span>
</div>
<p class="tags" v-if="event.tags && event.tags.length > 0">
<router-link
v-for="tag in event.tags"
:key="tag.title"
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
>
<tag>{{ tag.title }}</tag>
</router-link>
</p>
<b-tag type="is-warning" size="is-medium" v-if="event.draft"
>{{ $t("Draft") }}
</b-tag>
<span
class="event-status"
v-if="event.status !== EventStatus.CONFIRMED"
>
<b-tag
type="is-warning"
v-if="event.status === EventStatus.TENTATIVE"
>{{ $t("Event to be confirmed") }}</b-tag
>
<b-tag
type="is-danger"
v-if="event.status === EventStatus.CANCELLED"
>{{ $t("Event cancelled") }}</b-tag
>
</span>
</div>
<div class="column is-3-tablet">
<participation-section
:participation="participations[0]"
:event="event"
:anonymousParticipation="anonymousParticipation"
@join-event="joinEvent"
@join-modal="isJoinModalActive = true"
@join-event-with-confirmation="joinEventWithConfirmation"
@confirm-leave="confirmLeave"
@cancel-anonymous-participation="cancelAnonymousParticipation"
/>
<div class="has-text-right">
<template class="visibility" v-if="!event.draft">
<p v-if="event.visibility === EventVisibility.PUBLIC">
{{ $t("Public event") }}
<b-icon icon="earth" />
</p>
<p v-if="event.visibility === EventVisibility.UNLISTED">
{{ $t("Private event") }}
<b-icon icon="link" />
</p>
</template>
<template v-if="!event.local && organizer">
<a :href="event.url">
<tag>{{ organizer.domain }}</tag>
</a>
</template>
<p>
<router-link
class="participations-link"
v-if="actorIsOrganizer && event.draft === false"
:to="{
name: RouteName.PARTICIPATIONS,
params: { eventId: event.uuid },
}"
>
<!-- We retire one because of the event creator who is a participant -->
<span v-if="event.options.maximumAttendeeCapacity">
{{
$tc(
"{available}/{capacity} available places",
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
{
available:
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
capacity: event.options.maximumAttendeeCapacity,
}
)
}}
</span>
<span v-else>
{{
$tc(
"No one is participating|One person participating|{going} people participating",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</router-link>
<span v-else>
<span v-if="event.options.maximumAttendeeCapacity">
{{
$tc(
"{available}/{capacity} available places",
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
{
available:
event.options.maximumAttendeeCapacity -
event.participantStats.participant,
capacity: event.options.maximumAttendeeCapacity,
}
)
}}
</span>
<span v-else>
{{
$tc(
"No one is participating|One person participating|{going} people participating",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</span>
<b-tooltip
type="is-dark"
v-if="!event.local"
:label="
$t(
'The actual number of participants may differ, as this event is hosted on another instance.'
)
"
>
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
<b-icon icon="ticket-confirmation-outline" />
</p>
<b-dropdown position="is-bottom-left" aria-role="list">
<b-button
slot="trigger"
role="button"
icon-right="dots-horizontal"
>
{{ $t("Actions") }}
</b-button>
<b-dropdown-item
aria-role="listitem"
has-link
v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{
name: RouteName.EDIT_EVENT,
params: { eventId: event.uuid },
}"
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
has-link
v-if="actorIsOrganizer || event.draft"
>
{{ $t("Edit") }}
<b-icon icon="pencil" />
</router-link>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
has-link
v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{
name: RouteName.DUPLICATE_EVENT,
params: { eventId: event.uuid },
}"
<router-link
:to="{
name: RouteName.DUPLICATE_EVENT,
params: { eventId: event.uuid },
}"
>
{{ $t("Duplicate") }}
<b-icon icon="content-duplicate" />
</router-link>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="actorIsOrganizer || event.draft"
@click="openDeleteEventModalWrapper"
>
{{ $t("Duplicate") }}
<b-icon icon="content-duplicate" />
</router-link>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="actorIsOrganizer || event.draft"
@click="openDeleteEventModalWrapper"
>
{{ $t("Delete") }}
<b-icon icon="delete" />
</b-dropdown-item>
{{ $t("Delete") }}
<b-icon icon="delete" />
</b-dropdown-item>
<hr
class="dropdown-divider"
aria-role="menuitem"
v-if="actorIsOrganizer || event.draft"
/>
<b-dropdown-item
aria-role="listitem"
v-if="!event.draft"
@click="triggerShare()"
>
<span>
{{ $t("Share this event") }}
<b-icon icon="share" />
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
@click="downloadIcsEvent()"
v-if="!event.draft"
>
<span>
{{ $t("Add to my calendar") }}
<b-icon icon="calendar-plus" />
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="ableToReport"
@click="isReportModalActive = true"
>
<span>
{{ $t("Report") }}
<b-icon icon="flag" />
</span>
</b-dropdown-item>
</b-dropdown>
<hr
class="dropdown-divider"
aria-role="menuitem"
v-if="actorIsOrganizer || event.draft"
/>
<b-dropdown-item
aria-role="listitem"
v-if="!event.draft"
@click="triggerShare()"
>
<span>
{{ $t("Share this event") }}
<b-icon icon="share" />
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
@click="downloadIcsEvent()"
v-if="!event.draft"
>
<span>
{{ $t("Add to my calendar") }}
<b-icon icon="calendar-plus" />
</span>
</b-dropdown-item>
<b-dropdown-item
aria-role="listitem"
v-if="ableToReport"
@click="isReportModalActive = true"
>
<span>
{{ $t("Report") }}
<b-icon icon="flag" />
</span>
</b-dropdown-item>
</b-dropdown>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
<div class="event-description-wrapper">
<aside class="event-metadata">
<div class="sticky">
@ -662,6 +659,7 @@ import { IConfig } from "../../types/config.model";
import Subtitle from "../../components/Utils/Subtitle.vue";
import Tag from "../../components/Tag.vue";
import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
import EventBanner from "../../components/Event/EventBanner.vue";
import ActorCard from "../../components/Account/ActorCard.vue";
import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
import { IParticipant } from "../../types/participant.model";
@ -683,6 +681,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
Tag,
ActorCard,
PopoverActorCard,
EventBanner,
"map-leaflet": () =>
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
ShareEventModal: () =>
@ -1308,18 +1307,6 @@ export default class Event extends EventMixin {
opacity: 0;
}
.header-picture,
.header-picture-default {
height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header-picture-default {
background-image: url("../../../public/img/mobilizon_default_card.png");
}
div.sidebar {
display: flex;
flex-wrap: wrap;
@ -1353,7 +1340,7 @@ div.sidebar {
}
}
.intro.section {
.intro {
background: white;
.is-3-tablet {