hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix lint issues

Browse Source 
And disable eslint when building in prod mode

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-11-30 10:24:11 +01:00
parent da42522073
commit 2d541f2e32
161 changed files with 3869 additions and 1236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
js/src/views/Event/Edit.vue
View File

@@ -16,8 +16,17 @@
:defaultImage="event.picture"
/>
<b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
<b-input size="is-large" aria-required="true" required v-model="event.title" />
<b-field
:label="$t('Title')"
:type="checkTitleLength[0]"
:message="checkTitleLength[1]"
>
<b-input
size="is-large"
aria-required="true"
required
v-model="event.title"
/>
</b-field>
<tag-input v-model="event.tags" :data="tags" path="title" />
@@ -41,7 +50,12 @@
</div>
<b-field :label="$t('Website / URL')">
<b-input icon="link" type="url" v-model="event.onlineAddress" placeholder="URL" />
<b-input
icon="link"
type="url"
v-model="event.onlineAddress"
placeholder="URL"
/>
</b-field>
<subtitle>{{ $t("Organizers") }}</subtitle>
@@ -55,18 +69,28 @@
/>
</b-field>
<p v-if="!event.attributedTo.id || attributedToEqualToOrganizerActor">
{{ $t("The event will show as attributed to your personal profile.") }}
{{
$t("The event will show as attributed to your personal profile.")
}}
</p>
<p v-else>
<span>{{ $t("The event will show as attributed to this group.") }}</span>
<span>{{
$t("The event will show as attributed to this group.")
}}</span>
<span
v-if="event.contacts && event.contacts.length"
v-html="
$tc('<b>{contact}</b> will be displayed as contact.', event.contacts.length, {
contact: formatList(
event.contacts.map((contact) => displayNameAndUsername(contact))
),
})
$tc(
'<b>{contact}</b> will be displayed as contact.',
event.contacts.length,
{
contact: formatList(
event.contacts.map((contact) =>
displayNameAndUsername(contact)
)
),
}
)
"
/>
</p>
@@ -96,11 +120,21 @@
</b-radio>
</div>-->
<div class="field" v-if="config && config.anonymous.participation.allowed">
<div
class="field"
v-if="config && config.anonymous.participation.allowed"
>
<label class="label">{{ $t("Anonymous participations") }}</label>
<b-switch v-model="event.options.anonymousParticipation">
{{ $t("I want to allow people to participate without an account.") }}
<small v-if="config.anonymous.participation.validation.email.confirmationRequired">
{{
$t("I want to allow people to participate without an account.")
}}
<small
v-if="
config.anonymous.participation.validation.email
.confirmationRequired
"
>
<br />
{{
$t(
@@ -120,7 +154,9 @@
<div class="field">
<label class="label">{{ $t("Number of places") }}</label>
<b-switch v-model="limitedPlaces">{{ $t("Limited number of places") }}</b-switch>
<b-switch v-model="limitedPlaces">{{
$t("Limited number of places")
}}</b-switch>
</div>
<div class="box" v-if="limitedPlaces">
@@ -225,7 +261,11 @@
</b-field>
</section>
<footer class="modal-card-foot">
<button class="button" type="button" @click="dateSettingsIsOpen = false">
<button
class="button"
type="button"
@click="dateSettingsIsOpen = false"
>
{{ $t("OK") }}
</button>
</footer>
@@ -243,11 +283,15 @@
<div class="container">
<div class="navbar-menu">
<div class="navbar-start">
<span class="navbar-item" v-if="isEventModified">{{ $t("Unsaved changes") }}</span>
<span class="navbar-item" v-if="isEventModified">{{
$t("Unsaved changes")
}}</span>
</div>
<div class="navbar-end">
<span class="navbar-item">
<b-button type="is-text" @click="confirmGoBack">{{ $t("Cancel") }}</b-button>
<b-button type="is-text" @click="confirmGoBack">{{
$t("Cancel")
}}</b-button>
</span>
<!-- If an event has been published we can't make it draft anymore -->
<span class="navbar-item" v-if="event.draft === true">
@@ -266,8 +310,12 @@
@click="createOrUpdatePublish"
@keyup.enter="createOrUpdatePublish"
>
<span v-if="isUpdate === false">{{ $t("Create my event") }}</span>
<span v-else-if="event.draft === true">{{ $t("Publish") }}</span>
<span v-if="isUpdate === false">{{
$t("Create my event")
}}</span>
<span v-else-if="event.draft === true">{{
$t("Publish")
}}</span>
<span v-else>{{ $t("Update my event") }}</span>
</b-button>
</span>
@@ -376,7 +424,11 @@ import {
import { IPerson, Person, displayNameAndUsername } from "../../types/actor";
import { TAGS } from "../../graphql/tags";
import { ITag } from "../../types/tag.model";
import { buildFileFromIMedia, buildFileVariable, readFileAsync } from "../../utils/image";
import {
buildFileFromIMedia,
buildFileVariable,
readFileAsync,
} from "../../utils/image";
import RouteName from "../../router/name";
import "intersection-observer";
import { CONFIG } from "../../graphql/config";
@@ -419,7 +471,9 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: (this.isUpdate ? this.$t("Event edition") : this.$t("Event creation")) as string,
title: (this.isUpdate
? this.$t("Event edition")
: this.$t("Event creation")) as string,
// all titles will be injected into this template
titleTemplate: "%s | Mobilizon",
};
@@ -546,8 +600,15 @@ export default class EditEvent extends Vue {
@Watch("event")
setInitialData(): void {
if (this.isUpdate && this.unmodifiedEvent === undefined && this.event && this.event.uuid) {
this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
if (
this.isUpdate &&
this.unmodifiedEvent === undefined &&
this.event &&
this.event.uuid
) {
this.unmodifiedEvent = JSON.parse(
JSON.stringify(this.event.toEditJSON())
);
}
}
@@ -575,8 +636,10 @@ export default class EditEvent extends Vue {
const { data } = await this.$apollo.mutate({
mutation: CREATE_EVENT,
variables,
update: (store, { data: { createEvent } }) => this.postCreateOrUpdate(store, createEvent),
refetchQueries: ({ data: { createEvent } }) => this.postRefetchQueries(createEvent),
update: (store, { data: { createEvent } }) =>
this.postCreateOrUpdate(store, createEvent),
refetchQueries: ({ data: { createEvent } }) =>
this.postRefetchQueries(createEvent),
});
this.$buefy.notification.open({
@@ -606,8 +669,10 @@ export default class EditEvent extends Vue {
await this.$apollo.mutate({
mutation: EDIT_EVENT,
variables,
update: (store, { data: { updateEvent } }) => this.postCreateOrUpdate(store, updateEvent),
refetchQueries: ({ data: { updateEvent } }) => this.postRefetchQueries(updateEvent),
update: (store, { data: { updateEvent } }) =>
this.postCreateOrUpdate(store, updateEvent),
refetchQueries: ({ data: { updateEvent } }) =>
this.postRefetchQueries(updateEvent),
});
this.$buefy.notification.open({
@@ -774,9 +839,13 @@ export default class EditEvent extends Vue {
try {
if (this.event.picture && this.pictureFile) {
const oldPictureFile = (await buildFileFromIMedia(this.event.picture)) as File;
const oldPictureFile = (await buildFileFromIMedia(
this.event.picture
)) as File;
const oldPictureFileContent = await readFileAsync(oldPictureFile);
const newPictureFileContent = await readFileAsync(this.pictureFile as File);
const newPictureFileContent = await readFileAsync(
this.pictureFile as File
);
if (oldPictureFileContent === newPictureFileContent) {
res.picture = { mediaId: this.event.picture.id };
}
@@ -814,7 +883,8 @@ export default class EditEvent extends Vue {
this.event.options.showRemainingAttendeeCapacity = false;
} else {
this.event.options.maximumAttendeeCapacity =
this.event.options.maximumAttendeeCapacity || DEFAULT_LIMIT_NUMBER_OF_PLACES;
this.event.options.maximumAttendeeCapacity ||
DEFAULT_LIMIT_NUMBER_OF_PLACES;
}
}
@@ -878,7 +948,10 @@ export default class EditEvent extends Vue {
}
get isEventModified(): boolean {
return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
return (
JSON.stringify(this.event.toEditJSON()) !==
JSON.stringify(this.unmodifiedEvent)
);
}
get beginsOn(): Date {

319
js/src/views/Event/Event.vue
View File

@@ -18,16 +18,29 @@
<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">
<popover-actor-card
:actor="event.organizerActor"
:inline="true"
>
<span>
{{
$t("By @{username}", { username: usernameWithDomain(event.organizerActor) })
$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">
<span
v-else-if="
event.attributedTo &&
event.options.hideOrganizerWhenGroupEvent
"
>
<popover-actor-card
:actor="event.attributedTo"
:inline="true"
>
{{
$t("By @{group}", {
group: usernameWithDomain(event.attributedTo),
@@ -37,14 +50,26 @@
</span>
<span v-else-if="event.organizerActor && event.attributedTo">
<i18n path="By {group}">
<popover-actor-card :actor="event.attributedTo" slot="group" :inline="true">
<popover-actor-card
:actor="event.attributedTo"
slot="group"
:inline="true"
>
<router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(event.attributedTo) },
params: {
preferredUsername: usernameWithDomain(
event.attributedTo
),
},
}"
>
{{ $t("@{group}", { group: usernameWithDomain(event.attributedTo) }) }}
{{
$t("@{group}", {
group: usernameWithDomain(event.attributedTo),
})
}}
</router-link>
</popover-actor-card>
</i18n>
@@ -59,14 +84,23 @@
<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>
<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">
@@ -95,7 +129,9 @@
/>
<b-button
type="is-text"
v-if="!actorIsParticipant && anonymousParticipation !== null"
v-if="
!actorIsParticipant && anonymousParticipation !== null
"
@click="cancelAnonymousParticipation"
>{{ $t("Cancel anonymous participation") }}</b-button
>
@@ -103,7 +139,9 @@
{{ $t("You are participating in this event anonymously") }}
<b-tooltip
:label="
$t('This information is saved only on your computer. Click for details')
$t(
'This information is saved only on your computer. Click for details'
)
"
>
<router-link :to="{ name: RouteName.TERMS }">
@@ -111,7 +149,11 @@
</router-link>
</b-tooltip>
</small>
<small v-else-if="!actorIsParticipant && anonymousParticipation === false">
<small
v-else-if="
!actorIsParticipant && anonymousParticipation === false
"
>
{{
$t(
"You are participating in this event anonymously but didn't confirm participation"
@@ -119,7 +161,9 @@
}}
<b-tooltip
:label="
$t('This information is saved only on your computer. Click for details')
$t(
'This information is saved only on your computer. Click for details'
)
"
>
<router-link :to="{ name: RouteName.TERMS }">
@@ -129,7 +173,12 @@
</small>
</div>
<div v-else>
<button class="button is-primary" type="button" slot="trigger" disabled>
<button
class="button is-primary"
type="button"
slot="trigger"
disabled
>
<template>
<span>{{ $t("Event already passed") }}</span>
</template>
@@ -157,7 +206,10 @@
<router-link
class="participations-link"
v-if="actorIsOrganizer && event.draft === false"
:to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
: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">
@@ -177,9 +229,13 @@
</span>
<span v-else>
{{
$tc("No one is going to this event", event.participantStats.participant, {
going: event.participantStats.participant,
})
$tc(
"No one is going to this event",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</router-link>
@@ -201,9 +257,13 @@
</span>
<span v-else>
{{
$tc("No one is going to this event", event.participantStats.participant, {
going: event.participantStats.participant,
})
$tc(
"No one is going to this event",
event.participantStats.participant,
{
going: event.participantStats.participant,
}
)
}}
</span>
</span>
@@ -221,7 +281,11 @@
<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">
<b-button
slot="trigger"
role="button"
icon-right="dots-horizontal"
>
{{ $t("Actions") }}
<!-- <b-icon icon="dots-horizontal" /> -->
</b-button>
@@ -231,7 +295,10 @@
v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{ name: RouteName.EDIT_EVENT, params: { eventId: event.uuid } }"
:to="{
name: RouteName.EDIT_EVENT,
params: { eventId: event.uuid },
}"
>
{{ $t("Edit") }}
<b-icon icon="pencil" />
@@ -243,7 +310,10 @@
v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{ name: RouteName.DUPLICATE_EVENT, params: { eventId: event.uuid } }"
:to="{
name: RouteName.DUPLICATE_EVENT,
params: { eventId: event.uuid },
}"
>
{{ $t("Duplicate") }}
<b-icon icon="content-duplicate" />
@@ -263,7 +333,11 @@
aria-role="menuitem"
v-if="actorIsOrganizer || event.draft"
/>
<b-dropdown-item aria-role="listitem" v-if="!event.draft" @click="triggerShare()">
<b-dropdown-item
aria-role="listitem"
v-if="!event.draft"
@click="triggerShare()"
>
<span>
{{ $t("Share this event") }}
<b-icon icon="share" />
@@ -299,14 +373,23 @@
<div class="sticky">
<event-metadata-block
:title="$t('Location')"
:icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
:icon="
physicalAddress
? physicalAddress.poiInfos.poiIcon.icon
: 'earth'
"
>
<div class="address-wrapper">
<span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
<span v-if="!physicalAddress">{{
$t("No address defined")
}}</span>
<div class="address" v-if="physicalAddress">
<div>
<address>
<p class="addressDescription" :title="physicalAddress.poiInfos.name">
<p
class="addressDescription"
:title="physicalAddress.poiInfos.name"
>
{{ physicalAddress.poiInfos.name }}
</p>
<p>{{ physicalAddress.poiInfos.alternativeName }}</p>
@@ -321,7 +404,10 @@
</div>
</div>
</event-metadata-block>
<event-metadata-block :title="$t('Date and time')" icon="calendar">
<event-metadata-block
:title="$t('Date and time')"
icon="calendar"
>
<event-full-date
:beginsOn="event.beginsOn"
:show-start-time="event.options.showStartTime"
@@ -330,19 +416,27 @@
/>
</event-metadata-block>
<event-metadata-block :title="$t('Organized by')">
<popover-actor-card :actor="event.organizerActor" v-if="!event.attributedTo">
<popover-actor-card
:actor="event.organizerActor"
v-if="!event.attributedTo"
>
<actor-card :actor="event.organizerActor" />
</popover-actor-card>
<router-link
v-if="event.attributedTo"
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(event.attributedTo) },
params: {
preferredUsername: usernameWithDomain(event.attributedTo),
},
}"
>
<popover-actor-card
:actor="event.attributedTo"
v-if="!event.attributedTo || !event.options.hideOrganizerWhenGroupEvent"
v-if="
!event.attributedTo ||
!event.options.hideOrganizerWhenGroupEvent
"
>
<actor-card :actor="event.attributedTo" />
</popover-actor-card>
@@ -397,8 +491,13 @@
</section>
</div>
</div>
<section class="more-events section" v-if="event.relatedEvents.length > 0">
<h3 class="title has-text-centered">{{ $t("These events may interest you") }}</h3>
<section
class="more-events section"
v-if="event.relatedEvents.length > 0"
>
<h3 class="title has-text-centered">
{{ $t("These events may interest you") }}
</h3>
<div class="columns">
<div
class="column is-one-third-desktop"
@@ -409,7 +508,11 @@
</div>
</div>
</section>
<b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
<b-modal
:active.sync="isReportModalActive"
has-modal-card
ref="reportModal"
>
<report-modal
:on-confirm="reportEvent"
:title="$t('Report this event')"
@@ -417,14 +520,29 @@
@close="$refs.reportModal.close()"
/>
</b-modal>
<b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
<share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
<b-modal
:active.sync="isShareModalActive"
has-modal-card
ref="shareModal"
>
<share-event-modal
:event="event"
:eventCapacityOK="eventCapacityOK"
/>
</b-modal>
<b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
<b-modal
:active.sync="isJoinModalActive"
has-modal-card
ref="participationModal"
>
<identity-picker v-model="identity">
<template v-slot:footer>
<footer class="modal-card-foot">
<button class="button" ref="cancelButton" @click="isJoinModalActive = false">
<button
class="button"
ref="cancelButton"
@click="isJoinModalActive = false"
>
{{ $t("Cancel") }}
</button>
<button
@@ -449,7 +567,9 @@
>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Participation confirmation") }}</p>
<p class="modal-card-title">
{{ $t("Participation confirmation") }}
</p>
</header>
<section class="modal-card-body">
@@ -460,7 +580,11 @@
)
}}
</p>
<form @submit.prevent="joinEvent(actorForConfirmation, messageForConfirmation)">
<form
@submit.prevent="
joinEvent(actorForConfirmation, messageForConfirmation)
"
>
<b-field :label="$t('Message')">
<b-input
type="textarea"
@@ -485,7 +609,10 @@
</section>
</div>
</b-modal>
<b-modal v-if="physicalAddress && physicalAddress.geom" :active.sync="showMap">
<b-modal
v-if="physicalAddress && physicalAddress.geom"
:active.sync="showMap"
>
<div class="map">
<map-leaflet
:coords="physicalAddress.geom"
@@ -504,7 +631,12 @@
<script lang="ts">
import { Component, Prop, Watch } from "vue-property-decorator";
import BIcon from "buefy/src/components/icon/Icon.vue";
import { EventJoinOptions, EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
import {
EventJoinOptions,
EventStatus,
EventVisibility,
ParticipantRole,
} from "@/types/enums";
import {
EVENT_PERSON_PARTICIPATION,
EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
@@ -558,7 +690,8 @@ import { IParticipant } from "../../types/participant.model";
Tag,
ActorCard,
PopoverActorCard,
"map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
"map-leaflet": () =>
import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
ShareEventModal: () =>
import(
/* webpackChunkName: "shareEventModal" */ "../../components/Event/ShareEventModal.vue"
@@ -603,7 +736,12 @@ import { IParticipant } from "../../types/participant.model";
return [];
},
skip() {
return !this.currentActor || !this.event || !this.event.id || !this.currentActor.id;
return (
!this.currentActor ||
!this.event ||
!this.event.id ||
!this.currentActor.id
);
},
},
config: CONFIG,
@@ -714,7 +852,8 @@ export default class Event extends EventMixin {
this.$watch("eventDescription", (eventDescription) => {
if (!eventDescription) return;
const eventDescriptionElement = this.$refs.eventDescriptionElement as HTMLElement;
const eventDescriptionElement = this.$refs
.eventDescriptionElement as HTMLElement;
eventDescriptionElement.addEventListener("click", ($event) => {
// TODO: Find the right type for target
@@ -724,7 +863,14 @@ export default class Event extends EventMixin {
if (target && target.matches(".hashtag") && target.href) {
// some sanity checks taken from vue-router:
// https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = $event;
const {
altKey,
ctrlKey,
metaKey,
shiftKey,
button,
defaultPrevented,
} = $event;
// don't handle with control keys
if (metaKey || altKey || ctrlKey || shiftKey) return;
// don't handle when preventDefault called
@@ -777,7 +923,9 @@ export default class Event extends EventMixin {
forward,
},
});
this.$notifier.success(this.$t("Event {eventTitle} reported", { eventTitle }) as string);
this.$notifier.success(
this.$t("Event {eventTitle} reported", { eventTitle }) as string
);
} catch (error) {
console.error(error);
}
@@ -788,11 +936,16 @@ export default class Event extends EventMixin {
this.actorForConfirmation = actor;
}
async joinEvent(identity: IPerson, message: string | null = null): Promise<void> {
async joinEvent(
identity: IPerson,
message: string | null = null
): Promise<void> {
this.isJoinConfirmationModalActive = false;
this.isJoinModalActive = false;
try {
const { data: mutationData } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
const { data: mutationData } = await this.$apollo.mutate<{
joinEvent: IParticipant;
}>({
mutation: JOIN_EVENT,
variables: {
eventId: this.event.id,
@@ -808,7 +961,9 @@ export default class Event extends EventMixin {
if (participationCachedData == null) return;
const { person } = participationCachedData;
if (person === null) {
console.error("Cannot update participation cache, because of null value.");
console.error(
"Cannot update participation cache, because of null value."
);
return;
}
person.participations.elements.push(data.joinEvent);
@@ -826,7 +981,9 @@ export default class Event extends EventMixin {
if (cachedData == null) return;
const { event } = cachedData;
if (event === null) {
console.error("Cannot update event participant cache, because of null value.");
console.error(
"Cannot update event participant cache, because of null value."
);
return;
}
@@ -861,9 +1018,12 @@ export default class Event extends EventMixin {
title: this.$t('Leaving event "{title}"', {
title: this.event.title,
}) as string,
message: this.$t('Are you sure you want to cancel your participation at event "{title}"?', {
title: this.event.title,
}) as string,
message: this.$t(
'Are you sure you want to cancel your participation at event "{title}"?',
{
title: this.event.title,
}
) as string,
confirmText: this.$t("Leave event") as string,
cancelText: this.$t("Cancel") as string,
type: "is-danger",
@@ -901,19 +1061,27 @@ export default class Event extends EventMixin {
}
private participationConfirmedMessage() {
this.$notifier.success(this.$t("Your participation has been confirmed") as string);
this.$notifier.success(
this.$t("Your participation has been confirmed") as string
);
}
private participationRequestedMessage() {
this.$notifier.success(this.$t("Your participation has been requested") as string);
this.$notifier.success(
this.$t("Your participation has been requested") as string
);
}
private participationRejectedMessage() {
this.$notifier.error(this.$t("Your participation has been rejected") as string);
this.$notifier.error(
this.$t("Your participation has been rejected") as string
);
}
private participationChangedMessage() {
this.$notifier.info(this.$t("Your participation status has been changed") as string);
this.$notifier.info(
this.$t("Your participation status has been changed") as string
);
}
async downloadIcsEvent(): Promise<void> {
@@ -963,13 +1131,15 @@ export default class Event extends EventMixin {
if (this.actorIsOrganizer) return true;
return (
this.participations.length > 0 && this.participations[0].role === ParticipantRole.PARTICIPANT
this.participations.length > 0 &&
this.participations[0].role === ParticipantRole.PARTICIPANT
);
}
get actorIsOrganizer(): boolean {
return (
this.participations.length > 0 && this.participations[0].role === ParticipantRole.CREATOR
this.participations.length > 0 &&
this.participations[0].role === ParticipantRole.CREATOR
);
}
@@ -982,12 +1152,18 @@ export default class Event extends EventMixin {
get eventCapacityOK(): boolean {
if (this.event.draft) return true;
if (!this.event.options.maximumAttendeeCapacity) return true;
return this.event.options.maximumAttendeeCapacity > this.event.participantStats.participant;
return (
this.event.options.maximumAttendeeCapacity >
this.event.participantStats.participant
);
}
get numberOfPlacesStillAvailable(): number {
if (this.event.draft) return this.event.options.maximumAttendeeCapacity;
return this.event.options.maximumAttendeeCapacity - this.event.participantStats.participant;
return (
this.event.options.maximumAttendeeCapacity -
this.event.participantStats.participant
);
}
get physicalAddress(): Address | null {
@@ -1007,7 +1183,10 @@ export default class Event extends EventMixin {
}
get ableToReport(): boolean {
return this.config && (this.currentActor.id != null || this.config.anonymous.reports.allowed);
return (
this.config &&
(this.currentActor.id != null || this.config.anonymous.reports.allowed)
);
}
get actorForReport(): IActor | null {

8
js/src/views/Event/EventList.vue
View File

@@ -10,9 +10,11 @@
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">{{
$t("No events found")
}}</b-message>
<b-message
v-if-else="events.length === 0 && $apollo.loading === false"
type="is-danger"
>{{ $t("No events found") }}</b-message
>
</section>
</template>

15
js/src/views/Event/GroupEvents.vue
View File

@@ -24,7 +24,11 @@
</nav>
<section>
<h1 class="title" v-if="group">
{{ $t("{group}'s events", { group: group.name || group.preferredUsername }) }}
{{
$t("{group}'s events", {
group: group.name || group.preferredUsername,
})
}}
</h1>
<p v-if="isCurrentActorMember">
{{
@@ -56,7 +60,10 @@
/>
</transition-group>
<b-message
v-if="group.organizedEvents.elements.length === 0 && $apollo.loading === false"
v-if="
group.organizedEvents.elements.length === 0 &&
$apollo.loading === false
"
type="is-danger"
>
{{ $t("No events found") }}
@@ -124,7 +131,9 @@ export default class GroupEvents extends mixins(GroupMixin) {
get isCurrentActorMember(): boolean {
if (!this.group || !this.memberships) return false;
return this.memberships.map(({ parent: { id } }) => id).includes(this.group.id);
return this.memberships
.map(({ parent: { id } }) => id)
.includes(this.group.id);
}
}
</script>

61
js/src/views/Event/MyEvents.vue
View File

@@ -24,7 +24,9 @@
<div class="columns is-centered">
<b-button
class="column is-narrow"
v-if="hasMoreFutureParticipations && futureParticipations.length === limit"
v-if="
hasMoreFutureParticipations && futureParticipations.length === limit
"
@click="loadMoreFutureParticipations"
size="is-large"
type="is-primary"
@@ -65,7 +67,9 @@
<div class="columns is-centered">
<b-button
class="column is-narrow"
v-if="hasMorePastParticipations && pastParticipations.length === limit"
v-if="
hasMorePastParticipations && pastParticipations.length === limit
"
@click="loadMorePastParticipations"
size="is-large"
type="is-primary"
@@ -90,7 +94,10 @@
import { Component, Vue } from "vue-property-decorator";
import { ParticipantRole } from "@/types/enums";
import { IParticipant, Participant } from "../../types/participant.model";
import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from "../../graphql/actor";
import {
LOGGED_USER_PARTICIPATIONS,
LOGGED_USER_DRAFTS,
} from "../../graphql/actor";
import { EventModel, IEvent } from "../../types/event.model";
import EventListCard from "../../components/Event/EventListCard.vue";
import EventCard from "../../components/Event/EventCard.vue";
@@ -123,7 +130,8 @@ import Subtitle from "../../components/Utils/Subtitle.vue";
page: 1,
limit: 10,
},
update: (data) => data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
update: (data) =>
data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
},
pastParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
@@ -170,7 +178,8 @@ export default class MyEvents extends Vue {
revertSort = false
): Map<string, Participant[]> {
const res = participations.filter(
({ event, role }) => event.beginsOn != null && role !== ParticipantRole.REJECTED
({ event, role }) =>
event.beginsOn != null && role !== ParticipantRole.REJECTED
);
if (revertSort) {
res.sort(
@@ -183,16 +192,22 @@ export default class MyEvents extends Vue {
a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
);
}
return res.reduce((acc: Map<string, IParticipant[]>, participation: IParticipant) => {
const month = new Date(participation.event.beginsOn).toLocaleDateString(undefined, {
year: "numeric",
month: "long",
});
const filteredParticipations: IParticipant[] = acc.get(month) || [];
filteredParticipations.push(participation);
acc.set(month, filteredParticipations);
return acc;
}, new Map());
return res.reduce(
(acc: Map<string, IParticipant[]>, participation: IParticipant) => {
const month = new Date(participation.event.beginsOn).toLocaleDateString(
undefined,
{
year: "numeric",
month: "long",
}
);
const filteredParticipations: IParticipant[] = acc.get(month) || [];
filteredParticipations.push(participation);
acc.set(month, filteredParticipations);
return acc;
},
new Map()
);
}
get monthlyFutureParticipations(): Map<string, Participant[]> {
@@ -216,7 +231,8 @@ export default class MyEvents extends Vue {
const oldParticipations = previousResult.loggedUser.participations;
const newParticipations = fetchMoreResult.loggedUser.participations;
this.hasMoreFutureParticipations =
newParticipations.total === oldParticipations.length + newParticipations.length;
newParticipations.total ===
oldParticipations.length + newParticipations.length;
return {
loggedUser: {
@@ -224,7 +240,10 @@ export default class MyEvents extends Vue {
participations: {
__typename: newParticipations.__typename,
total: newParticipations.total,
elements: [...oldParticipations.elements, ...newParticipations.elements],
elements: [
...oldParticipations.elements,
...newParticipations.elements,
],
},
},
};
@@ -245,7 +264,8 @@ export default class MyEvents extends Vue {
const oldParticipations = previousResult.loggedUser.participations;
const newParticipations = fetchMoreResult.loggedUser.participations;
this.hasMorePastParticipations =
newParticipations.total === oldParticipations.length + newParticipations.length;
newParticipations.total ===
oldParticipations.length + newParticipations.length;
return {
loggedUser: {
@@ -253,7 +273,10 @@ export default class MyEvents extends Vue {
participations: {
__typename: newParticipations.__typename,
total: newParticipations.total,
elements: [...oldParticipations.elements, ...newParticipations.elements],
elements: [
...oldParticipations.elements,
...newParticipations.elements,
],
},
},
};

77
js/src/views/Event/Participants.vue
View File

@@ -4,7 +4,9 @@
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.MY_EVENTS }">{{ $t("My events") }}</router-link>
<router-link :to="{ name: RouteName.MY_EVENTS }">{{
$t("My events")
}}</router-link>
</li>
<li>
<router-link
@@ -72,10 +74,21 @@
@page-change="(newPage) => (page = newPage)"
@sort="(field, order) => $emit('sort', field, order)"
>
<b-table-column field="actor.preferredUsername" :label="$t('Participant')" v-slot="props">
<b-table-column
field="actor.preferredUsername"
:label="$t('Participant')"
v-slot="props"
>
<article class="media">
<figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
<figure
class="media-left image is-48x48"
v-if="props.row.actor.avatar"
>
<img
class="is-rounded"
:src="props.row.actor.avatar.url"
alt=""
/>
</figure>
<b-icon
class="media-left"
@@ -83,11 +96,18 @@
size="is-large"
icon="incognito"
/>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
<b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content">
<div class="content">
<span v-if="props.row.actor.preferredUsername !== 'anonymous'">
<span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
<span v-if="props.row.actor.name">{{
props.row.actor.name
}}</span
><br />
<span class="is-size-7 has-text-grey"
>@{{ usernameWithDomain(props.row.actor) }}</span
@@ -101,7 +121,10 @@
</article>
</b-table-column>
<b-table-column field="role" :label="$t('Role')" v-slot="props">
<b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
<b-tag
type="is-primary"
v-if="props.row.role === ParticipantRole.CREATOR"
>
{{ $t("Organizer") }}
</b-tag>
<b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
@@ -110,18 +133,29 @@
<b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
{{ $t("Not confirmed") }}
</b-tag>
<b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
<b-tag
type="is-warning"
v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
>
{{ $t("Not approved") }}
</b-tag>
<b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
<b-tag
type="is-danger"
v-else-if="props.row.role === ParticipantRole.REJECTED"
>
{{ $t("Rejected") }}
</b-tag>
</b-table-column>
<b-table-column field="metadata.message" :label="$t('Message')" v-slot="props">
<b-table-column
field="metadata.message"
:label="$t('Message')"
v-slot="props"
>
<span
@click="toggleQueueDetails(props.row)"
:class="{
'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
'ellipsed-message':
props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
}"
v-if="props.row.metadata && props.row.metadata.message"
>
@@ -223,7 +257,8 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
},
},
filters: {
ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
ellipsize: (text?: string) =>
text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
},
})
export default class Participants extends Vue {
@@ -282,7 +317,10 @@ export default class Participants extends Vue {
event: {
...previousResult.event,
participants: {
elements: [...oldParticipants.elements, ...newParticipants.elements],
elements: [
...oldParticipants.elements,
...newParticipants.elements,
],
total: newParticipants.total,
__typename: oldParticipants.__typename,
},
@@ -339,7 +377,9 @@ export default class Participants extends Vue {
*/
get canAcceptParticipants(): boolean {
return this.checkedRows.some((participant: IParticipant) =>
[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)
[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(
participant.role
)
);
}
@@ -348,7 +388,8 @@ export default class Participants extends Vue {
*/
get canRefuseParticipants(): boolean {
return this.checkedRows.some(
(participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
(participant: IParticipant) =>
participant.role !== ParticipantRole.REJECTED
);
}
@@ -357,7 +398,11 @@ export default class Participants extends Vue {
nl2br = nl2br;
toggleQueueDetails(row: IParticipant): void {
if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
if (
row.metadata.message &&
row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH
)
return;
this.queueTable.toggleDetails(row);
}
}