Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix participation section, show how many places are available 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-11 15:06:58 +02:00
parent 98472e7222
commit 4499fb2f31
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
7 changed files with 118 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/src/graphql/event.ts
View File

@ -101,7 +101,8 @@ export const FETCH_EVENT = gql`
# },
participantStats {
approved,
unapproved
unapproved,
participants
},
tags {
${tagsQuery}
@ -257,7 +258,8 @@ export const CREATE_EVENT = gql`
},
participantStats {
approved,
unapproved
unapproved,
participants
},
tags {
${tagsQuery}
@ -341,7 +343,8 @@ export const EDIT_EVENT = gql`
},
participantStats {
approved,
unapproved
unapproved,
participants
},
tags {
${tagsQuery}
@ -407,7 +410,8 @@ export const PARTICIPANTS = gql`
participantStats {
approved,
unapproved,
rejected
rejected,
participants
}
}
}

3
js/src/i18n/en_US.json
View File

@ -273,5 +273,6 @@
"{count} participants": "{count} participants",
"{count} requests waiting": "{count} requests waiting",
"{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.",
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks"
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks",
"All the places have already been taken": "All the places have been taken|One place is still available|{places} places are still available"
}

3
js/src/i18n/fr_FR.json
View File

@ -312,5 +312,6 @@
"{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s",
"{count} requests waiting": "Un⋅e demande en attente|{count} demandes en attente",
"{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} garantit {respect} des personnes qui l'utiliseront. Puisque {source}, il est publiquement auditable, ce qui garantit sa transparence.",
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines"
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines",
"All the places have already been taken": "Toutes les places ont été prises|Une place est encore disponible|{places} places sont encore disponibles"
}

3
js/src/types/event.model.ts
View File

@ -112,6 +112,7 @@ export interface IEvent {
approved: number;
unapproved: number;
rejected: number;
participants: number;
};
participants: IParticipant[];
@ -178,7 +179,7 @@ export class EventModel implements IEvent {
publishAt = new Date();
participantStats = { approved: 0, unapproved: 0, rejected: 0 };
participantStats = { approved: 0, unapproved: 0, rejected: 0, participants: 0 };
participants: IParticipant[] = [];
relatedEvents: IEvent[] = [];

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

@ -17,17 +17,24 @@
<div class="date-component">
<date-calendar-icon :date="event.beginsOn"></date-calendar-icon>
</div>
<h1 class="title">{{ event.title }}</h1>
<div class="title-and-informations">
<h1 class="title">{{ event.title }}</h1>
<span>
<small v-if="event.participantStats.approved > 0 && !actorIsParticipant">
{{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
</small>
<small v-else-if="event.participantStats.approved > 0 && actorIsParticipant">
{{ $tc('You and one other person are going to this event', event.participantStats.participants, { approved: event.participantStats.participants }) }}
</small>
<small v-if="event.options.maximumAttendeeCapacity">
{{ $tc('All the places have already been taken', numberOfPlacesStillAvailable, { places: numberOfPlacesStillAvailable}) }}
</small>
</span>
</div>
</div>
<div class="has-text-right" v-if="new Date(endDate) > new Date()">
<small v-if="event.participantStats.approved > 0 && !actorIsParticipant">
{{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
</small>
<small v-else-if="event.participantStats.approved > 0 && actorIsParticipant">
{{ $tc('You and one other person are going to this event', event.participantStats.approved - 1, {approved: event.participantStats.approved - 1}) }}
</small>
<div class="event-participation has-text-right" v-if="new Date(endDate) > new Date()">
<participation-button
v-if="currentActor.id && !actorIsOrganizer && !event.draft"
v-if="currentActor.id && !actorIsOrganizer && !event.draft && (eventCapacityOK || actorIsParticipant)"
:participation="participations[0]"
:current-actor="currentActor"
@joinEvent="joinEvent"
@ -46,14 +53,14 @@
</div>
<div class="metadata columns">
<div class="column is-three-quarters-desktop">
<p class="tags" v-if="event.category || event.tags.length > 0">
<p class="tags" v-if="event.tags.length > 0">
<b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t('Draft') }}</b-tag>
<b-tag type="is-success" v-if="event.tags" v-for="tag in event.tags" :key="tag.title">{{ tag.title }}</b-tag>
<span v-if="event.tags > 0">⋅</span>
<span class="visibility" v-if="!event.draft">
<span class="visibility" v-if="!event.draft">
<b-tag type="is-info" v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('Public event') }}</b-tag>
<b-tag type="is-info" v-if="event.visibility === EventVisibility.UNLISTED">{{ $t('Private event') }}</b-tag>
</span>
<b-tag type="is-success" v-if="event.tags" v-for="tag in event.tags" :key="tag.title">{{ tag.title }}</b-tag>
<span v-if="event.tags > 0">⋅</span>
</p>
<div class="date-and-add-to-calendar">
<div class="date-and-privacy" v-if="event.beginsOn">
@ -147,6 +154,9 @@
<div class="columns">
<div class="column is-half has-text-centered">
<h3 class="title">{{ $t('Share this event') }}</h3>
<small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
{{ $t('All the places have already been taken') }}
</small>
<div>
<b-icon icon="mastodon" size="is-large" type="is-primary" />
<a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"><b-icon icon="facebook" size="is-large" type="is-primary" /></a>
@ -346,7 +356,7 @@ export default class Event extends EventMixin {
const participationCachedData = store.readQuery<{ person: IPerson }>({
query: EVENT_PERSON_PARTICIPATION,
variables: { eventId: this.event.id, name: identity.preferredUsername },
variables: { eventId: this.event.id, actorId: identity.id },
});
if (participationCachedData == null) return;
const { person } = participationCachedData;
@ -357,7 +367,7 @@ export default class Event extends EventMixin {
person.participations.push(data.joinEvent);
store.writeQuery({
query: EVENT_PERSON_PARTICIPATION,
variables: { eventId: this.event.id, name: identity.preferredUsername },
variables: { eventId: this.event.id, actorId: identity.id },
data: { person },
});
@ -408,7 +418,7 @@ export default class Event extends EventMixin {
const participationCachedData = store.readQuery<{ person: IPerson }>({
query: EVENT_PERSON_PARTICIPATION,
variables: { eventId: this.event.id, name: this.currentActor.preferredUsername },
variables: { eventId: this.event.id, actorId: this.currentActor.id },
});
if (participationCachedData == null) return;
const { person } = participationCachedData;
@ -420,7 +430,7 @@ export default class Event extends EventMixin {
person.participations = [];
store.writeQuery({
query: EVENT_PERSON_PARTICIPATION,
variables: { eventId: this.event.id, name: this.currentActor.preferredUsername },
variables: { eventId: this.event.id, actorId: this.currentActor.id },
data: { person },
});
@ -497,6 +507,15 @@ export default class Event extends EventMixin {
return meta.getAttribute('content') || '';
}
get eventCapacityOK(): boolean {
if (!this.event.options.maximumAttendeeCapacity) return true;
return this.event.options.maximumAttendeeCapacity > this.event.participantStats.participants;
}
get numberOfPlacesStillAvailable(): number {
return this.event.options.maximumAttendeeCapacity - this.event.participantStats.participants;
}
}
</script>
<style lang="scss" scoped>
@ -600,22 +619,40 @@ export default class Event extends EventMixin {
/*align-self: center;*/
align-items: stretch;
/*align-content: space-around;*/
padding: 15px 10px 0;
padding: 7.5px 10px 0;
margin-bottom: 1rem;
div.title-wrapper {
display: flex;
flex: 1 1 auto;
div.title-and-informations {
h1.title {
font-weight: normal;
word-break: break-word;
font-size: 1.7em;
margin-bottom: 0;
}
span small {
&:not(:last-child):after {
content: '⋅'
}
&:not(:first-child) {
padding-left: 3px;
}
}
}
div.date-component {
margin-right: 16px;
}
}
h1.title {
font-weight: normal;
word-break: break-word;
font-size: 1.7em;
}
.event-participation small {
display: block;
}
.participate-button {
@ -660,12 +697,16 @@ export default class Event extends EventMixin {
p.tags {
span {
&.tag.is-success {
&::before {
content: '#';
&.tag {
margin: 0 2px 4px;
&.is-success {
&::before {
content: '#';
}
text-transform: uppercase;
color: #111111;
}
text-transform: uppercase;
color: #111111;
}
margin: auto 5px;
@ -733,6 +774,36 @@ export default class Event extends EventMixin {
padding: 10rem 0;
}
h3 {
display: block;
color: $primary;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: $secondary;
cursor: pointer;
max-width: 20rem;
}
.column:first-child {
h3 {
margin: 0 auto 1rem;
font-weight: normal;
}
small.maximumNumberOfPlacesWarning {
margin: 0 auto 1rem;
display: block;
}
}
.column:last-child {
h3 {
margin-right: 0;
margin-left: auto;
}
}
.add-to-calendar {
background-repeat: no-repeat;
background-size: 400px;
@ -749,19 +820,6 @@ export default class Event extends EventMixin {
height: 40%;
width: 1px;
}
h3 {
display: block;
color: $primary;
font-size: 3rem;
text-decoration: underline;
text-decoration-color: $secondary;
cursor: pointer;
max-width: 20rem;
margin-right: 0;
margin-left: auto;
}
}
}
}

2
lib/mobilizon_web/resolvers/event.ex
View File

@ -102,7 +102,7 @@ defmodule MobilizonWeb.Resolvers.Event do
approved: Mobilizon.Events.count_approved_participants(id),
unapproved: Mobilizon.Events.count_unapproved_participants(id),
rejected: Mobilizon.Events.count_rejected_participants(id),
participants: Mobilizon.Events.count_participant_participants(id),
participants: Mobilizon.Events.count_participant_participants(id)
}}
end

5
lib/mobilizon_web/schema/event.ex
View File

@ -115,7 +115,10 @@ defmodule MobilizonWeb.Schema.EventType do
field(:approved, :integer, description: "The number of approved participants")
field(:unapproved, :integer, description: "The number of unapproved participants")
field(:rejected, :integer, description: "The number of rejected participants")
field(:participants, :integer, description: "The number of simple participants (excluding creators)")
field(:participants, :integer,
description: "The number of simple participants (excluding creators)"
)
end
object :event_offer do