mobilizon.chapril.org-mobil.../js/src/views/Event/Edit.vue

382 lines
12 KiB
Vue

<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>
<div v-if="$apollo.loading">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>
</h2>
<picture-upload v-model="pictureFile" />
<b-field :label="$gettext('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" />
<address-auto-complete v-model="event.physicalAddress" />
<b-field :label="$gettext('Organizer')">
<identity-picker v-model="event.organizerActor"></identity-picker>
</b-field>
<div class="field">
<label class="label">{{ $gettext('Description') }}</label>
<editor v-model="event.description" />
</div>
<b-field :label="$gettext('Website / URL')">
<b-input v-model="event.onlineAddress" placeholder="URL" />
</b-field>
<!--<b-field :label="$gettext('Category')">
<b-select placeholder="Select a category" v-model="event.category">
<option
v-for="category in categories"
:value="category"
:key="category"
>{{ $gettext(category) }}</option>
</b-select>
</b-field>-->
<h2 class="subtitle">
<translate>
Who can view this event and participate
</translate>
</h2>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.PUBLIC">
<translate>Visible everywhere on the web (public)</translate>
</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>
</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>
</b-radio>
</div>
<div class="field">
<label class="label">Approbation des participations</label>
<b-switch v-model="needsApproval">
Je veux approuver chaque demande de participation
</b-switch>
</div>
<div class="field">
<label class="label">Mise en avant</label>
<b-switch v-model="doNotPromote" :disabled="canPromote === false">
Ne pas autoriser la mise en avant sur sur Mobilizon
</b-switch>
</div>
<div class="field">
<b-switch v-model="limitedPlaces">
Places limitées
</b-switch>
</div>
<div class="box" v-if="limitedPlaces">
<b-field label="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
</b-switch>
</b-field>
<b-field>
<b-switch v-model="event.options.showParticipationPrice">
Display participation price
</b-switch>
</b-field>
</div>
<h2 class="subtitle">
<translate>
Modération des commentaires publics
</translate>
</h2>
<label>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>
</b-radio>
</div>
<div class="field">
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.MODERATED">
<translate>Moderated comments (shown after approval)</translate>
</b-radio>
</div>
<div class="field">
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED">
<translate>Close all comments (except for admins)</translate>
</b-radio>
</div>
<h2 class="subtitle">
<translate>
Status
</translate>
</h2>
<div class="field">
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.TENTATIVE">
<translate>Tentative: Will be confirmed later</translate>
</b-radio>
</div>
<div class="field">
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.CONFIRMED">
<translate>Confirmed: Will happen</translate>
</b-radio>
</div>
<button class="button is-primary">
<translate v-if="isUpdate === false">Create my event</translate>
<translate v-else>Update my event</translate>
</button>
</form>
</div>
</section>
</template>
<style lang="scss">
@import "@/variables.scss";
h2.subtitle {
margin: 10px 0;
span {
padding: 5px 7px;
display: inline;
background: $secondary;
}
}
</style>
<script lang="ts">
import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue';
import Editor from '@/components/Editor.vue';
import DateTimePicker from '@/components/Event/DateTimePicker.vue';
import TagInput from '@/components/Event/TagInput.vue';
import { TAGS } from '@/graphql/tags';
import { ITag } from '@/types/tag.model';
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
import IdentityPicker from '@/views/Account/IdentityPicker.vue';
@Component({
components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor, IdentityPicker },
apollo: {
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
tags: {
query: TAGS,
},
},
})
export default class EditEvent extends Vue {
@Prop({ type: Boolean, default: false }) isUpdate!: boolean;
@Prop({ required: false, type: String }) uuid!: string;
eventId!: string | undefined;
currentActor = new Person();
tags: ITag[] = [];
event = new EventModel();
pictureFile: File | null = null;
EventStatus = EventStatus;
EventVisibilityJoinOptions = EventVisibilityJoinOptions;
eventVisibilityJoinOptions: EventVisibilityJoinOptions = EventVisibilityJoinOptions.PUBLIC;
needsApproval: boolean = false;
doNotPromote: boolean = false;
canPromote: boolean = true;
limitedPlaces: boolean = false;
CommentModeration = CommentModeration;
// categories: string[] = Object.keys(Category);
@Watch('$route.params.eventId', { immediate: true })
async onEventIdParamChanged (val: string) {
if (!this.isUpdate) return;
this.eventId = val;
if (this.eventId) {
this.event = await this.getEvent();
this.pictureFile = await buildFileFromIPicture(this.event.picture);
this.limitedPlaces = this.event.options.maximumAttendeeCapacity != null;
}
}
created() {
const now = new Date();
const end = new Date();
end.setUTCHours(now.getUTCHours() + 3);
this.event.beginsOn = now;
this.event.endsOn = end;
this.event.organizerActor = this.event.organizerActor || this.currentActor;
}
createOrUpdate(e: Event) {
e.preventDefault();
if (this.eventId) return this.updateEvent();
return this.createEvent();
}
async createEvent() {
try {
const { data } = await this.$apollo.mutate({
mutation: CREATE_EVENT,
variables: this.buildVariables(),
});
console.log('Event created', data);
await this.$router.push({
name: 'Event',
params: { uuid: data.createEvent.uuid },
});
} catch (err) {
console.error(err);
}
}
async updateEvent() {
try {
await this.$apollo.mutate({
mutation: EDIT_EVENT,
variables: this.buildVariables(),
});
await this.$router.push({
name: 'Event',
params: { uuid: this.eventId as string },
});
} catch (err) {
console.error(err);
}
}
/**
* Build variables for Event GraphQL creation query
*/
private buildVariables() {
let res = this.event.toEditJSON();
if (this.event.organizerActor) {
res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
}
delete this.event.options['__typename'];
if (this.event.physicalAddress) {
delete this.event.physicalAddress['__typename'];
}
const pictureObj = buildFileVariable(this.pictureFile, 'picture');
return Object.assign({}, res, pictureObj);
}
private async getEvent() {
const result = await this.$apollo.query({
query: FETCH_EVENT,
variables: {
uuid: this.eventId,
},
});
return new EventModel(result.data.event);
}
@Watch('eventVisibilityJoinOptions')
calculateVisibilityAndJoinOptions(eventVisibilityJoinOptions) {
switch (eventVisibilityJoinOptions) {
case EventVisibilityJoinOptions.PUBLIC:
this.event.visibility = EventVisibility.UNLISTED;
this.canPromote = true;
break;
case EventVisibilityJoinOptions.LINK:
this.event.visibility = EventVisibility.PRIVATE;
this.canPromote = false;
this.doNotPromote = false;
break;
case EventVisibilityJoinOptions.LIMITED:
this.event.visibility = EventVisibility.RESTRICTED;
this.canPromote = false;
this.doNotPromote = false;
break;
}
}
// getAddressData(addressData) {
// if (addressData !== null) {
// this.event.address = {
// geom: {
// data: {
// latitude: addressData.latitude,
// longitude: addressData.longitude
// },
// type: "point"
// },
// addressCountry: addressData.country,
// addressLocality: addressData.locality,
// addressRegion: addressData.administrative_area_level_1,
// postalCode: addressData.postal_code,
// streetAddress: `${addressData.street_number} ${addressData.route}`
// };
// }
// }
}
</script>