Jan 27, 2019
0
Level 14
Vue and rating system
Hello guys in beautiful Sunday:)
let start from code :)
my vue component:
<template>
<div class="container px-0 mt-4">
<div class="row align-items-center">
<div id="review" class="col-12 card mt-4 pt-3">
<div class="row">
<div class="col-12">
<div class="col-7 mb-3"><span><strong>Reviews</strong></span></div>
<a class="small mr-3 ml-3">Sort by</a>
<!-- Small dropdown -->
<div class="dropdown">
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Newest first
</button>
<div class="dropdown-menu dropdown-menu-sm" aria-labelledby="dropdown_small"><a
class="dropdown-item" href="#">Oldest first</a> <a class="dropdown-item" href="#">Rating
(High to low)</a> <a class="dropdown-item" href="#">Rating (Low to high)</a></div>
</div>
<!--Paginate-->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a
@click.prevent="fetchReviews(pagination.prev_page_url)" class="page-link"
href="">Previous</a></li>
<li class="page-item disabled"><a href="#" class="page-link text-dark">Page {{
pagination.current_page}}
of {{ pagination.last_page}}</a></li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a
@click.prevent="fetchReviews(pagination.next_page_url)" class="page-link"
href="">Next</a></li>
</ul>
</nav>
<!--Paginate-->
<!--loop-->
<div class="media mt-4 ml-3" v-for="review in reviews" v-bind:key="review.id">
<img class="mr-3 rounded" src="https://lorempixel.com/64/64/people/?81158"
alt="reviewers-image">
<div class="media-body">
<h6 class="mt-0">{{review.first_name}} {{review.last_name}}</h6>
<div class="small">{{review.created_at}}</div>
<div class="small">{{review.body}}</div>
</div>
</div>
<!--loop-->
<!-- Review section START-->
<div class="container px-0 mt-4">
<div class="row align-items-center">
<div class="col-12 mt-4 pt-3 mr-0" style="background-color: #f8f8f8;">
<div class="row">
<div class="col-4 ml-3"><span><strong>Write your review</strong></span></div>
<div class="col pr-4 pb-3 text-right"><a class="" data-toggle="collapse"
href="#collapseReview"
aria-expanded="false"
aria-controls="collapseReview"><i
class="fas fa-caret-down"></i></a></div>
<div class="collapse col-12" data-toggle="false" id="collapseReview">
<!-- star rating -->
<div class="col-6 star-rating">
<div class="row">
<div class="rating mb-3">
</div>
</div>
</div>
<!--star rating end -->
<form @submit.prevent="saveReview">
<div class="col-6">
<div class="form-group">
<input type="text" name="title" id="title"
v-model="review.title"
class="form-control form-control-sm"
placeholder="Title of your review">
</div>
</div>
<div class="offset-6"></div>
<div class="col-9">
<div class="small mb-1"><i class="fas fa-info-circle mr-2"></i>Be
honest with your review, this will be made public.
</div>
</div>
<div class="col-12">
<div class="form-group">
<textarea class="form-control" name="body" id="body"
v-model="review.body"
placeholder="Your review - tell people about your experience"
rows="3" resize="none"></textarea>
</div>
</div>
<div class="col-12 mb-3">
<input type="file" name="file-1[]" id="file"
class="custom-input-file"
data-multiple-caption="{count} files selected" multiple/>
<label for="file"> <em class="fa fa-upload"></em> <span>Choose a photo…</span>
</label>
</div>
<div class="row">
<div class="col ml-3"><span>Your details</span></div>
</div>
<div class="row">
<div class="col ml-3">
<div class="form-group">
<input type="text" id="first_name" name="first_name"
v-model="review.first_name"
class="form-control form-control-sm"
placeholder="First name">
</div>
</div>
<div class="col mr-3">
<div class="form-group">
<input type="text" id="last_name" name="last_name"
v-model="review.last_name"
class="form-control form-control-sm"
placeholder="Last name">
</div>
</div>
</div>
<div class="row">
<div class="col ml-3 small">
<div class="mt-3">
<span>This email won't be shown publically</span><em
class="ml-3 fas fa-angle-right"></em></div>
</div>
<div class="col mr-3">
<div class="form-group">
<input type="text" id="email" name="email"
v-model="review.email"
class="form-control form-control-sm"
placeholder="Email">
</div>
</div>
</div>
<div class="col-12 text-center mt-2 mb-4">
<button type="submit"
class="btn btn-sm btn-primary mt-4 mt-sm-0 shadow"><i
class="fas fa-pen-alt mr-2"></i>Submit your review
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Review section END-->
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['companyId', 'csrfToken'],
name: "Reviews",
data() {
return {
reviews: [],
login: false,
review: {
first_name: '',
last_name: '',
email: '',
title: '',
rate: '',
photo: '',
body: '',
created_at: '',
},
review_id: '',
pagination: {},
}
},
created() {
this.fetchReviews();
this.randomNumber();
},
methods: {
fetchReviews(page_url) {
let vm = this;
page_url = page_url || '/review/' + this.companyId;
fetch(page_url)
.then(res => res.json()
)
.then(res => {
this.reviews = res.data;
vm.makePagination(res);
})
.catch(err => console.log(err)
);
},
saveReview() {
fetch('/review/' + this.companyId, {
method: 'post',
headers: {
'X-CSRF-TOKEN': this.csrfToken,
'content-type': 'application/json'
},
body: JSON.stringify(this.review),
}).then(res => res.json())
.then(data => {
this.review.first_name = '';
this.review.last_name = '';
this.review.email = '';
this.review.title = '';
this.review.rate = '';
this.review.photo = '';
this.review.body = '';
this.fetchReviews()
})
.catch(err => console.log(err));
},
makePagination(meta) {
let pagination = {
current_page: meta.current_page,
last_page: meta.last_page,
next_page_url: meta.next_page_url,
prev_page_url: meta.prev_page_url,
}
this.pagination = pagination;
},
randomNumber: function () {
this.random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
}
}
}
</script>
<style scoped>
</style>
so far working well but i can`t pass/get data from rating system. I am using : https://github.com/nashio/star-rating-svg
Voting system working but how pass data from rating system after voting to vue component and save results in DB?
Please or to participate in this conversation.