gidaban79
171
0
Vue

Vue and rating system

Posted 6 months ago by gidaban79

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 sign in or create an account to participate in this conversation.