Add modale when deleting an event
This commit is contained in:
parent
91d1b9b81f
commit
856aa4a50c
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user