<template>
    <div class="h-100">
        <accounts-search-component placeholder="Search warehouse by name..."></accounts-search-component>
        <div class="relative h-100">
            <loading-component  v-show="isLoading"></loading-component>
            <warehouse-component  v-for="warehouse in warehouses" v-bind:key="warehouse.id" :data="warehouse"></warehouse-component>
            <pagination-component class="m-b-20" ref="pagination" v-on:changePage="fetchWarehouses($event)"></pagination-component>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                warehouses: [],
                itemsInRow: 2,
                isLoading: true
            }
        },
        created() {
            this.fetchWarehouses();
        },

        mounted() {
            Event.$on('updateWarehouseList', () => {
                this.fetchWarehouses();
            });
        },

        methods: {
            fetchWarehouses(page = 1){
                //turn on loading animation
                this.isLoading = true;

                fetch(route('api.warehouse.list') + '?page='+ page).then(response => response.json())
                    .then(response => {

                        this.warehouses = response.data;

                        this.$refs.pagination.makePagination(response.meta, response.links);

                        //turn off loading animation
                        this.isLoading = false;
						
                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>