eiru_pos/src/components/modals/VariantModal.vue

<template lang="pug">
    modal(
        name='variant-selector'
        transition='nice-modal-fade'
        height='500'
        :classes="['v--modal', 'variant-modal']"
        @closed='handleClosed'
    )
        searcher(:items='getItems()' :keys="['name']" @onSearch='filterVariants')
        .product-variants
            .product-variant(v-for='item in getItems()' :key='item.id' @click='selectProduct(item)')
                img.variant-image(:src="'data:image/png;base64,' + (item.image || '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.name }}    
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    import { Searcher } from '@@/common'
    import { SELECT_PRODUCT } from '@/constants/actionTypes'

    export default {
        components: {
            Searcher
        },
        computed: mapGetters([
            'productWithVariant'
        ]),
        methods: {
            getItems() {
                return this.filteredItems.length === 0 && !!this.productWithVariant ? this.productWithVariant.variants : this.filteredItems
            },
            filterVariants(values) {
                this.filteredItems = values
            },
            handleClosed() {
                this.selectProduct(null)
            },
            ...mapActions([
                SELECT_PRODUCT
            ])
        },
        watch: {
            productWithVariant(value) {
                if (value) {
                    this.$modal.show('variant-selector')
                    return
                }

                this.$modal.hide('variant-selector')
            }
        },
        data() {
            return {
                filteredItems: []
            }
        }
    }
</script>

<style lang="sass">
    .variant-modal
        padding: 15px !important
        .product-variants
            width: 100%;
            height: calc(100% - 70px)
            overflow-y: auto
            .product-variant
                width: calc(100% - 20px)
                height: 84px
                margin: 5px 10px
                display: flex
                &:hover
                    cursor: pointer
                    .variant-details
                        transition-duration: 0.5s
                        border-bottom: 2px solid #7c7bad
                .variant-image
                    width: 80px
                    height: 80px
                    margin: 0
                    border: none
                .variant-details
                    flex-grow: 1
                    border-bottom: 1px solid #d3d3d3
                    .variant-name
                        font-size: 10pt
                        margin-left: 10px
</style>