@nixweb/nixloc-ui 0.0.172 → 0.0.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.172",
+  "version": "0.0.174",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/DateTime.vue

@@ -6,32 +6,15 @@
       <Tip :field="field" :formName="formName" />
     </label>
     <div class="inner-addon right-addon">
-      <i
-        v-if="notifications.length > 0 && formDirty"
-        class="required glyphicon fas fa-exclamation-triangle"
-      ></i>
-      <date-picker
-        lang="pt-br"
-        :range="range"
-        @confirm="executeConfirm"
-        @change="executeConfirm"
-        @clear="close"
-        :confirm="confirm"
-        :confirm-text="confirmText"
-        :format="format"
-        value-type="format"
-        :time-picker-options="{
+      <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
+      <date-picker lang="pt-br" :range="range" @confirm="executeConfirm" @change="executeConfirm" @clear="close"
+        :confirm="confirm" :confirm-text="confirmText" :format="format" value-type="format" :time-picker-options="{
           start: '07:00',
           step: '00:30',
           end: '23:30',
           format: 'HH:mm',
-        }"
-        width="100%"
-        :placeholder="placeholder"
-        :type="type"
-        v-model="valueLocal"
-        :class="{ 'is-invalid': notifications.length > 0 && formDirty }"
-      ></date-picker>
+        }" width="100%" :placeholder="placeholder" :type="type" v-model="valueLocal"
+        :class="{ 'is-invalid': notifications.length > 0 && formDirty }"></date-picker>
     </div>
 
     <div v-if="formDirty">
@@ -100,7 +83,7 @@ export default {
       if (this.range) {
         let obj = {
           fieldTarget: this.fieldTarget,
-          valueLocal: { start: this.valueLocal[0], end: this.valueLocal[1] },
+          value: { start: this.valueLocal[0], end: this.valueLocal[1] },
         };
         this.addFilter(obj);
       }
@@ -108,7 +91,7 @@ export default {
     close() {
       let obj = {
         fieldTarget: this.fieldTarget,
-        valueLocal: { start: "", end: "" },
+        value: { start: "", end: "" },
       };
       this.addFilter(obj);
     },
@@ -162,10 +145,12 @@ export default {
   color: #0a0a0a;
   letter-spacing: 0.5px !important;
 }
+
 .success {
   color: #94aa2a;
   font-size: 14px;
 }
+
 .invalid {
   color: #f0134d;
   font-size: 14px;

package/src/component/forms/IncrementDecrement.vue

@@ -1,21 +1,17 @@
 <template>
   <div>
+    <label v-if="title">
+      <span class="title">{{ title }} </span>
+    </label>
     <div class="wrapper">
-      <span class="minus" @click="decrement">-</span>
-      <span class="num" @click="showEdit = true" v-if="!showEdit">{{
-        number
-      }}</span>
-      <input
-        class="input"
-        type="number"
-        @keyup.enter.prevent="showEdit = false"
-        v-model="number"
-        v-if="showEdit"
-      />
-      <span @click="showEdit = false" v-if="showEdit"
-        ><i class="fa-solid fa-check"></i
-      ></span>
-      <span class="plus" @click="increment">+</span>
+      <span :class="{ disabled: disabled }" class="minus" @click="decrement">-</span>
+      <span :class="{ disabled: disabled }" class="num" @click="showEdit = true" v-if="!showEdit">{{ number }}</span>
+      <input v-if="showEdit" class="input" type="number" @keyup.enter.prevent="showEdit = false" :disabled="disabled"
+        v-model="number" />
+      <span v-if="showEdit" :class="{ disabled: disabled }" @click="showEdit = false">
+        <i class="fa-solid fa-check"></i>
+      </span>
+      <span :class="{ disabled: disabled }" class="plus" @click="increment">+</span>
     </div>
   </div>
 </template>
@@ -25,7 +21,16 @@ import { mapMutations } from "vuex";
 
 export default {
   name: "IncrementDecrement",
-  props: ["value", "triggerEvent", "min", "max"],
+  props: [
+    "title",
+    "initialValue",
+    "value",
+    "disabled",
+    "fieldTarget",
+    "triggerEvent",
+    "min",
+    "max",
+  ],
   data() {
     return {
       number: 1,
@@ -36,12 +41,24 @@ export default {
     this.number = this.value;
   },
   methods: {
-    ...mapMutations("generic", ["addEvent"]),
+    ...mapMutations("generic", ["addFilter", "addEvent"]),
     increment() {
-      this.number++;
+      if (!this.disabled) {
+        this.number++;
+        this.executeFilter();
+      }
     },
     decrement() {
-      this.number--;
+      if (!this.disabled) {
+        this.number--;
+        this.executeFilter();
+      }
+    },
+    executeFilter() {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.number };
+        this.addFilter(obj);
+      }
     },
   },
   watch: {
@@ -89,6 +106,7 @@ export default {
   border: 1px solid #eaedf3;
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
 }
+
 .wrapper span {
   width: 100%;
   text-align: center;
@@ -97,6 +115,7 @@ export default {
   cursor: pointer;
   user-select: none;
 }
+
 .wrapper span.num {
   font-size: 17px;
   border-right: 1px solid #eaedf3;
@@ -112,4 +131,9 @@ export default {
   text-decoration: underline;
   transition: 0.1s;
 }
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
 </style>

package/src/component/forms/RadioGroup.vue

@@ -3,12 +3,8 @@
     <span class="title">{{ title }}</span>
     <div class="options">
       <b-form-group>
-        <b-form-radio-group
-          v-model="selected"
-          :options="options"
-          :disabled="disabled"
-          :stacked="stacked"
-        ></b-form-radio-group>
+        <b-form-radio-group v-model="selected" :options="options" :disabled="disabled"
+          :stacked="stacked"></b-form-radio-group>
       </b-form-group>
     </div>
   </div>
@@ -17,7 +13,7 @@
 <script>
 import Tip from "../shared/Tip.vue";
 
-import { mapMutations } from "vuex";
+import { mapMutations, mapGetters } from "vuex";
 
 export default {
   components: { Tip },
@@ -25,6 +21,7 @@ export default {
   props: {
     title: String,
     options: Array,
+    fieldTarget: String,
     disabled: Boolean,
     stacked: Boolean,
     markFormDirty: {
@@ -38,8 +35,12 @@ export default {
       selected: this.value,
     };
   },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
   methods: {
     ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["addFilter"]),
   },
   watch: {
     value() {
@@ -47,8 +48,22 @@ export default {
     },
     selected() {
       this.$emit("input", this.selected);
+
       if (this.markFormDirty) this.updateFormDirty(true);
       if (this.changed) this.changed();
+      if (this.fieldTarget) {
+        let obj = { tag: `${this.title}: ${this.selected}`, fieldTarget: this.fieldTarget, value: this.selected };
+        this.addFilter(obj);
+      }
+    },
+    event: {
+      handler(event) {
+        if (event.name == "tagRemoved") {
+          if (this.fieldTarget == event.data)
+            this.$emit("input", "");
+        }
+      },
+      deep: true,
     },
   },
 };
@@ -60,6 +75,7 @@ export default {
   text-transform: uppercase;
   color: #778498;
 }
+
 .options {
   margin-top: 5px;
 }

package/src/component/forms/Select.vue

@@ -5,68 +5,27 @@
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />
     </label>
-    <div
-      class="select"
-      :class="{
-        'select-invalid': notifications.length > 0 && formDirty,
-        border: showBorder,
-      }"
-    >
-      <multiselect
-        @open="onOpen"
-        @select="onSelected"
-        @search-change="onSearch"
-        :options="data"
-        v-model.trim="currentValue"
-        :custom-label="label"
-        placeholder
-        :disabled="disabled"
-        :showLabels="true"
-        :noResult="false"
-        :maxHeight="250"
-        ref="multiselect"
-        selectLabel
-        deselectLabel
-        selectedLabel
-      >
+    <div class="select" :class="{
+      'select-invalid': notifications.length > 0 && formDirty,
+      border: showBorder,
+    }">
+      <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
+        v-model.trim="currentValue" :custom-label="label" placeholder :disabled="disabled" :showLabels="true"
+        :noResult="false" :maxHeight="250" ref="multiselect" selectLabel deselectLabel selectedLabel>
         <div slot="beforeList">
-          <vue-loading
-            v-if="loading"
-            type="bubbles"
-            color="#577696"
-            :size="{ width: '40px', height: '40px' }"
-          ></vue-loading>
+          <vue-loading v-if="loading" type="bubbles" color="#577696"
+            :size="{ width: '40px', height: '40px' }"></vue-loading>
           <div class="before-list" v-if="!loading">
-            <Button
-              v-if="showNewRegister"
-              key="addNewRegister"
-              type="primary"
-              title="Novo"
-              size="small"
-              :clicked="addNewRegister"
-            />
-            <Button
-              key="cleanSelect"
-              type="warning"
-              classIcon="fas fa-broom"
-              size="small"
-              :clicked="cleanSelect"
-            />
+            <Button v-if="showNewRegister" key="addNewRegister" type="primary" title="Novo" size="small"
+              :clicked="addNewRegister" />
+            <Button key="cleanSelect" title="Limpar" type="warning" classIcon="fas fa-broom" size="small"
+              :clicked="cleanSelect" />
           </div>
         </div>
-        <div
-          slot="afterList"
-          v-if="totalRecords > 20 && data.length < totalRecords"
-        >
+        <div slot="afterList" v-if="totalRecords > 20 && data.length < totalRecords">
           <div class="after-list text-center">
-            <Button
-              key="loadingMore"
-              type="info"
-              title="Carregar mais..."
-              classIcon="fas fa-redo-alt"
-              size="small"
-              :clicked="loadingMore"
-            />
+            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
+              :clicked="loadingMore" />
           </div>
         </div>
         <div slot="noOptions">Lista está vazia</div>
@@ -79,16 +38,8 @@
       </div>
     </div>
 
-    <vodal
-      v-if="nameNewRegister"
-      :duration="50"
-      :show="showVodal(nameNewRegister)"
-      @hide="hide()"
-      :width="widthNewRegister"
-      :height="heightNewRegister"
-      :closeOnEsc="true"
-      :closeButton="true"
-    >
+    <vodal v-if="nameNewRegister" :duration="50" :show="showVodal(nameNewRegister)" @hide="hide()"
+      :width="widthNewRegister" :height="heightNewRegister" :closeOnEsc="true" :closeButton="true">
       <Messages v-if="vodal.open" />
       <div class="title-new-form">{{ titleNewRegister }}</div>
       <hr class="hr" />
@@ -176,7 +127,7 @@ export default {
   computed: {
     ...mapState("validation", ["resetForm", "vodal"]),
     ...mapState("generic", ["vodal"]),
-    ...mapGetters("generic", ["showVodal"]),
+    ...mapGetters("generic", ["showVodal", "event"]),
   },
   methods: {
     ...mapActions("generic", ["getApi"]),
@@ -200,7 +151,7 @@ export default {
       this.$emit("input", value);
       if (this.changed) this.changed();
       if (this.fieldTarget) {
-        let obj = { fieldTarget: this.fieldTarget, value: value.id };
+        let obj = { tag: `${this.title}: ${value.content}`, fieldTarget: this.fieldTarget, value: value.id };
         this.addFilter(obj);
       }
     },
@@ -267,6 +218,16 @@ export default {
     },
   },
   watch: {
+    event: {
+      handler(event) {
+
+        if (event.name == "tagRemoved") {
+          if (this.fieldTarget == event.data) this.cleanSelect();
+        }
+        
+      },
+      deep: true,
+    },
     "value.id": function () {
       this.validate();
       this.formDirty = true;

package/src/component/forms/SelectStatic.vue

@@ -1,25 +1,13 @@
 <template>
   <div>
     <label>
-      <span class="title">{{ title }}</span>
+      <span class="title">{{ title }} </span>
+      <span class="required" v-if="required">*</span>
     </label>
     <div class="select" :class="{ border: showBorder }">
-      <multiselect
-        @open="onOpen"
-        @select="onSelected"
-        @search-change="onSearch"
-        :options="data"
-        v-model.trim="currentValue"
-        :custom-label="label"
-        :disabled="disabled"
-        placeholder
-        :showLabels="true"
-        :noResult="false"
-        ref="multiselect"
-        selectLabel
-        deselectLabel
-        selectedLabel
-      >
+      <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
+        v-model.trim="currentValue" :custom-label="label" :disabled="disabled" placeholder :showLabels="true"
+        :noResult="false" ref="multiselect" selectLabel deselectLabel selectedLabel>
       </multiselect>
     </div>
   </div>
@@ -35,7 +23,9 @@ export default {
   props: {
     title: String,
     formName: String,
+    field: String,
     fieldTarget: String,
+    required: Boolean,
     initialValue: Object,
     disabled: {
       type: Boolean,
@@ -63,8 +53,12 @@ export default {
   data() {
     return {
       currentValue: this.initialValue,
+      notifications: [],
     };
   },
+  created() {
+    this.validate();
+  },
   mounted() {
     let el = this.$el.getElementsByClassName("multiselect")[0];
     if (el) {
@@ -73,16 +67,20 @@ export default {
   },
   methods: {
     ...mapMutations("generic", ["addFilter", "removeLoading"]),
-    ...mapMutations("validation", ["updateFormDirty"]),
-    onOpen() {},
+    ...mapMutations("validation", [
+      "addValidation",
+      "removeValidation",
+      "resetValidation",
+      "updateFormDirty",
+    ]),
+    onOpen() { },
     onSelected(value) {
       this.$emit("input", value);
       let obj = { fieldTarget: this.fieldTarget, value: value.id };
       if (!this.onlyQuery) this.addFilter(obj);
-
       if (this.markFormDirty) this.updateFormDirty(true);
     },
-    onSearch(value) {},
+    onSearch(value) { },
     label(value) {
       return `${value.content}`;
     },
@@ -98,11 +96,40 @@ export default {
         this.addFilter(obj);
       }
     },
+    validate() {
+      this.notifications = [];
+      if (this.required && !this.value.id) {
+        var message = `${this.title} não pode ser vazio!`;
+        this.notifications.push(message);
+      }
+    },
   },
   watch: {
     "value.id": function () {
+      this.validate();
+      this.formDirty = true;
+      if (this.markFormDirty) this.updateFormDirty(true);
       this.currentValue = { id: this.value.id, content: this.value.content };
     },
+    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);
+      }
+    },
     "initialValue.id": function () {
       this.currentValue = { id: this.value.id, content: this.value.content };
     },

package/src/component/layout/Tag.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="div-tag">
     <div class="tag">
-      <span @click="execute()">{{ title }}: {{ value }}</span>
-      <i @click="remove()" class="icon fas fa-times-circle"></i>
+      <span @click="execute()">{{ title }} <span v-if="value">:</span> {{ value }}</span>
+      <i v-if="showButtonClose" @click="remove()" class="icon-tag fas fa-times-circle"></i>
     </div>
   </div>
 </template>
@@ -13,10 +13,15 @@ import { mapMutations } from "vuex";
 export default {
   name: "Tag",
   props: {
+    _key: String,
     title: String,
     value: String,
     eventName: String,
     eventData: Object,
+    showButtonClose: {
+      type: Boolean,
+      default: true
+    }
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
@@ -30,7 +35,7 @@ export default {
     remove() {
       this.addEvent({
         name: "tagRemoved",
-        data: this.eventData,
+        data: this.eventData ? this.eventData : this._key,
       });
     },
   },
@@ -59,8 +64,9 @@ export default {
   margin-right: 10px;
 }
 
-.icon {
+.icon-tag {
   color: #9e9e9e;
   padding-left: 5px;
+  font-size: 20px;
 }
 </style>

package/src/component/shared/HorizontalFilter.vue

@@ -1,34 +1,25 @@
 <template>
   <div class="filter-horizontal">
-    <Collapse
-      :buttonShow="{
-        title: 'Mais filtros',
-        icon: 'fas fa-arrow-alt-circle-down',
-        type: 'info',
-      }"
-      :buttonHide="{
-        title: 'Menos filtros',
-        icon: 'fas fa-arrow-alt-circle-up',
-        type: 'warning',
-      }"
-    >
+    <Collapse :buttonShow="{
+      title: 'Mais filtros',
+      icon: 'fas fa-arrow-alt-circle-down',
+      type: 'info',
+    }" :buttonHide="{
+  title: 'Menos filtros',
+  icon: 'fas fa-arrow-alt-circle-up',
+  type: 'warning',
+}">
+      <slot name="content-filter-horizontal"></slot>
       <b-row>
-        <b-col :sm="showTotalPerPage ? 10 : 12">
-          <slot name="content-filter-horizontal"></slot>
-        </b-col>
+        <b-col :sm="showTotalPerPage ? 10 : 12"></b-col>
         <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
-          <SelectStatic
-            title="Mostrar"
-            fieldTarget="totalPerPage"
-            :initialValue="{ content: '10', id: 10 }"
-            :data="[
-              { content: '10', id: 10 },
-              { content: '20', id: 20 },
-              { content: '30', id: 30 },
-              { content: '50', id: 50 },
-              { content: '100', id: 100 },
-            ]"
-          />
+          <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="{ content: '10', id: 10 }" :data="[
+            { content: '10', id: 10 },
+            { content: '20', id: 20 },
+            { content: '30', id: 30 },
+            { content: '50', id: 50 },
+            { content: '100', id: 100 },
+          ]" />
         </b-col>
       </b-row>
     </Collapse>

package/src/component/shared/SelectOption.vue

@@ -4,44 +4,25 @@
       {{ title }}
     </div>
     <div class="alignment" v-for="option in options">
-      <div
-        class="option"
-        :style="'width:' + width + 'px; height:' + height + 'px'"
-        :class="{ selected: option.value == selected }"
-        @click="optionSelected(option.value)"
-      >
-        <div class="div-content text-center">
-          <span :style="'font-size:' + option.titleSize + 'px;'">
+      <div class="option" :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ selected: option.value == selected }" @click="optionSelected(option.value)">
+        <div class="text-center">
+          <span :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
             <i v-if="size === 'small'" :class="option.icon"></i>
             {{ option.title }}
           </span>
-          <div
-            v-if="size === 'medium'"
-            class="icon"
-            :style="'font-size:' + option.iconSize + 'px;'"
-          >
+          <div v-if="size === 'medium'" class="icon" :style="'font-size:' + option.iconSize + 'px;'">
             <i :class="option.icon"></i>
           </div>
         </div>
         <div v-if="option.tipId">
-          <i
-            v-b-tooltip.hover
-            :title="tip(option.tipId)"
-            class="fas fa-question-circle"
-          ></i>
+          <i v-b-tooltip.hover :title="tip(option.tipId)" class="fas fa-question-circle"></i>
         </div>
       </div>
     </div>
     <div class="div-btn" v-if="showButtonNext">
-      <Button
-        _key="btnClickedNext"
-        type="info"
-        title="Avançar"
-        :disabled="selected == null"
-        :classIcon="buttonClassIcon"
-        :size="buttonSize"
-        :clicked="execute"
-      />
+      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null" :classIcon="buttonClassIcon"
+        :size="buttonSize" :clicked="execute" />
     </div>
   </div>
 </template>
@@ -58,14 +39,17 @@ export default {
   props: {
     title: String,
     titleSize: Number,
+    fieldTarget: String,
     buttonSize: String,
     buttonClassIcon: String,
     showButtonNext: { type: Boolean, default: true },
     size: { type: String, default: "medium" },
     alignment: { type: String, default: "text-center" },
+    disabled: Boolean,
     width: Number,
     height: Number,
     options: Array,
+    initialValue: Number,
     value: Number,
     clickedNext: Function,
   },
@@ -74,11 +58,23 @@ export default {
       selected: null,
     };
   },
+  created() {
+    this.selected = this.initialValue;
+  },
   methods: {
-    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("generic", ["addFilter", "removeLoading"]),
     optionSelected(value) {
-      this.selected = value;
-      this.$emit("input", value);
+      if (!this.disabled) {
+        this.selected = value;
+        this.$emit("input", value);
+        this.executeFilter(value);
+      }
+    },
+    executeFilter(value) {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: value };
+        this.addFilter(obj);
+      }
     },
     execute() {
       let self = this;
@@ -96,7 +92,7 @@ export default {
 <style scoped>
 .div-main {
   margin: auto;
-  padding: 10px;
+  padding: 0px;
 }
 
 .option {
@@ -110,6 +106,9 @@ export default {
   margin-bottom: 10px;
   font-size: 16px;
   font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
 }
 
@@ -121,10 +120,6 @@ export default {
   background-color: white;
 }
 
-.div-content {
-  padding: 10px;
-}
-
 .selected {
   background-color: white;
   border-color: #4680a5;
@@ -147,4 +142,9 @@ export default {
 .div-btn {
   margin-top: 10px;
 }
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
 </style>

package/src/component/template/ListViewWithDataHandler.vue

@@ -25,24 +25,16 @@
       </b-row>
       <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
       <div class="fixed-bar-options" v-show="selected.length > 0">
-        <div>
-          <Button
-            v-if="buttonRemove"
-            key="remove"
-            :title="`Remover  ${selected.length}`"
-            type="danger"
-            size="small"
-            :clicked="removeSelected"
-          />
+        <div class="side-by-side">
+          <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
+            :clicked="confirmRemoved" />
+        </div>
+        <div class="side-by-side">
           <slot name="content-buttons-table-header"></slot>
         </div>
       </div>
-      <Table
-        :header="templateList.headerTable"
-        :data="content.data"
-        :showChecks="templateList.showChecks"
-        :dragAndDrop="templateList.dragAndDrop"
-      >
+      <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop">
         <div slot="content-buttons-table">
           <slot name="content-buttons-table"></slot>
         </div>
@@ -50,6 +42,14 @@
     </div>
     <br />
     <Pagination _key="templateList" :totalRecords="content.totalRecords" />
+    <Modal title="Tem certeza que deseja remover?" :width="500" v-show="showModal('confirmRemoved')">
+      <Alert type="warning">
+        <span>
+          Atenção, todos os registros relacionados também serão excluídos/cancelados, esta ação é irreversível!
+        </span>
+      </Alert>
+      <Confirmation :isModal="false" title="Você tem certeza?" type="danger" :confirmed="removeSelected" />
+    </Modal>
   </div>
 </template>
 
@@ -62,6 +62,9 @@ import TableTotalRecords from "../shared/TableTotalRecords.vue";
 import TableTotalization from "../shared/TableTotalization.vue";
 import HorizontalFilter from "../shared/HorizontalFilter.vue";
 import Loading from "../shared/Loading.vue";
+import Confirmation from "@nixweb/nixloc-ui/src/component/shared/Confirmation.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 
 import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
 
@@ -87,6 +90,9 @@ export default {
     HorizontalFilter,
     TableTotalization,
     TableTotalRecords,
+    Confirmation,
+    Alert,
+    Modal,
     Loading,
     FixedBar,
     Button,
@@ -131,8 +137,9 @@ export default {
       "clearedSearch",
       "totalPerPage",
       "selectStatic",
+      "tags"
     ]),
-    ...mapGetters("generic", ["pagination", "isLoading", "event"]),
+    ...mapGetters("generic", ["pagination", "isLoading", "event", "showModal"]),
     paginationKey: function () {
       return this.pagination("templateList");
     },
@@ -145,6 +152,10 @@ export default {
       "addSelected",
       "updatePagination",
       "updateSearch",
+      "addTag",
+      "removeTag",
+      "openModal",
+      "hideModal"
     ]),
     getAll() {
       let obj = {
@@ -171,16 +182,67 @@ export default {
           notNotifyToast: true,
         };
 
-        this.orderAllApi(params).then((response) => {});
+        this.orderAllApi(params).then((response) => { });
       }
     },
+    selectFilter(value) {
+
+      let fieldTarget = value.fieldTarget;
+      let obj = { tag: value.tag, key: fieldTarget, value: value.value };
+
+      if (obj.value != "")
+        this.paramsFilter.push(obj);
+
+      this.convertToObjectAndGetAll();
+    },
+    convertToObjectAndGetAll() {
+      var result = {};
+      for (var i = 0; i < this.paramsFilter.length; i++) {
+        let key = this.paramsFilter[i].key;
+        let value = this.paramsFilter[i].value;
+        let tag = this.paramsFilter[i].tag;
+
+
+        if (key == "period") {
+          result["start"] = value.start;
+          result["end"] = value.end;
+
+        } else {
+          result[key] = value;
+        }
+
+        result["tag"] = tag;
+
+        if (tag) {
+          this.removeTag(key); // para não duplicar
+          this.addTag({ tag: tag, key: key });
+        } else {
+          this.removeTag(key);
+        }
+
+      }
+
+      this.dynamicFilter = result;
+
+      this.updatePagination({
+        key: "templateList",
+        totalPerPage: this.dynamicFilter.totalPerPage,
+      });
+
+      this.getAll();
+    },
+    confirmRemoved() {
+      this.removeLoading(["remove"]);
+      this.openModal("confirmRemoved");
+    },
     removeSelected() {
       let params = {
         url: this.templateList.urlDeleteAllApi,
         selected: this.selected,
       };
       this.deleteAllApi(params).then(() => {
-        this.removeLoading(["remove"]);
+        this.hideModal("confirmRemoved");
+        this.removeLoading(["confirm"]);
         this.addSelected([]);
       });
     },
@@ -192,6 +254,15 @@ export default {
     event: {
       handler(event) {
         if (event.name == "tableDragAndDrop") this.orderAll(event.data);
+
+        if (event.name == "tagRemoved") {
+
+          this.removeTag(event.data);
+          let filter = this.paramsFilter.filter(x => x.key != event.data);
+          this.paramsFilter = filter;
+
+          this.convertToObjectAndGetAll();
+        }
       },
       deep: true,
     },
@@ -227,31 +298,7 @@ export default {
     },
     selectStatic: {
       handler(value) {
-        let fieldTarget = value.fieldTarget;
-        let obj = { key: fieldTarget, value: value.value };
-        this.paramsFilter.push(obj);
-
-        var result = {};
-        for (var i = 0; i < this.paramsFilter.length; i++) {
-          let key = this.paramsFilter[i].key;
-          let value = this.paramsFilter[i].value;
-
-          if (key == "period") {
-            result["start"] = value.inicio;
-            result["end"] = value.fim;
-          } else {
-            result[key] = value;
-          }
-        }
-
-        this.dynamicFilter = result;
-
-        this.updatePagination({
-          key: "templateList",
-          totalPerPage: this.dynamicFilter.totalPerPage,
-        });
-
-        this.getAll();
+        this.selectFilter(value);
       },
       deep: true,
     },

package/src/component/template/ViewTemplateReportPreview.vue

@@ -379,7 +379,7 @@ export default {
         : "$apply=";
       let baseUrl = `${
         this.templateList.urlGetApi
-      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})/$count`;
+      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
       return baseUrl;
     },
     liveTotalRecords() {

package/src/component/template/ViewTemplateWithTable.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <Panel
-      :module="panel.module"
-      :title="panel.title"
-      :showVerticalFilter="panel.showVerticalFilter"
-      :showSearch="panel.showSearch"
-      :showButtons="panel.showButtons"
-    >
+    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
       <div slot="content-filter-vertical">
         <slot name="content-filter-vertical"></slot>
       </div>
@@ -14,11 +9,14 @@
         <slot name="content-buttons"></slot>
       </div>
       <div slot="content-main">
+        <slot name="content-between-search-table"></slot>
+        <div class="div-tag">
+          <div class="side-by-side" v-for="tag in tags">
+            <Tag :_key="tag.key" :title="tag.tag" />
+          </div>
+        </div>
         <Molded>
-          <ListViewWithDataHandler
-            :templateList="templateList"
-            :buttonRemove="buttonRemove"
-          >
+          <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
               <slot name="content-buttons-table-header"></slot>
             </div>
@@ -38,19 +36,26 @@
 <script>
 import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
 import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag.vue";
 
 import ListViewWithDataHandler from "@nixweb/nixloc-ui/src/component/template/ListViewWithDataHandler.vue";
 
+import { mapState } from "vuex";
+
 export default {
   name: "TemplateView",
-  components: { Panel, Molded, ListViewWithDataHandler },
+  components: { Panel, Molded, Tag, ListViewWithDataHandler },
   props: {
     panel: Object,
     templateList: Object,
+    propsParam: Object,
     buttonRemove: {
       type: Boolean,
       default: true,
     },
   },
+  computed: {
+    ...mapState("generic", ["tags"]),
+  },
 };
 </script>

package/src/component/value-objects/Address.vue

@@ -2,92 +2,40 @@
   <div>
     <b-row>
       <b-col xs="12" sm="12" md="12" lg="3" xl="3">
-        <InputText
-          title="CEP"
-          field="zipCode"
-          :formName="formName"
-          :mask="'#####-###'"
-          :maxLength="9"
-          :required="required"
-          :markFormDirty="markFormDirty"
-          v-model="address.zipCode"
-        >
+        <InputText title="CEP" field="zipCode" :formName="formName" :mask="'#####-###'" :maxLength="9"
+          :required="required" :markFormDirty="markFormDirty" v-model="address.zipCode">
           <div class="glyphicon margin-button">
-            <Button
-              _key="searchZipCode"
-              type="success"
-              classIcon="fas fa-search"
-              size="small"
-              :disabled="address.zipCode.length < 9"
-              :clicked="searchZipCode"
-            /></div
-        ></InputText>
+            <Button _key="searchZipCode" type="success" classIcon="fas fa-search" size="small"
+              :disabled="address.zipCode.length < 9" :clicked="searchZipCode" />
+          </div>
+        </InputText>
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-        <InputText
-          title="Endereço"
-          field="street"
-          :formName="formName"
-          :maxLength="150"
-          :required="required"
-          :markFormDirty="markFormDirty"
-          v-model="address.street"
-        />
+        <InputText title="Endereço" field="street" :formName="formName" :maxLength="150" :required="required"
+          :markFormDirty="markFormDirty" v-model="address.street" />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="2" xl="2">
-        <InputText
-          title="Número"
-          field="number"
-          :formName="formName"
-          :maxLength="20"
-          :markFormDirty="markFormDirty"
-          v-model="address.number"
-        />
+        <InputText title="Número" field="number" :formName="formName" :maxLength="20" :markFormDirty="markFormDirty"
+          v-model="address.number" />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="2" xl="2">
-        <InputText
-          title="Complemento"
-          field="complement"
-          :formName="formName"
-          :maxLength="50"
-          :markFormDirty="markFormDirty"
-          v-model="address.complement"
-        />
+        <InputText title="Complemento" field="complement" :formName="formName" :maxLength="50"
+          :markFormDirty="markFormDirty" v-model="address.complement" />
       </b-col>
       <br />
     </b-row>
     <b-row>
       <b-col xs="12" sm="12" md="12" lg="5" xl="5">
-        <InputText
-          title="Bairro"
-          field="province"
-          :formName="formName"
-          :maxLength="100"
-          :required="required"
-          :markFormDirty="markFormDirty"
-          v-model="address.province"
-        /> </b-col
-      ><b-col xs="12" sm="12" md="12" lg="5" xl="5">
-        <InputText
-          title="Cidade"
-          field="city"
-          :formName="formName"
-          :maxLength="100"
-          :required="required"
-          :markFormDirty="markFormDirty"
-          v-model="address.city"
-        />
+        <InputText title="Bairro" field="province" :formName="formName" :maxLength="100" :required="required"
+          :markFormDirty="markFormDirty" v-model="address.province" />
+      </b-col><b-col xs="12" sm="12" md="12" lg="5" xl="5">
+        <InputText title="Cidade" field="city" :formName="formName" :maxLength="100" :required="required"
+          :markFormDirty="markFormDirty" v-model="address.city" />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="2" xl="2">
-        <SelectStatic
-          title="UF"
-          fieldTarget="uf"
-          :required="required"
-          :markFormDirty="markFormDirty"
-          v-model="address.state"
-          :data="states"
-        /> </b-col
-    ></b-row>
+        <SelectStatic title="UF" :formName="formName" field="uf" fieldTarget="uf" :required="required"
+          :markFormDirty="markFormDirty" v-model="address.state" :data="states" />
+      </b-col></b-row>
   </div>
 </template>
 

package/src/store/modules/generic.js

@@ -33,7 +33,8 @@ export default {
         ids: undefined,
         search: { content: "", filter: { content: "Contém", id: "contains" } },
         documentHtml: "",
-        selectStatic: { dateTime: undefined, fieldTarget: undefined, value: undefined },
+        selectStatic: { dateTime: undefined, tag: undefined, fieldTarget: undefined, value: undefined },
+        tags: [],
         executedSearch: false,
         clearedSearch: false,
         methodExecutedApi: undefined,
@@ -308,9 +309,22 @@ export default {
             });
         },
         addFilter: (state, obj) => {
-            state.selectStatic.dateTime = new Date();
-            state.selectStatic.fieldTarget = obj.fieldTarget;
-            state.selectStatic.value = obj.value;
+            setTimeout(function () {
+                state.selectStatic.dateTime = new Date();
+                state.selectStatic.tag = obj.tag;
+                state.selectStatic.fieldTarget = obj.fieldTarget;
+                state.selectStatic.value = obj.value;
+            }, 100);
+        },
+        addTag: (state, tag) => {
+            state.tags.push(tag);
+        },
+        removeTag: (state, key) => {
+            let filter = state.tags.filter(x => x.key != key);
+            state.tags = filter;
+        },
+        cleanTags: (state) => {
+            state.tags = []
         },
     },
     actions: {