eiru_payments/src/components/moveLine/MovesGrid.vue

<template lang="pug">
    .card-grid-wrapper-move
        .card-grid-move
            card(v-for='item in items' :key='item.id' :amountResidual='item.amountResidualCurrency' :dateMaturity='item.dateMaturity' :debit='item.amountCurrency' :currency='currency' :isSelected='item.id === selectedId' :isDisable='moveDisable(item.dateMaturity)' @onClick='onClickCard(item)')
</template>
<script>
    import card from '@@/moveLine/MoveLineCard'

    export default {
        props: {
            items: {
                type: Array,
                default: []
            },
            currency: {
                type: Object,
                default: {
                    name: '',
                    symbol: '',
                    position:'before',
                    rateSilent: 0,
                    thousandsSeparator: '.',
                    decimalSeparator: ',',
                    decimalPlaces: 0
                }
            }
        },
        components: {
            card
        },
        methods: {
            moveDisable(date_maturity) {
                let dateMaturity = moment(date_maturity).valueOf()
                let dates = this.items.map(item => {
                    return moment(item.dateMaturity).valueOf()
                })
                return  dates.findIndex(item => item >= dateMaturity) !== 0 ? true : false
            },
            onClickCard(item) {
                this.selectedId = item.id
                this.$emit('onSelect', item)
            }
        },
        data() {
            return {
                selectedId: -1
            }
        }
    }
</script>

<style lang="sass">
    .card-grid-wrapper-move
        width: calc(100% - 300px)
        height: calc(100% - 100px)
        margin-top: 15px
        overflow-y: auto
        display: inline-block
        .card-grid-move
            width: 100%
</style>