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>