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

Add modale when deleting an event

Browse Source
This commit is contained in:
Chocobozzz 2019-09-09 15:49:31 +02:00 committed by Thomas Citharel
parent 69ac52c4ed
commit 9052bc6f8a
1 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@
</router-link> </router-link>
</p> </p>
<p class="control"> <p class="control">
<a class="button is-danger" @click="deleteEvent()"> <a class="button is-danger" @click="openDeleteEventModal()">
<translate>Delete</translate> <translate>Delete</translate>
</a> </a>
</p> </p>
@ -277,29 +277,30 @@ export default class Event extends Vue {
EventVisibility = EventVisibility; EventVisibility = EventVisibility;
async deleteEvent() { async openDeleteEventModal () {
const router = this.$router; const participantsLength = this.event.participants.length;
const eventTitle = this.event.title; const prefix = participantsLength ? 'There are %{participants} participants. ' : '';
try { this.$buefy.dialog.prompt({
await this.$apollo.mutate<IParticipant>({ type: 'is-danger',
mutation: DELETE_EVENT, title: this.$gettext('Delete event'),
variables: { message: this.$gettextInterpolate(
id: this.event.id, `${prefix}` +
actorId: this.loggedPerson.id, '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}',
{ eventTitle: this.event.title },
),
inputAttrs: {
placeholder: this.event.title,
pattern: this.event.title,
},
await router.push({ name: RouteName.HOME }); onConfirm: () => this.deleteEvent(),
this.$buefy.notification.open({ });
message: this.$gettextInterpolate('Event %{eventTitle} deleted', { eventTitle }),
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,
});
} catch (error) {
console.error(error);
}
} }
async joinEvent() { async joinEvent() {
@ -398,6 +399,32 @@ export default class Event extends Vue {
get emailShareUrl(): string { get emailShareUrl(): string {
return `mailto:?to=&body=${this.event.url}${encodeURIComponent('\n\n')}${this.event.description}&subject=${this.event.title}`; return `mailto:?to=&body=${this.event.url}${encodeURIComponent('\n\n')}${this.event.description}&subject=${this.event.title}`;
} }
private async deleteEvent() {
const router = this.$router;
const eventTitle = this.event.title;
try {
await this.$apollo.mutate<IParticipant>({
mutation: DELETE_EVENT,
variables: {
id: this.event.id,
actorId: this.loggedPerson.id,
},
});
await router.push({ name: RouteName.HOME });
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} deleted', { eventTitle }),
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,
});
} catch (error) {
console.error(error);
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>