<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>