vue-intergrall-plugins 0.0.140 → 0.0.144

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "vue-intergrall-plugins",
-  "version": "0.0.140",
-  "description": "",
-  "main": "dist/vue-intergrall-plugins.ssr.js",
-  "browser": "dist/vue-intergrall-plugins.esm.js",
-  "module": "dist/vue-intergrall-plugins.esm.js",
-  "unpkg": "dist/vue-intergrall-plugins.min.js",
-  "files": [
-    "dist/*",
-    "src/**/*.vue"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
-    "prebuild": "rimraf ./dist",
-    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
-    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
-    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^10.3.6",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.0.8",
-    "minimist": "^1.2.5",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^5.1.9",
-    "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.14",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@popperjs/core": "^2.10.2",
-    "core-js": "^3.18.1",
-    "postcss": "^8.3.8",
-    "vue-clickaway": "^2.2.2",
-    "vue-select": "^3.13.0",
-    "vue-tippy": "^4.12.0",
-    "vue-toasted": "^1.1.28",
-    "vue2-google-maps": "^0.10.7"
-  },
-  "engines": {
-    "node": ">=12"
-  }
-}
+{
+  "name": "vue-intergrall-plugins",
+  "version": "0.0.144",
+  "description": "",
+  "main": "dist/vue-intergrall-plugins.ssr.js",
+  "browser": "dist/vue-intergrall-plugins.esm.js",
+  "module": "dist/vue-intergrall-plugins.esm.js",
+  "unpkg": "dist/vue-intergrall-plugins.min.js",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.js",
+    "prebuild": "rimraf ./dist",
+    "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^10.3.6",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.0.8",
+    "minimist": "^1.2.5",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.58.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^5.1.9",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.14",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@popperjs/core": "^2.10.2",
+    "core-js": "^3.18.1",
+    "postcss": "^8.3.8",
+    "vue-clickaway": "^2.2.2",
+    "vue-select": "^3.13.0",
+    "vue-tippy": "^4.12.0",
+    "vue-toasted": "^1.1.28",
+    "vue2-google-maps": "^0.10.7"
+  },
+  "engines": {
+    "node": ">=12"
+  }
+}

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

@@ -45,10 +45,20 @@
         v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`">
       </p>
       <p class="card-message" v-html="formattedMessage"></p>
-      <div class="card-footer" v-if="files && files.length">
-        <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
-          <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
-        </div>
+      <div class="card-footer">
+        <template v-if="files && files.length">
+          <div class="card-file" v-for="(file, index) in files" :key="`${index}`">
+            <CardFile :file="file" :dictionary="dictionary" :domain="domain" />
+          </div>
+        </template>
+        <CardCheck 
+          v-if="messageStatus" 
+          :messageStatus="messageStatus"
+          :hasReply="hasReply"
+          :replyMessage="replyMessage"
+          :tooltipContent="tooltipContent"
+          @reply-msg="$emit('reply-msg')"
+        />
       </div>
     </div>
   </div>
@@ -58,9 +68,10 @@
 import { textoLongo } from "@/mixins/formatarTexto"
 import { formataTimezoneData, formataDataHora } from "../../services/textFormatting"
 import CardFile from "./CardFile"
+import CardCheck from "./CardCheck"
 
 export default {
-  components: { CardFile },
+  components: { CardFile, CardCheck },
   props: {
     dictionary: {
       type: Object,
@@ -103,6 +114,18 @@ export default {
     },
     newMessage: {
       type: Boolean
+    },
+    hasReply: {
+      type: Boolean
+    },
+    replyMessage: {
+      type: String
+    },
+    messageStatus: {
+      type: String
+    },
+    tooltipContent: {
+      type: String
     }
   },
   mixins: [textoLongo],
@@ -156,7 +179,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 200ms;
@@ -274,6 +297,7 @@ export default {
   border-top: 1px solid #ddd;
   display: flex;
   flex-wrap: wrap;
+  min-height: 25px;
 }
 
 
@@ -313,98 +337,58 @@ export default {
 }
 
 .card-file {
-  width: 50px;
+  width: 60px;
   height: 50px;
   margin-right: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.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%;
-}
-.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-icon {
-  opacity: .9;
-  transition: opacity 200ms;
-  color: #222;
+.card-reply {
   cursor: pointer;
+  position: absolute;
+  right: 30px;
+  bottom: 5px;
+  font-size: .6rem;
+  color: #67a332;
+  width: .9rem;
+  height: .9rem;
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: 50%;
+  background-color: #FFF;
 }
-.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: "";
+.card-reply svg {
+  margin-top: -1px;
+  margin-right: -1px;
+} 
+
+.card-check{
   position: absolute;
-  bottom: 2px;
-  transform: translateY(2px);
-  width: 20px;
-  height: 20px;
-  background-color: #FFF;
+  bottom: 5px;
+  right: 5px;
+  cursor: pointer;
+  font-size: 0.7rem;
 }
-.file-icon.doc {
-  color: #15517F; 
+.card-check svg {
+  font-size: 0.8rem;
 }
-.file-icon.doc::after {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-color: #FFF;
+.card-check.seen, .card-check.seen svg{
+  color: #006DAA
 }
-.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;
+.card-check.green, .card-check.green svg{
+  color: #4f772d
 }
-
-.file-img:hover {
-  opacity: 1;
+.card-check.red, .card-check.red svg{
+  color: #ba181b
 }
-.file-img img {
-  width: 95%;
+.card-check.gray, .card-check.gray svg{
+  color: #999
+}
+.card-check.black, .card-check.black svg{
+  color: #666
 }
 
 </style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <transition name="fade" mode="out-in">
+      <span class="card-reply" v-if="hasReply && (messageStatus == 'C' || messageStatus == 'T')" v-tippy :content="replyMessage ? replyMessage : 'Fazer reenvio da mensagem'" @click="$emit('reply-msg')"> <fa-icon :icon="['fas', 'reply']" /> </span> 
+    </transition>
+    <transition name="fade" mode="out-in">
+      <span class="card-check" v-if="messageStatus == 'D'" :content="tooltipContent" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check gray" v-else-if="messageStatus == 'Q'" :content="tooltipContent" v-tippy key="check-gray"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'G'" :content="tooltipContent" v-tippy key="check-black"> <fa-icon :icon="['fas', 'check']" /> </span>
+      <span class="card-check black" v-else-if="messageStatus == 'E'" :content="tooltipContent" v-tippy key="double-check-black"> <fa-icon :icon="['fas', 'check-double']" /> </span>
+      <span class="card-check seen" v-else-if="messageStatus == 'L'" :content="tooltipContent" v-tippy key="double-check-seen"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'C'" :content="tooltipContent" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- messageStatus finalizador -->
+      <span class="card-check red" v-else-if="messageStatus == 'T'" :content="tooltipContent" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hasReply: {
+      type: Boolean
+    },
+    messageStatus: {
+      type: String
+    },
+    replyMessage: {
+      type: String
+    },
+    tooltipContent: {
+      type: String
+    }
+  }
+}
+</script>

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

@@ -115,3 +115,99 @@ export default {
   }
 }
 </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

@@ -6,6 +6,7 @@
           <AnexoMensagem :dictionary="dictionary" :anexo="anexo" :origemExterna="origemExterna" :dominio="dominio" @abrir-imagem="abrirImagem"/>
         </div>
       </template>
+      <img class="default-stick-size" v-if="urlSticker" :src="urlSticker" :title="urlFileName">
       <div v-if="mapa" class="mensagem-div-mapa">
         <GmapMap
           :id="`mapa_${seq}`"
@@ -23,14 +24,17 @@
           </li>
         </ul>
       </div>
-      <p v-html="formatMsg(msg)"></p>
+      <p v-html="formatMsg(message)"></p>
       <InteratividadeBotoes 
         v-if="interatividade"
         :interatividade="interatividade"
       />
       <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 +54,19 @@
 <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: "",
+      urlSticker: "",
+      urlFileName: "",
+      message: "",
+      reply: "reply",
       center: {},
       marker: {},
       infos: [],
@@ -97,13 +106,59 @@ 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()
+    this.validadeUrlToMsg()
   },
   methods: {
+    validadeUrlToMsg(){
+      this.message = this.msg
+      if(this.validadeIfExistsSticker()){
+        this.urlSticker = this.getUrlSticker()
+        this.urlFileName = this.getUrlFileName()
+        this.message = this.removeUrlStickerByString(this.urlSticker)
+      }
+    },
+    getUrlFileName(){
+      let urlRegex = /(?<=\/)[^\/\?#]+(?=[^\/]*$)/;
+      let urlName = this.urlSticker.match(urlRegex)[0];
+      return urlName;
+    },
+    removeUrlStickerByString(url){
+      let msg = this.message.replace(`STICKER ${url}`, '')
+      return msg;
+    },
+    getUrlSticker(){
+      let urlRegex = /(https?:\/\/[^ ]*)/;
+      let url = this.message.match(urlRegex)[1];
+      return url;
+    },
+    validadeIfExistsSticker(){
+      if(this.message && this.message.indexOf("STICKER https://smarters") === 0){
+        return true;
+      }
+      return false;
+    },
+    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 +256,7 @@ export default {
   .reply {
     cursor: pointer;
     position: absolute;
-    right: 30px;
+    right: 53px;
     bottom: 5px;
     font-size: .6rem;
     color: #67a332;
@@ -217,6 +272,9 @@ export default {
     margin-top: -1px;
     margin-right: -1px;
   }
+  .reply-with-2-icons{
+    right: 30px;
+  }
 
   .check{
     cursor: pointer;
@@ -240,7 +298,20 @@ 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
+  }
+  .default-stick-size{
+    width: 250px;
+    height: auto;
+  }
   .horario-envio {
     margin-right: 15px;
     font-size: 0.7rem;