eiru_purchases/src/components/steps/DeliveryStep.vue

<template lang="pug">
    .purchase-step
        .delivery-selector-step
            .delivery-selector
                searcher(
                    mode='normal'
                    :items='stockPickings'
                    :keys="['name', 'origin', 'partner.name']"
                    @onSearch='filterStockPickings'
                )
                card-grid(
                    imageKey='partner.image'
                    :items='visibleStockPickings'
                    :headerKeys="['name', 'partner.name']"
                    :footerKeys="['origin']"
                    :loading='loadingStockPickings'
                    @onSelect='selectStockPicking'
                )
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { Searcher, CardGrid } from '../common'

    export default {
        components: {
            Searcher,
            CardGrid
        },
        computed: mapGetters([
            'stockPickings',
            'visibleStockPickings',
            'loadingStockPickings'
        ]),
        methods: mapActions([
            'filterStockPickings',
            'selectStockPicking'
        ])
    }
</script>

<style lang="sass">
    .purchase-step
        .delivery-selector-step
            width: 100%
            height: 100%
            display: flex
            .delivery-selector
                width: 100%
                height: 100%
</style>