Allow multiple feedback recipient options
in which case user must choose one, to send feedback
This commit is contained in:
parent
6e949eb199
commit
695ea388a6
|
@ -12,16 +12,35 @@
|
|||
<section class="modal-card-body">
|
||||
<p class="modal-card-title">User Feedback</p>
|
||||
<br />
|
||||
<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 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">
|
||||
|
@ -36,12 +55,12 @@
|
|||
</b-field>
|
||||
|
||||
<div class="buttons">
|
||||
<b-button @click="showFeedbackDialog = false">
|
||||
<b-button @click="cancelFeedback()">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
@click="sendFeedback()"
|
||||
:disabled="!message">
|
||||
@click="sendFeedback()"
|
||||
:disabled="sendIsDisabled">
|
||||
Send Note
|
||||
</b-button>
|
||||
</div>
|
||||
|
@ -59,29 +78,64 @@ export default {
|
|||
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.message = null
|
||||
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,
|
||||
|
@ -90,6 +144,7 @@ export default {
|
|||
}
|
||||
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',
|
||||
|
|
|
@ -60,7 +60,9 @@
|
|||
|
||||
<div v-if="shouldShowFeedback"
|
||||
class="level-item">
|
||||
<byjove-feedback :url="feedbackUrl"></byjove-feedback>
|
||||
<byjove-feedback :url="feedbackUrl"
|
||||
:recipient-options="feedbackRecipientOptions">
|
||||
</byjove-feedback>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
@ -93,6 +95,10 @@ export default {
|
|||
type: String,
|
||||
default: '/api/feedback',
|
||||
},
|
||||
feedbackRecipientOptions: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
includeAboutLink: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
Loading…
Reference in a new issue