byjove/src/components/feedback/ByjoveFeedback.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 />
          <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>

          <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="showFeedbackDialog = false">
              Cancel
            </b-button>
            <b-button type="is-primary"
                         @click="sendFeedback()"
                         :disabled="!message">
              Send Note
            </b-button>
          </div>
        </section>

      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
    name: 'ByjoveFeedback',
    props: {
        url: String,
        // userUUID: String,
        // user: Object,
    },
    data() {
        return {
            showFeedbackDialog: false,
            referringURL: null,
            userUUID: null,
            userName: null,
            message: null,
        }
    },
    methods: {

        showFeedback() {
            this.referringURL = location.href
            if (this.$store.state.user) {
                this.userUUID = this.$store.state.user.uuid
            }
            this.message = null
            this.showFeedbackDialog = true
        },

        sendFeedback() {
            let params = {
                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.$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>