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

Add ability to add message for participation and improve participation

Browse Source 
management interface

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-03-05 19:32:34 +01:00
parent 130a3cf23f
commit c732ec7f87
34 changed files with 736 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,7 @@
:current-actor="currentActor"
@joinEvent="joinEvent"
@joinModal="isJoinModalActive = true"
@joinEventWithConfirmation="joinEventWithConfirmation"
@confirmLeave="confirmLeave"
/>
<b-button type="is-text" v-if="anonymousParticipation !== null" @click="cancelAnonymousParticipation">{{ $t('Cancel anonymous participation')}}</b-button>
@@ -263,13 +264,44 @@
<button
class="button is-primary"
ref="confirmButton"
@click="joinEvent(identity)">
@click="event.joinOptions === EventJoinOptions.RESTRICTED ? joinEventWithConfirmation(identity) : joinEvent(identity)">
{{ $t('Confirm my particpation') }}
</button>
</footer>
</template>
</identity-picker>
</b-modal>
<b-modal :active.sync="isJoinConfirmationModalActive" has-modal-card ref="joinConfirmationModal">
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t('Participation confirmation')}}</p>
</header>
<section class="modal-card-body">
<p>{{ $t('The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?') }}</p>
<form @submit.prevent="joinEvent(actorForConfirmation, messageForConfirmation)">
<b-field :label="$t('Message')">
<b-input
type="textarea"
size="is-medium"
v-model="messageForConfirmation"
minlength="10">
</b-input>
</b-field>
<div class="buttons">
<b-button
native-type="button"
class="button"
ref="cancelButton"
@click="isJoinConfirmationModalActive = false">
{{ $t('Cancel') }}
</b-button>
<b-button type="is-primary" native-type="submit">{{ $t('Confirm my participation') }}</b-button>
</div>
</form>
</section>
</div>
</b-modal>
</div>
</transition>
</div>
@@ -281,11 +313,10 @@ import {
EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
FETCH_EVENT,
JOIN_EVENT,
LEAVE_EVENT,
} from '@/graphql/event';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { EventModel, EventStatus, EventVisibility, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
import { EventModel, EventStatus, EventVisibility, IEvent, IParticipant, ParticipantRole, EventJoinOptions } from '@/types/event.model';
import { IPerson, Person } from '@/types/actor';
import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
@@ -398,12 +429,16 @@ export default class Event extends EventMixin {
showMap: boolean = false;
isReportModalActive: boolean = false;
isJoinModalActive: boolean = false;
isJoinConfirmationModalActive: boolean = false;
EventVisibility = EventVisibility;
EventStatus = EventStatus;
EventJoinOptions = EventJoinOptions;
RouteName = RouteName;
observer!: IntersectionObserver;
loadComments: boolean = false;
anonymousParticipation: boolean|null = null;
actorForConfirmation!: IPerson;
messageForConfirmation: string = '';
get eventTitle() {
if (!this.event) return undefined;
@@ -506,7 +541,13 @@ export default class Event extends EventMixin {
}
}
async joinEvent(identity: IPerson) {
joinEventWithConfirmation(actor: IPerson) {
this.isJoinConfirmationModalActive = true;
this.actorForConfirmation = actor;
}
async joinEvent(identity: IPerson, message: string|null = null) {
this.isJoinConfirmationModalActive = false;
this.isJoinModalActive = false;
try {
const { data } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
@@ -514,6 +555,7 @@ export default class Event extends EventMixin {
variables: {
eventId: this.event.id,
actorId: identity.id,
message,
},
update: (store, { data }) => {
if (data == null) return;

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

@@ -1,3 +1,4 @@
import {ParticipantRole} from "@/types/event.model";
<template>
<main class="container">
<b-tabs type="is-boxed" v-if="event" v-model="activeTab">
@@ -7,22 +8,17 @@
<span>{{ $t('Participants')}} <b-tag rounded> {{ participantStats.going }} </b-tag> </span>
</template>
<template>
<section v-if="participantsAndCreators.length > 0">
<section v-if="participants && participants.total > 0">
<h2 class="title">{{ $t('Participants') }}</h2>
<p v-if="confirmedAnonymousParticipantsCountCount > 1">
{{ $tc('And no anonymous participations|And one anonymous participation|And {count} anonymous participations', confirmedAnonymousParticipantsCountCount, { count: confirmedAnonymousParticipantsCountCount}) }}
</p>
<div class="columns is-multiline">
<div class="column is-one-quarter-desktop" v-for="participant in participantsAndCreators" :key="participant.actor.id">
<participant-card
v-if="participant.actor.id !== config.anonymous.actorId"
:participant="participant"
:accept="acceptParticipant"
:reject="refuseParticipant"
:exclude="refuseParticipant"
/>
</div>
</div>
<ParticipationTable
:data="participants.elements"
:accept-participant="acceptParticipant"
:refuse-participant="refuseParticipant"
:showRole="true"
:total="participants.total"
:perPage="PARTICIPANTS_PER_PAGE"
@page-change="(page) => participantPage = page"
/>
</section>
</template>
</b-tab-item>
@@ -32,18 +28,16 @@
<span>{{ $t('Requests') }} <b-tag rounded> {{ participantStats.notApproved }} </b-tag> </span>
</template>
<template>
<section v-if="queue.length > 0">
<section v-if="queue && queue.total > 0">
<h2 class="title">{{ $t('Waiting list') }}</h2>
<div class="columns">
<div class="column is-one-quarter-desktop" v-for="participant in queue" :key="participant.actor.id">
<participant-card
:participant="participant"
:accept="acceptParticipant"
:reject="refuseParticipant"
:exclude="refuseParticipant"
/>
</div>
</div>
<ParticipationTable
:data="queue.elements"
:accept-participant="acceptParticipant"
:refuse-participant="refuseParticipant"
:total="queue.total"
:perPage="PARTICIPANTS_PER_PAGE"
@page-change="(page) => queuePage = page"
/>
</section>
</template>
</b-tab-item>
@@ -53,18 +47,16 @@
<span>{{ $t('Rejected')}} <b-tag rounded> {{ participantStats.rejected }} </b-tag> </span>
</template>
<template>
<section v-if="rejected.length > 0">
<section v-if="rejected && rejected.total > 0">
<h2 class="title">{{ $t('Rejected participations') }}</h2>
<div class="columns">
<div class="column is-one-quarter-desktop" v-for="participant in rejected" :key="participant.actor.id">
<participant-card
:participant="participant"
:accept="acceptParticipant"
:reject="refuseParticipant"
:exclude="refuseParticipant"
/>
</div>
</div>
<ParticipationTable
:data="rejected.elements"
:accept-participant="acceptParticipant"
:refuse-participant="refuseParticipant"
:total="rejected.total"
:perPage="PARTICIPANTS_PER_PAGE"
@page-change="(page) => rejectedPage = page"
/>
</section>
</template>
</b-tab-item>
@@ -81,9 +73,15 @@ import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson } from '@/types/actor';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import ParticipationTable from '@/components/Event/ParticipationTable.vue';
import { Paginate } from '@/types/paginate';
const PARTICIPANTS_PER_PAGE = 20;
const MESSAGE_ELLIPSIS_LENGTH = 130;
@Component({
components: {
ParticipationTable,
ParticipantCard,
},
apollo: {
@@ -97,7 +95,7 @@ import { IConfig } from '@/types/config.model';
return {
uuid: this.eventId,
page: 1,
limit: 10,
limit: PARTICIPANTS_PER_PAGE,
roles: [ParticipantRole.PARTICIPANT].join(),
actorId: this.currentActor.id,
};
@@ -106,18 +104,18 @@ import { IConfig } from '@/types/config.model';
return !this.currentActor.id;
},
},
organizers: {
participants: {
query: PARTICIPANTS,
variables() {
return {
uuid: this.eventId,
page: 1,
limit: 20,
roles: [ParticipantRole.CREATOR].join(),
page: this.participantPage,
limit: PARTICIPANTS_PER_PAGE,
roles: [ParticipantRole.CREATOR, ParticipantRole.PARTICIPANT].join(),
actorId: this.currentActor.id,
};
},
update: data => data.event.participants.map(participation => new Participant(participation)),
update(data) { return this.dataTransform(data); },
skip() {
return !this.currentActor.id;
},
@@ -127,13 +125,13 @@ import { IConfig } from '@/types/config.model';
variables() {
return {
uuid: this.eventId,
page: 1,
limit: 20,
page: this.queuePage,
limit: PARTICIPANTS_PER_PAGE,
roles: [ParticipantRole.NOT_APPROVED].join(),
actorId: this.currentActor.id,
};
},
update: data => data.event.participants.map(participation => new Participant(participation)),
update(data) { return this.dataTransform(data); },
skip() {
return !this.currentActor.id;
},
@@ -143,27 +141,36 @@ import { IConfig } from '@/types/config.model';
variables() {
return {
uuid: this.eventId,
page: 1,
limit: 20,
page: this.rejectedPage,
limit: PARTICIPANTS_PER_PAGE,
roles: [ParticipantRole.REJECTED].join(),
actorId: this.currentActor.id,
};
},
update: data => data.event.participants.map(participation => new Participant(participation)),
update(data) { return this.dataTransform(data); },
skip() {
return !this.currentActor.id;
},
},
},
filters: {
ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat('…'),
},
})
export default class Participants extends Vue {
@Prop({ required: true }) eventId!: string;
page: number = 1;
limit: number = 10;
organizers: IParticipant[] = [];
queue: IParticipant[] = [];
rejected: IParticipant[] = [];
participants!: Paginate<IParticipant>;
participantPage: number = 1;
queue!: Paginate<IParticipant>;
queuePage: number = 1;
rejected!: Paginate<IParticipant>;
rejectedPage: number = 1;
event!: IEvent;
config!: IConfig;
@@ -173,23 +180,20 @@ export default class Participants extends Vue {
hasMoreParticipants: boolean = false;
activeTab: number = 0;
PARTICIPANTS_PER_PAGE = PARTICIPANTS_PER_PAGE;
dataTransform(data): Paginate<Participant> {
return {
total: data.event.participants.total,
elements: data.event.participants.elements.map(participation => new Participant(participation)),
};
}
get participantStats(): IEventParticipantStats | null {
if (!this.event) return null;
return this.event.participantStats;
}
get participantsAndCreators(): IParticipant[] {
if (this.event) {
return [...this.organizers, ...this.event.participants]
.filter(participant => [ParticipantRole.PARTICIPANT, ParticipantRole.CREATOR].includes(participant.role));
}
return [];
}
get confirmedAnonymousParticipantsCountCount(): number {
return this.participantsAndCreators.filter(({ actor: { id } }) => id === this.config.anonymous.actorId).length;
}
@Watch('participantStats', { deep: true })
watchParticipantStats(stats: IEventParticipantStats) {
if (!stats) return;
@@ -232,8 +236,8 @@ export default class Participants extends Vue {
},
});
if (data) {
this.queue = this.queue.filter(participant => participant.id !== data.updateParticipation.id);
this.rejected = this.rejected.filter(participant => participant.id !== data.updateParticipation.id);
this.queue.elements = this.queue.elements.filter(participant => participant.id !== data.updateParticipation.id);
this.rejected.elements = this.rejected.elements.filter(participant => participant.id !== data.updateParticipation.id);
this.event.participantStats.going += 1;
if (participant.role === ParticipantRole.NOT_APPROVED) {
this.event.participantStats.notApproved -= 1;
@@ -242,7 +246,7 @@ export default class Participants extends Vue {
this.event.participantStats.rejected -= 1;
}
participant.role = ParticipantRole.PARTICIPANT;
this.event.participants.push(participant);
this.event.participants.elements.push(participant);
}
} catch (e) {
console.error(e);
@@ -260,8 +264,10 @@ export default class Participants extends Vue {
},
});
if (data) {
this.event.participants = this.event.participants.filter(participant => participant.id !== data.updateParticipation.id);
this.queue = this.queue.filter(participant => participant.id !== data.updateParticipation.id);
this.event.participants.elements = this.event.participants.elements.filter(
participant => participant.id !== data.updateParticipation.id,
);
this.queue.elements = this.queue.elements.filter(participant => participant.id !== data.updateParticipation.id);
this.event.participantStats.rejected += 1;
if (participant.role === ParticipantRole.PARTICIPANT) {
this.event.participantStats.participant -= 1;
@@ -271,8 +277,8 @@ export default class Participants extends Vue {
this.event.participantStats.notApproved -= 1;
}
participant.role = ParticipantRole.REJECTED;
this.rejected = this.rejected.filter(participantIn => participantIn.id !== participant.id);
this.rejected.push(participant);
this.rejected.elements = this.rejected.elements.filter(participantIn => participantIn.id !== participant.id);
this.rejected.elements.push(participant);
}
} catch (e) {
console.error(e);