vue-intergrall-plugins 0.0.264 → 0.0.266

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

@@ -19,7 +19,18 @@
     </div>
     <template v-if="selectedTemplate">
       <div class="tg-component" v-if="selectedTemplate.components">
-        <TemplateSingle :template="selectedTemplate" @set-vars="setFinalMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger')"  :identifier="identifier" :allVariables="allVariables" :dictionary="dictionary" />
+        <TemplateSingle 
+          :key="codTemplate"
+          :template="selectedTemplate" 
+          @set-vars="setFinalMessage" 
+          @set-file-var="setFileVar"
+          :hasButton="hasButton" 
+          :iconButton="iconButton" 
+          @click-trigger="$emit('click-trigger')" 
+          :identifier="identifier" 
+          :allVariables="allVariables"
+          :dictionary="dictionary" 
+        />
       </div>
       <div class="tg-component" v-else>
         <TemplateMessage  @final-message="setMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
@@ -84,7 +95,8 @@
       return {
         templateOptions: [],
         codTemplate: {},
-        selectedTemplate: null
+        selectedTemplate: null,
+        hasFile: false
       }
     },
     mounted() {
@@ -144,6 +156,7 @@
         }else{
           this.selectedTemplate = null
         }
+        // if(this.hasFile) this.setFileVar(false)
         this.adjustOnSelect()
       },
       focusSelect() {
@@ -188,9 +201,9 @@
                       const varName = `{{${keys[keyIndex]}}}`
                       if(message.text.indexOf(varName) != -1) {
                         /**Gerando os obejetos de parametros da notificacao para o component */
-                        if(component.type === "header") {
+                        if(component.type === "header" && !this.selectedTemplate['parameters'][component.type]) {
                           this.selectedTemplate['parameters'][component.type] = {}
-                          //Header s? pode ter uma vari?vel
+                          //Header so pode ter uma vari?vel
                           this.selectedTemplate['parameters'][component.type] = {
                             tipo: "text",
                             text: values[keyIndex]
@@ -207,14 +220,25 @@
                       keyIndex++
                     }
                   })
+                }else if(component.type == 'header' && component.parameters.seq) {
+                  if(this.hasFile) {
+                    if(!this.selectedTemplate['parameters'][component.type]) this.selectedTemplate['parameters'][component.type] = new Array()
+                    this.selectedTemplate['parameters'][component.type].push({ tipo: 'image', template: component.parameters.seq, link: '' })
+                  }else {
+                    delete this.selectedTemplate['parameters'][component.type]
+                  }
                 }
               })
             }
           }
         }
-
         this.$emit("template-data", this.selectedTemplate)
       },
+      setFileVar(file) {
+        this.hasFile = file ? true : false
+        this.$emit("set-file-var", file)
+        if(file) this.$emit("template-data", this.selectedTemplate)
+      },
       setMessage(message) {
         this.$emit("static-message", message)
       }
@@ -249,6 +273,67 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   margin-right: 5px;
 }
 
+.ts-image-type {
+  display: flex;
+  align-items: center;
+}
+
+.ts-image-type img {
+  cursor: pointer;
+}
+
+.ts-image-type svg {
+  font-size: 25px;
+  cursor: pointer;
+}
+
+.ts-image-type .select-image {
+  color: #838383;
+}
+
+.color-red {
+  color: #E74C3C;
+}
+
+.color-blue {
+  color: #007BFF;
+}
+
+.color-black {
+  color: #333
+}
+
+.color-purple {
+  color: #a312a3
+}
+
+.custom-tooltip-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+  padding: 5px;
+}
+
+.custom-tooltip-image img {
+  max-width: 75px;
+  max-height: 75px;
+}
+
+.ts-button {
+  background-color: #FFF;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px 15px;
+  transition: background-color 150ms ease-in-out;
+}
+
+.ts-button:hover {
+  background-color: rgb(253, 253, 253);
+}
+
 .tg-select {
   flex: 1;
   height: 34px;
@@ -270,9 +355,6 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   text-overflow: ellipsis;
   flex: 1;
 }
-.tg-select .vs__selected-options > input {
-  flex-grow: 0;
-}
 
 .vs__dropdown-option.vs__dropdown-option--selected {
   background-color: rgb(26, 95, 173)!important;
@@ -312,10 +394,22 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   --input-border-default: #007BFF;
   --input-border-error: #E74C3C;
   --placeholder-color: #BBB;
+  --border-radius: 5px;
 
   flex: 2;
   font-size: .7rem;
   padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+}
+.order-1 {
+  order: 1
+}
+.custom-box-shadow-bottom {
+  box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, .3);
+}
+.custom-border-gray {
+  border: 1px solid var(--border-color)!important;
 }
 .ts-content header, .ts-content section, .ts-content footer {
   padding: 3px 5px;
@@ -326,8 +420,8 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   border-left: 1px solid var(--border-color);
 }
 .ts-content header {
-  border-top-left-radius: 2.5px;
-  border-top-right-radius: 2.5px;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
   border-top: 1px solid var(--border-color);
 }
 .ts-content header { font-weight: 550 }
@@ -335,15 +429,15 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   line-height: 25px;
 }
 .ts-content section.margin-bottom {
-  border-bottom-left-radius: 2.5px;
-  border-bottom-right-radius: 2.5px;
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
   border-bottom: 1px solid var(--border-color);
 }
-.ts-content footer {
+.ts-content footer, .custom-footer-style {
   border: 1px solid var(--border-color);
   border-top: unset;
-  border-bottom-left-radius: 2.5px;
-  border-bottom-right-radius: 2.5px;
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 .ts-content input {
   border: 1px solid transparent;
@@ -468,7 +562,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 
 .tm-container {
   border: 1px solid var(--border-color);
-  border-radius: 2.5px;
+  border-radius: 5px;
   display: flex;
 }
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="ts-container">
     <div class="ts-content">
-      <section :class="{'tm-container' : hasButton}">
+      <section :class="{'tm-container custom-box-shadow-bottom' : hasButton}">
         <TextFooter
           :textId="'var_1'"
           width="full"

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">
@@ -71,7 +111,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: {
@@ -103,12 +145,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() {
     if(this.allVariables) this.getListOpts()
     this.setInputs();
+    this.setImageVar(false)
   },
   updated() {
     this.lastVar = 0;
@@ -134,6 +193,7 @@ export default {
         input.blur();
         this.setVar({ target: input },  input.id.replace(/[{}]+/g, ''));
       })
+      this.setImageVar(false)
     },
     getListOpts() {
       this.varListValues =
@@ -142,26 +202,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) {
@@ -263,6 +409,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, '')