163 lines
4.4 KiB
Vue
163 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<b-button type="is-primary"
|
|
icon-left="fas fa-comment"
|
|
@click="showFeedback()">
|
|
Feedback
|
|
</b-button>
|
|
<b-modal has-modal-card
|
|
:active.sync="showFeedbackDialog">
|
|
<div class="modal-card">
|
|
|
|
<section class="modal-card-body">
|
|
<p class="modal-card-title">User Feedback</p>
|
|
<br />
|
|
|
|
<div v-if="hasRecipientOptions">
|
|
<p class="block">
|
|
Comments welcome! Just let us know who they should go to.
|
|
</p>
|
|
<b-field label="Who To Notify?"
|
|
:type="recipient ? null : 'is-danger'">
|
|
<b-select v-model="recipient">
|
|
<option v-for="option in allRecipientOptions"
|
|
:key="option.value"
|
|
:value="option.value">
|
|
{{ option.label }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
</div>
|
|
|
|
<div v-if="!hasRecipientOptions">
|
|
<p>
|
|
Questions, suggestions, comments, complaints, etc. regarding this
|
|
website are welcome and may be submitted below.
|
|
</p>
|
|
|
|
<b-field label="Referring URL">
|
|
<div class="control">
|
|
{{ referringURL }}
|
|
</div>
|
|
</b-field>
|
|
</div>
|
|
|
|
<b-field label="Your Name"
|
|
v-show="!userUUID">
|
|
<!-- v-show="!user"> -->
|
|
<b-input v-model="userName"></b-input>
|
|
</b-field>
|
|
|
|
<b-field label="Message">
|
|
<b-input v-model="message"
|
|
type="textarea">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<div class="buttons">
|
|
<b-button @click="cancelFeedback()">
|
|
Cancel
|
|
</b-button>
|
|
<b-button type="is-primary"
|
|
@click="sendFeedback()"
|
|
:disabled="sendIsDisabled">
|
|
Send Note
|
|
</b-button>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</b-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ByjoveFeedback',
|
|
props: {
|
|
url: String,
|
|
// userUUID: String,
|
|
// user: Object,
|
|
recipientOptions: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showFeedbackDialog: false,
|
|
referringURL: null,
|
|
recipient: null,
|
|
userUUID: null,
|
|
userName: null,
|
|
message: null,
|
|
}
|
|
},
|
|
computed: {
|
|
allRecipientOptions() {
|
|
if (this.recipientOptions !== null) {
|
|
return this.recipientOptions
|
|
}
|
|
return []
|
|
},
|
|
hasRecipientOptions() {
|
|
return !!this.allRecipientOptions.length
|
|
},
|
|
sendIsDisabled() {
|
|
if (this.hasRecipientOptions && !this.recipient) {
|
|
return true
|
|
}
|
|
if (!this.message) {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
clearForm() {
|
|
this.recipient = null
|
|
this.message = null
|
|
},
|
|
|
|
showFeedback() {
|
|
this.referringURL = location.href
|
|
if (this.$store.state.user) {
|
|
this.userUUID = this.$store.state.user.uuid
|
|
}
|
|
this.showFeedbackDialog = true
|
|
},
|
|
|
|
cancelFeedback() {
|
|
this.showFeedbackDialog = false
|
|
// this.clearForm()
|
|
},
|
|
|
|
sendFeedback() {
|
|
let params = {
|
|
email_key: this.recipient,
|
|
referrer: this.referringURL,
|
|
user: this.userUUID,
|
|
// user: this.user ? this.user.uuid : null,
|
|
user_name: this.userName,
|
|
message: this.message,
|
|
}
|
|
this.$http.post(this.url, params).then(response => {
|
|
this.showFeedbackDialog = false
|
|
this.clearForm()
|
|
this.$buefy.toast.open({
|
|
message: "Thank you for your feedback!",
|
|
type: 'is-success',
|
|
})
|
|
}, response => {
|
|
this.$buefy.toast.open({
|
|
message: "Something went wrong!",
|
|
type: 'is-danger',
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|