vue-intergrall-plugins 0.0.1075 → 1.0.0

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

@@ -11,13 +11,28 @@
         :reduce="template => template.cod"
         :clearable="false"
         @input="setTemplate"
-        :getOptionLabel="template => template.label">
+        :getOptionLabel="template => template.label"
+        ref="template-v-select"
+        >
         <div slot="no-options" v-text="dictionary.msg_sem_resultados"></div>
       </v-select>
     </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" 
+          :hasSecondaryButton="hasSecondaryButton"
+          @dispatch-clients-with-bot="$emit('dispatch-clients-with-bot')"
+        />
       </div>
       <div class="tg-component" v-else>
         <TemplateMessage  @final-message="setMessage" :hasButton="hasButton" :iconButton="iconButton" @click-trigger="$emit('click-trigger', true)" :dictionary="dictionary" />
@@ -38,6 +53,11 @@
         type: Object,
         required: true
       },
+      hasSecondaryButton: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
       hasButton: {
         type: Boolean,
         required: false,
@@ -71,18 +91,24 @@
       dictionary: {
         type: Object,
         required: true
+      },
+      selectInitial: {
+        type: Boolean,
+        required: false,
+        default: true
       }
     },
     data() {
       return {
         templateOptions: [],
         codTemplate: {},
-        selectedTemplate: null
+        selectedTemplate: null,
+        hasFile: false
       }
     },
     mounted() {
       this.setTemplateOptions()
-      this.selectIfIsUnique()
+      if(this.selectInitial) this.selectIfIsUnique()
       this.selectIfHasContact24h()
     },
     methods: {
@@ -91,9 +117,11 @@
         for (let key in template) {
           if (key === "components" && Array.isArray(template[key])) {
             template[key].map((component) => {
-              component.parameters.map((param) => {
-                fullText += param.text;
-              });
+              if(component && component.parameters && component.parameters.length) {
+                component.parameters.map((param) => {
+                  fullText += param.text;
+                });
+              }
             });
           }
         }
@@ -129,11 +157,18 @@
           this.selectedTemplate = this.templates[key]
           this.codTemplate = key
           this.$emit('selected-template', key)
+          this.$nextTick(() => {
+            if(this.$root.$refs[`template-single-${this.identifier}`]) this.$root.$refs[`template-single-${this.identifier}`].handleInitialFocus()
+          })
         }else{
           this.selectedTemplate = null
         }
+        // if(this.hasFile) this.setFileVar(false)
         this.adjustOnSelect()
       },
+      focusSelect() {
+        if(this.$refs["template-v-select"] && this.$refs["template-v-select"].$el) this.$refs["template-v-select"].$el.querySelector("input").focus()
+      },
       selectIfIsUnique() {
         if(Object.keys(this.templates).length === 1) {
           for(let key in this.templates) {
@@ -143,6 +178,7 @@
             this.adjustOnSelect()
           }
         }
+        if(!this.codTemplate) this.focusSelect()
       },
       selectIfHasContact24h() {
         if(this.templates['envio_msg']) {
@@ -162,40 +198,54 @@
         for(let index in this.selectedTemplate) {
           if(index === "components" && Array.isArray(this.selectedTemplate[index])) {
             const arrComponents = this.selectedTemplate[index]
-            arrComponents.map(component => {
-              component.parameters.map(message => {
-                message.currentText = message.text
-
-                let keyIndex = 0
-                while(keyIndex < keys.length) {
-                  const varName = `{{${keys[keyIndex]}}}`
-                  if(message.text.indexOf(varName) != -1) {
-                    /**Gerando os obejetos de parametros da notifica??o para o component */
-                    if(component.type === "header") {
-                      this.selectedTemplate['parameters'][component.type] = {}
-                      //Header s? pode ter uma vari?vel
-                      this.selectedTemplate['parameters'][component.type] = {
-                        tipo: "text",
-                        text: values[keyIndex]
+            if(arrComponents && arrComponents.length) {
+              arrComponents.map(component => {
+                if(component && component.parameters && component.parameters.length) {
+                  component.parameters.map(message => {
+                    message.currentText = message.text
+                    let keyIndex = 0
+                    while(keyIndex < keys.length) {
+                      const varName = `{{${keys[keyIndex]}}}`
+                      if(message.text.indexOf(varName) != -1) {
+                        /**Gerando os obejetos de parametros da notificacao para o component */
+                        if(component.type === "header" && !this.selectedTemplate['parameters'][component.type]) {
+                          this.selectedTemplate['parameters'][component.type] = {}
+                          //Header so pode ter uma vari?vel
+                          this.selectedTemplate['parameters'][component.type] = {
+                            tipo: "text",
+                            text: values[keyIndex]
+                          }
+                        } else if(!this.selectedTemplate['parameters'][component.type]) {
+                          this.selectedTemplate['parameters'][component.type] = new Array()
+                        }
+                        //Aplicando valores das v?riaveis dentro dos outros componentes com execess?o do header
+                        if(this.selectedTemplate['parameters'][component.type] && component.type !== 'header') {
+                          this.selectedTemplate['parameters'][component.type].push(values[keyIndex])
+                        }
+                        message.currentText = message.currentText.replace(varName, values[keyIndex])
                       }
-                    } else if(!this.selectedTemplate['parameters'][component.type]) {
-                      this.selectedTemplate['parameters'][component.type] = new Array()
-                    }
-                    //Aplicando valores das v?riaveis dentro dos outros componentes com execess?o do header
-                    if(this.selectedTemplate['parameters'][component.type] && component.type !== 'header') {
-                      this.selectedTemplate['parameters'][component.type].push(values[keyIndex])
+                      keyIndex++
                     }
-                    message.currentText = message.currentText.replace(varName, values[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]
                   }
-                  keyIndex++
                 }
               })
-            })
+            }
           }
         }
-
         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)
       }
@@ -230,6 +280,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;
@@ -251,8 +362,14 @@ 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;
+  color: white;
+}
+
+.vs__dropdown-menu li {
+  padding: 10px 15px;
 }
 
 .vs__dropdown-option {
@@ -275,6 +392,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   width: 100%;
   display: flex;
   justify-content: space-between;
+  gap: 10px;
 }
 
 .ts-content {
@@ -284,10 +402,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;
+  font-size: 11.2px;
   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;
@@ -298,8 +428,8 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   border-left: 1px solid var(--border-color);
 }
 .ts-content header {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 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 }
@@ -307,20 +437,20 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   line-height: 25px;
 }
 .ts-content section.margin-bottom {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 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: 5px;
-  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
 }
 .ts-content input {
   border: 1px solid transparent;
   outline: 0;
-  font-size: .8rem;
+  font-size: 12.8px;
   padding: 2.5px 5px;
   background-color: var(--input-background-color); 
 }
@@ -359,7 +489,8 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   opacity: .9;
   cursor: pointer;
   font-weight: 550;
-  padding: 2px 5px;
+  padding: 2px 3px;
+  font-size: 12.8px;
   transition: background-color 150ms;
 }
 .ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {
@@ -372,13 +503,12 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   opacity: 1; 
 }
 .tg-btn {
-  width: 40%;
+  width: auto;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .tg-btn button {
-  outline: unset;
   border: unset;
   display: block;
   min-width: 180px;
@@ -387,12 +517,16 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   font-weight: 500;
   background-color: #007bff;
   color: #FFF;
-  transition-duration: 300ms;
+  transition: transform 300ms ease-in-out;
   user-select: none;
   cursor: pointer;
   box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
   opacity: 0.9;
-  border-radius: 25px;
+  border-radius: 2.5px;
+}
+.tg-btn button > svg{
+  margin-right: 5px;
+  color: #003166
 }
 .tg-btn button:hover {
   opacity: 1; 
@@ -416,11 +550,14 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   transform: translateY(1px); 
 }
 .tg-btn button:focus, .tg-btn button:active {
-  outline: unset; 
+  outline: 2px solid black; 
 }
 .tg-btn.small-btn {
   width: auto;
-  margin-left: 5px;
+  margin: 0 5px;
+}
+.tg-btn.small-btn svg {
+  margin-right: 0;
 }
 .tg-btn.small-btn button {
   min-width: 35px;

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"
@@ -11,6 +11,7 @@
           :placeholderMessage="'Escreva sua mensagem'"
           :ignoreHideTextarea="true"
           :dictionary="dictionary"
+          ref="text-footer-template-message"
         ></TextFooter>
         <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
           <button @click="sendMessage">
@@ -47,7 +48,17 @@ export default {
         required: true
     }
   },
+  mounted() {
+    this.initFocus()
+  },
   methods: {
+    initFocus() {
+      this.$nextTick(() => {
+        if(this.$refs["text-footer-template-message"] && this.$refs["text-footer-template-message"].$el) {
+          this.$refs["text-footer-template-message"].$el.querySelector("textarea").focus()
+        }
+      })
+    },
     sendMessage() {
       this.$emit('click-trigger')
     },