vue-intergrall-plugins 0.0.154 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-intergrall-plugins",
-  "version": "0.0.154",
+  "version": "0.0.157",
   "description": "",
   "main": "dist/vue-intergrall-plugins.ssr.js",
   "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -19,7 +19,6 @@
     "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",
@@ -43,14 +42,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",
+    "@popperjs/core": "^2.11.2",
     "core-js": "^3.18.1",
     "postcss": "^8.3.8",
+    "vue": "^2.6.14",
     "vue-clickaway": "^2.2.2",
     "vue-select": "^3.13.0",
     "vue-tippy": "^4.12.0",
@@ -59,5 +58,8 @@
   },
   "engines": {
     "node": ">=12"
+  },
+  "dependencies": {
+    "axios": "^0.26.0"
   }
 }

package/src/lib-components/Chat/BtnStandardMessages.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-footer-actions--btn" @click="$emit('toggle-standard-messages')" :title="dictionary.title_msg_formatada">
+    <fa-icon :icon="['fas', 'comment']" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/StandardMessages.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="text-footer-hsm-container">
+    <v-select
+      appendToBody
+      :calculatePosition="calculateSelectPosition"
+      :style="`background-color: ${backgroundColor}`"
+      class="text-footer-v-select"
+      :options="formatted_messages_1"
+      label="value"
+      v-model="key_1"
+      :reduce="formatted_messages_1 => formatted_messages_1.cod"
+      @input="key_1 ? receiveValueFormattedMessage(key_1, 2) : false"
+      >
+      <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
+    </v-select>
+    <v-select
+      v-if="formatted_messages_2.length && key_1"
+      :style="`background-color: ${backgroundColor}`"
+      appendToBody
+      :calculatePosition="calculateSelectPosition"
+      class="text-footer-v-select"
+      :options="formatted_messages_2"
+      label="value"
+      v-model="key_2"
+      :reduce="formatted_messages_2 => formatted_messages_2.cod"
+      @input="receiveValueFormattedMessage(key_2, 3)"
+      >
+      <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
+    </v-select>
+     <div class="text-footer-select-03" v-if="formatted_messages_3.length && key_2">
+      <v-select
+        :style="`background-color: ${backgroundColor}`"
+        appendToBody
+        :calculatePosition="calculateSelectPosition"
+        class="text-footer-v-select"
+        :options="formatted_messages_3"
+        label="value"
+        :clearable="false"
+        @input="openMsg()"
+        v-model="key_3"
+        >
+        <div slot="no-options"> {{ dictionary.msg_sem_resultados }} </div>
+      </v-select>
+      <template v-if="key_3.cod">
+        <span class="text-footer--btn-select-03" v-if="messageType == 1" :title="dictionary.title_btn_preencher_msg_formatada" @click="insertFormattedMessage(key_3)">
+          <fa-icon :icon="['fas', 'level-up-alt']" />
+        </span>
+        <span class="text-footer--btn-select-03" v-else-if="messageType == 2" :title="dictionary.title_btn_abrir_msg_tipo_2" @click="openFormattedMsgType2(key_3)">
+          <fa-icon :icon="['fas', 'file-alt']" />
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { createPopper } from "@popperjs/core"
+import { standardMessages } from "../../services/standardMessages"
+
+export default {
+  mixins: [standardMessages],
+  props: {
+    dictionary: {
+      type: Object,
+      default: {},
+      required: false
+    },
+    backgroundColor: {
+      type: String,
+      default: '#fff',
+      required: false
+    },
+    token_cliente: {
+      type: String,
+      default: '',
+      required: false
+    },
+    message: {
+      type: String,
+      default: '',
+      required: false
+    },
+    messageType: {
+      type: [Number, String],
+      default: 1,
+      required: false
+    }
+  },
+  data() {
+    return {
+      placement: "top",
+      firstMount: true,
+      formatted_messages_1: [{ cod: "T", value: "Todos" }],
+      key_1: "T",
+      formatted_messages_2: [],
+      key_2: "",
+      formatted_messages_3: [],
+      key_3: ""
+    }
+  },
+  mounted() {
+    this.receiveValueFormattedMessage(this.key_1, 2)
+  },
+  methods: {
+    calculateSelectPosition(dropdownList, component, sizes) {
+      dropdownList.style.width = sizes.width
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
+        placement: this.placement
+      })
+      return () => popper.destroy()
+    },
+    receiveValueFormattedMessage(cod, selectionIndex) {
+      try {
+        if(!this.token_cliente) throw new Error("Informe token_cliente como chave na propriedade formattedMessageSettings que ocorre na chamada componente TextFooter ")
+        if(this.firstMount) {
+          cod = `${this.key_1}/${cod}`
+          this.firstMount = false
+        }
+        this.getStandardMessages(cod, this.token_cliente).then((data) => {
+          if(data && typeof(data) == 'string') return this.$toasted.global.emConstrucao({msg: data})
+          if(data) return this.showFormattedMessage(data, selectionIndex)
+          this.$toasted.global.defaultError()
+        }).catch(e => { console.error("Error in getStandardMessages: ", e) })
+      }catch(e) {
+        console.error("Error in receiveValueFormattedMessage: ", e)
+      }
+    },
+    showFormattedMessage(messageData, selectionIndex) {
+      try {
+        let success = false
+        if(Array.isArray(messageData)) success = true
+        if(!success) this.$toasted.global.emConstrucao({ msg: messageData ? messageData.msg : "Nao foi possível obter mensagens" })
+
+        switch (selectionIndex) {
+          case 2:
+            if(!success){
+              this.formatted_messages_2.push(messageData)
+              this.key_2 = this.formatted_messages_2[0]
+            }else{
+              this.formatted_messages_2 = messageData
+              if(this.formatted_messages_2.length == 1) {
+                if(this.formatted_messages_2[0].cod) {
+                  this.key_2 = this.formatted_messages_2[0].cod
+                  this.receiveValueFormattedMessage(this.key_2, 3)
+                }
+              }
+            }
+          break
+          case 3:
+            if(!success) {
+              this.formatted_messages_3.push(messageData)
+              this.$toasted.global.emConstrucao({msg: this.dictionary.msg_erro_sem_msg_formatada})
+              this.$emit("close-blocker-standard-message")
+            }else{
+              if(!messageData.length){
+                this.formatted_messages_3.push(this.dictionary.msg_erro_sem_msg_formatada)
+                this.key_3 = this.formatted_messages_3[0]
+              }else{
+                this.formatted_messages_3 = messageData
+                if(this.formatted_messages_3.length == 1) {
+                  if(this.formatted_messages_3[0].cod) {
+                    this.key_3 = this.formatted_messages_3[0]
+                  }
+                }
+              }
+            }
+          break
+          default: 
+            console.error("Error in showFormattedMessage: selectionIndex not found")
+          break
+        }
+
+      }catch(e) {
+        console.error("Error in showFormattedMessage: ", e)
+      }
+    },
+    openMsg() {
+      try {
+        this.messageType == 1 ? this.insertFormattedMessage(this.key_3) : this.openFormattedMsgType2(this.key_3)
+      }catch(e) {
+        console.error("Error in openMsg: ", e)
+      }
+    },
+    openFormattedMsgType2(key) {
+      try {
+        if(!key || !this.key_2) return
+        this.$emit("open-blocker-standard-message")
+        key = key.cod
+        this.$emit("set-standard-infos", { category: this.key_2, subject: key })
+      }catch(e) {
+        console.error("Error in openFormattedMsgType2: ", e)
+      }
+    },
+    insertFormattedMessage(key) {
+      try {
+        if(!key) return this.$toasted.global.defaultError({msg: 'Selecione uma mensagem'})
+        if(!key.cod) throw new Error("Chave informada no parametro nao possue codigo")
+        const { value } = key
+        const finalMessage = `${this.message}${this.message && !this.message.endsWith(" ") ? ` ${value}` : value}`
+        return value ? this.$emit("add-standard-message", finalMessage) : this.$toasted.global.emConstrucao({msg: 'Mensagem vazia'})
+      }catch(e) {
+        console.error("Erro ao inserir mensagem formatada: ", e)
+      }
+    }
+  }
+}
+</script>

package/src/lib-components/Chat/TextFooter.vue

@@ -21,8 +21,8 @@
         :disabled="textareaSettings.disabled"
         :placeholder="textareaSettings.placeholderMessage"
         @input="sendFinalMessage"
-        @keydown.up="toggleHSM"
-        @keydown.down="toggleHSM"
+        @keydown.up="toggleStandardMessages"
+        @keydown.down="toggleStandardMessages"
         @keydown.esc="closeEmojis"
         @keydown.enter="sendMessageHandler"
         @paste="pasteImage"
@@ -50,6 +50,12 @@
           @set-audio="setAudio"
           :ref="`${textId}-mic`" 
         />
+        <BtnStandardMessages 
+          v-show="formattedMessageSettings.hasStandardMessages"
+          :dictionary="dictionary"
+          :ref="`${textId}-standard-messages`"
+          @toggle-standard-messages="toggleStandardMessages"
+        />
         <BtnFiles 
           v-show="buttons.hasFiles && !audioFile" 
           :textId="textId"
@@ -64,11 +70,29 @@
         />
         <BtnExpand 
           v-show="buttons.hasExpand && !audioFile"
+          :ref="`${textId}-expand`"
           @expand-textarea="$emit('expand-textarea')"
           :dictionary="dictionary"
         />
       </div>
     </div>
+    <transition name="fade">
+      <StandardMessages 
+        v-if="showStandardMessages" 
+        :class="cssStyle.width ? cssStyle.width: ''" 
+        :dictionary="dictionary" 
+        :backgroundColor="cssStyle.backgroundColor" 
+        :token_cliente="formattedMessageSettings.token_cliente ? formattedMessageSettings.token_cliente : ''"
+        :message="message"
+        :messageType="messageType"
+
+        @open-blocker-standard-message="openBlockerStandardMessage"
+        @close-blocker-standard-message="closeBlockerStandardMessage"
+        @set-message-type="setMessageType"
+        @set-standard-infos="setStandardInfos"
+        @add-standard-message="addStandardMessage"
+      />
+    </transition>
   </div>
 </template>
 
@@ -83,9 +107,11 @@ import RemainingCharacters from "./RemainingCharacters"
 import BtnMic from "./BtnMic"
 import BtnFiles from "./BtnFiles"
 import BtnExpand from "./BtnExpand"
+import BtnStandardMessages from "./BtnStandardMessages"
+import StandardMessages from "./StandardMessages"
 
 export default {
-  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters },
+  components: { BtnEmojis, Loader, BtnMic, BtnFiles, BtnExpand, RemainingCharacters, BtnStandardMessages, StandardMessages },
   mixins: [ clickaway ],
   props: {
     buttons: {
@@ -110,7 +136,7 @@ export default {
     },
     formattedMessageSettings: {
       type: Object,
-      default: () => { return { hasHsm: false, msgType: 0 } },
+      default: () => { return { hasStandardMessages: false, msgType: 0, token_cliente: "" } },
       required: false
     },
     fileSettings: {
@@ -151,7 +177,9 @@ export default {
       isDoc: false,
       fileFormatError: false,
       audioFile: "",
-      audioSource: ""
+      audioSource: "",
+      showStandardMessages: false,
+      messageType: 1
     }
   },
   created() {
@@ -161,7 +189,7 @@ export default {
     setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize")
 
     // this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
-    // this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
+    // this.$root.$on("toggle-msg-formatada", () => { this.toggleStandardMessages() })
     // this.$root.$on("textarea-focus", () => { this.focusTextarea() })
     // this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
     // this.$root.$on("clear-footer-message", () => { this.message = "" })
@@ -402,6 +430,25 @@ export default {
         console.error(e)
       }
     },
+    toggleStandardMessages() {
+      this.showStandardMessages = !this.showStandardMessages
+    },
+    openBlockerStandardMessage() {
+      this.$emit("open-blocker-standard-message")
+    },
+    closeBlockerStandardMessage() {
+      this.$emit("close-blocker-standard-message")
+    },
+    setMessageType(type) {
+      this.messageType = type
+    },
+    setStandardInfos(infos) {
+      this.$emit("set-standard-infos", infos)
+    },
+    addStandardMessage(message) {
+      this.message = message
+      this.sendFinalMessage()
+    },
   },
   destroyed() {
     // this.$root.$off("drop-file")