David Raleche

NPM Commands to execute

For star rating
npm install vue-star-rating

For Nice modal
npm i vue-simple-alert

In app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import StarRating from 'vue-star-rating'
import VueSimpleAlert from "vue-simple-alert";
Vue.use(VueSimpleAlert);

Vue.component('reviewbusiness', require('./components/ReviewBusiness.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */


new Vue({
    el: '#app',
components : {
    StarRating,
    VueSimpleAlert
}
});

In ReviewBusiness.vue

<template>
  <div class="block-body">
    <div class="giv-averg-rate">
      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12">
              <label>Service?</label>
              <div class="rate-stars">
                <star-rating :star-size="25"
                             @rating-selected="setRatingService"
                ></star-rating>

              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
              <label>Value for Money?</label>
              <div class="rate-stars">
                <star-rating :star-size="25"
                             @rating-selected="setRatingValueformoney"
                ></star-rating>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
              <label>Cleanliness?</label>
              <div class="rate-stars">
                <star-rating :star-size="25"
                             @rating-selected="setRatingCleanliness"
                ></star-rating>
              </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
              <label>Location?</label>
              <div class="rate-stars">
                <star-rating :star-size="25"
                             @rating-selected="setRatingLocation"
                ></star-rating>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">
          <div class="avg-total-pilx">
            <h4 class="high">{{ averageNumber }}</h4>
            <span>Average Rating</span>
          </div>
        </div>
      </div>
    </div>


    <div class="review-form-box form-submit">
      <div class="row">

        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="form-group">
            <label>Name</label>
            <input
                id="name"
                v-model="name"
                class="form-control @error('name') is-invalid @enderror"
                name="name" placeholder="Your Name" type="text">
          </div>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="form-group">
            <label>Email</label>
            <input
                id="email"
                v-model="email"
                class="form-control @error('email') is-invalid @enderror"
                name="email" placeholder="Your Email" type="email">
          </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="form-group">
            <label>Review</label>
            <textarea
                id="message"
                v-model="message"
                class="form-control @error('message') is-invalid @enderror ht-140"
                name="message" placeholder="Review"></textarea>
          </div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="form-group">
            <button class="btn btn-theme" type="submit" @click="addReview">Submit Review</button>
          </div>
        </div>

      </div>
    </div>

  </div>


</template>

<script>
import StarRating from 'vue-star-rating'
import VueSimpleAlert from "vue-simple-alert";

export default {
  components: {
    StarRating,
    VueSimpleAlert
  },

  props: ['businessname', 'user'],


  mounted() {
    console.log('Component mounted.')
    // alert( JSON.stringify( (this.user)));
    console.log('JSON.stringify( (this.user)) ' + JSON.stringify((this.user)));
    console.log('businessname ' + JSON.stringify((this.businessname)));
  },

  data() {
    return {
      average: 0,
      ratingLocation: 0,
      ratingCleanliness: 0,
      ratingValueForMoney: 0,
      ratingService: 0,
      formsent: false,
      email: '',
      name: '',
      subject: 'Customer ' + this.businessname.BUSINESSNAME + ' Business ID ' + this.businessname.["LOCATIONACCOUNT#"],
      message: '',
    };
  },

  computed: {

    // a computed getter
    averageNumber: {
      get: function () {
        this.average = (this.ratingLocation + this.ratingCleanliness + this.ratingValueForMoney + this.ratingService) / 4
        return `${this.average}`
      },

      // setter
      set(neValue) {
        alert('toto')
      }
    }
  },
  methods: {
    setRatingLocation: function (rating) {
      this.ratingLocation = rating;
    },
    setRatingCleanliness: function (rating) {
      this.ratingCleanliness = rating;
    },
    setRatingValueformoney: function (rating) {
      this.ratingValueForMoney = rating;
    },
    setRatingService: function (rating) {
      this.ratingService = rating;
    },

    addReview() {
      axios.post('/reviewform', {
        email: this.email,
        name: this.name,
        subject: this.subject,
        useridentification: this.user,
        businessid: this.businessname.["LOCATIONACCOUNT#"],
        message: this.message,

        service: this.ratingService,
        valueformoney: this.ratingValueForMoney,
        cleanliness: this.ratingCleanliness,
        location: this.ratingLocation,
        average: this.average,
      })
          .then(({data}) => {
            console.log(data);

            this.body = '';
            this.formsent = true;
            this.$alert(data)
            flash(data);
            this.$emit('created', data);
            window.location.reload()
            location.reload()
          })
          .catch(error => {
                console.log('Error');
                console.log(error.response);
                console.log(error.response.message);

                let messageToSendBack = '';

                if (typeof error.response.data.message != "undefined") {
                  let errorMessage = error.response.data.message.toString();

                  messageToSendBack = errorMessage;

                  for (var key in error.response.data.errors) {
                    if (error.response.data.errors.hasOwnProperty(key)) {
                      messageToSendBack += error.response.data.errors[key];
                    }
                  }

                  if (errorMessage.search('given')) {
                    messageToSendBack = 'Email field is not properly entered   ';
                  }
                  
                  if (errorMessage.search('duplicate')) {
                    messageToSendBack = "You have already posted a Review  <br>";
                  }
                  
                  this.$alert(messageToSendBack);
                }

                flash(messageToSendBack, 'danger');

              }
          )
          .finally(() => this.loading = false)
      ;
    }
  }
}
</script>