File: resources/js/components/Search.vue

Recommend this page to a friend!
  Classes of Edward Paul  >  Find PHP Service  >  resources/js/components/Search.vue  >  Download  
File: resources/js/components/Search.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Find PHP Service
Application to find services in a near location
Author: By
Last change:
Date: 6 months ago
Size: 3,825 bytes
 

Contents

Class file image Download
<template>
    <div class="row justify-content-center">
        <div class="col-12 col-md-10 col-lg-8">
            <form class="card card-sm" style="border: none; background-color: rgba(245, 245, 245, 0.4)">
                <div class="card-body row no-gutters align-items-center">
                    <div class="col-auto">
                        <i class="fas fa-search h4 text-body"></i>
                    </div>
                    <!--end of col-->
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ form.distance }} <span v-if="form.distance !== 'Distance' ">Km</span></button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item"
                                   v-for="(val, index) in distances" href="#"
                                   @click.prevent="form.distance = val" >

                                    <span v-if="index == distances.length - 1">
                                    <div  role="separator" class="dropdown-divider"></div>
                                    </span>
                                {{ val }} <span v-if="val !== 'Anywhere'">Km</span>
                                </a>


                            </div>
                        </div>
                        <input
                            type="text"
                            class="form-control form-control-lg  form-control-borderless"
                            placeholder="Search Servives or keywords"
                            v-model="form.keyword"
                            :class="{ ' is-invalid' : errors['keyword'] }"
                        >
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button" @click="getResult">Search</button>
                        </div>
                    </div>
                    <!--end of col-->
                </div>
            </form>
        </div>
        <search-result v-if="results.length" :results="results"></search-result>
    </div>
</template>

<script>
    import VueGeolocation from 'vue-browser-geolocation';
    import SearchResult from './SearchResult.vue'
    Vue.use(VueGeolocation);
    export default {
        props:['endpoint'],
        name: "Search",
        data(){
            return {
                distances: ['1', '2', '5', '10', '50', '100', 'Anywhere'],
                form:{
                    distance:'Distance',
                },
                errors: [],
                results: {}
            }
        },
        components:{
            SearchResult
        },
        methods:{
            getLocation(){
                this.$getLocation()
                    .then(coordinates => {
                        this.form.latitude = coordinates.lat;
                        this.form.longitude = coordinates.lng;

                    })
                    .catch((error)=>{
                        this.distances =['Anywhere']
                        this.form.distance = 'Anywhere';
                    })
            },
            getResult(){
                axios.post(`${this.endpoint}`, this.form).then((response)=>{
                    this.errors = []
                    this.results = response.data.data
                }).catch((error) => {
                    if(error.response.status === 422){
                        this.errors = error.response.data.errors
                    }

                })
            }
        },
        mounted() {
            this.getLocation()
        }
    }
</script>

<style scoped>

</style>

For more information send a message to info at phpclasses dot org.