FormField.vue

<script>
    import { FormField, HandlesValidationErrors } from 'laravel-nova'
    export default {
        mixins: [FormField, HandlesValidationErrors],
        props: ['resourceName', 'resourceId', 'field'],
        data: () =>({
            results: [
                // { label: "British Virgin Islands, (VG)", value: 41198 },
                // { label: "Zambia", value: 41203 },
            ],
            isLoading: false,
            selectedResource: null,
            selectedFilter: 'all',
            selectedValue: '',
            filterTypes: [
                {
                    label: "All Locations",
                    value: "all",
                },
                {
                    label: "States & Capitals",
                    value: "states",
                },
                {
                    label: "Countries & Capitals",
                    value: "countries",
                },
                {
                    label: "Location in State",
                    value: "state",
                },
                {
                    label: "Location in Country",
                    value: "country",
                },
            ],
            filterValues: [],
        }),
        methods: {
            /*
             * Set the initial, internal value for the field.
             */
            setInitialValue() {
                if(this.field.value){
                    this.value = this.field.value
                    this.selectedResource = {
                        label: this.value.placeTitle,
                        value: this.value.id,
                    }
                    this.results = [this.selectedResource]
                    return
                }
                this.value = ''
            },

            /**
             * Fill the given FormData object with the field's internal value.
             */
            fill(formData) {
                formData.append(this.field.attribute,
                    this.selectedResource ? this.selectedResource.value : ''
                )
            },

            /**
             * Update the field's internal value.
             */
            handleChange(value) {
                this.value = value
            },

            /**
             * Handle Selection
             */
            selectResource(value){
                this.selectedResource = value
            },
            /**
             * HTTP Request.
             * @return void
             */
            request(keyword) {
                if(!keyword || this.isLoading) return;
                this.isLoading=true
                const urlBase = '/nova-vendor/bayareawebpro/nova-field-locations';
                Nova.request()
                    .get(`${urlBase}/search?keyword=${keyword}&filter=${this.selectedFilter}&value=${this.selectedValue}`)
                    .then(({data}) => {
                        this.results = data
                    })
                    .finally(() => {
                        this.isLoading=false
                    })
                    .catch(({message}) => {
                        alert(message)
                    })
            },
            loadFilters(){
                this.isLoading=true
                Nova.request()
                    .get(`/nova-vendor/bayareawebpro/nova-field-locations/filters/${this.selectedFilter}`)
                    .then(({data}) => {
                        if(Array.isArray(data)){
                            this.filterValues = data
                            if(data[0]){
                                this.selectedValue = data[0].value
                            }else{
                                this.selectedValue = null
                            }
                        }else{
                            this.filterValues = []
                        }
                    })
                    .finally(() => {
                        this.isLoading=false
                    })
                    .catch(({message}) => {
                        alert(message)
                    })
            }
        },
    }
</script>
<template>
   <div>
       <default-field :field="field" :errors="errors" :full-width-content="true">
           <template slot="field">
               <div class="flex">
                   <div class="w-1/2 my-3 pr-1 overflow-hidden">
                      <select-control
                          @change="loadFilters"
                          v-model="selectedFilter"
                          :options="filterTypes"
                          class="w-full form-control form-select">
                      </select-control>
                  </div>
                   <div class="w-1/2 my-3 pl-1 overflow-hidden">
                      <select-control
                          :disabled="filterValues.length === 0"
                          v-model="selectedValue"
                          :options="filterValues"
                          class="w-full form-control form-select">
                      </select-control>
                  </div>
               </div>
               <hr>
               <search-input
                   ref="search"
                   @clear="clear"
                   @selected="selectResource"
                   @input="request"
                   :value="selectedResource"
                   :data="results"
                   trackBy="value"
                   :error="errors.errors.hasOwnProperty(field.attribute)"
                   searchBy="label">
                   <div slot="default" v-if="selectedResource" class="flex items-center">
                       {{ selectedResource.label }}
                   </div>
                   <div slot="option" slot-scope="{ option, selected }" class="flex items-center">
                       {{ option.label }}
                   </div>
               </search-input>
           </template>
       </default-field>
   </div>
</template>