davide-casiraghi/ci-global-calendar

View on GitHub
resources/js/components/ContinentsCountriesSelects.vue

Summary

Maintainability
Test Coverage
<template>
    <div>
        <div class="form-group continent_id">    
            <select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" v-bind:title="select_a_continent_placeholder" v-on:change="getAllCountries(continents)">
                <option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
                    {{ continent.name }}
                </option>
            </select>
        </div>
        
        <div class="form-group country_id">    
            <select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" v-bind:title="select_a_country_placeholder" v-on:change="changeContinent(country_selected)">
                <option  v-for="(country, index) in optionCountries" v-bind:value="country.id" >
                    {{ country.name }}
                </option>  
            </select>
        </div>
        
    </div>
</template>

<script>
    export default {
        props : [
           'select_a_continent_placeholder',
           'select_a_country_placeholder',
           'continent-selected', 
           'country-selected',
       ],
        mounted() {
            console.log('Component mounted.');
            this.loadData();
            //console.log('Loaded datas.');
            //console.log(this.continents);
            //console.log(this.countries);
            console.log(this.select_a_continent_placeholder);
            console.log(this.select_a_country_placeholder);
            
            if (this.continentSelected){
                jQuery("select[name='continent_id']").selectpicker('refresh');  // Refresh the filters when the page is loaded to show $searchContinent and $searchCountry (after the search button get pressed) 
                //console.log("refresh continent dropdown");
            }
            if (this.countrySelected){
                jQuery("select[name='country_id']").selectpicker('refresh');
                //console.log("refresh countries dropdown");
            }
        },
        data() {
            return {
                continents: [],  // in the console - $vm0.$options.parent.$children[0].countries
                countries: [],
                continent_selected: this.continentSelected, // continentSelected is the kebab case that correspond to continent-selected
                country_selected: this.countrySelected,  // countrySelected is the kebab case that correspond to country-selected
            }
       },
       computed: {
           optionCountries:{   // in the console - $vm0.$children[0].$options.parent.$children[0].optionCountries 
                                        //    or - $vm0.$options.parent.$children[0].optionCountries
               get: function () {
                   //console.log("GET");
                return this.countries;
                },
                set: function (newValue) {
                    //console.log(newValue);
                    this.countries = newValue;
                    setTimeout(() => {
                        jQuery('.selectpicker').selectpicker('refresh');
                    }, 500);
                }
            } 
        },
       
       
       methods: {
               
            /**
             * Load continents and countries from /api/continents API trough axios - https://github.com/axios/axios#request-config
             * Populate the continents array for the continents dropdown
             */
            loadData: function() {  // In the console - $vm0.$children[0].$options.parent.$children[0].loadData()
                axios.get('/api/continents')
                .then((response) => {
                    // handle success
                    //console.log(response.data.data);
                    this.continents = response.data.data;
                    this.getAllCountries(this.continents);
                })
                .catch((error) => {
                    // handle error
                    console.log(error);
                })
                .then(() => {
                    // always executed
                });
            },
            /**
             * Populate the countries array for the countries dropdown 
             * this function is also called every time the continents dropdown change
             */
            getAllCountries: function(continents) {
                //eg: //this.countries[1] = {name: 'apple', price: '10'};
                //console.log(this.continent_selected);
                //console.log(continents);
                
                var j = 0;
                this.countries = [];
                    
                for (var i = 0, len = continents.length; i < len; i++) {
                    
                    if (!this.continent_selected){
                        //console.log("No Continent selected");
                        for (var key in continents[i].active_countries) {
                            //console.log(key);
                            this.countries[j] = {id: continents[i].active_countries[key], name: key, continent_id: continents[i].id};
                            j++;
                        }
                    }
                    else{
                        //console.log("continent selected: "+ this.continent_selected);
                        for (var key in continents[i].active_countries) {
                            if (continents[i].id == this.continent_selected){
                                this.countries[j] = {id: continents[i].active_countries[key], name: key, continent_id: continents[i].id};
                                j++;
                            }
                        }
                        this.optionCountries = this.countries;
                    }
                    
                    setTimeout(() => {
                        jQuery("select[name='country_id']").selectpicker('val', '');
                        jQuery('.selectpicker').selectpicker('refresh');
                    }, 500);
                }
            },
            
            /**
             * Select the continent that correspond to the selected country 
             * This function is called every time the countries dropdown change
             */
            changeContinent(country_id){
                
                // Get from the countries array the country object that correspond to the selected country_id
                    let obj = this.countries.find(o => o.id === country_id);  // https://stackoverflow.com/questions/12462318/find-a-value-in-an-array-of-objects-in-javascript
                    //console.log(obj);
                // Then pick its continent_id
                    //console.log(obj.continent_id);
                    //console.log(this.continent_selected);
                    
                    if (obj.continent_id != this.continent_selected){
                        this.continent_selected = obj.continent_id;
                        setTimeout(() => {
                          jQuery('.selectpicker').selectpicker('refresh');
                        }, 200);
                    }
            }
        },
       
    }

</script>