eiru_pos/src/components/common/CardGrid.vue

<template lang="pug">
    .card-grid-wrapper
        .card-grid-loading(v-if='loading')
            spinner
        .card-grid(v-else)
            add-card(v-if='canAdd' @onClickAdd='onClickAdd')
            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' :description='getDescription(item)' @onClick='onClickCard(item)')
</template>

<script>
    import AddCard from '@/components/common/AddCard'
    import Card from '@/components/common/Card'
    import Spinner from '@/components/common/Spinner'

    export default {
        props: {
            items: {
                type: Array,
                default: []
            },
            canAdd: {
                type: Boolean,
                default: false
            },
            description: {
                type: String,
                default: ''
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        components: {
            AddCard,
            Card,
            Spinner
        },
        methods: {
            getDescription(item) {
                return (!!this.description && item[this.description]) || ''
            },
            onClickAdd() {
                this.$emit('onAdd')
            },
            onClickCard(item) {
                this.selectedId = item.id
                this.$emit('onSelect', item)
            }
        },
        data() {
            return {
                selectedId: -1
            }
        }
    }
</script>

<style lang="sass">
    .card-grid-wrapper
        width: 100%
        height: calc(100% - 100px)
        margin-top: 15px
        overflow-y: auto
        .card-grid-loading
            width: 100%
            height: 100%
            display: flex
            align-items: center
            justify-content: center
        .card-grid
            width: 100%
</style>