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

Move i18n to vue-i18n and json files

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-09-12 11:34:01 +02:00
parent c3b03a2e6b
commit 96380f7df2
47 changed files with 740 additions and 1803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,133 +1,129 @@
<template>
<section class="container">
<h1 class="title">
<translate v-if="isUpdate === false">Create a new event</translate>
<translate v-else>Update event {{ event.name }}</translate>
<h1 class="title" v-if="isUpdate === false">
{{ $t('Create a new event') }}
</h1>
<h1 class="title" v-else>
{{ $t('Update event {name}', { name: event.title }) }}
</h1>
<div v-if="$apollo.loading">Loading...</div>
<div v-if="$apollo.loading">{{ $t('Loading…') }}</div>
<div class="columns is-centered" v-else>
<form class="column is-two-thirds-desktop" @submit="createOrUpdate">
<h2 class="subtitle">
<translate>
General information
</translate>
{{ $t('General information') }}
</h2>
<picture-upload v-model="pictureFile" />
<b-field :label="$gettext('Title')">
<b-field :label="$t('Title')">
<b-input aria-required="true" required v-model="event.title" maxlength="64" />
</b-field>
<tag-input v-model="event.tags" :data="tags" path="title" />
<date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
<date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$t('Ends on…')" :step="15" />
<address-auto-complete v-model="event.physicalAddress" />
<b-field :label="$gettext('Organizer')">
<b-field :label="$t('Organizer')">
<identity-picker v-model="event.organizerActor"></identity-picker>
</b-field>
<div class="field">
<label class="label">{{ $gettext('Description') }}</label>
<label class="label">{{ $t('Description') }}</label>
<editor v-model="event.description" />
</div>
<b-field :label="$gettext('Website / URL')">
<b-field :label="$t('Website / URL')">
<b-input v-model="event.onlineAddress" placeholder="URL" />
</b-field>
<!--<b-field :label="$gettext('Category')">
<!--<b-field :label="$t('Category')">
<b-select placeholder="Select a category" v-model="event.category">
<option
v-for="category in categories"
:value="category"
:key="category"
>{{ $gettext(category) }}</option>
>{{ $t(category) }}</option>
</b-select>
</b-field>-->
<h2 class="subtitle">
<translate>
Who can view this event and participate
</translate>
{{ $t('Who can view this event and participate') }}
</h2>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.PUBLIC">
<translate>Visible everywhere on the web (public)</translate>
{{ $t('Visible everywhere on the web (public)') }}
</b-radio>
</div>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.LINK">
<translate>Only accessible through link and search (private)</translate>
{{ $t('Only accessible through link and search (private)') }}
</b-radio>
</div>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.LIMITED">
<translate>Page limited to my group (asks for auth)</translate>
{{ $t('Page limited to my group (asks for auth)') }}
</b-radio>
</div>
<div class="field">
<label class="label">Approbation des participations</label>
<label class="label">{{ $t('Participation approval') }}</label>
<b-switch v-model="needsApproval">
Je veux approuver chaque demande de participation
{{ $t('I want to approve every participation request') }}
</b-switch>
</div>
<div class="field">
<label class="label">Mise en avant</label>
<label class="label">{{ $t('Promotion') }}</label>
<b-switch v-model="doNotPromote" :disabled="canPromote === false">
Ne pas autoriser la mise en avant sur sur Mobilizon
{{ $t('Disallow promoting on Mobilizon')}}
</b-switch>
</div>
<div class="field">
<b-switch v-model="limitedPlaces">
Places limitées
{{ $t('Limited places') }}
</b-switch>
</div>
<div class="box" v-if="limitedPlaces">
<b-field label="Number of places">
<b-field :label="$t('Number of places')">
<b-numberinput v-model="event.options.maximumAttendeeCapacity"></b-numberinput>
</b-field>
<b-field>
<b-switch v-model="event.options.showRemainingAttendeeCapacity">
Show remaining number of places
{{ $t('Show remaining number of places') }}
</b-switch>
</b-field>
<b-field>
<b-switch v-model="event.options.showParticipationPrice">
Display participation price
{{ $t('Display participation price') }}
</b-switch>
</b-field>
</div>
<h2 class="subtitle">
<translate>
Modération des commentaires publics
</translate>
{{ $t('Public comment moderation') }}
</h2>
<label>Comments on the event page</label>
<label>{{ $t('Comments on the event page') }}</label>
<div class="field">
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.ALLOW_ALL">
<translate>Allow all comments</translate>
{{ $t('Allow all comments') }}
</b-radio>
</div>
@@ -135,7 +131,7 @@
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.MODERATED">
<translate>Moderated comments (shown after approval)</translate>
{{ $t('Moderated comments (shown after approval)') }}
</b-radio>
</div>
@@ -143,21 +139,19 @@
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED">
<translate>Close all comments (except for admins)</translate>
{{ $t('Close comments for all (except for admins)') }}
</b-radio>
</div>
<h2 class="subtitle">
<translate>
Status
</translate>
{{ $t('Status') }}
</h2>
<div class="field">
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.TENTATIVE">
<translate>Tentative: Will be confirmed later</translate>
{{ $t('Tentative: Will be confirmed later') }}
</b-radio>
</div>
@@ -165,13 +159,13 @@
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.CONFIRMED">
<translate>Confirmed: Will happen</translate>
{{ $t('Confirmed: Will happen') }}
</b-radio>
</div>
<button class="button is-primary">
<translate v-if="isUpdate === false">Create my event</translate>
<translate v-else>Update my event</translate>
<span v-if="isUpdate === false">{{ $t('Create my event') }}</span>
<span v-else> {{ $t('Update my event') }}</span>
</button>
</form>
</div>

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

@@ -19,32 +19,19 @@
<h1 class="title">{{ event.title }}</h1>
</div>
<span v-if="event.participantStats.approved > 0 && !actorIsParticipant()">
<translate
:translate-n="event.participantStats.approved"
:translate-params="{approved: event.participantStats.approved}"
translate-plural="%{ approved } persons are going">
One person is going
</translate>
{{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
</span>
<span v-else-if="event.participantStats.approved - 1 > 0 && actorIsParticipant()">
<translate
:translate-n="event.participantStats.approved - 1"
:translate-params="{approved: event.participantStats.approved - 1}"
translate-plural="You and %{ approved } persons are going">
You and one other person are going to this event
</translate>
</span>
<span v-else-if="actorIsParticipant()">
<translate>You're the only one going to this event</translate>
<span v-else>
{{ $tc('You and one other person are going to this event', event.participantStats.approved - 1, {approved: event.participantStats.approved - 1}) }}
</span>
<div v-if="!actorIsOrganizer()" class="participate-button has-text-centered">
<a v-if="!actorIsParticipant()" @click="isJoinModalActive = true" class="button is-large is-primary is-rounded">
<b-icon icon="circle-outline"></b-icon>
<translate>Join</translate>
{{ $t('Join') }}
</a>
<a v-if="actorIsParticipant()" @click="confirmLeave()" class="button is-large is-primary is-rounded">
<b-icon icon="check-circle"></b-icon>
<translate>Leave</translate>
{{ $t('Leave') }}
</a>
</div>
</div>
@@ -54,7 +41,7 @@
<span class="tag" v-if="event.category">{{ event.category }}</span>
<span class="tag" v-if="event.tags" v-for="tag in event.tags">{{ tag.title }}</span>
<span class="visibility">
<translate v-if="event.visibility === EventVisibility.PUBLIC">public event</translate>
<span v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('public event') }}</span>
</span>
</p>
<div class="date-and-add-to-calendar">
@@ -64,7 +51,7 @@
</div>
<a class="add-to-calendar" @click="downloadIcsEvent()">
<b-icon icon="calendar-plus" />
<translate>Add to my calendar</translate>
{{ $t('Add to my calendar') }}
</a>
</div>
<p class="slug">
@@ -78,23 +65,23 @@
class="button"
:to="{ name: 'EditEvent', params: {eventId: event.uuid}}"
>
<translate>Edit</translate>
{{ $t('Edit') }}
</router-link>
</p>
<p class="control" v-if="actorIsOrganizer()">
<a class="button is-danger" @click="openDeleteEventModal()">
<translate>Delete</translate>
{{ $t('Delete') }}
</a>
</p>
<p class="control">
<a class="button is-danger" @click="isReportModalActive = true">
<translate>Report</translate>
{{ $t('Report') }}
</a>
</p>
</div>
<div class="address-wrapper">
<b-icon icon="map" />
<translate v-if="!event.physicalAddress">No address defined</translate>
<span v-if="!event.physicalAddress">{{ $t('No address defined') }}</span>
<div class="address" v-if="event.physicalAddress">
<address>
<span class="addressDescription">{{ event.physicalAddress.description }}</span>
@@ -103,7 +90,7 @@
<!-- <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>-->
</address>
<span class="map-show-button" @click="showMap = !showMap" v-if="event.physicalAddress && event.physicalAddress.geom">
<translate>Show map</translate>
{{ $t('Show map') }}
</span>
</div>
<b-modal v-if="event.physicalAddress && event.physicalAddress.geom" :active.sync="showMap" :width="800" scroll="keep">
@@ -117,14 +104,14 @@
</div>
<div class="organizer">
<actor-link :actor="event.organizerActor">
<translate
:translate-params="{name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}"
v-if="event.organizerActor">By %{ name }</translate>
<span v-if="event.organizerActor">
{{ $t('By {name}', {name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}) }}
</span>
<figure v-if="event.organizerActor.avatar" class="image is-48x48">
<img
class="is-rounded"
:src="event.organizerActor.avatar.url"
:alt="$gettextInterpolate('%{actor}\'s avatar', {actor: event.organizerActor.preferredUsername})" />
:alt="$t("{actor}'s avatar", {actor: event.organizerActor.preferredUsername})" />
</figure>
</actor-link>
</div>
@@ -144,7 +131,7 @@
<!-- <span>-->
<!-- <translate-->
<!-- :translate-n="event.participants.length"-->
<!-- translate-plural="%{event.participants.length} persons are going"-->
<!-- translate-plural="{event.participants.length} persons are going"-->
<!-- >-->
<!-- One person is going.-->
<!-- </translate>-->
@@ -154,10 +141,10 @@
<div class="description">
<div class="description-container container">
<h3 class="title">
<translate>About this event</translate>
{{ $t('About this event') }}
</h3>
<p v-if="!event.description">
<translate>The event organizer didn't add any description.</translate>
{{ $t("The event organizer didn't add any description.") }}
</p>
<div class="columns" v-else>
<div class="column is-half">
@@ -221,7 +208,7 @@
<div class="container">
<div class="columns">
<div class="column is-half has-text-centered">
<h3 class="title"><translate>Share this event</translate></h3>
<h3 class="title">{{ $t('Share this event') }}</h3>
<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>
@@ -234,14 +221,14 @@
<hr />
<div class="column is-half has-text-right add-to-calendar">
<h3 @click="downloadIcsEvent()">
<translate>Add to my calendar</translate>
{{ $t('Add to my calendar') }}
</h3>
</div>
</div>
</div>
</section>
<section class="more-events container" v-if="event.relatedEvents.length > 0">
<h3 class="title has-text-centered"><translate>These events may interest you</translate></h3>
<h3 class="title has-text-centered">{{ $t('These events may interest you') }}</h3>
<div class="columns">
<div class="column is-one-third-desktop" v-for="relatedEvent in event.relatedEvents" :key="relatedEvent.uuid">
<EventCard :event="relatedEvent" />
@@ -317,21 +304,23 @@ export default class Event extends Vue {
async openDeleteEventModal () {
const participantsLength = this.event.participants.length;
const prefix = participantsLength ? 'There are %{participants} participants. ' : '';
const prefix = participantsLength
? this.$tc('There are {participants} participants.', this.event.participants.length, {
participants: this.event.participants.length,
})
: '';
this.$buefy.dialog.prompt({
type: 'is-danger',
title: this.$gettext('Delete event'),
message: this.$gettextInterpolate(
`${prefix}` +
'Are you sure you want to delete this event? This action cannot be reverted. <br /><br />' +
'To confirm, type your event title "%{eventTitle}"',
{ participants: this.event.participants.length, eventTitle: this.event.title },
),
confirmText: this.$gettextInterpolate(
'Delete %{eventTitle}',
title: this.$t('Delete event') as string,
message: `${prefix}
${this.$t('Are you sure you want to delete this event? This action cannot be reverted.')}
<br><br>
${this.$t('To confirm, type your event title "{eventTitle}"', { eventTitle: this.event.title })}`,
confirmText: this.$t(
'Delete {eventTitle}',
{ eventTitle: this.event.title },
),
) as string,
inputAttrs: {
placeholder: this.event.title,
pattern: this.event.title,
@@ -355,7 +344,7 @@ export default class Event extends Vue {
},
});
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} reported', { eventTitle }),
message: this.$t('Event {eventTitle} reported', { eventTitle }) as string,
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,
@@ -490,7 +479,7 @@ export default class Event extends Vue {
await router.push({ name: RouteName.HOME });
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} deleted', { eventTitle }),
message: this.$t('Event {eventTitle} deleted', { eventTitle }) as string,
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,

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

@@ -1,7 +1,7 @@
<template>
<section>
<h1>
<translate>Event list</translate>
{{ $t('Event list') }}
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
@@ -13,7 +13,7 @@
/>
</div>
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">
<translate>No events found</translate>
{{ $t('No events found') }}
</b-message>
</section>
</template>