123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <template lang="pug">
- modal(name='variant-selector' transition='nice-modal-fade' height="500" @closed='handleClosed' :classes="['v--modal', 'variant-modal']")
- searcher(:items='getItems()' :keys="['name', 'displayName']" @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.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'
- 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>
|