vue-intergrall-plugins 0.0.1085 → 1.0.1

package/src/lib-components/Templates/TemplateSingle.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="ts-container">
     <div class="ts-content">
-      <div v-for="(component, cIndex) in template.components" :key="cIndex">
+      <div 
+        v-for="(component, cIndex) in template.components" 
+        :key="cIndex"
+        :class="`${component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : ''}${template.components.length == 1 ? 'custom-box-shadow-bottom' : ''}`"
+      >
         <header
           v-if="component.type === 'header'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
           id="template_header"
         >
           <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
@@ -19,11 +24,36 @@
               ></div>
               <p v-else v-html="param.text"></p>
             </template>
+            <div v-else-if="param.type == 'image'" class="ts-image-type">
+              <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions" @change="fileUpload($event)" />
+              <template v-if="headerFiles[0]">
+                <fa-icon 
+                  :icon="['fas', headerFiles[0].current_icon]"
+                  :class="`color-${headerFiles[0].current_color}`"
+                  @click="triggerInputFile(`header-${pIndex}`)"
+                  v-tippy="{placement: 'right'}"
+                  :content="headerFiles[0].image_preview ? 
+                    `<div class='custom-tooltip-image'>
+                      <img src='${headerFiles[0].image_preview}' alt='${headerFiles[0].name}' />
+                    </div>` 
+                    : headerFiles[0].name
+                  "
+                />
+              </template>
+              <fa-icon 
+                v-else 
+                class="select-image" 
+                :icon="['fas', 'image']" 
+                @click="triggerInputFile(`header-${pIndex}`)" 
+                v-tippy="{placement: 'right'}"
+                :content="`Selecionar anexo`"
+              />
+            </div>
           </div>
         </header>
         <section
           v-if="component.type === 'body'"
-          :class="{'margin-bottom' : template.components.length === 2 }"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : ''}`"
           id="template_body"
         >
           <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
@@ -41,8 +71,18 @@
             </template>
           </div>
         </section>
+        <section
+          v-if="component.type == 'button'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : ''}`"
+          id="template_buttons"
+        >
+          <div v-for="(param, pIndex) in component.parameters" :key="pIndex" class="ts-button">
+            <p v-if="param.text" v-html="param.text"></p>
+          </div>
+        </section>
         <footer
           v-if="component.type == 'footer'"
+          :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
           id="template_footer"
         >
           <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
@@ -51,15 +91,51 @@
         </footer>
       </div>
     </div>
-    <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
-      <button @click="$emit('click-trigger')">
-        <template v-if="!iconButton"> {{ dictionary.btn_contatar_clientes }} </template>
-        <fa-icon v-else :icon="['fas', 'paper-plane']" />
-      </button>
+
+    <div class="container-btns">
+      <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
+        <button @click="$emit('click-trigger')" ref="template-single-button">
+          <template v-if="!iconButton"> 
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes }} 
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+        
+      </div>
+  
+      <div class="tg-btn btn-red" :class="{'small-btn' : iconButton}" v-if="hasSecondaryButton">
+        <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')" ref="template-single-button-secondary">
+          <template v-if="!iconButton"> 
+            <fa-icon :icon="['fas', 'paper-plane']" />
+            {{ dictionary.btn_contatar_clientes_com_bot }} 
+          </template>
+          <fa-icon v-else :icon="['fas', 'paper-plane']" />
+        </button>
+      </div>
     </div>
+
   </div>
 </template>
 
+<style scoped>
+  .btn-red button {
+    background-color: red;
+  }
+  
+  .btn-red svg {
+    color: rgb(182, 0, 0);
+  }
+
+  .container-btns {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+</style>
+
 <script>
 export default {
   data() {
@@ -68,7 +144,9 @@ export default {
       regexVars: /{{var_\d}}/g,
       lastVar: 0,
       htmlInputString: `<input type='text' class='input-var input-var-${this.identifier}' autocomplete='off' />`,
-      varListValues: ""
+      varListValues: "",
+      acceptedExtensions: "audio/aac, audio/mp4, audio/mpeg, audio/amr, audio/ogg, text/plain, application/pdf, application/vnd.ms-powerpoint, application/msword, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.spreasheetml.sheet, image/jpeg, image/png, video/mp4, video/3gp, image/webp",
+      headerFiles: [],
     };
   },
   props: {
@@ -81,6 +159,11 @@ export default {
       required: false,
       default: true,
     },
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     allVariables: {
       type: Boolean,
       required: false,
@@ -100,12 +183,29 @@ export default {
       required: true
     }
   },
+  computed: {
+    hasFooterComponent() {
+      if(!this.template.components || !this.template.components.length) return false
+      const types = []
+      this.template.components.forEach(({ type }) => types.push(type))
+      if(types.includes('footer')) return true
+      return false
+    },
+    hasButtonOrFooterComponent() {
+      if(!this.template.components || !this.template.components.length) return false
+      const types = []
+      this.template.components.forEach(({ type }) => types.push(type))
+      if(types.includes('button')) return true
+      return this.hasFooterComponent
+    },
+  },
   created() {
     this.$root.$refs[`template-single-${this.identifier}`] = this
   },
   mounted() {
-    this.getListOpts()
+    if(this.allVariables) this.getListOpts()
     this.setInputs();
+    this.setImageVar(false)
   },
   updated() {
     this.lastVar = 0;
@@ -118,6 +218,11 @@ export default {
     })
   },
   methods: {
+    handleInitialFocus() {
+      const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
+      if(allInputs.length) allInputs[0].focus()
+      else if(this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+    },
     limparInputVar() {
       const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
       allInputs.forEach((input) => {
@@ -126,6 +231,7 @@ export default {
         input.blur();
         this.setVar({ target: input },  input.id.replace(/[{}]+/g, ''));
       })
+      this.setImageVar(false)
     },
     getListOpts() {
       this.varListValues =
@@ -134,26 +240,112 @@ export default {
         ${this.allVariables ? '<li> telefone </li>' : ''}
       </ul>`
     },
+    fileUpload(event) {
+      try {
+        const allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false
+        if(!allFiles || !allFiles.length) return this.setImageVar(false)
+        if(allFiles.length > 1) {
+          this.$toasted.global.defaultInfo({ msg: `Limite de 1 arquivo por vez` })
+          return this.setImageVar(false)
+        }
+        const file = allFiles[0]
+        const { type, name } = file
+        const validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp']
+        if(!validTypes.includes(type)) {
+          this.$toasted.global.defaultInfo({ msg: `(${type}) ${this.dictionary.msg_arquivo_invalido}` })
+          return this.setImageVar(false)
+        }
+        const returnArrType = str => {
+          const arr = []
+          validTypes.forEach(currentType => {
+            if(currentType.indexOf(str) > -1) arr.push(currentType)
+          })
+          return arr
+        }
+
+        const imageTypes = returnArrType('image/')
+        const docTypes = returnArrType('application/')
+        const audioTypes = returnArrType('audio/')
+        const videoTypes = returnArrType('video/')
+        const isPdf = type.indexOf('application/pdf') > -1
+        
+        let sizeInBytes = 0
+        Array.from(allFiles).forEach(file => sizeInBytes += file.size)
+        const sizeInMb = parseFloat((sizeInBytes / (1024*1024)).toFixed(2))
+        if(sizeInMb == 0 && sizeInBytes == 0) {
+          this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido })
+          return this.setImageVar(false)
+        }
+        const max = imageTypes.includes(type) ? 5 : 15
+        if(sizeInMb >= max) {
+          this.$toasted.global.defaultInfo({ msg: `Limite de ${max} MB por arquivo` })
+          return this.setImageVar(false)
+        }
+        
+        const fileReader = new FileReader()
+        let current_icon = 'file-alt', current_color = 'blue', setValues = true
+        if(imageTypes.includes(type)) {
+          setValues = false
+          fileReader.readAsDataURL(file)
+          fileReader.onload = () => {
+            const image_preview = fileReader.result
+            current_icon = 'image'
+            current_color = 'purple'
+            this.headerFiles[0] = { file, image_preview, current_icon, current_color, name }
+            this.$forceUpdate()
+            this.setImageVar(file)
+          }
+        }else if(docTypes.includes(type) && isPdf) {
+          current_icon = 'file-pdf'
+          current_color = 'red'
+        }else if(audioTypes.includes(type)) {
+          current_icon = 'microphone'
+          current_color = 'black'
+        }else if(videoTypes.includes(type)) {
+          current_icon = 'video',
+          current_color = 'black'
+        }
+
+        if(setValues) {
+          this.headerFiles[0] = { file, current_icon, current_color, name }
+          this.$forceUpdate()
+          this.setImageVar(file)
+        }
+      }catch(error) {
+        console.error("Erro file upload: ", error)
+      }
+    },
+    triggerInputFile(origin) {
+      if(this.$refs[`ts-input-${origin}`]) {
+        const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`] 
+        elem && elem.click()
+      }
+    },
     setInputs() {
       let qtdInputs = 0
       const header = document.querySelector("#template_header");
       const body   = document.querySelector("#template_body");
       const footer = document.querySelector("#template_footer");
+
+      let hasText = false
       if (header !== null) {
         header.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) })
         qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length
+        if(qtdInputs > 0 && header.innerText) hasText = true
       }
       if (this.lastVar === 0) this.lastVar += 1
       if (body !== null) {
         body.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
         qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length
+        if(qtdInputs > 0 && body.innerText) hasText = true
       }
       if (footer  !== null) {
         footer.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
         qtdInputs += footer.querySelectorAll(`.input-var-${this.identifier}`).length
+        if(qtdInputs > 0 && footer.innerText) hasText = true
       }
 
-      if(qtdInputs === 1) {
+      if(qtdInputs === 1 && !hasText) {
         document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%"
         document.querySelector(`.input-var-${this.identifier}`).style.width = "100%"
       }else if(qtdInputs === 0) {
@@ -163,21 +355,38 @@ export default {
     setEvent(input) {
       const varList = input.nextSibling
 
+      const currentInstance = this
+
       input.setAttribute("placeholder", `{{var_${this.lastVar}}}`);
       input.setAttribute("id", `{{var_${this.lastVar}}}`);
       input.addEventListener("input", (event) => {
         this.setVar(event, `var_${this.lastVar}`, true);
-        varList.classList.remove("visible")
+        if(varList) varList.classList.remove("visible")
       });
       input.addEventListener("focus", () => {
         input.classList.remove("invalid");
         input.classList.add("active");
         if(varList) {
+          const handleNextFocus = () => {
+            const allInputs = document.querySelectorAll(`.input-var-${currentInstance.identifier}`)
+            let stop = false
+            if(allInputs.length) {
+              allInputs.forEach(elem => {
+                if(!elem.value && !stop) {
+                  stop = true
+                  elem.focus()
+                }
+              })
+            }
+            if(!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
+          }
+
           for(let i = 0; i < varList.children.length; i++) {
             varList.children[i].addEventListener("click", function() {
               input.value = `[${this.innerText}]`
               input.classList.add("active")
               input.dispatchEvent(new Event('input'))
+              handleNextFocus()
             })
           }
 
@@ -205,8 +414,7 @@ export default {
         if(varList) varList.classList.remove("visible")
       });
       input.addEventListener("keydown", (event) => {
-        if (event.keyCode == 13 && this.hasButton)
-          this.$emit("click-trigger");
+        if (event.keyCode == 13 && this.hasButton) this.$emit("click-trigger");
       });
       this.lastVar += 1;
     },
@@ -239,6 +447,17 @@ export default {
 
       return isValueValid
     },
+    setImageVar(file) {
+      this.$emit("set-file-var", file)
+      if(!file) {
+        this.headerFiles = []
+        return this.$forceUpdate()
+      }else {
+        if(this.lastVar == 0) return this.$emit("set-vars", this.template)
+        if(Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues)
+        this.$nextTick(() => this.handleInitialFocus())
+      }
+    },
     setVar(event, key, notificar) {
       if (event && event.target) {
         key = event.target.id.replace(/[{}]+/g, '')