vue-intergrall-plugins 1.0.26 → 1.0.28

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

@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="origin"
-    :class="[currentClasses]"
-    :id="`card-${messageIndex ? messageIndex : randomizeValue}`"
-  >
+  <div v-if="origin" :class="[currentClasses]" :id="`card-${messageIndex ? messageIndex : randomizeValue}`">
     <transition name="fade">
       <span v-if="newMessage" class="new-messages" v-text="`Nova mensagem`"></span>
     </transition>
@@ -11,50 +7,35 @@
       <div class="card-header" :style="resizeHeaderCard">
         <div class="card-author">
           <fa-icon :icon="currentIcon" />
-          <p
-            v-if="author"
-            class="text-bold"
-            v-text="`${tratarTextoLongo(author)}`"
-            :title="author"
-          ></p>
-          <p
-            v-if="origin === 'principal' && login"
-            v-text="`| ${login}`"
-            :title="login"
-          ></p>
+          <p v-if="author" class="text-bold" v-text="`${tratarTextoLongo(author)}`" :title="author"></p>
+          <p v-if="origin === 'principal' && login" v-text="`| ${login}`" :title="login"></p>
         </div>
         <div class="card-right">
           <div class="card-dates">
-            <div
-              v-if="date"
-              class="card-date"
-              :title="`${dictionary.data_criacao}: ${
-                origin === 'outros'
-                  ? formataTimezoneData(date)
-                  : returnFormataDataHora(date)
-              }`"
-            >
-              <span
-                v-text="
-                  origin === 'outros'
-                    ? formataTimezoneData(date)
-                    : returnFormataDataHora(date)
-                "
-              ></span>
+            <div v-if="date" class="card-date" :title="`${dictionary.data_criacao}: ${origin === 'outros'
+              ? formataTimezoneData(date)
+              : returnFormataDataHora(date)
+              }`">
+              <span v-text="origin === 'outros'
+                ? formataTimezoneData(date)
+                : returnFormataDataHora(date)
+                "></span>
             </div>
           </div>
           <div v-if="hasExpand" class="card-expand" @click="cardExpand()">
             <fa-icon :icon="['fas', 'expand-alt']" />
           </div>
+          <div class="card-actions" v-if="customButtons && customButtons.length">
+            <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
+              @click="button.callback(returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+              v-tippy :content="button.tippyContent">
+              <fa-icon :icon="['fas', button.icon || 'question-circle']" />
+            </span>
+          </div>
         </div>
       </div>
-      <p
-        v-if="chipInfos.cod && chipInfos.desc"
-        class="card-chip"
-        :class="[chipInfosClasses]"
-        v-text="`${chipInfos.desc} (${chipInfos.cod})`"
-        :title="`${chipInfos.desc} (${chipInfos.cod})`"
-      ></p>
+      <p v-if="chipInfos.cod && chipInfos.desc" class="card-chip" :class="[chipInfosClasses]"
+        v-text="`${chipInfos.desc} (${chipInfos.cod})`" :title="`${chipInfos.desc} (${chipInfos.cod})`"></p>
       <p class="card-message" v-html="formattedMessage"></p>
       <div class="card-footer">
         <template v-if="files && files.length">
@@ -62,14 +43,8 @@
             <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')"
-        />
+        <CardCheck v-if="messageStatus" :messageStatus="messageStatus" :hasReply="hasReply" :replyMessage="replyMessage"
+          :tooltipContent="tooltipContent" @reply-msg="$emit('reply-msg')" />
       </div>
     </div>
   </div>
@@ -143,6 +118,9 @@ export default {
       required: false,
       default: false,
     },
+    customButtons: {
+      type: Array
+    }
   },
   data() {
     return {
@@ -165,9 +143,8 @@ export default {
       return this.origin === "outros" ? ["fas", "user"] : ["fas", "headset"];
     },
     currentClasses() {
-      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${
-        this.newMessage ? "newMessage" : ""
-      }`;
+      return `${this.origin === "outros" ? "card-cli" : "card-ope"} ${this.newMessage ? "newMessage" : ""
+        }`;
     },
     chipInfosClasses() {
       if (!this.chipInfos || !this.chipInfos.cod) return "";
@@ -206,6 +183,28 @@ export default {
     cardExpand() {
       this.$emit("card-expand", this.$props);
     },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.message,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
   },
 };
 </script>
@@ -215,6 +214,7 @@ export default {
 .fade-leave-active {
   transition: opacity 200ms;
 }
+
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
@@ -227,6 +227,7 @@ export default {
   margin: 5px 0;
   position: relative;
 }
+
 .card-cli.newMessage,
 .card-ope.newMessage {
   margin-top: 30px;
@@ -251,6 +252,7 @@ export default {
   align-self: flex-end;
   background-color: lighten(#007535, 72);
 }
+
 .card-ope .card {
   border-right: 3px solid #007535;
 }
@@ -261,6 +263,7 @@ export default {
   width: 100%;
   padding: 2.5px 5px;
 }
+
 .card p {
   word-break: break-all;
 }
@@ -272,6 +275,7 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
 .card-header svg {
   font-size: 16px;
 }
@@ -280,10 +284,16 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .card-author svg {
   margin-right: 5px;
 }
 
+.card-actions {
+  display: flex;
+  gap: 7px;
+}
+
 .card-canal {
   flex: 1;
   margin-right: 10px;
@@ -301,11 +311,13 @@ export default {
   display: flex;
   align-content: center;
 }
+
 .card-date span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
 .card-date svg {
   margin-right: 5px;
   color: #232323;
@@ -320,6 +332,7 @@ export default {
   opacity: 0.8;
   transition: opacity 150ms;
 }
+
 .card-expand:hover {
   opacity: 1;
 }
@@ -342,27 +355,34 @@ export default {
   background-color: rgba(207, 216, 244, 0.6);
   margin-bottom: 5px;
 }
+
 .card-chip:hover {
   background-color: rgba(207, 216, 244, 1);
 }
+
 .card-chip.orange {
   color: #e14924;
   background-color: rgba(228, 92, 58, 0.15);
 }
+
 .card-chip.orange:hover {
   background-color: rgba(228, 92, 58, 0.2);
 }
+
 .card-chip.yellow {
   color: #f4a304;
   background-color: rgba(252, 191, 73, 0.15);
 }
+
 .card-chip.yellow:hover {
   background-color: rgba(252, 191, 73, 0.2);
 }
+
 .card-chip.red {
   color: rgb(231, 76, 60);
   background-color: rgba(231, 76, 60, 0.2);
 }
+
 .card-chip.red:hover {
   background-color: rgba(231, 76, 60, 0.25);
 }
@@ -391,6 +411,7 @@ export default {
   border-radius: 50%;
   background-color: #fff;
 }
+
 .card-reply svg {
   margin-top: -1px;
   margin-right: -1px;
@@ -403,25 +424,31 @@ export default {
   cursor: pointer;
   font-size: 11.2px;
 }
+
 .card-check svg {
   font-size: 12.8px;
 }
+
 .card-check.seen,
 .card-check.seen svg {
   color: #006daa;
 }
+
 .card-check.green,
 .card-check.green svg {
   color: #4f772d;
 }
+
 .card-check.red,
 .card-check.red svg {
   color: #ba181b;
 }
+
 .card-check.gray,
 .card-check.gray svg {
   color: #999;
 }
+
 .card-check.black,
 .card-check.black svg {
   color: #666;