@nixweb/nixloc-ui 0.0.131 → 0.0.133

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.131",
+  "version": "0.0.133",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,
@@ -29,6 +29,7 @@
     "vue": "^2.6.11",
     "vue-color": "^2.7.0",
     "vue-currency-filter": "^3.3.0",
+    "vue2-google-maps": "^0.10.7",
     "vue-html2pdf": "^1.8.0",
     "vue-image-crop-upload": "^3.0.3",
     "vue-js-toggle-button": "^1.3.0",

package/src/component/forms/Button.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="c-div-button">
     <button
+      :style="'background-color:' + backroundColor + ';color:' + color"
       class="button"
       :class="{
         small: size === 'small',
@@ -17,7 +18,11 @@
       :disabled="disabled"
       @click="execute()"
     >
-      <i class="title" :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
+      <i
+        class="title"
+        :class="classIcon"
+        v-if="!isLoading(this._key) && classIcon"
+      ></i>
       <span v-if="!isLoading(this._key)">{{ title }}</span>
       <vue-loading
         v-if="isLoading(this._key)"
@@ -39,6 +44,8 @@ export default {
     title: String,
     type: String,
     size: String,
+    color: String,
+    backroundColor: String,
     eventName: String,
     eventData: Object,
     classIcon: String,

package/src/component/forms/CheckboxSimple.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
+    <b-form-checkbox
+      v-model="valueLocal"
+      :value="true"
+      :unchecked-value="false"
+    >
       {{ title }}
       <Tip :field="field" :formName="formName" />
     </b-form-checkbox>
@@ -20,6 +24,7 @@ export default {
     formName: String,
     field: String,
     value: Boolean,
+    changed: Function,
     markFormDirty: {
       type: Boolean,
       default: true,
@@ -40,6 +45,7 @@ export default {
     valueLocal() {
       this.$emit("input", this.valueLocal);
       if (this.markFormDirty) this.updateFormDirty(true);
+      if (this.changed) this.changed();
     },
   },
 };

package/src/component/forms/InputAddressGoogle.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="form-group">
+    <label>
+      <i class="title class-icon-title" :class="classIconTitle"></i>
+      <i class="fa-sharp fa-solid fa-location-dot icon-location"></i>
+      <span class="title" :style="'color: ' + titleColor"> {{ title }} </span>
+      <span class="required" v-if="required">*</span>
+      <Tip :field="field" :formName="formName" />
+    </label>
+    <div class="inner-addon right-addon">
+      <div
+        class="required glyphicon"
+        v-if="notifications.length > 0 && formDirty"
+      >
+        <i class="fas fa-exclamation-triangle"></i>
+      </div>
+      <slot v-else></slot>
+      <gmap-autocomplete
+        @place_changed="setPlace"
+        class="form-control"
+        v-bind:value="value"
+      >
+      </gmap-autocomplete>
+    </div>
+    <div v-if="formDirty">
+      <div v-for="message in notifications" :key="message">
+        <span class="invalid">{{ message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip.vue";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  components: { Tip },
+  name: "InputText",
+  props: [
+    "title",
+    "classIconTitle",
+    "field",
+    "placeholder",
+    "disabled",
+    "titleColor",
+    "mask",
+    "_style",
+    "formName",
+    "required",
+    "maxLength",
+    "value",
+    "enter",
+    "cleaned",
+    "exited",
+    "markFormDirty",
+  ],
+  data() {
+    return {
+      notifications: [],
+      formDirty: false,
+      withoutMask: {
+        mask: "*".repeat(255),
+        tokens: {
+          "*": { pattern: /./ },
+        },
+      },
+    };
+  },
+  created() {
+    this.validate();
+  },
+  methods: {
+    ...mapMutations("validation", [
+      "addValidation",
+      "removeValidation",
+      "updateFormDirty",
+    ]),
+    validate() {
+      this.notifications = [];
+
+      if (this.required && this.value.length == 0) {
+        var message = `${this.title} não pode ser vazio!`;
+        this.notifications.push(message);
+      }
+
+      if (this.maxLength > 0) {
+        if (this.value.length > this.maxLength) {
+          var message = `Máximo de ${this.maxLength} caracteres!`;
+          this.notifications.push(message);
+        }
+      }
+    },
+    pressedEnter() {
+      if (this.enter) this.enter();
+    },
+    outField() {
+      if (this.exited) this.exited();
+    },
+    cleanedField() {
+      if (this.value.length == 0) {
+        if (this.cleaned) this.cleaned();
+      }
+    },
+    setPlace(place) {
+      this.currentPlace = place;
+      this.$emit("input", this.currentPlace.formatted_address);
+    },
+  },
+  computed: {
+    ...mapState("validation", ["resetForm", "validations"]),
+  },
+  watch: {
+    value() {
+      this.validate();
+      this.formDirty = true;
+      // inverti a validação devido não colocar o default como true no props
+      var _value = this.markFormDirty == undefined ? true : this.markFormDirty;
+      if (_value) this.updateFormDirty(true);
+    },
+    notifications() {
+      let self = this;
+      this.notifications.forEach(function (notification) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+          notification: notification,
+        };
+        self.addValidation(obj);
+      });
+
+      if (this.notifications.length == 0) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+        };
+        self.removeValidation(obj);
+      }
+    },
+    resetForm: {
+      handler(form) {
+        if (form.name == this.formName) this.formDirty = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title {
+  font-size: 14px !important;
+}
+
+.icon-location {
+  color: #0251a0;
+}
+
+.class-icon-title {
+  margin-right: 5px;
+}
+
+.success {
+  color: #94aa2a;
+  font-size: 14px;
+}
+.invalid {
+  color: #f0134d;
+  font-size: 14px;
+}
+
+.margin-button {
+  margin-top: -3px;
+}
+</style>

package/src/component/forms/InputText.vue

@@ -4,6 +4,7 @@
       <i class="title class-icon-title" :class="classIconTitle"></i>
       <span class="title" :style="'color: ' + titleColor">{{ title }} </span>
       <span class="required" v-if="required">*</span>
+      <Tip :field="field" :formName="formName" />
     </label>
     <div class="inner-addon right-addon">
       <div

package/src/component/layout/Panel.vue

@@ -99,7 +99,7 @@ export default {
 <style scoped>
 .local-container {
   margin: auto;
-  padding-left: 130px;
+  padding-left: 100px;
   max-width: 1500px;
 }
 

package/src/component/shared/DocumentEditor.vue

@@ -4,12 +4,14 @@
       <div>
         <div class="document-editor__toolbar"></div>
         <div class="document-editor__editable-container">
-          <ckeditor
-            :editor="editor"
-            v-model="documentHtml"
-            @ready="onReady"
-            @focus="changed"
-          ></ckeditor>
+          <div id="template-dev">
+            <ckeditor
+              :editor="editor"
+              v-model="documentHtml"
+              @ready="onReady"
+              @focus="changed"
+            ></ckeditor>
+          </div>
         </div>
       </div>
     </div>
@@ -46,7 +48,9 @@ export default {
   methods: {
     ...mapMutations("generic", ["updateDocumentHtml", "addEvent"]),
     onReady(editor) {
-      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      const toolbarContainer = document.querySelector(
+        ".document-editor__toolbar"
+      );
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
     changed() {
@@ -78,12 +82,11 @@ export default {
   padding: 10px;
   border: 1px solid #e4e6ec;
   background: var(--ck-color-base-foreground);
-  overflow-y: scroll;
 }
 
 .document-editor__editable-container .ck-editor__editable {
   width: 22cm;
-  min-height: 21cm;
+  height: 700px;
   padding: 20px;
   border: 1px hsl(0, 0%, 82.7%) solid;
   border-radius: var(--ck-border-radius);
@@ -98,7 +101,9 @@ export default {
 }
 
 .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
-  line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
+  line-height: calc(
+    1.7 * var(--ck-line-height-base) * var(--ck-font-size-base)
+  );
   min-width: 6em;
 }
 
@@ -130,7 +135,10 @@ export default {
   color: hsl(203, 100%, 50%);
 }
 
-.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
+.document-editor
+  .ck-heading-dropdown
+  .ck-heading_heading2.ck-on
+  .ck-button__label {
   color: var(--ck-color-list-button-on-text);
 }
 

package/src/component/shared/DocumentPreview.vue

@@ -16,12 +16,11 @@ export default {
     template: String,
     d: Object,
   },
-
   methods: {
-    sMg(grN) {
+    somaGrupo(grupo) {
       let total = "";
-      this.d.pLoc.forEach((x) => {
-        if (x.pGp === grN) return (total = x.pGpT);
+      this.d.itensLocacao.forEach((x) => {
+        if (x.grupo === grupo) return (total = x.valorTotal);
       });
       return total;
     },
@@ -29,7 +28,8 @@ export default {
   computed: {
     ...mapGetters("generic", ["groupBy"]),
     produtoAgrupado() {
-      return this.groupBy({ array: this.d.produto, key: "pGp" });
+      var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
+      return group;
     },
   },
 };

package/src/component/shared/FullCalendar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Loading type="line" :center="false" v-show="loading" />
-    <FullCalendar ref="cc" :options="calendarOptions" />
+    <FullCalendar :options="calendarOptions" />
   </div>
 </template>
 
@@ -137,6 +137,11 @@ export default {
   cursor: pointer !important;
 }
 
+.fc-event-time {
+  color: black !important;
+  font-weight: normal !important;
+}
+
 .fc-list-day-side-text {
   color: black !important;
 }
@@ -153,6 +158,10 @@ export default {
   color: black !important;
 }
 
+.fc-list-event-title {
+  cursor: pointer !important;
+}
+
 .fc-button-primary:hover {
   background: #3e90b3 !important;
 }

package/src/component/shared/ParameterLegend.vue

@@ -6,25 +6,25 @@
       <table class="table table-responsive-xs">
         <thead>
           <tr>
-            <th><span class="title-header">Parâmetro</span></th>
             <th><span class="title-header">Descrição</span></th>
             <th><span class="title-header">Exemplo</span></th>
+            <th><span class="title-header">Parâmetro</span></th>
           </tr>
         </thead>
         <tbody v-for="(legendLocal, groupName) in grouped">
           <td class="group text-center" colspan="8">
-            <div>{{ groupName.toUpperCase() }}</div>
+            <div>{{ groupName }}</div>
           </td>
           <tr v-for="item in legendLocal">
-            <td class="parametro">
-              <span> {{ item.parameter }}</span>
-            </td>
-            <td>
+            <td class="description">
               <span> {{ item.description }}</span>
             </td>
             <td>
               <span class="exemplo"> {{ item.example }}</span>
             </td>
+            <td class="parametro">
+              <span> {{ item.parameter }}</span>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -70,23 +70,26 @@ export default {
       let legend = [];
       let self = this;
       setTimeout(function () {
-        self.legend.forEach(function (item) {
-          if (self.search.filter.content == "equal") {
-            if (item.description == self.search.content) legend.push(item);
-          }
-          if (self.search.filter.content == "contains") {
-            if (item.description.includes(self.search.content)) legend.push(item);
-          }
-        });
-        self.legendLocal = legend;
-        self.removeLoading(["search", "clean"]);
+        if (self.search.content) {
+          self.legend.forEach(function (item) {
+            if (self.search.filter.content == "equal") {
+              if (item.description == self.search.content) legend.push(item);
+            }
+            if (self.search.filter.content == "contains") {
+              if (item.description.includes(self.search.content))
+                legend.push(item);
+            }
+          });
+          self.legendLocal = legend;
+        }
+        self.removeLoading(["btnSearch", "btnClean"]);
       }, 300);
     },
     clearedSearch: function () {
       let self = this;
       setTimeout(function () {
         self.legendLocal = self.legend;
-        self.removeLoading(["search", "clean"]);
+        self.removeLoading(["btnSearch", "btnClean"]);
       }, 300);
     },
   },
@@ -116,6 +119,10 @@ export default {
   font-weight: 500;
 }
 
+.description {
+  width: 350px;
+}
+
 .div-warning {
   margin-bottom: 20px;
 }

package/src/component/shared/TableButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Button
-      v-if="obj.qualBotao == 'button'"
+      v-if="obj.typeButton == 'default'"
       :key="row.id"
       :title="obj.button.title"
       :type="obj.button.type"
@@ -11,7 +11,7 @@
       :eventData="row"
     />
     <Dropdown
-      v-if="obj.qualBotao == 'botaodropdown'"
+      v-if="obj.typeButton == 'botaodropdown'"
       :title="obj.button.title"
       :type="obj.button.type"
       :size="obj.button.size"

package/src/component/shared/TableDraggable.vue

@@ -16,7 +16,8 @@
         :clicked="checkMove"
       />
     </div>
-    <i class="fa-regular fa-maximize icon-order"></i> Clique e arraste para ordenar
+    <i class="fa-regular fa-maximize icon-order"></i> Clique e arraste para
+    ordenar
     <table class="table table-responsive-xs">
       <thead>
         <tr>

package/src/component/shared/TableItem.vue

@@ -6,7 +6,11 @@
       @click="navegateTo(obj, row)"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
     >
-      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
+      <DisplayPeriodRent
+        :periodRent="row[obj.field]"
+        :fontSize="14"
+        :showDeliveryDevolution="true"
+      />
     </div>
     <div
       v-if="obj.type === 'text'"

package/src/component/template/ListViewWithDataHandler.vue

@@ -147,7 +147,11 @@ export default {
       "updateSearch",
     ]),
     getAll() {
-      let obj = { ...this.baseParams, ...this.dynamicFilter, ...this.propsParam };
+      let obj = {
+        ...this.baseParams,
+        ...this.dynamicFilter,
+        ...this.propsParam,
+      };
       let params = { url: this.templateList.urlGetApi, obj: obj };
       this.getApi(params).then((response) => {
         this.content = response.content;
@@ -158,15 +162,17 @@ export default {
       });
     },
     orderAll(data) {
-      let obj = { listIds: data.listIds };
+      if (this.templateList.urlOrderAllApi) {
+        let obj = { listIds: data.listIds };
 
-      let params = {
-        url: this.templateList.urlOrderAllApi,
-        obj: obj,
-        notNotifyToast: true,
-      };
+        let params = {
+          url: this.templateList.urlOrderAllApi,
+          obj: obj,
+          notNotifyToast: true,
+        };
 
-      this.orderAllApi(params).then((response) => {});
+        this.orderAllApi(params).then((response) => {});
+      }
     },
     removeSelected() {
       let params = {

package/src/component/template/ViewTemplateDocumentView.vue

@@ -37,6 +37,15 @@
                   </div>
                 </b-col>
                 <b-col class="text-right" sm="6">
+                  <div class="side-by-side" v-if="id">
+                    <Button
+                      key="showModalConfig"
+                      type="info"
+                      classIcon="fa-solid fa-gear"
+                      size="small"
+                      :clicked="showModalConfig"
+                    />
+                  </div>
                   <div class="side-by-side">
                     <Button
                       key="showModalLegend"
@@ -69,7 +78,7 @@
               </b-row>
             </Molded>
           </div>
-          <Modal title="Salvar" :width="500" v-show="showModal('saveDocument')">
+          <Modal title="Salvar" :width="800" v-show="showModal('saveDocument')">
             <slot></slot>
           </Modal>
           <Modal title="Parâmetros" :width="1100" v-if="showModal('legenda')">
@@ -100,7 +109,7 @@
                   <div class="a4">
                     <div id="printMe">
                       <DocumentPreview
-                        :template="documentPreview"
+                        :template="documentPreview('dev')"
                         :d="parameterExemple"
                       />
                     </div>
@@ -110,7 +119,8 @@
             </div>
           </Modal>
           <div class="div-editor">
-            <DocumentEditor />
+            <Loading type="line" v-if="!showDocumentEditor" />
+            <DocumentEditor v-if="showDocumentEditor" />
           </div>
         </div>
       </div>
@@ -128,6 +138,7 @@ import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
 
 import print from "vue-print-nb";
 
@@ -145,6 +156,7 @@ export default {
     CodeEditor,
     ParameterLegend,
     Molded,
+    Loading,
     Button,
     Modal,
     ScrollBar,
@@ -158,14 +170,26 @@ export default {
     return {
       id: this.$route.params.id,
       isDisabled: true,
+      showDocumentEditor: false,
     };
   },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.showDocumentEditor = true;
+    }, 1500);
+  },
   computed: {
     ...mapState("generic", ["modal", "documentHtml"]),
     ...mapGetters("generic", ["showModal", "event", "documentPreview"]),
   },
   methods: {
-    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading", "addEvent"]),
+    ...mapMutations("generic", [
+      "openModal",
+      "hideModal",
+      "removeLoading",
+      "addEvent",
+    ]),
     saveDocument() {
       if (this.id) {
         this.addEvent({ name: "saveDocument" });
@@ -177,6 +201,10 @@ export default {
     saveAs() {
       this.addEvent({ name: "saveAs" });
     },
+    showModalConfig() {
+      this.openModal("saveDocument");
+      this.removeLoading(["showModalConfig"]);
+    },
     showModalLegend() {
       this.openModal("legenda");
       this.removeLoading(["showModalLegend"]);

package/src/store/modules/generic.js

@@ -1,4 +1,5 @@
 import axios from "@/config/axios";
+import Tips from "@/config/tips";
 import Token from "@nixweb/nixloc-ui/src/config/token";
 
 export default {
@@ -35,7 +36,13 @@ export default {
     },
     getters: {
         tip: (state) => (tipId) => {
-            return "";
+            var tips = new Tips();
+            let message = "";
+            tips.help.find(value => {
+                if (value.tipId == tipId)
+                    message = value.message;
+            })
+            return message;
         },
         showModal: (state) => (name) => {
             if (name == state.modal.name) return true;
@@ -60,11 +67,17 @@ export default {
         event: (state) => {
             return state.event;
         },
-        documentPreview: (state) => {
+        documentPreview: (state) => (env) => {
             let documentHtml = state.documentHtml
             let ret = documentHtml;
 
-            var template = document.getElementById("template");
+            var template = null;
+
+            if (env == 'dev')
+                template = document.getElementById("template-dev");
+
+            if (env == 'prod')
+                template = document.getElementById("template-prod");
 
             if (template != null) {
                 var tables = template.getElementsByTagName("table");
@@ -86,24 +99,29 @@ export default {
 
                     if (th) {
 
-                        let isGrouped = th.innerText.includes("n.grupo");
-                        let isProduct = th.innerText.includes("p.pLoc");
-                        let isPeriod = th.innerText.includes("n.periodo");
-                        let isPayment = th.innerText.includes("n.pagamento");
-                        let isMoviment = th.innerText.includes("p.pMoviment");
+                        let isPayment = th.innerText.includes("t.pagamentoLocacao");
+                        let isPeriod = th.innerText.includes("t.periodoLocacao");
+                        let isProduct = th.innerText.includes("t.produtoLocacao");
+                        let isGrouped = th.innerText.includes("t.produtoAgrupado");
+                        let isMoviment = th.innerText.includes("t.produtoMovimentacao");
+                        let isCustumerAddress = th.innerText.includes("t.enderecoCliente");
+                        let isAddressRent = th.innerText.includes("t.enderecoLocacao");
+
 
                         if (isProduct) {
-                            obj.vForSimple = "v-for='p in d.pLoc'";
+                            obj.vForSimple = "v-for='produto in d.itensLocacao'";
                             config.push(obj);
                         } else if (isPeriod) {
-                            obj.vForSimple = "v-for='pe in d.periodo'";
+                            obj.vForSimple = "v-for='periodo in d.periodoLocacao'";
                             config.push(obj);
                         } else if (isPayment) {
-                            obj.vForSimple = "v-for='pg in d.pagamento'";
+                            obj.vForSimple = "v-for='pagamento in d.pagamentoLocacao'";
                             config.push(obj);
                         } else if (isGrouped) {
-                            obj.vForGrouped = "v-for='(produto, grN) in produtoAgrupado'";
-                            obj.vForSimple = "v-for='p in d.pLoc'";
+                            obj.vForGrouped = "v-for='(itensLocacao, grupo) in produtoAgrupado'";
+                            obj.vForSimple = "v-for='produto in itensLocacao'";
+
+                            // neste cenário basicamente temos que montar o <tbody> no array de agrupamento
 
                             var initIndex = documentHtml.split("<tbody>", index + 1).join("<tbody>").length;
                             var lastIndex = documentHtml.split("</tbody>", index + 1).join("</tbody>").length;
@@ -112,13 +130,21 @@ export default {
 
                             let tr = tbody.substring(tbody.indexOf("<tr>"), tbody.lastIndexOf("</tr>"));
 
+                            // faz o replace nameGroup para tirar o <tr/>
                             obj.nameGroup = tr.substring(0, tr.indexOf('</tr>')) + "</tr>";
                             obj.nameGroup = obj.nameGroup.replaceAll("\"", "'");
                             obj.nameGroupReplace = obj.nameGroup.replace("<tr>", "").replace("</tr>", "");
+
                             config.push(obj);
 
                         } else if (isMoviment) {
-                            obj.vForSimple = "v-for='pM in d.pMoviment'";
+                            obj.vForSimple = "v-for='produto in d.itensMovimentacao'";
+                            config.push(obj);
+                        } else if (isCustumerAddress) {
+                            obj.vForSimple = "v-for='endereco in d.locacao.cliente.endereco'";
+                            config.push(obj);
+                        } else if (isAddressRent) {
+                            obj.vForSimple = "v-for='endereco in d.enderecoLocacao'";
                             config.push(obj);
                         } else {
                             config.push(obj);
@@ -135,16 +161,19 @@ export default {
                 });
 
                 var retParse = ret.replaceAll("\"", "'");
-                retParse = eval(`ret${replace}`);
-
+                retParse = eval(`retParse${replace}`);
+         
                 var classImportant = retParse
-                    .replaceAll("n.grupo", "")
-                    .replaceAll("p.pLoc", "")
-                    .replaceAll("p.pMoviment", "")
-                    .replaceAll("n.periodo", "")
-                    .replaceAll("n.pagamento", "")
+                    .replaceAll("t.pagamentoLocacao", "")
+                    .replaceAll("t.periodoLocacao", "")
+                    .replaceAll("t.produtoLocacao", "")
+                    .replaceAll("t.produtoAgrupado", "")
+                    .replaceAll("t.produtoMovimentacao", "")
+                    .replaceAll("t.enderecoCliente", "")
+                    .replaceAll("t.enderecoLocacao", "")
                     .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
             }
+
             return classImportant;
         },
         groupBy: () => (obj) => {
@@ -393,7 +422,7 @@ export default {
                 }, (err) => {
                     if (err.response)
                         if (err.response.status === 403)
-                            context.commit('addNotifications', [{ message: "Usuário sem permissão para remove!" }])
+                            context.commit('addNotifications', [{ message: "Usuário sem permissão para remover!" }])
 
                     if (!err.response)
                         context.commit('addNotificationErrorApi');