From 856aa4a50c85c3525eed6af5024358139cf5e476 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 9 Sep 2019 15:49:31 +0200 Subject: [PATCH] Add modale when deleting an event --- js/src/views/Event/Event.vue | 71 +++++++++++++++++++++++++----------- 1 file changed, 49 insertions(+), 22 deletions(-) diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue index 5467b6ba..658bdaa7 100644 --- a/js/src/views/Event/Event.vue +++ b/js/src/views/Event/Event.vue @@ -63,7 +63,7 @@

- + Delete

@@ -277,29 +277,30 @@ export default class Event extends Vue { EventVisibility = EventVisibility; - async deleteEvent() { - const router = this.$router; - const eventTitle = this.event.title; + async openDeleteEventModal () { + const participantsLength = this.event.participants.length; + const prefix = participantsLength ? 'There are %{participants} participants. ' : ''; - try { - await this.$apollo.mutate({ - mutation: DELETE_EVENT, - variables: { - id: this.event.id, - actorId: this.loggedPerson.id, - }, - }); + 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.

' + + '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 }); - 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); - } + onConfirm: () => this.deleteEvent(), + }); } async joinEvent() { @@ -398,6 +399,32 @@ export default class Event extends Vue { get emailShareUrl(): string { 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({ + 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); + } + } + }