vue-intergrall-plugins 0.0.1085 → 1.0.1

package/src/lib-components/Chat/BtnFiles.vue

@@ -1,39 +1,127 @@
 <template>
-  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.length}" @click="fileSettings.multiple ? openSelectFileHandler('both') : toggleFiles">
+  <span
+    class="text-footer-actions--btn"
+    :class="{ 'files-activated': openFiles || file.name }"
+    @click="openFilesByClip()"
+  >
+    <!-- || file.length -->
+    <!-- <transition name="fade">
+      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="`Visualizar ${fileSize} arquivo(s)`" class="files-counter">
+        {{ fileSize }}
+      </span>
+    </transition> -->
+    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
     <transition name="fade">
-      <span v-if="file.length" class="files-counter" v-text="file.length" @click.stop="toggleFilePreview" :title="dictionary.msg_abrir_anexos"></span>
+      <span
+        v-if="fileSize > 0"
+        @click.stop="toggleFilePreview"
+        v-tippy
+        :content="
+          !fileSettings.handleFilePreview
+            ? dictionary.msg_abrir_anexos
+            : `${file.length} anexo(s) selecionado(s)`
+        "
+        :class="`${
+          fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'
+        }`"
+      >
+        <template v-if="fileSettings.filePreviewStyle == 1">
+          {{ fileSize }}
+        </template>
+        <template v-else>
+          <fa-icon :icon="['fas', 'eye']" />
+        </template>
+      </span>
     </transition>
-    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
     <transition name="show">
-      <div v-if="openFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
-        <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
+      <div
+        v-if="openFiles && hasButtonFiles"
+        class="text-footer-files-container"
+        :class="{ horizontal: cssStyle.outsideButtons }"
+      >
+        <template v-if="!fileSettings.multiple">
+          <div
+            class="files-btn images"
+            :class="{ 'margin-bottom': cssStyle.outsideButtons }"
+            :title="dictionary.title_anexo_img"
+            @click="openSelectFileHandler('img')"
+          >
+            <fa-icon :icon="['fas', 'image']" />
+          </div>
+          <div
+            class="files-btn docs"
+            :title="dictionary.title_anexo_doc"
+            @click="openSelectFileHandler('doc')"
+          >
+            <fa-icon :icon="['fas', 'file-alt']" />
+          </div>
+        </template>
+        <div
+          v-else
+          class="files-btn both"
+          :title="dictionary.title_anexo_arq"
+          @click="openSelectFileHandler('both')"
+        >
           <fa-icon :icon="['fas', 'image']" />
-        </div>
-        <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="openSelectFileHandler('doc')">
           <fa-icon :icon="['fas', 'file-alt']" />
         </div>
+        <div
+          v-if="fileSettings.systemButton"
+          class="files-btn system"
+          :title="dictionary.title_anexo_sistema"
+          @click="openSelectFileHandler('system')"
+        >
+          <fa-icon :icon="['fas', 'server']" />
+        </div>
       </div>
     </transition>
     <div class="files-pointers d-none">
-      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" accept="image/*,application/*" multiple @change="fileUpload($event, 'both')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" accept="image/*" @change="fileUpload($event, 'img')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" accept="application/*" @change="fileUpload($event, 'doc')" />
+      <input
+        v-if="fileSettings.multiple"
+        type="file"
+        :id="`both-${textId}`"
+        :accept="acceptedExtensions"
+        multiple
+        @change="fileUpload($event, 'both')"
+      />
+      <input
+        v-if="!fileSettings.multiple"
+        type="file"
+        :id="`img-${textId}`"
+        :accept="acceptedExtensions"
+        @change="fileUpload($event, 'img')"
+      />
+      <input
+        v-if="!fileSettings.multiple"
+        type="file"
+        :id="`doc-${textId}`"
+        :accept="acceptedExtensions"
+        @change="fileUpload($event, 'doc')"
+      />
     </div>
     <transition name="fade">
-      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]">
-        <SingleFilePreview 
-          v-if="!fileSettings.multiple"
+      <div
+        class="text-footer-preview-container"
+        @click.stop
+        v-show="showFilePreview"
+        :class="[previewContainerClass]"
+        v-on-clickaway="away"
+      >
+        <SingleFilePreview
+          v-if="!fileSettings.multiple && showFilePreview"
           :dictionary="dictionary"
           :file="file"
           :isDoc="isDoc"
           :fileFormatError="fileFormatError"
           :validFileFormats="validFileFormats"
           :imagePreview="imagePreview"
+          :textId="textId"
           @delete-file="deleteFile"
           @open-image="openImage"
+          @close="away"
         />
-        <MultipleFilePreview 
-          v-else
+        <MultipleFilePreview
+          v-else-if="fileSettings.multiple && showFilePreview"
           :dictionary="dictionary"
           :file="file"
           :fileFormatError="fileFormatError"
@@ -41,6 +129,7 @@
           @delete-file="deleteFile"
           @delete-specific-file="deleteSpecificFile"
           @open-image="openImage"
+          @close="away"
         />
       </div>
     </transition>
@@ -63,7 +152,7 @@
   transform: translate(17.5px, -15px);
   background-color: #888;
   z-index: 1;
-  font-size: .5rem;
+  font-size: 8px;
   width: 15px;
   height: 15px;
   border-radius: 50%;
@@ -71,194 +160,382 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  opacity: .9;
+  opacity: 0.9;
   transition: all 300ms;
-  color: #FFF;
+  color: #fff;
   font-weight: 900;
 }
 .files-counter:hover {
-  opacity: 1
+  opacity: 1;
+}
+.files-counter-2 {
+  transform: translate(-15px, 28px);
+  opacity: 0.9;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+  font-size: 12.8px;
+}
+.files-counter-2 svg {
+  margin-left: 5px;
+}
+.files-counter-2:hover {
+  opacity: 1;
+  text-decoration: underline;
 }
 </style>
 
 <script>
-import SingleFilePreview from "./SingleFilePreview"
-import MultipleFilePreview from "./MultipleFilePreview"
+import { mixin as clickaway } from "vue-clickaway";
+import SingleFilePreview from "./SingleFilePreview";
+import MultipleFilePreview from "./MultipleFilePreview";
 
 export default {
   components: { SingleFilePreview, MultipleFilePreview },
+  mixins: [clickaway],
   props: {
     textId: {
       type: String,
-      required: true
+      required: true,
     },
     dictionary: {
       type: Object,
-      required: true
+      required: true,
     },
     fileSettings: {
       type: Object,
-      required: false
+      required: false,
     },
     cssStyle: {
       type: Object,
-      required: false
-    }
+      required: false,
+    },
+    hasButtonFiles: {
+      type: Boolean,
+      required: false,
+    },
+    externalFiles: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
       file: [],
+      fileSize: 0,
       openFiles: false,
       showFilePreview: false,
       imagePreview: "",
       isDoc: false,
       fileFormatError: false,
       validFileFormats: "",
-      hasAnyFile: false
-    }
+      hasAnyFile: false,
+      externalFilesAux: [],
+    };
   },
   computed: {
     previewContainerClass() {
-      if(this.fileFormatError) return "isError"
-      if(this.fileSettings.multiple) return "isMultiple"
-      if(this.isDoc) return "isDoc"
-      return "isMsg"
-    }
+      if (this.fileFormatError) return "isError";
+      if (this.fileSettings.multiple) return "isMultiple";
+      if (this.isDoc) return "isDoc";
+      return "isMsg";
+    },
+    acceptedExtensions() {
+      let str = "";
+      if (this.fileSettings.docsExtensions && this.fileSettings.imagesExtensions) {
+        str = `${this.fileSettings.docsExtensions
+          .split("|")
+          .join(",")}${this.fileSettings.imagesExtensions.split("|").join(",")}`;
+      } else if (this.fileSettings.docsExtensions) {
+        str = this.fileSettings.docsExtensions.split("|").join(",");
+      } else if (this.fileSettings.imagesExtensions) {
+        str = this.fileSettings.imagesExtensions.split("|").join(",");
+      }
+      if (str) {
+        const arr = str.split(",").map((ext) => {
+          ext = ext && ext.startsWith(".") ? ext : `.${ext}`;
+          return ext;
+        });
+        str = arr.join(",");
+      }
+      if (this.fileSettings.multiple) return str ? str : "image/*,application/*";
+      if (this.isDoc) return str ? str : "application/*";
+      return str ? str : "image/*";
+    },
+  },
+  watch: {
+    externalFiles() {
+      if (!this.externalFiles.length) return;
+      if (this.externalFiles.length > this.fileSettings.max) {
+        this.$emit("reset-file-system");
+        return this.$toasted.global.defaultInfo({
+          msg: `Limite de ${this.fileSettings.max} arquivos`,
+        });
+      }
+      this.file = [];
+      this.externalFilesAux = Array.from(this.externalFiles);
+      this.externalFilesAux.forEach((files) => {
+        this.file.push(files);
+      });
+      this.fileSize = this.file.length;
+      this.multipleFileUpload();
+    },
   },
   methods: {
+    openFilesByClip() {
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (this.fileSettings.multiple && !this.hasButtonFiles) {
+        return this.openSelectFileHandler("both");
+      }
+      return this.toggleFiles();
+    },
+    away() {
+      this.showFilePreview = false;
+    },
     toggleFiles() {
-      this.openFiles = !this.openFiles
+      this.openFiles = !this.openFiles;
     },
     openSelectFileHandler(type) {
-      const fileInput = document.querySelector(`#${type}-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (type == "system") return this.$emit("open-file-system");
+      if (this.fileSettings.multiple) {
+        type = "both";
+      }
+      const fileInput = document.querySelector(`#${type}-${this.textId}`);
+      if (fileInput) fileInput.click();
+      if (!fileInput)
+        if (!document.querySelector(".toasted.toasted-primary.error"))
+          this.$toasted.global.defaultError();
     },
-    isFileValid(type, fileName) {
-      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
-      const regex = new RegExp("("+extensions+")", "i")
-
-      if(regex.test(fileName)) return true
-      this.hasAnyFile = false
-      this.showToastedValidFormats()
-      return false
+    isFileValid(type, fileName, fileType) {
+      if (
+        (type == "img" && !this.fileSettings.imagesExtensions) ||
+        (type == "doc" && !this.fileSettings.docsExtensions)
+      ) {
+        this.$toasted.global.defaultInfo({
+          msg: this.dictionary.sem_extensoes_parametrizadas,
+        });
+        this.hasAnyFile = false;
+        return false;
+      }
+      const extensions =
+        type === "img"
+          ? this.fileSettings.imagesExtensions
+          : this.fileSettings.docsExtensions;
+      const regex = new RegExp("(" + extensions + ")", "i");
+      if (regex.test(fileName) || regex.test(fileType)) return true;
+      this.hasAnyFile = false;
+      this.showToastedValidFormats();
+      return false;
     },
     showToastedValidFormats() {
-      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
-        const str = {
-          img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      if (!document.querySelector(".toasted.toasted-primary.error"))
+        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido });
+      const str = {
+        img: this.fileSettings.imagesExtensions.split("|").join(", "),
+        doc: this.fileSettings.docsExtensions.split("|").join(", "),
+      };
+      if (!document.querySelector(".toasted.toasted-primary.info"))
+        this.$toasted.global.showValidFormats({
+          msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}`,
+        });
     },
     fileUpload(event, type, externalCall) {
       try {
-        if(this.fileFormatError) this.file = []
-        this.openFiles = false
-        let filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
-        this.file = filesAux.length ? filesAux : this.file 
+        this.fileSize = 0;
+        if (this.fileFormatError) this.file = [];
+        this.openFiles = false;
+        const filesAux = !externalCall
+          ? event.target.files
+            ? event.target.files
+            : event.dataTransfer.files
+          : event;
+        const isStackable = this.fileSettings.stackFiles && this.fileSettings.multiple;
+        this.file = filesAux.length
+          ? isStackable
+            ? this.file.concat(...filesAux)
+            : filesAux
+          : this.file;
+        if (!this.file.length) return;
 
-        if(!this.file.length) return
-        this.hasAnyFile = true
-        if(!this.fileSettings.multiple) {
-          this.file = this.file[0]
-          this.singleFileUpload(type, this.file.name)
-        }else {
-          this.multipleFileUpload()
+        let sizeInBytes = 0;
+        Array.from(this.file).forEach((file) => (sizeInBytes += file.size));
+        const sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2));
+        if (sizeInMb == 0) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({
+            msg: this.dictionary.msg_arquivo_invalido,
+          });
         }
-      }catch(e) {
-        console.error("Error file upload")
-        console.error(e)
+        if (sizeInMb >= 15) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({ msg: `Limite de 15 MB por arquivo` });
+        }
+
+        if (this.file.length > this.fileSettings.max) {
+          this.file = [];
+          return this.$toasted.global.defaultInfo({
+            msg: `Limite de ${this.fileSettings.max} arquivos`,
+          });
+        }
+        this.hasAnyFile = true;
+        this.fileSize = this.file.length;
+        if (!this.fileSettings.multiple) {
+          this.file = this.file[0];
+          this.singleFileUpload(type, this.file.name, this.file.type);
+        } else {
+          this.multipleFileUpload();
+        }
+      } catch (e) {
+        console.error("Error file upload");
+        console.error(e);
       }
     },
     returnFileType(file) {
-      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
-      if(imgRegex.test(file.name)) return "img"
+      if (!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions)
+        return "";
+
+      const imgRegex = new RegExp("\.(" + this.fileSettings.imagesExtensions + ")", "i");
+      if (imgRegex.test(file.name)) return "img";
 
-      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
-      if(docRegex.test(file.name)) return "doc"
+      const docRegex = new RegExp("\.(" + this.fileSettings.docsExtensions + ")", "i");
+      if (docRegex.test(file.name)) return "doc";
 
-      return ""
+      return "";
     },
     multipleFileUpload() {
-      let waitForImageLoad = false
-      this.file = Array.from(this.file)
-      this.file.forEach(file => {
-        const fileReader = new FileReader();
-
-        const singleFileType = this.returnFileType(file)
-        if(!singleFileType) file.invalid = true
-        file.imgOrDoc = singleFileType ? singleFileType : ""
-
-        if(file.imgOrDoc === "doc") this.isDoc = true
-        if(file.imgOrDoc === "img") {
-          waitForImageLoad = true
-          fileReader.onload = () => file.src = fileReader.result
-          fileReader.onloadend = () => this.emitFileVars(true)
+      const hasImgExt = this.fileSettings.imagesExtensions ? true : false;
+      const hasDocExt = this.fileSettings.docsExtensions ? true : false;
+      if (!hasImgExt && !hasDocExt) {
+        this.file = [];
+        this.fileSize = 0;
+        return this.$toasted.global.defaultInfo({
+          msg: this.dictionary.sem_extensoes_parametrizadas,
+        });
+      }
+      let waitForImageLoad = false;
+      let hasAnyInvalidFile = false;
+      this.file = Array.from(this.file);
+      this.file.forEach((file) => {
+        const singleFileType = this.returnFileType(file);
+        if (!singleFileType) file.invalid = true;
+        file.imgOrDoc = singleFileType ? singleFileType : "";
+        if (this.isFileValid(file.imgOrDoc, file.name, file.type)) {
+          if (file.imgOrDoc == "img") {
+            const fileReader = new FileReader();
+            waitForImageLoad = true;
+            fileReader.onload = () => (file.src = fileReader.result);
+            fileReader.onloadend = () => this.emitFileVars(true);
+            fileReader.readAsDataURL(file);
+          }
+          if (file.imgOrDoc === "doc") this.isDoc = true;
+          file.invalid = false;
+          this.fileFormatError = !hasAnyInvalidFile ? false : true;
+        } else {
+          hasAnyInvalidFile = true;
+          file.invalid = true;
+          this.fileFormatError = true;
+          if (hasImgExt && !hasDocExt)
+            this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions
+              .split("|")
+              .join(", ")}`;
+          if (hasDocExt && hasImgExt)
+            this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions
+              .split("|")
+              .join(", ")}`;
+          if (hasImgExt && hasDocExt)
+            this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions
+              .split("|")
+              .join(", ")} - Documentos: ${this.fileSettings.docsExtensions
+              .split("|")
+              .join(", ")}`;
         }
+      });
 
-        if(this.isFileValid(file.imgOrDoc, file.name)) {
-          if(file.imgOrDoc === "img") fileReader.readAsDataURL(file)
-          file.invalid = false
-          this.fileFormatError = false
-        }else{
-          file.invalid = true
-          this.fileFormatError = true
-          this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
-        }
-      })
+      if (this.fileFormatError) {
+        this.file = [];
+        this.fileSize = 0;
+      }
 
-      if(this.isDoc && !waitForImageLoad) this.emitFileVars()
+      if (this.isDoc && !waitForImageLoad) this.emitFileVars();
     },
-    singleFileUpload(type, fileName) {
-      const fileReader = new FileReader()
-      if(type === "img") {
-        fileReader.onload = () => this.imagePreview = fileReader.result 
-        fileReader.onloadend = () => this.emitFileVars()
-      }
+    singleFileUpload(type, fileName, fileType) {
+      if (this.isFileValid(type, fileName, fileType)) {
+        const fileReader = new FileReader();
+        if (type === "img") {
+          fileReader.onload = () => (this.imagePreview = fileReader.result);
+          fileReader.onloadend = () => this.emitFileVars();
+          fileReader.readAsDataURL(this.file);
+        }
+        if (type === "doc") this.isDoc = true;
 
-      if(this.isFileValid(type, fileName)) {
-        if(type === "img") fileReader.readAsDataURL(this.file)
-        if(type === "doc") this.isDoc = true
-        
-        this.fileFormatError = false
-      }else {
-        this.fileFormatError = true
-        this.validFileFormats = `Imgs: ${this.fileSettings.imagesExtensions.split("|").join(", ")} <br> Docs: ${this.fileSettings.docsExtensions.split("|").join(", ")} ${this.dictionary.msg_extensoes_aceitas}`
+        this.fileFormatError = false;
+      } else {
+        this.fileFormatError = true;
+        const hasImgExt = this.fileSettings.imagesExtensions ? true : false;
+        const hasDocExt = this.fileSettings.docsExtensions ? true : false;
+        if (hasImgExt && !hasDocExt)
+          this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`;
+        if (hasDocExt && hasImgExt)
+          this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`;
+        if (hasImgExt && hasDocExt)
+          this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`;
       }
 
-      if(this.isDoc) this.emitFileVars()
+      if (this.isDoc) this.emitFileVars();
     },
     toggleFilePreview() {
-      this.showFilePreview = !this.showFilePreview
+      if (this.fileSettings.handleFileClick) return this.$emit("handle-file-click");
+      if (this.fileSettings.handleFilePreview) {
+        this.emitFileVars();
+        return this.$emit("handle-file-preview");
+      }
+      this.showFilePreview = !this.showFilePreview;
+      if (this.showFilePreview && this.openFiles) this.toggleFiles();
     },
     emitFileVars() {
-      const vars = { file: this.file, isDoc: this.isDoc, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError, hasAnyFile: this.hasAnyFile }
+      const vars = {
+        file: this.file,
+        isDoc: this.isDoc,
+        imagePreview: this.imagePreview,
+        fileFormatError: this.fileFormatError,
+        hasAnyFile: this.hasAnyFile,
+      };
 
-      this.$emit("set-file-vars", vars)
-      this.$parent.focusTextarea()
+      this.$emit("set-file-vars", vars);
+      this.$parent.focusTextarea();
     },
     deleteSpecificFile(obj) {
-      const { fileName } = obj
-      this.file = this.file.filter(file => {
-        return file.name != fileName
-      })
-      this.file.length ? this.emitFileVars(true) : this.deleteFile()
+      const { fileName } = obj;
+      this.file = this.file.filter((file) => {
+        return file.name != fileName;
+      });
+      this.fileSize = this.file.length;
+      this.file.length ? this.emitFileVars(true) : this.deleteFile();
     },
     deleteFile() {
-      this.$emit("set-file-vars", { file: [], isDoc: false, imagePreview: "", fileFormatError: false, hasAnyFile: false })
+      this.fileSize = this.file.length;
+      this.$emit("set-file-vars", {
+        file: [],
+        isDoc: false,
+        imagePreview: "",
+        fileFormatError: false,
+        hasAnyFile: false,
+      });
 
-      this.file = []
-      this.isDoc = false
-      this.showFilePreview = false
-      this.hasAnyFile = false
-      this.imagePreview = ""
-      this.fileFormatError = false
-      this.validFileFormats = ""
+      this.file = [];
+      this.isDoc = false;
+      this.showFilePreview = false;
+      this.hasAnyFile = false;
+      this.imagePreview = "";
+      this.fileFormatError = false;
+      this.validFileFormats = "";
     },
     openImage(imagePreview) {
-      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview)
-    }
-  }
-}
+      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview);
+    },
+  },
+};
 </script>