{"version":3,"sources":["webpack:///./src/views/Products.vue?c2bf","webpack:///./src/components/BrandFilter.vue?484b","webpack:///./node_modules/core-js/modules/es.function.name.js","webpack:///./src/views/Products.vue?05ef","webpack:///./src/components/BrandFilter.vue?e73e","webpack:///src/components/BrandFilter.vue","webpack:///./src/components/BrandFilter.vue?390a","webpack:///./src/components/BrandFilter.vue","webpack:///src/views/Products.vue","webpack:///./src/views/Products.vue?c466","webpack:///./src/views/Products.vue"],"names":["DESCRIPTORS","defineProperty","f","FunctionPrototype","Function","prototype","FunctionPrototypeToString","toString","nameRE","NAME","configurable","get","call","this","match","error","render","_vm","_h","$createElement","_c","_self","staticClass","attrs","on","$event","search","model","value","callback","$$v","searchText","expression","_v","onChange","_l","x","key","id","domProps","selected","_s","text","product","name","params","images","title","_f","price","description","addProductToCart","staticRenderFns","_m","brand","brandsCount","onChangeSelectBox","data","$store","getters","brands","state","methods","console","log","commit","component","sortBy","computed","components","event","target","length"],"mappings":"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","file":"js/chunk-b979e882.d6cd4c55.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Products.vue?vue&type=style&index=0&id=27b5f43b&scoped=true&lang=scss&\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandFilter.vue?vue&type=style&index=0&id=f1534fe4&scoped=true&lang=scss&\"","var DESCRIPTORS = require('../internals/descriptors');\nvar defineProperty = require('../internals/object-define-property').f;\n\nvar FunctionPrototype = Function.prototype;\nvar FunctionPrototypeToString = FunctionPrototype.toString;\nvar nameRE = /^\\s*function ([^ (]*)/;\nvar NAME = 'name';\n\n// Function instances `.name` property\n// https://tc39.github.io/ecma262/#sec-function-instances-name\nif (DESCRIPTORS && !(NAME in FunctionPrototype)) {\n  defineProperty(FunctionPrototype, NAME, {\n    configurable: true,\n    get: function () {\n      try {\n        return FunctionPrototypeToString.call(this).match(nameRE)[1];\n      } catch (error) {\n        return '';\n      }\n    }\n  });\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\"},[_c('div',{staticClass:\"row top5\"},[_c('div',{staticClass:\"col-lg-3\"},[_c('BrandFilter')],1),_c('div',{staticClass:\"col-lg-9\"},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-sm-8\"},[_c('b-input-group',[_c('b-form-input',{staticClass:\"LoginInput\",attrs:{\"size\":\"sm\",\"placeholder\":\"Search phone\"},on:{\"keyup\":function($event){return _vm.search()}},model:{value:(_vm.searchText),callback:function ($$v) {_vm.searchText=$$v},expression:\"searchText\"}}),_c('b-input-group-prepend',[_c('span',{staticClass:\"input-group-text\"},[_c('font-awesome-icon',{attrs:{\"icon\":\"search\"},on:{\"click\":function($event){return _vm.search()}}})],1)])],1)],1),_c('div',{staticClass:\"col-sm-4\"},[_vm._v(\" Sort By \"),_c('select',{attrs:{\"name\":\"sortBy\"},on:{\"change\":function($event){return _vm.onChange($event)}}},_vm._l((_vm.sortBy),function(x){return _c('option',{key:x.id,domProps:{\"value\":x.value,\"selected\":x.selected}},[_vm._v(_vm._s(x.text))])}),0)])]),_c('div',{staticClass:\"row top5\"},_vm._l((_vm.filterProducts),function(product){return _c('div',{key:product.id,staticClass:\"col-6 col-sm-4 col-md-6 mb-4 col-lg-4\"},[_c('div',{staticClass:\"card h-90 product\"},[_c('router-link',{staticClass:\"product__link\",attrs:{\"to\":{ name: 'Product', params: { id: product.id } }}},[_c('div',{staticClass:\"product__imgContainer\"},[_c('img',{staticClass:\"card-img-top product__img\",attrs:{\"src\":product.images[0]}})])]),_c('div',{staticClass:\"card-body product__text\"},[_c('h4',{staticClass:\"card-title product__title\"},[_vm._v(\" \"+_vm._s(product.title)+\" \")]),_c('h5',{staticClass:\"product__price\"},[_vm._v(\" \"+_vm._s(_vm._f(\"priceFormatter\")(product.price))+\" \")]),_c('p',{staticClass:\"card-text product__description\"},[_vm._v(\" \"+_vm._s(product.description)+\" \")]),_c('button',{staticClass:\"btn btn-info product__add-to-cart\",on:{\"click\":function($event){return _vm.addProductToCart(product)}}},[_vm._v(\" Add to cart \")])])],1)])}),0)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"card mb-3\"},[_vm._m(0),_c('ul',{staticClass:\"list-group flex-row flex-wrap\"},_vm._l((_vm.brands),function(brand){return _c('li',{key:brand,staticClass:\"list-group-item flex-50\"},[_c('label',{staticClass:\"custom-checkbox text-capitalize\"},[_vm._v(\" \"+_vm._s(brand)+\" (\"+_vm._s(_vm.brandsCount[brand])+\") \"),_c('input',{staticClass:\"custom-checkbox__input\",attrs:{\"type\":\"checkbox\",\"name\":brand},on:{\"input\":function($event){return _vm.onChangeSelectBox($event)}}}),_c('span',{staticClass:\"custom-checkbox__span\"})])])}),0)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"card-header\"},[_c('h4',[_vm._v(\"Brands\")])])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"card mb-3\">\r\n    <div class=\"card-header\">\r\n      <h4>Brands</h4>\r\n    </div>\r\n    <ul class=\"list-group flex-row flex-wrap\">\r\n      <li class=\"list-group-item flex-50\" v-for=\"brand in brands\" :key=\"brand\">\r\n        <label class=\"custom-checkbox text-capitalize\">\r\n          {{ brand }} ({{ brandsCount[brand] }})\r\n          <input\r\n            type=\"checkbox\"\r\n            :name=\"brand\"\r\n            class=\"custom-checkbox__input\"\r\n            @input=\"onChangeSelectBox($event)\"\r\n          />\r\n          <span class=\"custom-checkbox__span\"></span>\r\n        </label>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"BrandFilter\",\r\n  data() {\r\n    return {\r\n      brandsCount: this.$store.getters.brandsCount,\r\n      brands: this.$store.state.brands\r\n    };\r\n  },\r\n  methods: {\r\n    onChangeSelectBox(e) {\r\n      debugger;\r\n      const name = e.target.name;\r\n      const value = e.target.checked;\r\n      if (value) {\r\n        console.log(name);\r\n        this.$store.commit(\"addBrandToFilter\", name);\r\n      } else {\r\n        this.$store.commit(\"removeBrandFromFilter\", name);\r\n      }\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.custom-checkbox {\r\n  display: block;\r\n  position: relative;\r\n  padding-left: 2rem;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  text-align: left;\r\n  &__input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    height: 0;\r\n    width: 0;\r\n  }\r\n  &__span {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 0;\r\n    transform: translateY(-50%);\r\n    height: 1.2rem;\r\n    width: 1.2rem;\r\n    background-color: white;\r\n    border: 2px solid gray;\r\n    &::after {\r\n      content: \"\";\r\n      opacity: 0;\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      width: 0.6rem;\r\n      height: 0.6rem;\r\n      background-color: dodgerblue;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n  }\r\n  &:hover &__span {\r\n    background-color: #eeeeee;\r\n  }\r\n  &__input:checked + &__span::after {\r\n    opacity: 1;\r\n  }\r\n}\r\n.flex-50 {\r\n  flex: 0 0 100%;\r\n}\r\n@media only screen and (max-width: 768px) {\r\n  .card-header,\r\n  ul.list-group {\r\n    display: none;\r\n  }\r\n\r\n  .flex-50 {\r\n    flex: 0 0 50%;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandFilter.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BrandFilter.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BrandFilter.vue?vue&type=template&id=f1534fe4&scoped=true&\"\nimport script from \"./BrandFilter.vue?vue&type=script&lang=js&\"\nexport * from \"./BrandFilter.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BrandFilter.vue?vue&type=style&index=0&id=f1534fe4&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"f1534fe4\",\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <div class=\"container\">\r\n    <div class=\"row top5\">\r\n      <div class=\"col-lg-3\"><BrandFilter></BrandFilter></div>\r\n      <div class=\"col-lg-9\">\r\n        <div class=\"row\">\r\n          <div class=\"col-sm-8\">\r\n            <b-input-group>\r\n              <b-form-input\r\n                class=\"LoginInput\"\r\n                size=\"sm\"\r\n                placeholder=\"Search phone\"\r\n                v-model=\"searchText\"\r\n                @keyup=\"search()\"\r\n              >\r\n              </b-form-input>\r\n              <b-input-group-prepend>\r\n                <span class=\"input-group-text\"\r\n                  ><font-awesome-icon icon=\"search\" @click=\"search()\"\r\n                /></span>\r\n              </b-input-group-prepend>\r\n            </b-input-group>\r\n          </div>\r\n          <div class=\"col-sm-4\">\r\n            Sort By\r\n            <select name=\"sortBy\" @change=\"onChange($event)\">\r\n              <option\r\n                v-for=\"x in sortBy\"\r\n                v-bind:value=\"x.value\"\r\n                v-bind:selected=\"x.selected\"\r\n                v-bind:key=\"x.id\"\r\n                >{{ x.text }}</option\r\n              >\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div class=\"row top5\">\r\n          <div\r\n            class=\"col-6 col-sm-4 col-md-6 mb-4 col-lg-4\"\r\n            v-for=\"product in filterProducts\"\r\n            :key=\"product.id\"\r\n          >\r\n            <div class=\"card h-90 product\">\r\n              <!-- www.thepolyglotdeveloper.com/2017/11/pass-data-between-routes-vuejs-web-application/ -->\r\n              <router-link\r\n                class=\"product__link\"\r\n                :to=\"{ name: 'Product', params: { id: product.id } }\"\r\n              >\r\n                <div class=\"product__imgContainer\">\r\n                  <img\r\n                    :src=\"product.images[0]\"\r\n                    class=\"card-img-top product__img\"\r\n                  />\r\n                </div>\r\n              </router-link>\r\n\r\n              <div class=\"card-body product__text\">\r\n                <h4 class=\"card-title product__title\">\r\n                  {{ product.title }}\r\n                </h4>\r\n                <h5 class=\"product__price\">\r\n                  {{ product.price | priceFormatter }}\r\n                </h5>\r\n                <p class=\"card-text product__description\">\r\n                  {{ product.description }}\r\n                </p>\r\n                <button\r\n                  @click=\"addProductToCart(product)\"\r\n                  class=\"btn btn-info product__add-to-cart\"\r\n                >\r\n                  Add to cart\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapActions } from \"vuex\";\r\nimport BrandFilter from \"../components/BrandFilter\";\r\nimport { mapGetters } from \"vuex\";\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      searchText: \"\",\r\n      sortBy: [\r\n        { text: \"None\", value: 0, selected: true },\r\n        { text: \"Price: Low to High\", value: 1 },\r\n        { text: \"Price: High to Low\", value: 2 }\r\n      ]\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapGetters([\"filterProducts\"])\r\n  },\r\n  components: { BrandFilter },\r\n  methods: {\r\n    ...mapActions([\"addProductToCart\"]),\r\n    onChange(event) {\r\n      debugger;\r\n      console.log(event.target.value);\r\n      switch (event.target.value) {\r\n        case \"1\":\r\n          this.$store.commit(\"orderByPriceAsc\");\r\n          break;\r\n        case \"2\":\r\n          this.$store.commit(\"orderByPriceDesc\");\r\n          break;\r\n        default:\r\n        // code block\r\n      }\r\n    },\r\n    search() {\r\n      if (this.searchText.length <= 1) return;\r\n      //console.log(\"search clicked\" + this.searchText);\r\n      this.$store.commit(\"searchText\", this.searchText);\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.top5 {\r\n  margin-top: 5px;\r\n}\r\n\r\n.product {\r\n  padding-bottom: 2rem;\r\n  text-align: center;\r\n  &__imgContainer {\r\n    text-align: center;\r\n  }\r\n  &__img {\r\n    width: 100%;\r\n    height: 100%;\r\n    text-align: center;\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n  }\r\n  &__text {\r\n    flex: 0 0 40%;\r\n  }\r\n  &__link {\r\n    flex: 0 0 65%;\r\n    height: 60%;\r\n    padding: 1rem;\r\n    position: relative;\r\n    cursor: pointer;\r\n  }\r\n  &__title {\r\n    font-size: 0.8rem;\r\n  }\r\n  &__description {\r\n    font-size: 0.7rem;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3; /* number of lines to show */\r\n    -webkit-box-orient: vertical;\r\n  }\r\n  &:hover {\r\n    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);\r\n  }\r\n  &__add-to-cart {\r\n    position: absolute;\r\n    bottom: 0.8rem;\r\n    width: 60%;\r\n    left: 50%;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transform: translateX(-50%);\r\n    transition: all 0.2s;\r\n    padding: 3px 12px;\r\n  }\r\n  &:hover &__add-to-cart {\r\n    visibility: visible;\r\n    opacity: 1;\r\n  }\r\n  &:hover .owl-dots {\r\n    display: inline-block;\r\n  }\r\n}\r\n@media only screen and (max-width: 720px) {\r\n  .product {\r\n    height: auto !important;\r\n\r\n    &__img {\r\n      width: 50%;\r\n      height: 50%;\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n    &__add-to-cart {\r\n      visibility: visible;\r\n      opacity: 1;\r\n      font-size: 70%;\r\n    }\r\n    &__description {\r\n      display: none;\r\n    }\r\n    & .owl-dots {\r\n      display: inline-block;\r\n    }\r\n    &__title {\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2; /* number of lines to show */\r\n      -webkit-box-orient: vertical;\r\n    }\r\n    &__price {\r\n      font-size: 80%;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Products.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Products.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Products.vue?vue&type=template&id=27b5f43b&scoped=true&\"\nimport script from \"./Products.vue?vue&type=script&lang=js&\"\nexport * from \"./Products.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Products.vue?vue&type=style&index=0&id=27b5f43b&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"27b5f43b\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}