vue-intergrall-plugins 0.0.140 → 0.0.141

package/package.json

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

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>