@nixweb/nixloc-ui 0.0.173 → 0.0.174

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.173",
+  "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">
@@ -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/RadioGroup.vue

@@ -13,7 +13,7 @@
 <script>
 import Tip from "../shared/Tip.vue";
 
-import { mapMutations } from "vuex";
+import { mapMutations, mapGetters } from "vuex";
 
 export default {
   components: { Tip },
@@ -35,6 +35,9 @@ export default {
       selected: this.value,
     };
   },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+  },
   methods: {
     ...mapMutations("validation", ["updateFormDirty"]),
     ...mapMutations("generic", ["addFilter"]),
@@ -49,10 +52,19 @@ export default {
       if (this.markFormDirty) this.updateFormDirty(true);
       if (this.changed) this.changed();
       if (this.fieldTarget) {
-        let obj = { fieldTarget: this.fieldTarget, value: this.selected };
+        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,
+    },
   },
 };
 </script>

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/SelectOption.vue

@@ -58,6 +58,9 @@ export default {
       selected: null,
     };
   },
+  created() {
+    this.selected = this.initialValue;
+  },
   methods: {
     ...mapMutations("generic", ["addFilter", "removeLoading"]),
     optionSelected(value) {

package/src/component/template/ListViewWithDataHandler.vue

@@ -25,9 +25,11 @@
       </b-row>
       <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
       <div class="fixed-bar-options" v-show="selected.length > 0">
-        <div>
+        <div class="side-by-side">
           <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
-            :clicked="removeSelected" />
+            :clicked="confirmRemoved" />
+        </div>
+        <div class="side-by-side">
           <slot name="content-buttons-table-header"></slot>
         </div>
       </div>
@@ -40,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>
 
@@ -52,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";
 
@@ -77,6 +90,9 @@ export default {
     HorizontalFilter,
     TableTotalization,
     TableTotalRecords,
+    Confirmation,
+    Alert,
+    Modal,
     Loading,
     FixedBar,
     Button,
@@ -121,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");
     },
@@ -135,6 +152,10 @@ export default {
       "addSelected",
       "updatePagination",
       "updateSearch",
+      "addTag",
+      "removeTag",
+      "openModal",
+      "hideModal"
     ]),
     getAll() {
       let obj = {
@@ -165,21 +186,40 @@ export default {
       }
     },
     selectFilter(value) {
+
       let fieldTarget = value.fieldTarget;
-      let obj = { key: fieldTarget, value: value.value };
-      this.paramsFilter.push(obj);
+      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;
@@ -191,13 +231,18 @@ export default {
 
       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([]);
       });
     },
@@ -209,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,
     },

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

@@ -10,6 +10,11 @@
       </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" :propsParam="propsParam" :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
@@ -31,12 +36,15 @@
 <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,
@@ -46,5 +54,8 @@ export default {
       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,
@@ -310,10 +311,21 @@ export default {
         addFilter: (state, obj) => {
             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: {
         postApi: async function (context, params) {