vue_common_components/CardGrid.vue

<template lang="pug">
    .card-grid-wrapper
        .card-grid-loading(v-if='loading')
            spinner(type='wave')
        .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' :details='computeDetails(item)' :options='defaultOptions.currency' @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
            },
            details: {
                type: Array,
                default: []
            },
            loading: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: {}
            }
        },
        components: {
            AddCard,
            Card,
            Spinner
        },
        watch: {
            options(value) {
                this.computeOptions(value)
            }
        },
        methods: {
            computeDetails(item) {
                if (!this.details) {
                    return []
                }

                if (this.details.length === 0) {
                    return []
                }

                let results = []
                let computableDetails = this.details.map(item => item.split(/:/))

                for (let detail of computableDetails) {
                    for (let field in item) {
                        if (field === detail[0]) {
                            results.push({
                                value: item[field],
                                format: (() => {
                                    if (!detail[1] || detail[1] === 's') {
                                        return 'string'
                                    }
                                    
                                    if (detail[1] === 'c') {
                                        return 'currency'
                                    }

                                    if (detail[1] === 'd') {
                                        return 'date'
                                    }

                                    return 'string'
                                })()
                            })

                            break
                        }
                    }
                }

                return results
            },
            computeOptions(value) {
                if (!value) {
                    return
                }

                for(let key in value) {
                    if(!this.defaultOptions.currency[key]) {
                        continue
                    }

                    this.defaultOptions.currency[key] = value[key]
                }
            },
            onClickAdd() {
                this.$emit('onAdd')
            },
            onClickCard(item) {
                this.selectedId = item.id
                this.$emit('onSelect', item)
            }
        },
        data() {
            return {
                selectedId: -1,
                defaultOptions: {
                    currency: {
                        symbol: '$',
                        position: 'before',
                        thousandsSeparator: '.',
                        decimalPlaces: 2,
                        decimalSeparator: ',' 
                    },
                } 
            }
        }
    }
</script>

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