vue-intergrall-plugins 0.0.174 → 0.0.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.174",
+  "version": "0.0.177",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",

package/src/lib-components/Messages/ChatMessages.vue

@@ -25,11 +25,16 @@
         </ul>
       </div>
       <!-- <LinkPrevue v-if="linkPreview && link" :url="linkPreview" /> -->
-      <p v-html="formatMsg(message)"></p>
+      <p v-html="validateInterativity() ? '' : formatMsg(message)"></p>
       <InteratividadeBotoes 
         v-if="interatividade"
         :interatividade="interatividade"
       />
+      <InteratividadeFormulario 
+        v-if="interatividade"
+        :interatividade="interatividade"
+        :dictionary="dictionary"
+      />
       <span class="horario-envio" v-text="horario"></span>
       <transition name="fade" mode="out-in">
         <span :class="reply" v-if="hasReply && (status == 'C' || status == 'T')" v-tippy :content="msgReply ? msgReply : 'Fazer reenvio da mensagem'" @click="$emit('replyMsg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
@@ -64,12 +69,13 @@
 <script>
 import AnexoMensagem from "./AnexoMensagem"
 import InteratividadeBotoes from "./InteratividadeBotoes"
+import InteratividadeFormulario from "./InteratividadeFormulario"
 import { formataTimezoneData } from "../../services/textFormatting"
 import LinkPrevue from "link-prevue"
 import { getLinkPreview } from "link-preview-js";
 
 export default {
-  components: { AnexoMensagem, InteratividadeBotoes, LinkPrevue },
+  components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPrevue },
   props: ["smartchannel", "messageIndex", "dictionary", "autor", "origem", "msg", "link", "anexo", "imgAnexo", "tipoDoc", "docAnexo", "nomeArquivo", "audio", "video", "horario", "status", "logo", "msgTooltip", "seq", "mapa", "histMsg", "erro", "msgErro", "origemExterna", "anexos", "dominio", "corMsg", "interatividade", "msgReply", "hasReply", "iniDialogo", "dialogoId", "dialogoOrigem", "expSessao"],
   data(){
     return{
@@ -147,6 +153,15 @@ export default {
     this.validadeUrlToMsg()
   },
   methods: {
+    validateInterativity(){
+      try {
+        if(this.interatividade.formulario){
+          return true;
+        }
+      } catch (error) {
+        return false;
+      }
+    },
     validadeUrlToMsg(){
       this.message = this.msg
       if(this.validadeIfExistsSticker()){

package/src/lib-components/Messages/InteratividadeFormulario.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="interatividade">
+    <template v-if="informacao.length">
+      <div class="interatividade-form-header">
+        {{dictionary.msg_abertura_reclamacao}}
+      </div>
+      <div class="interatividade-form-body">
+        <div v-for="(form) in informacao" :key="form.TIPO_TEXTO" class="interatividade-info-form">
+          <p v-if="form.TIPO_TEXTO < 1000" v-text="form.DESC_TIPO_TEXTO" class="interatividade-titulo-form"></p>
+          <p v-if="form.TIPO_TEXTO < 1000" v-text="form.TEXTO" class="interatividade-description-form"></p>
+        </div>
+        <div v-if="informacaoAdicional.length" class="interatividade-form-header">
+          {{dictionary.msg_info_adicional}}
+        </div>
+        <div class="interatividade-form-body">
+          <div v-for="(form) in informacaoAdicional" :key="form.TIPO_TEXTO" class="interatividade-add-info-form">
+            <div class="divisor-form-info-aditional">
+              <div class="info-aditional">
+                <p v-if="form.TIPO_TEXTO > 999" v-text="form.DESC_TIPO_TEXTO+': '" class="interatividade-titulo-form"></p>
+              </div>
+              <div class="info-aditional">
+                <p v-if="form.TIPO_TEXTO > 999" v-text="form.TEXTO" class="interatividade-description-form"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import InteratividadePopup from './InteratividadePopup'
+
+export default {
+  components: {InteratividadePopup},
+  data() {
+    return {
+      informacaoAdicional: [],
+      informacao: []
+    }
+  },
+  props: {
+    interatividade: {
+      type: Object,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted(){
+    if(this.validateInterativity()){
+      this.verifyInfoAditional();
+    }
+  },
+  methods: {
+    validateInterativity(){
+      try {
+        if(this.interatividade.formulario){
+          return true;
+        }
+      } catch (error) {
+        return false;
+      }
+    },
+    verifyInfoAditional() {
+      try {
+        let { formulario } = this.informacao
+        formulario = formulario ? formulario : [];
+        if(!formulario.length){
+          return;
+        }
+        let foundInfosAdd = formulario.filter(f => f.TIPO_TEXTO > 999);
+        let foundInfos = formulario.filter(f => f.TIPO_TEXTO < 1000);
+        if(foundInfos){
+          this.informacao = foundInfos;
+        }
+        if(foundInfosAdd){
+          this.informacaoAdicional = foundInfosAdd;
+        }
+      } catch (e) {
+          console.error("Erro ao pegar o objeto interatividade formulario")
+          console.error(e)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .show-x-enter-active,
+  .show-x-leave-enter {
+    opacity: 1;
+    transform: translateX(0);
+    transition: all 200ms linear;
+  }
+  .show-x-enter,
+  .show-x-leave-to {
+    opacity: 0;
+    transform: translateX(5%);
+  }
+  .divisor-form-info-aditional {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .info-aditional {
+    border-bottom: 1px solid #ccc;
+    width: 49%;
+  }
+  .interatividade-form-header {
+    background-color: #efefef;
+    margin-top: 5px;
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    justify-content: space-between;
+    display: flex;
+    color: #333;
+    font-weight: 700;
+    font-size: .9rem;
+  }
+  .interatividade-form-body{
+    padding: 0px 10px;
+    border-right: 1px solid rgb(239, 239, 239);
+    border-left: 1px solid rgb(239, 239, 239);
+  }
+  .interatividade {
+    margin: 10px 0;
+  }
+  .interatividade-titulo-form {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    padding-top: 5px;
+  }
+  .interatividade-description-form {
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .interatividade-lista {
+    width: 100%;
+    min-width: 200px;
+    border-radius: 15px;
+    background-color: #FFF;
+    color: #333;
+    margin: 10px 0;
+  }
+  .interatividade-lista-conteudo {
+    padding: 10px;
+    border-bottom: 1px solid #D7D7D7;
+  }
+  .interatividade-lista-titulo {
+    font-weight: bold;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+  }
+  .interatividade-lista-rodape {
+    color: #818181;
+    margin-top: 5px;
+  }
+  .interatividade-lista-link {
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+    color: rgb(0, 110, 255);
+    cursor: pointer;
+    transition: color 200ms ease-in-out;
+  }
+  .interatividade-lista-link:hover {
+    color: rgb(0, 98, 143);
+  }
+  
+</style>