{"version":3,"sources":["webpack:///./src/views/ui-elements/data-list/thumb-view/DataListThumbView.vue?27f1","webpack:///src/views/ui-elements/data-list/thumb-view/DataListThumbView.vue","webpack:///./src/views/ui-elements/data-list/thumb-view/DataListThumbView.vue?2fdb","webpack:///./src/views/ui-elements/data-list/thumb-view/DataListThumbView.vue?a256","webpack:///./src/views/ui-elements/data-list/thumb-view/DataListThumbView.vue?67be"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","id","isSidebarActive","addNewDataSidebar","on","closeSidebar","$event","ref","multiple","pagination","max-items","itemsPerPage","search","data","users","scopedSlots","_u","key","fn","_l","tr","indextr","src","img","_v","_s","name","category","percent","Number","popularity","color","getPopularityColor","getOrderStatusColor","order_status","price","model","value","callback","$$v","selected","expression","slot","vs-trigger-click","icon","svgClasses","click","currentPage","length","sort-key","staticRenderFns","DataListThumbViewvue_type_script_lang_js_","components","AddNewDataSidebar","isMounted","computed","$refs","table","currentx","methods","status","num","formatData","formattedData","map","item","fields","obj","_arr","Object","keys","_i","integerValue","doubleValue","stringValue","created","thisIns","$http","get","then","response","documents","catch","error","$vs","notify","title","text","iconPack","mounted","thumb_view_DataListThumbViewvue_type_script_lang_js_","component","componentNormalizer","__webpack_exports__","_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_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_DataListThumbView_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_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_DataListThumbView_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"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","file":"js/chunk-01171a4e.3d448c98.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"data-list-container\",attrs:{\"id\":\"data-list-thumb-view\"}},[_c('add-new-data-sidebar',{attrs:{\"isSidebarActive\":_vm.addNewDataSidebar},on:{\"closeSidebar\":function($event){_vm.addNewDataSidebar = false}}}),_c('vs-table',{ref:\"table\",attrs:{\"multiple\":\"\",\"pagination\":\"\",\"max-items\":_vm.itemsPerPage,\"search\":\"\",\"data\":_vm.users},scopedSlots:_vm._u([{key:\"default\",fn:function(ref){\nvar data = ref.data;\nreturn [_c('tbody',_vm._l((data),function(tr,indextr){return _c('vs-tr',{key:indextr,attrs:{\"data\":tr}},[_c('vs-td',{staticClass:\"img-container\"},[_c('img',{staticClass:\"product-img\",attrs:{\"src\":tr.img}})]),_c('vs-td',[_c('p',{staticClass:\"product-name font-medium\"},[_vm._v(_vm._s(tr.name))])]),_c('vs-td',[_c('p',{staticClass:\"product-category\"},[_vm._v(_vm._s(tr.category))])]),_c('vs-td',[_c('vs-progress',{staticClass:\"shadow-md\",attrs:{\"percent\":Number(tr.popularity),\"color\":_vm.getPopularityColor(Number(tr.popularity))}})],1),_c('vs-td',[_c('vs-chip',{staticClass:\"product-order-status\",attrs:{\"color\":_vm.getOrderStatusColor(tr.order_status)}},[_vm._v(_vm._s(tr.order_status))])],1),_c('vs-td',[_c('p',{staticClass:\"product-price\"},[_vm._v(\"$\"+_vm._s(tr.price))])])],1)}),1)]}}]),model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v},expression:\"selected\"}},[_c('div',{staticClass:\"flex flex-wrap-reverse items-center flex-grow justify-between\",attrs:{\"slot\":\"header\"},slot:\"header\"},[_c('div',{staticClass:\"flex flex-wrap-reverse items-center\"},[_c('vs-dropdown',{staticClass:\"cursor-pointer mr-4 mb-4\",attrs:{\"vs-trigger-click\":\"\"}},[_c('div',{staticClass:\"p-4 shadow-drop rounded-lg d-theme-dark-bg cursor-pointer flex items-center justify-center text-lg font-medium w-32\"},[_c('span',{staticClass:\"mr-2\"},[_vm._v(\"Actions\")]),_c('feather-icon',{attrs:{\"icon\":\"ChevronDownIcon\",\"svgClasses\":\"h-4 w-4\"}})],1),_c('vs-dropdown-menu',[_c('vs-dropdown-item',[_c('span',[_vm._v(\"Delete\")])]),_c('vs-dropdown-item',[_c('span',[_vm._v(\"Archive\")])]),_c('vs-dropdown-item',[_c('span',[_vm._v(\"Print\")])]),_c('vs-dropdown-item',[_c('span',[_vm._v(\"Another Action\")])])],1)],1),_c('div',{staticClass:\"p-3 mb-4 mr-4 rounded-lg cursor-pointer flex items-center justify-between text-lg font-medium text-base text-primary border border-solid border-primary\",on:{\"click\":function($event){_vm.addNewDataSidebar = true}}},[_c('feather-icon',{attrs:{\"icon\":\"PlusIcon\",\"svgClasses\":\"h-4 w-4\"}}),_c('span',{staticClass:\"ml-2 text-base text-primary\"},[_vm._v(\"Add New\")])],1)],1),_c('vs-dropdown',{staticClass:\"cursor-pointer mb-4 mr-4\",attrs:{\"vs-trigger-click\":\"\"}},[_c('div',{staticClass:\"p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium\"},[_c('span',{staticClass:\"mr-2\"},[_vm._v(_vm._s(_vm.currentPage * _vm.itemsPerPage - (_vm.itemsPerPage - 1))+\" - \"+_vm._s(_vm.users.length - _vm.currentPage * _vm.itemsPerPage > 0 ? _vm.currentPage * _vm.itemsPerPage : _vm.users.length)+\" of \"+_vm._s(_vm.users.length))]),_c('feather-icon',{attrs:{\"icon\":\"ChevronDownIcon\",\"svgClasses\":\"h-4 w-4\"}})],1),_c('vs-dropdown-menu',[_c('vs-dropdown-item',{on:{\"click\":function($event){_vm.itemsPerPage=4}}},[_c('span',[_vm._v(\"4\")])]),_c('vs-dropdown-item',{on:{\"click\":function($event){_vm.itemsPerPage=10}}},[_c('span',[_vm._v(\"10\")])]),_c('vs-dropdown-item',{on:{\"click\":function($event){_vm.itemsPerPage=15}}},[_c('span',[_vm._v(\"15\")])]),_c('vs-dropdown-item',{on:{\"click\":function($event){_vm.itemsPerPage=20}}},[_c('span',[_vm._v(\"20\")])])],1)],1)],1),_c('template',{slot:\"thead\"},[_c('vs-th',[_vm._v(\"Image\")]),_c('vs-th',{attrs:{\"sort-key\":\"name\"}},[_vm._v(\"Name\")]),_c('vs-th',{attrs:{\"sort-key\":\"category\"}},[_vm._v(\"Category\")]),_c('vs-th',{attrs:{\"sort-key\":\"popularity\"}},[_vm._v(\"Popularity\")]),_c('vs-th',{attrs:{\"sort-key\":\"order_status\"}},[_vm._v(\"Order Status\")]),_c('vs-th',{attrs:{\"sort-key\":\"price\"}},[_vm._v(\"Price\")])],1)],2)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n  File Name: DataListThumbView.vue\r\n  Description: Data List - Thumb View\r\n  ----------------------------------------------------------------------------------------\r\n  Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n  Author: Pixinvent\r\n  Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n<template>\r\n  <div id=\"data-list-thumb-view\" class=\"data-list-container\">\r\n\r\n    <add-new-data-sidebar :isSidebarActive=\"addNewDataSidebar\" @closeSidebar=\"addNewDataSidebar = false\" />\r\n\r\n    <vs-table ref=\"table\" multiple v-model=\"selected\" pagination :max-items=\"itemsPerPage\" search :data=\"users\">\r\n\r\n      <div slot=\"header\" class=\"flex flex-wrap-reverse items-center flex-grow justify-between\">\r\n\r\n        <div class=\"flex flex-wrap-reverse items-center\">\r\n\r\n          <!-- ACTION - DROPDOWN -->\r\n          <vs-dropdown vs-trigger-click class=\"cursor-pointer mr-4 mb-4\">\r\n\r\n            <div class=\"p-4 shadow-drop rounded-lg d-theme-dark-bg cursor-pointer flex items-center justify-center text-lg font-medium w-32\">\r\n              <span class=\"mr-2\">Actions</span>\r\n              <feather-icon icon=\"ChevronDownIcon\" svgClasses=\"h-4 w-4\" />\r\n            </div>\r\n\r\n            <vs-dropdown-menu>\r\n\r\n              <vs-dropdown-item>\r\n                <span>Delete</span>\r\n              </vs-dropdown-item>\r\n              <vs-dropdown-item>\r\n                <span>Archive</span>\r\n              </vs-dropdown-item>\r\n              <vs-dropdown-item>\r\n                <span>Print</span>\r\n              </vs-dropdown-item>\r\n              <vs-dropdown-item>\r\n                <span>Another Action</span>\r\n              </vs-dropdown-item>\r\n            </vs-dropdown-menu>\r\n          </vs-dropdown>\r\n\r\n          <!-- ADD NEW -->\r\n          <div class=\"p-3 mb-4 mr-4 rounded-lg cursor-pointer flex items-center justify-between text-lg font-medium text-base text-primary border border-solid border-primary\" @click=\"addNewDataSidebar = true\">\r\n              <feather-icon icon=\"PlusIcon\" svgClasses=\"h-4 w-4\" />\r\n              <span class=\"ml-2 text-base text-primary\">Add New</span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- ITEMS PER PAGE -->\r\n        <vs-dropdown vs-trigger-click class=\"cursor-pointer mb-4 mr-4\">\r\n          <div class=\"p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium\">\r\n            <span class=\"mr-2\">{{ currentPage * itemsPerPage - (itemsPerPage - 1) }} - {{ users.length - currentPage * itemsPerPage > 0 ? currentPage * itemsPerPage : users.length }} of {{ users.length }}</span>\r\n            <feather-icon icon=\"ChevronDownIcon\" svgClasses=\"h-4 w-4\" />\r\n          </div>\r\n          <!-- <vs-button class=\"btn-drop\" type=\"line\" color=\"primary\" icon-pack=\"feather\" icon=\"icon-chevron-down\"></vs-button> -->\r\n          <vs-dropdown-menu>\r\n\r\n            <vs-dropdown-item @click=\"itemsPerPage=4\">\r\n              <span>4</span>\r\n            </vs-dropdown-item>\r\n            <vs-dropdown-item @click=\"itemsPerPage=10\">\r\n              <span>10</span>\r\n            </vs-dropdown-item>\r\n            <vs-dropdown-item @click=\"itemsPerPage=15\">\r\n              <span>15</span>\r\n            </vs-dropdown-item>\r\n            <vs-dropdown-item @click=\"itemsPerPage=20\">\r\n              <span>20</span>\r\n            </vs-dropdown-item>\r\n          </vs-dropdown-menu>\r\n        </vs-dropdown>\r\n      </div>\r\n\r\n      <template slot=\"thead\">\r\n        <vs-th>Image</vs-th>\r\n        <vs-th sort-key=\"name\">Name</vs-th>\r\n        <vs-th sort-key=\"category\">Category</vs-th>\r\n        <vs-th sort-key=\"popularity\">Popularity</vs-th>\r\n        <vs-th sort-key=\"order_status\">Order Status</vs-th>\r\n        <vs-th sort-key=\"price\">Price</vs-th>\r\n      </template>\r\n\r\n      <template slot-scope=\"{data}\">\r\n        <tbody>\r\n          <vs-tr :data=\"tr\" :key=\"indextr\" v-for=\"(tr, indextr) in data\">\r\n\r\n            <vs-td class=\"img-container\">\r\n              <img :src=\"tr.img\" class=\"product-img\" />\r\n            </vs-td>\r\n\r\n            <vs-td>\r\n              <p class=\"product-name font-medium\">{{ tr.name }}</p>\r\n            </vs-td>\r\n\r\n            <vs-td>\r\n              <p class=\"product-category\">{{ tr.category }}</p>\r\n            </vs-td>\r\n\r\n            <vs-td>\r\n              <vs-progress :percent=\"Number(tr.popularity)\" :color=\"getPopularityColor(Number(tr.popularity))\" class=\"shadow-md\" />\r\n            </vs-td>\r\n\r\n            <vs-td>\r\n              <vs-chip :color=\"getOrderStatusColor(tr.order_status)\" class=\"product-order-status\">{{ tr.order_status }}</vs-chip>\r\n            </vs-td>\r\n\r\n            <vs-td>\r\n              <p class=\"product-price\">${{ tr.price }}</p>\r\n            </vs-td>\r\n\r\n          </vs-tr>\r\n        </tbody>\r\n      </template>\r\n    </vs-table>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport AddNewDataSidebar from '../AddNewDataSidebar.vue';\r\n\r\nexport default {\r\n  components: {\r\n    AddNewDataSidebar\r\n  },\r\n  data() {\r\n    return {\r\n      selected: [],\r\n      users: [],\r\n      itemsPerPage: 4,\r\n      isMounted: false,\r\n      addNewDataSidebar: false,\r\n    }\r\n  },\r\n  computed: {\r\n    currentPage() {\r\n      if(this.isMounted) {\r\n        return this.$refs.table.currentx\r\n      }\r\n      return 0\r\n    },\r\n  },\r\n  methods: {\r\n    getOrderStatusColor(status) {\r\n      if(status == 'on hold') return \"warning\"\r\n      if(status == 'delivered') return \"success\"\r\n      if(status == 'canceled') return \"danger\"\r\n      return \"primary\"\r\n    },\r\n    getPopularityColor(num) {\r\n      if(num > 90) return \"success\"\r\n      if(num >70) return \"primary\"\r\n      if(num >= 50) return \"warning\"\r\n      if(num < 50) return \"danger\"\r\n      return \"primary\"\r\n    },\r\n    formatData(data) {\r\n      // formats data received from API\r\n      let formattedData = data.map((item) => {\r\n        const fields = item.fields\r\n        let obj = {}\r\n        for (const key of Object.keys(fields)) {\r\n            obj[key] = Number(fields[key].integerValue) || Number(fields[key].doubleValue) || fields[key].stringValue;\r\n        }\r\n        return obj\r\n      });\r\n      return formattedData\r\n    }\r\n  },\r\n  created() {\r\n    const thisIns = this;\r\n    this.$http.get('https://firestore.googleapis.com/v1/projects/vuesax-admin/databases/(default)/documents/products/?pageSize=100')\r\n      .then(function (response) {\r\n        thisIns.users = thisIns.formatData(response.data.documents)\r\n      })\r\n      .catch(function (error) {\r\n        thisIns.$vs.notify({\r\n          title:'Error',\r\n          text: error,\r\n          color:'danger',\r\n          iconPack: 'feather',\r\n          icon:'icon-alert-circle'})\r\n      });\r\n  },\r\n  mounted() {\r\n    this.isMounted = true;\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n#data-list-thumb-view {\r\n  .vs-con-table {\r\n\r\n    .vs-table--header {\r\n      display: flex;\r\n      flex-wrap: wrap-reverse;\r\n      margin-left: 1.5rem;\r\n      margin-right: 1.5rem;\r\n      > span {\r\n        display: flex;\r\n        flex-grow: 1;\r\n      }\r\n\r\n      .vs-table--search{\r\n        padding-top: 0;\r\n\r\n        .vs-table--search-input {\r\n          padding: 0.9rem 2.5rem;\r\n          font-size: 1rem;\r\n\r\n          &+i {\r\n            left: 1rem;\r\n          }\r\n\r\n          &:focus+i {\r\n            left: 1rem;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .vs-table {\r\n      border-collapse: separate;\r\n      border-spacing: 0 1.3rem;\r\n      padding: 0 1rem;\r\n\r\n\r\n      tr{\r\n          box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);\r\n          td{\r\n            padding: 10px;\r\n            &:first-child{\r\n              border-top-left-radius: .5rem;\r\n              border-bottom-left-radius: .5rem;\r\n            }\r\n            &:last-child{\r\n              border-top-right-radius: .5rem;\r\n              border-bottom-right-radius: .5rem;\r\n            }\r\n            &.img-container {\r\n              // width: 1rem;\r\n              // background: #fff;\r\n\r\n              span {\r\n                display: flex;\r\n                justify-content: center;\r\n              }\r\n\r\n              .product-img {\r\n                height: 110px;\r\n              }\r\n            }\r\n          }\r\n          td.td-check{\r\n            padding: 20px !important;\r\n          }\r\n      }\r\n    }\r\n\r\n    .vs-table--thead{\r\n      th {\r\n        padding-top: 0;\r\n        padding-bottom: 0;\r\n\r\n        .vs-table-text{\r\n          text-transform: uppercase;\r\n          font-weight: 600;\r\n        }\r\n      }\r\n      th.td-check{\r\n        padding: 0 15px !important;\r\n      }\r\n      tr{\r\n        background: none;\r\n        box-shadow: none;\r\n      }\r\n    }\r\n\r\n    .vs-table--pagination {\r\n      justify-content: center;\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/@vue/cli-plugin-babel/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!./DataListThumbView.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/@vue/cli-plugin-babel/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!./DataListThumbView.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DataListThumbView.vue?vue&type=template&id=dd454436&\"\nimport script from \"./DataListThumbView.vue?vue&type=script&lang=js&\"\nexport * from \"./DataListThumbView.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DataListThumbView.vue?vue&type=style&index=0&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  null,\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/lib/loader.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!./DataListThumbView.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/lib/loader.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!./DataListThumbView.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}