update settings on button click instead of checkbox click

This commit is contained in:
Alina Beck 2019-10-02 17:10:08 +02:00
parent 8c78fef457
commit 3a013d0607

View File

@ -17,11 +17,11 @@ const template = `
<h3>Achte auf deine Daten!</h3> <h3>Achte auf deine Daten!</h3>
<ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text> <ds-text>Deine Daten sind noch nicht weitergegeben. Wenn Du die das jetzt ansiehst dann werden auch Daten mit dem Anbieter ({{embedPublisher}}) ausgetauscht!</ds-text>
<div class="embed-buttons"> <div class="embed-buttons">
<ds-button primary @click.prevent="allowEmbedTemporarily()">jetzt ansehen</ds-button> <ds-button primary @click.prevent="allowEmbed()">jetzt ansehen</ds-button>
<ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button> <ds-button ghost @click.prevent="closeOverlay()">Abbrechen</ds-button>
</div> </div>
<label class="embed-checkbox"> <label class="embed-checkbox">
<input type="checkbox" v-model="currentUser.allowEmbedIframes" @click.prevent="check($event)" /> <input type="checkbox" v-model="checkedAlwaysAllowEmbeds" />
<span>Inhalte von Drittanbietern immer zulassen</span> <span>Inhalte von Drittanbietern immer zulassen</span>
</label> </label>
</aside> </aside>
@ -85,13 +85,16 @@ export default class Embed extends Node {
props: ['node', 'updateAttrs', 'options'], props: ['node', 'updateAttrs', 'options'],
data: () => ({ data: () => ({
embedData: {}, embedData: {},
showEmbed: null, checkedAlwaysAllowEmbeds: false,
showEmbed: false,
showOverlay: false, showOverlay: false,
}), }),
async created() { async created() {
if (!this.options) return {} if (this.options) {
this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl }) this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
this.showEmbed = this.currentUser.allowEmbedIframes this.showEmbed = this.currentUser.allowEmbedIframes
this.checkedAlwaysAllowEmbeds = this.currentUser.allowEmbedIframes
}
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
@ -142,18 +145,15 @@ export default class Embed extends Node {
closeOverlay() { closeOverlay() {
this.showOverlay = false this.showOverlay = false
}, },
check(e) { allowEmbed() {
if (e.target.checked) {
this.submit(true)
} else {
this.submit(false)
}
},
allowEmbedTemporarily() {
this.showEmbed = true this.showEmbed = true
this.closeOverlay() this.closeOverlay()
if (this.checkedAlwaysAllowEmbeds !== this.currentUser.allowEmbedIframes) {
this.updateEmbedSettings(this.checkedAlwaysAllowEmbeds)
}
}, },
async submit(allowEmbedIframes) { async updateEmbedSettings(allowEmbedIframes) {
try { try {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: allowEmbedIframesMutation(), mutation: allowEmbedIframesMutation(),