vue-intergrall-plugins 0.0.138 → 0.0.142

package/src/lib-components/Cards/CardFile.vue

@@ -0,0 +1,213 @@
+<template>
+  <span class="file-item">
+    <transition-group name="fade" mode="out-in" class="file-item-transition">
+      <div v-if="loading" :small="true" key="card-file-loader" class="req-loader slow"></div>
+      <template v-else>
+        <span v-if="imageUrl" class="file-img box-shadow" @click="openFile(imageUrl, true)" key="card-file-img" :title="fileName">
+          <img :src="`${imageUrl}`" :alt="fileName" />
+        </span>
+        <span 
+          v-else
+          class="file-icon"
+          key="card-file-doc" 
+          :class="[currentClass]"
+          @click="openFile(docUrl, false)"
+          :title="fileName"
+          target="_blank" 
+          rel="noreferrer noopener"
+        >
+          <fa-icon :icon="icon" />
+        </span>
+        <a :href="imageUrl ? imageUrl : docUrl" :download="`${fileName}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${fileName}`">
+          <fa-icon :icon="['fas', 'download']" />
+        </a>
+      </template>
+    </transition-group>
+  </span>
+</template>
+
+<style scoped>
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+import { gerarVariaveisAnexo } from "../../services/formatMessage"
+
+export default {
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    domain: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    currentClass() {
+      return this.fileExt === "pdf" ? "pdf" : "doc"
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      isAnexo: false,
+      imageUrl: "",
+      fileExt: "", 
+      docUrl: "",
+      fileName: "",
+      audio: false,
+      video:  false,
+      icon: []
+    }
+  },
+  mounted() {
+    this.setFileVars()
+  },
+  methods: {
+    setFileVars() {
+      try {
+        const {
+          anexo,
+          imgAnexo,
+          tipoDoc,
+          docAnexo,
+          nomeArquivo,
+          audio,
+          video
+        } = gerarVariaveisAnexo(this.file, { dominio: this.domain });
+    
+        this.isAnexo = anexo;
+        this.imageUrl = imgAnexo;
+        this.fileExt = tipoDoc;
+        this.docUrl = docAnexo;
+        this.fileName = nomeArquivo;
+        this.audio = audio;
+        this.video = video;
+
+        this.generateIcon();
+
+        this.loading = false;
+      }catch(e) {
+        console.error("Erro ao gerar as variaveis dos anexos")
+        console.error(e)
+      }
+    },
+    generateIcon() {
+      this.icon = this.fileExt === "pdf" ? ['fas', 'file-pdf'] : ['fas', 'file-alt']
+    },
+    openFile(link, isImg) {
+      const width = window.innerWidth
+      const height = window.innerHeight
+      const options = !isImg ? `width=${width},height=${height}` : "width=auto,height=auto"
+      window.open(link, "card-file", options)
+    }
+  }
+}
+</script>
+
+<style>
+.file-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.file-item-transition {
+  max-width: 100%;
+  max-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.file-item .req-loader {
+  position: absolute;
+  top: calc(50% - 12.5px);
+  right: calc(50% - 12.5px);
+}
+.file-item-transition img {
+  max-width: 45px;
+  max-height: 45px;
+}
+.file-item a {
+  margin-left: 5px;
+  text-decoration: none;
+  color: #333;
+}
+
+.file-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  cursor: pointer;
+}
+.file-icon:hover {
+  opacity: 1
+}
+.file-icon:visited {
+  color: inherit;
+}
+svg {
+  font-size: 30px;
+  z-index: 1;
+}
+.file-icon.pdf {
+  position: relative;
+}
+.file-icon.pdf svg {
+  color: rgb(231, 76, 60);
+}
+.file-icon.pdf::after {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  transform: translateY(2px);
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-icon.doc {
+  color: #15517F; 
+}
+.file-icon.doc::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #FFF;
+}
+.file-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, .2);
+  border-radius: 2.5px;
+  cursor: pointer;
+  opacity: .9;
+  transition: opacity 150ms;
+}
+
+.file-img:hover {
+  opacity: 1;
+}
+.file-img img {
+  width: 95%;
+}
+</style>

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

@@ -30,7 +30,10 @@
       />
       <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> 
+        <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> 
+      </transition>
+      <transition name="fade" mode="out-in">
+        <span class="star dourado" v-if="iniDialogo == 1" :content="contentTooltipStar" v-tippy key="star-padrao"> <fa-icon :icon="['fas', 'star']" /> </span>
       </transition>
       <transition name="fade" mode="out-in">
         <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
@@ -50,14 +53,16 @@
 <script>
 import AnexoMensagem from "./AnexoMensagem"
 import InteratividadeBotoes from "./InteratividadeBotoes"
+import { formataTimezoneData } from "../../services/textFormatting"
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes },
-  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"],
+  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{
       strTooltipAux: "",
       linkAux: "",
+      reply: "reply",
       center: {},
       marker: {},
       infos: [],
@@ -97,13 +102,30 @@ export default {
       set(msg){
         return this.contentTooltip = msg
       }
+    },
+    contentTooltipStar() {
+      let tooltipStar = "";
+      if(this.iniDialogo == 1){
+        tooltipStar += this.dictionary['ini_sessao']+"<br/>"
+        tooltipStar += this.dictionary['id_conversa']+" - "+this.dialogoId+"<br/>"
+        tooltipStar += this.dictionary['origem_conversa']+" - "+this.dialogoOrigem+"<br/>"
+        tooltipStar += this.dictionary['expiracao_sessao']+" - "+formataTimezoneData(this.expSessao)+"<br/>"
+        return tooltipStar
+      }
+      return tooltipStar
     }
   },
   mounted() {
     if(this.mapa) this.setMap()
     if(this.corMsg) this.setCorMsg()
+    this.setClasses()
   },
   methods: {
+    setClasses(){
+      if(this.hasReply && (this.status == "C" || this.status == "T") && this.iniDialogo == 0){
+        this.reply = "reply reply-with-2-icons"
+      }
+    },
     setCorMsg() {
       try {
         const root = document.documentElement
@@ -201,7 +223,7 @@ export default {
   .reply {
     cursor: pointer;
     position: absolute;
-    right: 30px;
+    right: 53px;
     bottom: 5px;
     font-size: .6rem;
     color: #67a332;
@@ -217,6 +239,9 @@ export default {
     margin-top: -1px;
     margin-right: -1px;
   }
+  .reply-with-2-icons{
+    right: 30px;
+  }
 
   .check{
     cursor: pointer;
@@ -240,7 +265,16 @@ export default {
   .check.preto, .check.preto svg{
     color: #666
   }
-
+  .star{
+    cursor: pointer;
+    position: absolute;
+    right: 30px;
+    bottom: 3px;
+    font-size: 0.7rem;
+  }
+  .star.dourado svg{
+    color: gold
+  }
   .horario-envio {
     margin-right: 15px;
     font-size: 0.7rem;