vue-intergrall-plugins 1.0.0 → 1.0.2

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

@@ -1,265 +1,291 @@
 <template>
   <div class="tg-container" v-if="templates && identifier">
-    <div class="tg-options" :class="{'column' : columnSelect}">
-      <h4> Template: </h4>
+    <div class="tg-options" :class="{ column: columnSelect }">
+      <h4>Template:</h4>
       <v-select
         class="tg-select"
         appendToBody
         :calculatePosition="calculateSelectPosition"
         :options="templateOptions"
         :value="codTemplate"
-        :reduce="template => template.cod"
+        :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 
+        <TemplateSingle
           :key="codTemplate"
-          :template="selectedTemplate" 
-          @set-vars="setFinalMessage" 
+          :template="selectedTemplate"
+          @set-vars="setFinalMessage"
           @set-file-var="setFileVar"
-          :hasButton="hasButton" 
-          :iconButton="iconButton" 
-          @click-trigger="$emit('click-trigger')" 
-          :identifier="identifier" 
+          :hasButton="hasButton"
+          :iconButton="iconButton"
+          @click-trigger="$emit('click-trigger')"
+          :identifier="identifier"
           :allVariables="allVariables"
-          :dictionary="dictionary" 
+          :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" />
+        <TemplateMessage
+          @final-message="setMessage"
+          :hasButton="hasButton"
+          :iconButton="iconButton"
+          @click-trigger="$emit('click-trigger', true)"
+          :dictionary="dictionary"
+        />
       </div>
-    </template> 
-  </div> 
+    </template>
+  </div>
 </template>
 
 <script>
-  import { createPopper } from "@popperjs/core"
-  import TemplateSingle from "./TemplateSingle"
-  import TemplateMessage from "./TemplateMessage"
+import { createPopper } from "@popperjs/core";
+import TemplateSingle from "./TemplateSingle";
+import TemplateMessage from "./TemplateMessage";
 
-  export default {
-    components: { TemplateSingle, TemplateMessage },
-     props: {
-      templates: {
-        type: Object,
-        required: true
-      },
-      hasSecondaryButton: {
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      hasButton: {
-        type: Boolean,
-        required: false,
-        default: true
-      },
-      columnSelect: {
-        type: Boolean,
-        required: false
-      },
-      resizeParentOnSelect: {
-        type: Boolean,
-        required: false
-      },
-      allVariables: {
-        type: Boolean,
-        required: false,
-        default: true
-      },
-      iconButton: {
-        type: Boolean,
-        required: false
-      },
-      identifier: {
-        type: String,
-        required: true
-      },
-      placement: {
-        type: String,
-        default: "bottom"
-      },
-      dictionary: {
-        type: Object,
-        required: true
-      },
-      selectInitial: {
-        type: Boolean,
-        required: false,
-        default: true
-      }
+export default {
+  components: { TemplateSingle, TemplateMessage },
+  props: {
+    templates: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        templateOptions: [],
-        codTemplate: {},
-        selectedTemplate: null,
-        hasFile: false
-      }
+    hasSecondaryButton: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    mounted() {
-      this.setTemplateOptions()
-      if(this.selectInitial) this.selectIfIsUnique()
-      this.selectIfHasContact24h()
+    hasButton: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      concatTemplateMessage(template) {
-        let fullText = "";
-        for (let key in template) {
-          if (key === "components" && Array.isArray(template[key])) {
-            template[key].map((component) => {
-              if(component && component.parameters && component.parameters.length) {
-                component.parameters.map((param) => {
-                  fullText += param.text;
-                });
-              }
-            });
-          }
+    columnSelect: {
+      type: Boolean,
+      required: false,
+    },
+    resizeParentOnSelect: {
+      type: Boolean,
+      required: false,
+    },
+    allVariables: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    iconButton: {
+      type: Boolean,
+      required: false,
+    },
+    identifier: {
+      type: String,
+      required: true,
+    },
+    placement: {
+      type: String,
+      default: "bottom",
+    },
+    dictionary: {
+      type: Object,
+      required: true,
+    },
+    selectInitial: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      templateOptions: [],
+      codTemplate: {},
+      selectedTemplate: null,
+      hasFile: false,
+    };
+  },
+  mounted() {
+    this.setTemplateOptions();
+    if (this.selectInitial) this.selectIfIsUnique();
+    this.selectIfHasContact24h();
+  },
+  methods: {
+    concatTemplateMessage(template) {
+      let fullText = "";
+      for (let key in template) {
+        if (key === "components" && Array.isArray(template[key])) {
+          template[key].map((component) => {
+            if (component && component.parameters && component.parameters.length) {
+              component.parameters.map((param) => {
+                fullText += param.text;
+              });
+            }
+          });
         }
+      }
 
-        fullText = fullText.replace(/{{var_\d}}/g, " ------- ")
-        fullText = fullText.replace(`&nbsp;`, " ")
-        fullText = fullText.replace(/<\/?[\d\w\s=\-:./'";]+>/gi, " ")
+      fullText = fullText.replace(/{{var_\d}}/g, " ------- ");
+      fullText = fullText.replace(`&nbsp;`, " ");
+      fullText = fullText.replace(/<\/?[\d\w\s=\-:./'";]+>/gi, " ");
 
-        return fullText;
-      },
-      calculateSelectPosition(dropdownList, component, sizes) {
-        dropdownList.style.width = sizes.width
-        const popper = createPopper(component.$refs.toggle, dropdownList, {
-          placement: this.placement,
-          modifiers: [
-            {
-              name: 'toggleClass',
-              enabled: true,
-              phase: 'write',
-              fn({state}) { component.$el.classList.toggle('drop-up', state.placement === 'top') }
-            }
-          ]
-        })
-        return () => popper.destroy()
-      },
-      setTemplateOptions() {
-        for(let key in this.templates) {
-          if(this.templates[key]) this.templateOptions.push({ cod: key, label: `${this.concatTemplateMessage(this.templates[key])} (${this.templates[key].title})` })
-        }
-      },
-      setTemplate(key) {
-        if(key) {
-          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) {
-            this.codTemplate = this.templateOptions[0]
-            this.selectedTemplate = this.templates[key]
-            this.$emit('selected-template', this.codTemplate)
-            this.adjustOnSelect()
-          }
-        }
-        if(!this.codTemplate) this.focusSelect()
-      },
-      selectIfHasContact24h() {
-        if(this.templates['envio_msg']) {
-          this.codTemplate = 'envio_msg';
-          this.selectedTemplate = this.templates['envio_msg'];
-          this.$emit('selected-template', 'envio_msg');
-          this.adjustOnSelect()
+      return fullText;
+    },
+    calculateSelectPosition(dropdownList, component, sizes) {
+      dropdownList.style.width = sizes.width;
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: this.placement,
+        modifiers: [
+          {
+            name: "toggleClass",
+            enabled: true,
+            phase: "write",
+            fn({ state }) {
+              component.$el.classList.toggle("drop-up", state.placement === "top");
+            },
+          },
+        ],
+      });
+      return () => popper.destroy();
+    },
+    setTemplateOptions() {
+      for (let key in this.templates) {
+        if (this.templates[key])
+          this.templateOptions.push({
+            cod: key,
+            label: `${this.concatTemplateMessage(this.templates[key])} (${
+              this.templates[key].title
+            })`,
+          });
+      }
+    },
+    setTemplate(key) {
+      if (key) {
+        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) {
+          this.codTemplate = this.templateOptions[0];
+          this.selectedTemplate = this.templates[key];
+          this.$emit("selected-template", this.codTemplate);
+          this.adjustOnSelect();
         }
-      },
-      adjustOnSelect() {
-        if(this.resizeParentOnSelect) this.$emit("resize-parent")
-      },
-      setFinalMessage(vars) {
-        const keys   = Object.keys(vars),
-              values = Object.values(vars)
-        this.selectedTemplate['parameters'] = {}
-        for(let index in this.selectedTemplate) {
-          if(index === "components" && Array.isArray(this.selectedTemplate[index])) {
-            const arrComponents = this.selectedTemplate[index]
-            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])
+      }
+      if (!this.codTemplate) this.focusSelect();
+    },
+    selectIfHasContact24h() {
+      if (this.templates["envio_msg"]) {
+        this.codTemplate = "envio_msg";
+        this.selectedTemplate = this.templates["envio_msg"];
+        this.$emit("selected-template", "envio_msg");
+        this.adjustOnSelect();
+      }
+    },
+    adjustOnSelect() {
+      if (this.resizeParentOnSelect) this.$emit("resize-parent");
+    },
+    setFinalMessage(vars) {
+      const keys = Object.keys(vars),
+        values = Object.values(vars);
+      this.selectedTemplate["parameters"] = {};
+      for (let index in this.selectedTemplate) {
+        if (index === "components" && Array.isArray(this.selectedTemplate[index])) {
+          const arrComponents = this.selectedTemplate[index];
+          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();
                       }
-                      keyIndex++
+                      //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(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++;
                   }
+                });
+              } 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)
       }
-    }
-  }
+      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);
+    },
+  },
+};
 </script>
 
-<style>
-* { box-sizing: border-box; }
-.toasted svg { margin-right: 10px }
-.d-none { display: none }
-ul { list-style-type: none }
-h1, h2, h3, h4, p { margin: 0; padding: 0 }
-
+<style scoped>
 .tg-container {
   width: 100%;
   max-width: 800px;
@@ -299,19 +325,19 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 }
 
 .color-red {
-  color: #E74C3C;
+  color: #e74c3c;
 }
 
 .color-blue {
-  color: #007BFF;
+  color: #007bff;
 }
 
 .color-black {
-  color: #333
+  color: #333;
 }
 
 .color-purple {
-  color: #a312a3
+  color: #a312a3;
 }
 
 .custom-tooltip-image {
@@ -328,7 +354,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 }
 
 .ts-button {
-  background-color: #FFF;
+  background-color: #fff;
   border-radius: 10px;
   display: flex;
   justify-content: center;
@@ -347,7 +373,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   overflow: hidden;
 }
 .tg-select .vs__dropdown-toggle {
-  background-color: #FFF;
+  background-color: #fff;
   height: 34px;
   overflow: hidden;
   display: flex;
@@ -364,7 +390,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 }
 
 .vs__dropdown-option.vs__dropdown-option--selected {
-  background-color: rgb(26, 95, 173)!important;
+  background-color: rgb(26, 95, 173) !important;
   color: white;
 }
 
@@ -377,11 +403,16 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   white-space: normal;
 }
 .vs__dropdown-option:nth-child(odd) {
-  background-color: #F1F1F1;
+  background-color: #f1f1f1;
 }
-.vs__dropdown-option:hover, .vs__dropdown-option:focus, .vs__dropdown-option:active, .vs__dropdown-option:focus, .vs__dropdown-option--selected, .vs__dropdown-option--highlight {
-  background-color: #5897fb!important;
-  color: #FFF;
+.vs__dropdown-option:hover,
+.vs__dropdown-option:focus,
+.vs__dropdown-option:active,
+.vs__dropdown-option:focus,
+.vs__dropdown-option--selected,
+.vs__dropdown-option--highlight {
+  background-color: #5897fb !important;
+  color: #fff;
 }
 
 .tg-component {
@@ -396,12 +427,12 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 }
 
 .ts-content {
-  --border-color: #CCC;
-  --background-color: #DFF0D8;
-  --input-background-color: #FFF;
-  --input-border-default: #007BFF;
-  --input-border-error: #E74C3C;
-  --placeholder-color: #BBB;
+  --border-color: #ccc;
+  --background-color: #dff0d8;
+  --input-background-color: #fff;
+  --input-border-default: #007bff;
+  --input-border-error: #e74c3c;
+  --placeholder-color: #bbb;
   --border-radius: 5px;
 
   flex: 2;
@@ -411,19 +442,22 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   flex-direction: column;
 }
 .order-1 {
-  order: 1
+  order: 1;
 }
 .custom-box-shadow-bottom {
-  box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, .3);
+  box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.3);
 }
 .custom-border-gray {
-  border: 1px solid var(--border-color)!important;
+  border: 1px solid var(--border-color) !important;
 }
-.ts-content header, .ts-content section, .ts-content footer {
+.ts-content header,
+.ts-content section,
+.ts-content footer {
   padding: 3px 5px;
   background-color: var(--background-color);
 }
-.ts-content header, .ts-content section {
+.ts-content header,
+.ts-content section {
   border-right: 1px solid var(--border-color);
   border-left: 1px solid var(--border-color);
 }
@@ -432,7 +466,9 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   border-top-right-radius: var(--border-radius);
   border-top: 1px solid var(--border-color);
 }
-.ts-content header { font-weight: 550 }
+.ts-content header {
+  font-weight: 550;
+}
 .ts-content section {
   line-height: 25px;
 }
@@ -441,7 +477,8 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   border-bottom-right-radius: var(--border-radius);
   border-bottom: 1px solid var(--border-color);
 }
-.ts-content footer, .custom-footer-style {
+.ts-content footer,
+.custom-footer-style {
   border: 1px solid var(--border-color);
   border-top: unset;
   border-bottom-left-radius: var(--border-radius);
@@ -452,16 +489,17 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   outline: 0;
   font-size: 12.8px;
   padding: 2.5px 5px;
-  background-color: var(--input-background-color); 
+  background-color: var(--input-background-color);
 }
 .ts-content input::placeholder {
-  color: var(--placeholder-color); 
+  color: var(--placeholder-color);
 }
-.ts-content input.active, .ts-content input:focus{
-  border: 1px solid var(--input-border-default); 
+.ts-content input.active,
+.ts-content input:focus {
+  border: 1px solid var(--input-border-default);
 }
 .ts-content input.invalid {
-  border: 1px solid var(--input-border-error)!important; 
+  border: 1px solid var(--input-border-error) !important;
 }
 .ts-content__var {
   display: inline-block;
@@ -486,21 +524,23 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
 }
 .ts-dropdown li {
   width: 100%;
-  opacity: .9;
+  opacity: 0.9;
   cursor: pointer;
   font-weight: 550;
   padding: 2px 3px;
   font-size: 12.8px;
   transition: background-color 150ms;
 }
-.ts-dropdown li:hover, .ts-dropdown li:focus-within, .ts-dropdown li:focus {
+.ts-dropdown li:hover,
+.ts-dropdown li:focus-within,
+.ts-dropdown li:focus {
   opacity: 1;
   background-color: #555;
-  color: #FFF;
+  color: #fff;
 }
 .ts-dropdown.visible {
   visibility: visible;
-  opacity: 1; 
+  opacity: 1;
 }
 .tg-btn {
   width: auto;
@@ -516,7 +556,7 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   padding: 0 10px;
   font-weight: 500;
   background-color: #007bff;
-  color: #FFF;
+  color: #fff;
   transition: transform 300ms ease-in-out;
   user-select: none;
   cursor: pointer;
@@ -524,12 +564,12 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   opacity: 0.9;
   border-radius: 2.5px;
 }
-.tg-btn button > svg{
+.tg-btn button > svg {
   margin-right: 5px;
-  color: #003166
+  color: #003166;
 }
 .tg-btn button:hover {
-  opacity: 1; 
+  opacity: 1;
 }
 .tg-btn button:active {
   opacity: 1;
@@ -547,10 +587,11 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   -moz-transform: translateY(1px);
   -o-transform: translateY(1px);
   -ms-transform: translateY(1px);
-  transform: translateY(1px); 
+  transform: translateY(1px);
 }
-.tg-btn button:focus, .tg-btn button:active {
-  outline: 2px solid black; 
+.tg-btn button:focus,
+.tg-btn button:active {
+  outline: 2px solid black;
 }
 .tg-btn.small-btn {
   width: auto;
@@ -573,5 +614,4 @@ h1, h2, h3, h4, p { margin: 0; padding: 0 }
   border-radius: 5px;
   display: flex;
 }
-
-</style>
+</style>