eiru_purchases/src/components/modals/VariantModal.vue

<template lang="pug">
    modal(name='variant-selector' transition='nice-modal-fade' @closed='onClose' height='500' :classes="['v--modal', 'variant-selector']")
        searcher(:items='items' :keys="['name', 'displayName', 'ean13', 'defaultCode']" mode='normal' @onSearch='filterItems')
        .product-variants
            .product-variant(v-for='item in getItems()' :key='item.id' @click='onSelect(item)')
                img.variant-image(:src="'data:image/png;base64,' + (item.imageMedium || 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg==')")
                .variant-details
                    h2.variant-name {{ item.displayName }}
</template>

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

    export default {
        components: {
            Searcher
        },
        props: {
            items: {
                type: Array,
                default: []
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            show(value) {
                if (value) {
                    this.$modal.show('variant-selector')
                } else {
                    this.filteredItems = []

                    this.$modal.hide('variant-selector')
                }
            }
        },
        methods: {
            getItems() {
                return this.filteredItems.length === 0 ? this.items : this.filteredItems
            },
            filterItems(values) {
                this.filteredItems = values
            },
            onSelect(item) {
                this.$emit('onSelect', item)
            },
            onClose() {
                this.$emit('onClose')
            }
        },
        data() {
            return {
                filteredItems: []
            }
        }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .variant-selector
        width: 600px
        padding: 15px !important
        .product-variants
            width: 100%
            heigth: calc(100% - 20px)
            overflow-y: auto
            .product-variant
                width: calc(100% - 20px)
                heigth: 84px
                margin: 5px 10px
                display: flex
                &:hover
                    cursor: pointer
                    .variant-details
                        transition-duration: 500ms
                        border-bottom: 2px solid $app-main-color
                .variant-image
                    width: 80px
                    heigth: 80px
                    margin: 0
                    border: none
                .variant-details
                    flex-grow: 1
                    border-bottom: 1px solid $app-border-color
                    .variant-name
                        font-size: 10pt
                        margin-left: 10px
</style>