Allow multiple feedback recipient options

in which case user must choose one, to send feedback
This commit is contained in:
Lance Edgar 2021-08-02 18:30:54 -05:00
parent 6e949eb199
commit 695ea388a6
2 changed files with 75 additions and 14 deletions

View file

@ -12,6 +12,24 @@
<section class="modal-card-body"> <section class="modal-card-body">
<p class="modal-card-title">User Feedback</p> <p class="modal-card-title">User Feedback</p>
<br /> <br />
<div v-if="hasRecipientOptions">
<p class="block">
Comments welcome!&nbsp; 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> <p>
Questions, suggestions, comments, complaints, etc. regarding this Questions, suggestions, comments, complaints, etc. regarding this
website are welcome and may be submitted below. website are welcome and may be submitted below.
@ -22,6 +40,7 @@
{{ referringURL }} {{ referringURL }}
</div> </div>
</b-field> </b-field>
</div>
<b-field label="Your Name" <b-field label="Your Name"
v-show="!userUUID"> v-show="!userUUID">
@ -36,12 +55,12 @@
</b-field> </b-field>
<div class="buttons"> <div class="buttons">
<b-button @click="showFeedbackDialog = false"> <b-button @click="cancelFeedback()">
Cancel Cancel
</b-button> </b-button>
<b-button type="is-primary" <b-button type="is-primary"
@click="sendFeedback()" @click="sendFeedback()"
:disabled="!message"> :disabled="sendIsDisabled">
Send Note Send Note
</b-button> </b-button>
</div> </div>
@ -59,29 +78,64 @@ export default {
url: String, url: String,
// userUUID: String, // userUUID: String,
// user: Object, // user: Object,
recipientOptions: {
type: Array,
default: null,
},
}, },
data() { data() {
return { return {
showFeedbackDialog: false, showFeedbackDialog: false,
referringURL: null, referringURL: null,
recipient: null,
userUUID: null, userUUID: null,
userName: null, userName: null,
message: 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: { methods: {
clearForm() {
this.recipient = null
this.message = null
},
showFeedback() { showFeedback() {
this.referringURL = location.href this.referringURL = location.href
if (this.$store.state.user) { if (this.$store.state.user) {
this.userUUID = this.$store.state.user.uuid this.userUUID = this.$store.state.user.uuid
} }
this.message = null
this.showFeedbackDialog = true this.showFeedbackDialog = true
}, },
cancelFeedback() {
this.showFeedbackDialog = false
// this.clearForm()
},
sendFeedback() { sendFeedback() {
let params = { let params = {
email_key: this.recipient,
referrer: this.referringURL, referrer: this.referringURL,
user: this.userUUID, user: this.userUUID,
// user: this.user ? this.user.uuid : null, // user: this.user ? this.user.uuid : null,
@ -90,6 +144,7 @@ export default {
} }
this.$http.post(this.url, params).then(response => { this.$http.post(this.url, params).then(response => {
this.showFeedbackDialog = false this.showFeedbackDialog = false
this.clearForm()
this.$buefy.toast.open({ this.$buefy.toast.open({
message: "Thank you for your feedback!", message: "Thank you for your feedback!",
type: 'is-success', type: 'is-success',

View file

@ -60,7 +60,9 @@
<div v-if="shouldShowFeedback" <div v-if="shouldShowFeedback"
class="level-item"> class="level-item">
<byjove-feedback :url="feedbackUrl"></byjove-feedback> <byjove-feedback :url="feedbackUrl"
:recipient-options="feedbackRecipientOptions">
</byjove-feedback>
</div> </div>
</nav> </nav>
@ -93,6 +95,10 @@ export default {
type: String, type: String,
default: '/api/feedback', default: '/api/feedback',
}, },
feedbackRecipientOptions: {
type: Array,
default: null,
},
includeAboutLink: { includeAboutLink: {
type: Boolean, type: Boolean,
default: true, default: true,