shipping-portal/resources/assets/vue/components/tracking/sections/TrackingSectionComponent.vue

<template>
    <div class="row m-b-15 parentContainer">
        <div class="col">
            <div class="row m-b-20">
                <div class="col">
                    <h4 class="bold">Track your parcel</h4>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Tracking No</label>
                                        <input type="text" class="form-control" v-model="trackingNo" @keyup.enter="search"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0">
                            <div class="btn btn-primary b-rad-none" @click="search">
                                <i class="fa fa-search lh-40"></i>
                            </div>
                        </div>
                        <div class="col-auto p-l-0">
                            <div class="btn btn-secondary b-rad-none" @click="reset">
                                <i class="fa fa-remove lh-40"></i>
                            </div>
                        </div>
                        <div class="col"></div>
                    </div>
                </div>
            </div>
            <list-component :key="currentKey" :section="section" :endpoint="route('api.order.tracking.list')" :options="options" v-if="showList">
                <template slot="list" slot-scope="{data}">
                    <order-tracking-component :data="data"></order-tracking-component>
                </template>
            </list-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            section: {
                type: String,
                required: true
            },
            tracking_no: {
                type: String,
            }
        },
        data() {
            return {
                showList: false,
                currentKey: 1,
                trackingNo: this.tracking_no || '',
                options: {
                   'order_by': {column: 'order_tracking_id', DESC: false},
                }
            }
        },
        mounted() {
            if (this.trackingNo.trim() !== '') {
                this.search();
            }
        },
        methods: {
            search() {
                const sanitizedTrackingNo = encodeURIComponent(this.trackingNo);
                this.options['tracking_no'] = sanitizedTrackingNo;
                this.currentKey+=1;
                this.showList = true;
            },
            reset() {
                this.trackingNo = '';
                delete(this.options['tracking_no']);
                this.currentKey+=1;
                this.showList = false;
                window.history.replaceState({}, '', '/tracking');
            },
        },
        mixins: [componentHandler]
    }
</script>