{"version":3,"sources":["webpack:///./src/components/Productos/Component/filesDragNDrop.vue?09a3","webpack:///./src/components/Productos/Component/filesDragNDrop.vue","webpack:///src/components/Productos/Component/filesDragNDrop.vue","webpack:///./src/components/Productos/Component/filesDragNDrop.vue?08b4","webpack:///./src/components/Productos/Component/filesDragNDrop.vue?a188"],"names":["render","_vm","this","_c","_self","staticClass","class","dragItem","isDrag","on","dragEnter","dragLeave","$event","preventDefault","drop","_v","attrs","seleccionarArchivos","ref","isLoading","_l","files","item","index","cargaImagen","modal","removeImage","length","removeAll","_m","_e","error","_s","slot","name","img","staticRenderFns","staticStyle","components","VuesticModal","VuesticAlert","computed","data","imagenes","methods","sendImageToServer","console","field","value","e","Array","setTimeout","readers","Promise","imagen","id","readFile","reader","resolve","reject","component"],"mappings":"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","file":"js/chunk-64f7e6d0.a3389234.js","sourcesContent":["export * from \"-!../../../../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/sass-loader/dist/cjs.js??ref--8-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./filesDragNDrop.vue?vue&type=style&index=0&id=b79a34d6&prod&scoped=true&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"dropzone\",class:{ dragItem : _vm.isDrag },on:{\"dragenter\":_vm.dragEnter,\"dragleave\":_vm.dragLeave,\"dragover\":function($event){$event.preventDefault();},\"drop\":_vm.drop}},[_c('div',{staticClass:\"container\"},[_c('div',{staticClass:\"box box1\"},[_vm._v(\"Arrastrar y soltar imagenes\")]),_c('div',{staticClass:\"box box3\"},[_vm._v(\"o\")]),_c('div',{staticClass:\"box box2\"},[_c('button',{staticClass:\"btn btn-warning btn-micro\",attrs:{\"type\":\"button\"},on:{\"click\":_vm.seleccionarArchivos}},[_c('i',{staticClass:\"fa fa-cloud-upload\"}),_vm._v(\" Agregar Archivos\\n      \")])])]),_c('input',{ref:\"file\",staticClass:\"files\",attrs:{\"hidden\":\"\",\"id\":\"file\",\"type\":\"file\",\"multiple\":\"\"},on:{\"change\":_vm.drop}}),_c('div',{staticClass:\"thumb\"},[(_vm.isLoading)?_c('div',[_vm._v(\"Cargando imagenes...\")]):_vm._l((_vm.files),function(item,index){return _c('div',{staticClass:\"img\"},[_c('div',{staticClass:\"src\"},[_c('img',{attrs:{\"src\":_vm.cargaImagen(item),\"alt\":\"img\"},on:{\"click\":function($event){return _vm.modal(item)}}}),_c('i',{staticClass:\"eliminar fa fa-trash\",on:{\"click\":function($event){return _vm.removeImage(item, index)}}})])])})],2),(_vm.files.length >= 2)?_c('div',{staticClass:\"delete-all pointer bg-danger w-100 h-30 mt-2 mb-2 text-center\",on:{\"click\":_vm.removeAll}},[_vm._m(0)]):_vm._e(),(_vm.error)?_c('vuestic-alert',{staticClass:\"alerta\",attrs:{\"with-close-btn\":true,\"type\":\"danger\"}},[_vm._v(\"\\n    \"+_vm._s(_vm.error)+\"\\n  \")]):_vm._e(),_c('vuestic-modal',{ref:\"staticModal\",attrs:{\"force\":false}},[_c('div',{attrs:{\"slot\":\"title\"},slot:\"title\"},[_vm._v(_vm._s(_vm.name))]),_c('img',{staticClass:\"imgModal\",attrs:{\"src\":_vm.cargaImagen(_vm.img)}})])],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('small',[_vm._v(\"Eliminar Todo \"),_c('i',{staticClass:\"fa fa-close\",staticStyle:{\"font-size\":\"12px\"}})])\n}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"dropzone\" @dragenter=\"dragEnter\" @dragleave=\"dragLeave\" @dragover.prevent @drop=\"drop\"\n       :class=\"{ dragItem : isDrag }\">\n    <div class=\"container\">\n      <div class=\"box box1\">Arrastrar y soltar imagenes</div>\n      <div class=\"box box3\">o</div>\n      <div class=\"box box2\">\n        <button type=\"button\" class=\"btn btn-warning btn-micro\" @click=\"seleccionarArchivos\">\n          <i class=\"fa fa-cloud-upload\">\n          </i> Agregar Archivos\n        </button>\n      </div>\n    </div>\n    <input @change=\"drop\" hidden ref=\"file\" id=\"file\" type=\"file\" class=\"files\" multiple>\n    <div class=\"thumb\">\n      <div v-if=\"isLoading\">Cargando imagenes...</div>\n      <div v-else v-for=\"(item, index) in files\" class=\"img\">\n        <div class=\"src\">\n          <img :src=\"cargaImagen(item)\" @click=\"modal(item)\" alt=\"img\">\n          <i class=\"eliminar fa fa-trash\" @click=\"removeImage(item, index)\"></i>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"files.length >= 2\" @click=\"removeAll\"\n         class=\"delete-all pointer bg-danger w-100 h-30 mt-2 mb-2 text-center\">\n      <small>Eliminar Todo <i style=\"font-size: 12px\" class=\"fa fa-close\"></i></small>\n    </div>\n    <vuestic-alert class=\"alerta\" :with-close-btn=\"true\" v-if=\"error\" type=\"danger\">\n      {{error}}\n    </vuestic-alert>\n    <vuestic-modal ref=\"staticModal\" :force=\"false\">\n      <div slot=\"title\">{{name}}</div>\n      <img class=\"imgModal\" :src=\"cargaImagen(img)\">\n    </vuestic-modal>\n  </div>\n</template>\n\n<script>\n  import VuesticAlert from \"../../../vuestic-theme/vuestic-components/vuestic-alert/VuesticAlert\";\n  import VuesticModal from \"../../../vuestic-theme/vuestic-components/vuestic-modal/VuesticModal\";\n  import {URL_SERVER} from \"../../../api/config\";\n  import {uuid} from \"vue-uuid\";\n\n  export default {\n    name: \"filesDragNDrop\",\n    components: {VuesticModal, VuesticAlert},\n    computed: {\n      files() {\n        return this.$store.state.producto.producto.imagenes\n      }\n    },\n    data() {\n      return {\n        isDrag: false,\n        error: null,\n        isLoading: false,\n        img: '',\n        name: '',\n        imagenes: [],\n      }\n    },\n    methods: {\n      cargaImagen(string) {\n        return string;\n      },\n      sendImageToServer(imagenes) {\n        console.log(imagenes[0], \"sendImagenes\")\n        this.isLoading = true\n        this.$axios.put(`productos/producto/${this.$store.state.producto.producto.id}/imagen`, {\n          imagenes\n        }).then(response => {\n          if (response.status === 204) {\n            this.$store.dispatch(\"producto/getImages\", {field: \"id\", value: this.$store.state.producto.producto.id})\n            this.isLoading = false\n          } else {\n            this.$swal(\"Error\", \"error\", \"error\")\n            this.isLoading = false\n          }\n        }).catch(error => {\n          this.isLoading = false\n          console.error(error)\n          this.$swal(\"Error\", error, \"error\")\n        })\n      },\n      dragEnter() {\n        this.isDrag = true\n      },\n      dragLeave() {\n        this.isDrag = false\n      },\n      drop(e) {\n        e.preventDefault()\n        this.isDrag = false\n        if (this.imagenes.length >= 4) {\n          this.$swal('Error!', 'No se pueden agregar más imagenes', 'error')\n        } else {\n          const files = e.dataTransfer !== undefined ? e.dataTransfer.files : e.target.files\n          let readers = []\n          Array.from(files).forEach(item => {\n            if (!item.type.match('image/jpeg')) {\n              setTimeout(() => this.error = \"\", 500)\n              this.error = 'Solo se aceptan imagenes .jpeg';\n              return\n            }\n            readers.push(this.readFile(item))\n          })\n          Promise.all(readers).then(items => {\n            const images = items.map(i => ({imagen: i, id: uuid.v4()}))\n            this.sendImageToServer(images)\n          })\n        }\n      },\n      readFile(file) {\n        return new Promise((resolve, reject) => {\n          const reader = new FileReader()\n          reader.onload = function () {\n            resolve(reader.result);\n          }\n          reader.onerror = function (e) {\n            reject(e);\n          }\n          reader.readAsDataURL(file)\n        });\n      },\n      seleccionarArchivos() {\n        this.$refs.file.dispatchEvent(new MouseEvent('click'))\n      },\n      removeImage(item, index) {\n        let image = {id: item.replace(\".jpeg\", \"\")}\n        this.$axios.delete(`productos/producto/${this.$store.state.producto.producto.id}/imagen`, {\n          data: {\n            imagenes: [image]\n          }\n        }).then(response => {\n          if (response.status === 204) {\n            this.$store.commit(\"producto/DELETE_IMAGE\", index)\n            this.$swal(\"Correcto!!\", \"Imagen Eliminada Correctamente...\", \"success\")\n          }\n        }).catch(console.error)\n      },\n      removeAll() {\n        let images = this.$store.state.producto.producto.imagenes.map(item => {\n          const id = item.replace(\".jpeg\", \"\")\n          return {id}\n        })\n        this.$axios.delete(`productos/producto/${this.$store.state.producto.producto.id}/imagen`, {\n          data: {\n            imagenes: images\n          }\n        }).then(response => {\n          if (response.status === 204) {\n            this.$swal(\"Correcto\", \"Imagenes Eliminadas Correctamente...\", \"success\")\n            this.$store.commit(\"producto/SET_IMAGENES\", [])\n          } else this.$swal(\"Error\", response, \"error\")\n        }).catch(console.error)\n      },\n      modal(item) {\n        this.img = item\n        console.log(item)\n        this.$refs.staticModal.open()\n      }\n    }\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  .alerta {\n    margin-top: 20px;\n  }\n\n  .delete-all {\n    transition: all linear 200ms;\n    color: white;\n    border-radius: 7px;\n\n    &:hover {\n      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.75);\n    }\n  }\n\n  .imgModal {\n    width: 100%;\n    border-radius: 10px;\n  }\n\n  .dropzone {\n    align-items: center;\n    width: 80%;\n    min-height: 200px;\n    background: #dddddd;\n    border-radius: 5px;\n    margin-left: 10%;\n    padding: 20px;\n    display: inline-block;\n  }\n\n  .dragItem {\n    background: #d1f9c4;\n  }\n\n  .thumb {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .src {\n    width: 100px;\n    flex: 1;\n    margin-top: 30px;\n    margin-right: 10px;\n    position: relative;\n    overflow: hidden;\n    height: 100px;\n    transition: all 300ms ease-in-out;\n    transform-origin: left center;\n    border-radius: 10px;\n\n  }\n\n  .src > img {\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n  }\n\n  .src:hover {\n    transform: scale(1.2);\n    cursor: pointer;\n    margin-right: 30px;\n    /*box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,0.22);*/\n  }\n\n  @media screen and (max-width: 1000px) and (min-width: 500px) {\n    div .box1 .box3 {\n      display: none;\n    }\n  }\n\n  .eliminar {\n    cursor: pointer;\n    position: absolute;\n    color: black;\n    left: 5px;\n    top: 5px;\n    background: rgba(255, 255, 210, 0.9);\n    /* padding: 9px; */\n    padding-top: 3.5px;\n    padding-left: 5.5px;\n    border-radius: 50%;\n    width: 25px;\n    display: block !important;\n    height: 25px;\n  }\n\n  .eliminar:hover {\n    color: red\n  }\n\n  .container {\n    display: grid;\n    grid-template-columns:repeat(3, 1fr);\n    grid-auto-rows: 2fr;\n    grid-gap: 10px;\n    align-items: center;\n    align-content: center;\n  }\n\n  .box {\n    font-weight: bold;\n  }\n\n  .box1 {\n    grid-column: 2/3;\n    width: 100%;\n    text-align: center;\n  }\n\n  .box2 {\n    grid-column: 2/3;\n\n    button {\n      margin: 0 0 0 20px {\n      };\n    }\n  }\n\n  .box3 {\n    grid-column: 2/3;\n    text-align: center;\n  }\n</style>\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!./filesDragNDrop.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!./filesDragNDrop.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./filesDragNDrop.vue?vue&type=template&id=b79a34d6&scoped=true&\"\nimport script from \"./filesDragNDrop.vue?vue&type=script&lang=js&\"\nexport * from \"./filesDragNDrop.vue?vue&type=script&lang=js&\"\nimport style0 from \"./filesDragNDrop.vue?vue&type=style&index=0&id=b79a34d6&prod&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  \"b79a34d6\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}