cmc_fe/src/views/customers/CustomerList.vue

<template>
    <v-text-field 
        clearable
        label="Search"
        variant="outlined"
        v-model="searchQuery"
        density="compact"
        append-inner-icon="mdi-magnify"></v-text-field>
    <v-row>
        <v-col cols="12" sm=12 lg=6>
            <h3>Customer List</h3>
            <v-progress-linear color="blue" :active="customers_loading" indeterminate>
            </v-progress-linear>
            <v-list>
                <RecycleScroller
                        class="scroller"
                        :items="filteredCustomers"
                        :item-size="60"
                        key-field="acc_no"
                        v-slot="{ item }"
                        >
                        <v-list-item >
                            <template v-slot:title >
                                <v-card @click="getCustomerInfo(item)">
                                    {{ item.acc_no }} - {{ item.name }}: 
                                    <span class="text-caption">{{ item.address.line_1 }}, {{ item.address.line_2 }}, <br/>
                                        {{ item.address.city }}, {{ item.address.county}}, {{ item.address.postcode }},
                                    </span>
                                </v-card>
                            </template>
                <template v-slot:append>
                    <v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts">
                        Contracts
                        <v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
                        </v-badge>
                    </v-btn>
                    <v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds">
                        Med Feeds
                        <v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
                        </v-badge>
                    </v-btn>
                </template>
                        </v-list-item>
                </RecycleScroller>
            </v-list>
            <RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
        </v-col>
        <v-col cols="12" sm=12 lg=6>
            <CustomerComments :customer="selected_cust"></CustomerComments>
            <br/>
            <RecentOrders :customer="selected_cust" doc_status="2"></RecentOrders>
        </v-col>
    </v-row>
</template>
<script>
import axios from 'axios';
import RecentOrders from '@/components/RecentOrders.vue'
import CustomerComments from '@/components/CustomerComments.vue'
import Customer from '@/types/CustomerType.vue'
export default {
    props: {
        site_info: {},
        user_info: {}
    },
    data() {
        return {
            searchQuery: "",
            customer_list: [],
            customers_loading: null,
            selected_cust: new Customer(),
            limit: 5000,
            listreceived: false,
        }
    },
    components: {
        RecentOrders,
        CustomerComments
    },
    computed: {
        filteredCustomers() {
            let query = this.searchQuery.toLowerCase()
            if (!this.listreceived){
                this.getCustomerList()
            }
            let clist = this.customer_list.filter(q =>
                q.name.toLowerCase().includes(query) || 
                q.acc_no.includes(query) ||
                q.address.line_1.toLowerCase().includes(query) ||
                q.address.line_2.toLowerCase().includes(query) ||
                q.address.city.toLowerCase().includes(query) ||
                q.address.postcode.toLowerCase().includes(query)
            )
            return clist
        },
    },
    methods: {
        getCustomerInfo(c) {
            this.selected_cust = c
        },
        goToContracts(c){
            this.$router.push('/customers/contracts/list/' + c.id)
        },
        goToMedFeeds(c){
            this.$router.push('/customers/medicated-feeds/list/' + c.id)
        },
        async getCustomerList() { 
            this.customers_loading = true
            let url = this.$api_url + "/customers/list"
            axios
                .get(url,{ 
                    params: { limit: this.limit, query: this.searchQuery }})
                .then(resp => {
                    this.customer_list = resp.data
                    this.listreceived = true
                })
                .catch(error => (console.log(error)))
                .finally(() => {
                    this.customers_loading = false
                })
        }
    }
}
</script>
<style>
.scroller {
    height: 300px;
}
.scroller.small {
    height: 200px;
}
</style>