vue-intergrall-plugins 0.0.275 → 0.0.281

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

@@ -19,24 +19,23 @@
         <p v-text="filename" :title="filename"></p>
       </span>
       <!-- Acoes -->
-      <div class="file-actions">
+      <div v-if="showControlFiles" class="file-actions">
         <span v-if="imageURL" class="file-action-button" @click="showImage(imageURL)">
           <fa-icon :icon="['fas', 'search-plus']" v-tippy :content="`${dictionary.titulo_visualizar_img}`" />
         </span>
-        <span v-if="docURL" @click="openWindowFromURL(docURL)" v-tippy :content="`Visualizar anexo`" class="file-action-button">
+        <span v-if="docURL" @click="openWindowFromURL(docURL)" v-tippy :content="`Visualizar anexo`"
+          class="file-action-button">
           <fa-icon :icon="['fas', 'search-plus']" />
         </span>
-        <a v-if="imageURL || docURL" :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" v-tippy :content="`Fazer o download do anexo`" class="file-action-button">
+        <a v-if="imageURL || docURL" :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank"
+          rel="noreferrer noopener" v-tippy :content="`Fazer o download do anexo`" class="file-action-button">
           <fa-icon :icon="['fas', 'download']" />
         </a>
         <template v-if="imageURL || docURL">
-          <tippy
-            interactive
-            theme="light"
-            trigger="click"
-          >
+          <tippy interactive theme="light" trigger="click">
             <template v-slot:trigger>
-              <span class="file-action-button" ref="download-multiple-trigger" v-tippy :content="`Fazer o download de todos anexos da conversa`">
+              <span class="file-action-button" ref="download-multiple-trigger" v-tippy
+                :content="`Fazer o download de todos anexos da conversa`">
                 <fa-icon :icon="['fas', 'download']" />
                 <fa-icon :icon="['fas', 'download']" />
                 <fa-icon :icon="['fas', 'download']" />
@@ -57,36 +56,41 @@
 </template>
 
 <style>
-  .tippy-tooltip.light-theme .tippy-backdrop {
-    background-color: #FFF;
-  }
-  .tippy-tooltip.light-theme  {
+.tippy-tooltip.light-theme .tippy-backdrop {
+  background-color: #FFF;
+}
+
+.tippy-tooltip.light-theme {
   /* .tippy-box[data-theme~='light'] { */
-    background-color: #FFF;
-    border: 1px solid #CCC;
-    color: #333;
-    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
-  .tippy-confirmation p {
-    margin-bottom: 3px;
-  }
-  .tippy-confirmation button {
-    border: unset;
-    background-color: #F1F1F1;
-    border-radius: 3px;
-    padding: 5px 8px;
-    cursor: pointer;
-    font-size: .75rem;
-  }
-  .tippy-confirmation button.cancel {
-    border-bottom: 2px solid red;
-    margin-right: 15px;
-  }
-  .tippy-confirmation button.confirm {
-    border-bottom: 2px solid green;
-  }
+  background-color: #FFF;
+  border: 1px solid #CCC;
+  color: #333;
+  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+.tippy-confirmation p {
+  margin-bottom: 3px;
+}
+
+.tippy-confirmation button {
+  border: unset;
+  background-color: #F1F1F1;
+  border-radius: 3px;
+  padding: 5px 8px;
+  cursor: pointer;
+  font-size: .75rem;
+}
+
+.tippy-confirmation button.cancel {
+  border-bottom: 2px solid red;
+  margin-right: 15px;
+}
+
+.tippy-confirmation button.confirm {
+  border-bottom: 2px solid green;
+}
 </style>
 
 <script>
@@ -116,7 +120,8 @@ export default {
     referenceSelector: {
       type: String,
       required: true
-    }
+    },
+    showControlFiles: { type: Boolean }
   },
   data() {
     return {
@@ -125,28 +130,28 @@ export default {
     }
   },
   mounted() {
-    if(this.validarAnexo()){
+    if (this.validarAnexo()) {
       this.setFileVars(this.anexo, { dominio: this.dominio })
     }
   },
   methods: {
-    validarAnexo(){
+    validarAnexo() {
       let status = true
       //caso for audio ou documento ignorar
-      if(this.anexo.docURL || this.anexo.audio) return true
-      if(!this.anexo.name){
+      if (this.anexo.docURL || this.anexo.audio) return true
+      if (!this.anexo.name) {
         this.imgMsgErro = this.dictionary.img_com_erro_nome
         status = false
       }
-      if(!this.anexo.nomeGravacao){
+      if (!this.anexo.nomeGravacao) {
         this.imgMsgErro = this.dictionary.img_com_erro_nome_gravacao
         status = false
       }
-      if(!this.anexo.type){
+      if (!this.anexo.type) {
         this.imgMsgErro = this.dictionary.img_com_erro_tipo
         status = false
       }
-      if(status == false){
+      if (status == false) {
         this.imgErro = true
         this.isLoading = false
       }
@@ -160,207 +165,221 @@ export default {
 </script>
 
 <style scoped>
-  .mensagem__principal .default-doc {
-    background-color: var(--files-bg);
-  }
+.mensagem__principal .default-doc {
+  background-color: var(--files-bg);
+}
 
-  .mensagem__principal .default-doc:hover {
-    background-color: var(--files-bg-hover);
-  }
+.mensagem__principal .default-doc:hover {
+  background-color: var(--files-bg-hover);
+}
 
-  .mensagem__outros .default-doc {
-    background-color: rgba(100, 100, 100, 0.1);
-  }
+.mensagem__outros .default-doc {
+  background-color: rgba(100, 100, 100, 0.1);
+}
 
-  .mensagem__outros .default-doc:hover {
-    background-color: rgba(100, 100, 100, 0.3);
-  }
+.mensagem__outros .default-doc:hover {
+  background-color: rgba(100, 100, 100, 0.3);
+}
 
-  .default-doc:hover p {
-    text-decoration: underline;
-  }
+.default-doc:hover p {
+  text-decoration: underline;
+}
 
-  .default-doc {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 5px;
-    width: 100%;
-    max-width: 100%;
-    cursor: pointer;
-    transition: background-color 150ms ease-in-out;
-  }
-  .default-doc svg {
-    font-size: 1.2rem;
-    margin-right: 5px;
-  }
-  .default-doc p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.default-doc {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 5px;
+  width: 100%;
+  max-width: 100%;
+  cursor: pointer;
+  transition: background-color 150ms ease-in-out;
+}
 
-  .file-actions {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-    padding: 5px;
-  }
-  .file-actions a {
-    margin-right: 0;
-  }
+.default-doc svg {
+  font-size: 1.2rem;
+  margin-right: 5px;
+}
 
-  .mensagem__principal .file-action-button {
-    background-color: var(--files-bg);
-  }
+.default-doc p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .mensagem__outros .file-action-button {
-    background-color: rgba(100, 100, 100, 0.1);
-  }
+.file-actions {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 5px;
+}
 
-  .mensagem__principal .file-action-button:hover {
-    background-color: var(--files-bg-hover);
-  }
+.file-actions a {
+  margin-right: 0;
+}
 
-  .mensagem__outros .file-action-button:hover {
-    background-color: rgba(100, 100, 100, 0.3);
-  }
+.mensagem__principal .file-action-button {
+  background-color: var(--files-bg);
+}
 
-  .file-action-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 12px;
-    cursor: pointer;
-    padding: 5px;
-    border-radius: 5px;
-    transition: background-color 150ms ease-in-out;
-  }
+.mensagem__outros .file-action-button {
+  background-color: rgba(100, 100, 100, 0.1);
+}
 
-  .file-action-button a {
-    margin: 0
-  }
+.mensagem__principal .file-action-button:hover {
+  background-color: var(--files-bg-hover);
+}
 
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .5s;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-  .mensagem-div-anexo{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    overflow: hidden;
-  }
+.mensagem__outros .file-action-button:hover {
+  background-color: rgba(100, 100, 100, 0.3);
+}
 
-  .anexo-container{
-    width: 100%;
-    margin-top: 5px;
-    overflow: hidden;
-    display: flex;
-    max-height: 300px;
-  }
-  .anexo-container a, .anexo-container .arquivo-erro{
-    padding: 10px 15px 15px 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .anexo-container p {
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .anexo-container p, .anexo-container .arquivo-erro{
-    margin: 0;
-    margin-left: 15px;
-    font-size: .9rem
-  }
-  .anexo-container svg{
-    font-size: 2rem;
-  }
-  
-  .anexo-mensagem audio{
-    outline: none;
-    width: 100%;
-    margin-bottom: 5px;
-  }
-  
-  .anexo-mensagem video{
-    flex: 1;
-    width: 100%;
-    max-width: 350px;
-    cursor: pointer;
-    margin-bottom: 5px;
-  }
+.file-action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 12px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 5px;
+  transition: background-color 150ms ease-in-out;
+}
 
-  .anexos-links-container{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .anexos-links-container a {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-right: 5px;
-    font-weight: 550;
-    color: inherit;
-    text-decoration: none;
-  }
-  .anexos-links-container svg {
-    cursor: pointer;
-  }
+.file-action-button a {
+  margin: 0
+}
 
-  .mensagem-div-anexo img{
-    cursor: pointer;
-    margin: 10px 0;
-    min-width: 35px;
-    width: 100%;
-    max-width: 250px;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
 
-  .anexo-transition {
-    width: 100%;
-    height: 100%;
-  }
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 
-  .anexo-mensagem {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100%;
-  }
-  
-  .alert-danger {
-    color: #721c24;
-    background-color: #f8d7da;
-    border-color: #f5c6cb;
-  }
+.mensagem-div-anexo {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+}
 
-  .alert {
-    position: relative;
-    padding: 0.65rem 1.2rem;
-    margin: 5px 0;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    text-align: center;
-  }
+.anexo-container {
+  width: 100%;
+  margin-top: 5px;
+  overflow: hidden;
+  display: flex;
+  max-height: 300px;
+}
 
-  .alert svg {
-    font-size: 1.025em;
-    margin-right: 2px;
-  }
+.anexo-container a,
+.anexo-container .arquivo-erro {
+  padding: 10px 15px 15px 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  .pdf {
-    color: #E74C3C;
-  }
+.anexo-container p {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
-  .doc {
-    color: #006bc9
-  }
-</style>
+.anexo-container p,
+.anexo-container .arquivo-erro {
+  margin: 0;
+  margin-left: 15px;
+  font-size: .9rem
+}
+
+.anexo-container svg {
+  font-size: 2rem;
+}
+
+.anexo-mensagem audio {
+  outline: none;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.anexo-mensagem video {
+  flex: 1;
+  width: 100%;
+  max-width: 350px;
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.anexos-links-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.anexos-links-container a {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-right: 5px;
+  font-weight: 550;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anexos-links-container svg {
+  cursor: pointer;
+}
+
+.mensagem-div-anexo img {
+  cursor: pointer;
+  margin: 10px 0;
+  min-width: 35px;
+  width: 100%;
+  max-width: 250px;
+}
+
+.anexo-transition {
+  width: 100%;
+  height: 100%;
+}
+
+.anexo-mensagem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert {
+  position: relative;
+  padding: 0.65rem 1.2rem;
+  margin: 5px 0;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  text-align: center;
+}
+
+.alert svg {
+  font-size: 1.025em;
+  margin-right: 2px;
+}
+
+.pdf {
+  color: #E74C3C;
+}
+
+.doc {
+  color: #006bc9
+}</style>

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

@@ -26,7 +26,53 @@
           </div>
         </div>
       </div>
-      <p class="card-chip" :class="[ticketClassCod]" v-if="ticket_id.cod && ticket_id.desc" v-text="`${ticket_id.desc} (${ticket_id.cod})`" :title="`${ticket_id.desc} (${ticket_id.cod})`"></p>
+      <div class="card-chip-container">
+        <p
+          class="card-chip"
+          :class="[ticketClassCod]"
+          v-if="ticket_id.cod && ticket_id.desc"
+          v-text="`${ticket_id.desc} (${ticket_id.cod})`"
+          :title="`${ticket_id.desc} (${ticket_id.cod})`"
+        ></p>
+        <p
+          v-if="ticket_id.hasOwnProperty('back_doing_business')"
+          :class="`${ticket_id.back_doing_business ? 'green' : 'red'} card-chip`"
+          :title="`${dictionary.title_voltaria_fazer_negocio} ${
+            ticket_id.back_doing_business
+              ? `${dictionary.title_sim}`
+              : `${dictionary.title_nao}`
+          }`"
+          v-text="
+            `${dictionary.title_voltaria_fazer_negocio} ${
+              ticket_id.back_doing_business
+                ? `${dictionary.title_sim}`
+                : `${dictionary.title_nao}`
+            }`
+          "
+        ></p>
+        <p
+          v-if="ticket_id.hasOwnProperty('rating')"
+          :class="`${isNumberBiggerThanSix ? 'green' : 'red'} card-chip`"
+          :title="`${dictionary.title_avaliacao} ${ticket_id.rating}`"
+          v-text="`${dictionary.title_avaliacao} ${ticket_id.rating}`"
+        ></p>
+        <p
+          v-if="ticket_id.hasOwnProperty('resolved_issue')"
+          :class="`${ticket_id.resolved_issue ? 'green' : 'red'} card-chip`"
+          :title="`${dictionary.title_problema_resolvido} ${
+            ticket_id.resolved_issue
+              ? `${dictionary.title_sim}`
+              : `${dictionary.title_nao}`
+          }`"
+          v-text="
+            `${dictionary.title_problema_resolvido} ${
+              ticket_id.resolved_issue
+                ? `${dictionary.title_sim}`
+                : `${dictionary.title_nao}`
+            }`
+          "
+        ></p>
+      </div>
       <p class="card-message" v-html="mensagemFormatada"></p>
       <div class="card-footer" v-if="anexos && anexos.length">
         <div class="card-anexo" v-for="(anexo, index) in anexos" :key="`${index}`">
@@ -260,6 +306,12 @@ export default {
   flex-wrap: wrap;
 }
 
+.card-chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 5px;
+}
 
 .card-chip {
   font-size: .8rem;
@@ -295,6 +347,13 @@ export default {
 .card-chip.red:hover {
   background-color: rgba(231, 76, 60, .25);
 }
+.card-chip.green {
+  color: #0e3213;
+  background-color: rgba(15,177,39,0.3);
+}
+.card-chip.green:hover {
+  background-color: rgba(15, 177, 39, 0.4);
+}
 
 .card-anexo {
   width: 50px;

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

@@ -18,7 +18,7 @@
       </div>
       <template v-if="anexos && anexos.length">
         <div class="mensagem-anexo" v-for="(anexo, index) in anexos" :key="index">
-          <AnexoMensagem :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
+          <AnexoMensagem :showControlFiles="showControlFiles" :referenceSelector="referenceSelector" :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem" @download-all="$emit('download-all')"/>
         </div>
       </template>
       <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
@@ -86,7 +86,7 @@ import LinkPreview from './LinkPreview'
 
 export default {
   components: { AnexoMensagem, InteratividadeBotoes, InteratividadeFormulario, LinkPreview },
-  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", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon"],
+  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", "referenceSelector", "replyMessage", "isReply", "defaultReplyMessage", "showReplyIcon", "showControlFiles"],
   created() {
     if(!this.$root.$refs.chatMessages) this.$root.$refs.chatMessages = this
   },