VariantModal.vue 4.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template lang="pug">
  2. modal(name='variant-selector' transition='nice-modal-fade' @closed='onClose' height='500' :classes="['v--modal', 'variant-selector']")
  3. searcher(:items='items' :keys="['name', 'displayName', 'ean13', 'defaultCode']" mode='normal' @onSearch='filterItems')
  4. .product-variants
  5. .product-variant(v-for='item in getItems()' :key='item.id' @click='onSelect(item)')
  6. 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==')")
  7. .variant-details
  8. h2.variant-name {{ item.displayName }}
  9. </template>
  10. <script>
  11. import { mapGetters, mapActions } from 'vuex'
  12. import { Searcher } from '../common'
  13. export default {
  14. components: {
  15. Searcher
  16. },
  17. props: {
  18. items: {
  19. type: Array,
  20. default: []
  21. },
  22. show: {
  23. type: Boolean,
  24. default: false
  25. }
  26. },
  27. watch: {
  28. show(value) {
  29. if (value) {
  30. this.$modal.show('variant-selector')
  31. } else {
  32. this.filteredItems = []
  33. this.$modal.hide('variant-selector')
  34. }
  35. }
  36. },
  37. methods: {
  38. getItems() {
  39. return this.filteredItems.length === 0 ? this.items : this.filteredItems
  40. },
  41. filterItems(values) {
  42. this.filteredItems = values
  43. },
  44. onSelect(item) {
  45. this.$emit('onSelect', item)
  46. },
  47. onClose() {
  48. this.$emit('onClose')
  49. }
  50. },
  51. data() {
  52. return {
  53. filteredItems: []
  54. }
  55. }
  56. }
  57. </script>
  58. <style lang="sass">
  59. @import '../../assets/variables'
  60. .variant-selector
  61. width: 600px
  62. padding: 15px !important
  63. .product-variants
  64. width: 100%
  65. heigth: calc(100% - 20px)
  66. overflow-y: auto
  67. .product-variant
  68. width: calc(100% - 20px)
  69. heigth: 84px
  70. margin: 5px 10px
  71. display: flex
  72. &:hover
  73. cursor: pointer
  74. .variant-details
  75. transition-duration: 500ms
  76. border-bottom: 2px solid $app-main-color
  77. .variant-image
  78. width: 80px
  79. heigth: 80px
  80. margin: 0
  81. border: none
  82. .variant-details
  83. flex-grow: 1
  84. border-bottom: 1px solid $app-border-color
  85. .variant-name
  86. font-size: 10pt
  87. margin-left: 10px
  88. </style>