shipping-portal/resources/assets/vue/components/segments/elements/SegmentCompanyComponent.vue

<template>
    <div class="w-100">
        <validation-wrapper-component
            selectable
            :validator="$v.parameters.id"
        >
            <label>Segment</label>
            <selectable-component
                :endpoint="
                    route('api.segment.list')
                "
                :section="section"
                :value="3"
                valueColumn="id"
                :labelColumn="['name']"
                v-model="parameters.id"
                @input="onSelect"
                
            ></selectable-component>
        </validation-wrapper-component>
        <list-component
            v-if="parameters.id"
            class="mt-4"
            :key="parameters.id"
            :section="`segments_${parameters.id}`"
            :endpoint="route('api.company.list')"
            :options="{
                company_segments_in: [parameters.id],
                // with_total_payments: true,
                // recency: '2022-02-15',
                // frequency: 15,
                // business_type: 2,
                // with_bookings: true,
                // order_by: { column: 'total_payments', DESC: true },
            }"
        >
            <template slot="list" slot-scope="{ data }">
                <company-component :data="data"></company-component>
            </template>
        </list-component>
        <div v-else>
            <div
                class="row align-items-center justify-content-center p-t-50 p-b-50"
                style=""
            >
                <div class="col-10">
                    <div
                        class="row align-items-center justify-content-center hint-text"
                    >
                        <div class="col-4 hint-text">
                            <img
                                src="/images/2829248.png"
                                class="w-100 hint-text"
                            />
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col">
                            <div class="row m-t-20">
                                <div class="col">
                                    <p
                                        class="all-caps no-margin fs-11"
                                        style="letter-spacing: 2px"
                                    >
                                        Please Select a Segment
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import componentHandler from "../../../general/mixins/componentHandler";
export default {
    props: {
        section: {
            type: String,
            required: true,
        },
        type: {
            type: Number,
            required: true,
        },
        id: {
            type: Number,
            default: null,
        }
    },
    data() {
        return {
            parameters: {
                id: null,
            },
        };
    },
    validations: {
        parameters: {
            id: {},
        },
    },
    methods: {
        onSelect(val) {
            this.parameters.id = val
        },
    },   
    created(){
        const id = new URL(location.href).searchParams.get('id')
        if(id){
            this.parameters.id = id
        }
    },
    mixins: [componentHandler],
};
</script>