@nixweb/nixloc-ui 0.0.267 → 0.0.269

package/package.json

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

package/src/component/forms/Button.vue

@@ -12,7 +12,7 @@
     danger: type === 'danger',
     disabled: disabled,
   }" :disabled="disabled" @click="execute()">
-      <i class="title" :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
+      <i :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
       <span v-if="!isLoading(this._key)">{{ title }}</span>
       <vue-loading v-if="isLoading(this._key)" type="bubbles" color="#fff"
         :size="{ width: '26px', height: '26px' }"></vue-loading>

package/src/component/forms/DateTime.vue

@@ -83,11 +83,13 @@ export default {
     },
     executeConfirm() {
       if (this.range) {
-        let obj = {
-          fieldTarget: this.fieldTarget,
-          value: { start: this.valueLocal[0], end: this.valueLocal[1] },
-        };
-        this.addFilter(obj);
+        if (this.fieldTarget) {
+          let obj = {
+            fieldTarget: this.fieldTarget,
+            value: { start: this.valueLocal[0], end: this.valueLocal[1] },
+          };
+          this.addFilter(obj);
+        }
       }
     },
     close() {

package/src/component/forms/IncrementDecrement.vue

@@ -22,6 +22,7 @@ import { mapMutations } from "vuex";
 export default {
   name: "IncrementDecrement",
   props: [
+    "name",
     "title",
     "initialValue",
     "value",
@@ -80,7 +81,7 @@ export default {
         if (this.triggerEvent)
           this.addEvent({
             name: "updateIncrementDecrement",
-            data: this.number,
+            data: { name: this.name, value: this.number },
           });
       },
       deep: true,

package/src/component/forms/InputDecimalDiscount.vue

@@ -4,16 +4,16 @@
       :precision="precision" field="discount" :required="required" :formName="formName" _style="color:red;"
       :disabled="disabled" v-model="discount.discount">
       <div class="glyphicon margin-button">
-        <Button _key="btnDiscount" backGroundColor="#F36944" color="white" classIcon="fa-solid fa-brazilian-real-sign"
-          size="small" :disabled="disabled" :clicked="change" />
+        <Button _key="btnDiscount" type="danger" classIcon="fa-solid fa-brazilian-real-sign" size="small"
+          :disabled="disabled" :clicked="change" />
       </div>
     </InputDecimal>
     <InputNumber v-if="discount.discountByPercentage" :markFormDirty="markFormDirty" :title="title" field="discount"
       :formName="formName" :required="false" :disabled="disabled" _style="color:red;" :maxLength="5" type="float"
       v-model="discount.discount">
       <div class="glyphicon margin-button">
-        <Button _key="btnDiscount" backGroundColor="#F36944" color="white" :disabled="disabled"
-          classIcon="fa-solid fa-percent" size="small" :clicked="change" />
+        <Button _key="btnDiscount" type="danger" :disabled="disabled" classIcon="fa-solid fa-percent" size="small"
+          :clicked="change" />
       </div>
     </InputNumber>
   </div>

package/src/component/forms/TextArea.vue

@@ -9,7 +9,8 @@
       <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
 
       <textarea :disabled="disabled" rows="4" cols="50" type="text" :placeholder="placeholder" v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)" :class="{ 'is-invalid': notifications.length > 0 && formDirty }">
+        v-on:input="$emit('input', $event.target.value)"
+        :class="{ 'is-invalid': notifications.length > 0 && formDirty }">
       </textarea>
     </div>
 
@@ -119,7 +120,7 @@ textarea {
   font-size: 14px;
 }
 
-textarea:disabled{
+textarea:disabled {
   background-color: white !important;
   opacity: 0.5;
 }

package/src/component/layout/Tag.vue

@@ -19,14 +19,23 @@ export default {
     value: String,
     eventName: String,
     eventData: Object,
+    clickedRemove: Function,
+    clickedBody: Function,
+    params: Object,
     showButtonClose: {
       type: Boolean,
       default: true
+    },
+    tagRemoved: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
     execute() {
+      if (this.clickedBody) this.clickedBody(this.params);
+
       if (this.eventName)
         this.addEvent({
           nome: this.eventName,
@@ -34,10 +43,14 @@ export default {
         });
     },
     remove() {
-      this.addEvent({
-        name: "tagRemoved",
-        data: this.eventData ? this.eventData : this._key,
-      });
+      if (this.clickedRemove) this.clickedRemove(this.params);
+
+      if (this.tagRemoved) {
+        this.addEvent({
+          name: "tagRemoved",
+          data: this.eventData ? this.eventData : this._key,
+        });
+      }
     },
   },
 };

package/src/component/shared/Pagination.vue

@@ -9,11 +9,8 @@
           <vue-loading type="bubbles" color="#FCA944" :size="{ width: '26px', height: '26px' }"></vue-loading>
         </span>
         <span v-else>
-          <div v-if="currentPage < totalPages">
-            {{ currentPage }} de {{ totalPages }}
-          </div>
-          <div v-else>
-            1 de 1
+          <div>
+            <span class="title"> {{ currentPage }} de {{ totalPages }}</span>
           </div>
         </span>
       </div>

package/src/component/shared/filter-builder/FilterBuilder.vue

@@ -0,0 +1,177 @@
+<template>
+    <div>
+        <b-row>
+            <b-col sm="9">
+                <SelectStatic title="Tipo" :onlyQuery="true" :data="options" :markFormDirty="true"
+                    v-model="filterSelected" />
+            </b-col>
+            <b-col sm="3">
+                <div class="div-btn">
+                    <Button _key="btnAddFilter" backGroundColor="#156EBE" color="white"
+                        classIcon="fa-regular fa-plus-large" size="small" :clicked="add" />
+                </div>
+            </b-col>
+        </b-row>
+        <div>
+            <div v-for="item in filtersAdded">
+                <div class="molded">
+                    <b-row>
+                        <b-col sm="11">
+                            <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
+                                v-model="item.value" />
+
+                            <div class="div-date">
+                                <DateTime v-if="item.type == 'date' || item.type == 'dateRange'" :title="item.title"
+                                    format="DD/MM/YYYY" type="date" :range="true" :confirm="true" confirmText="Ok"
+                                    placeholder v-model="item.value" />
+                            </div>
+
+                            <div v-if="item.type == 'decimal'">
+                                <b-row>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Inicial" v-model="item.valueStart" />
+                                    </b-col>
+                                    <b-col sm="6">
+                                        <InputDecimal title="Valor Final" v-model="item.valueEnd" />
+                                    </b-col>
+                                </b-row>
+                            </div>
+
+
+                            <InputText v-if="item.type == 'text'" :title="item.title" v-model="item.value" />
+                        </b-col>
+                        <b-col sm="1">
+                            <div class="icon-remove" @click="removeItem(item.field)">
+                                <i class="fas fa-times"></i>
+                            </div>
+                        </b-col>
+                    </b-row>
+                </div>
+            </div>
+            <div class="text-center">
+                <Button _key="btnApply" title="Aplicar" backGroundColor="#156EBE" color="white" size="small"
+                    :clicked="apply" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputDecimal from "@nixweb/nixloc-ui/src/component/forms/InputDecimal";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+    name: "FilterBuilder",
+    props: ["filters", "value"],
+    components: { SelectStatic, Button, CheckboxGroup, InputText, ScrollBar, DateTime, InputDecimal },
+    data() {
+        return {
+            filterSelected: {},
+            filtersAdded: [],
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        options() {
+            let options = [];
+            this.filters.forEach(filter => {
+                options.push(
+                    {
+                        id: filter.type,
+                        content: filter.title,
+                        field: filter.field,
+                        options: filter.options,
+                        title: filter.title,
+                        type: filter.type,
+                        value: filter.value
+                    });
+            });
+            return options;
+        },
+        filterFinal() {
+            return this.filtersAdded.map(item => ({
+                title: item.title,
+                field: item.field,
+                type: item.type,
+                originalValue: item.value,
+                value: item.type == "decimal" ? [item.valueStart, item.valueEnd].join(',') : Array.isArray(item.value) ? item.value.join(',') : item.value
+            }));
+        },
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
+        add() {
+            if (this.filterSelected.id && !this.contentExists(this.filterSelected.field)) {
+                this.filtersAdded.push(this.filterSelected);
+                this.filterSelected = { content: "", id: "" };
+            }
+            this.removeLoading(["btnAddFilter"]);
+        },
+        contentExists(field) {
+            return this.filtersAdded.some(item => item.field === field);
+        },
+        removeItem(field) {
+            this.filtersAdded = this.filtersAdded.filter(item => item.field !== field);
+        },
+        apply() {
+            this.addEvent({ name: "stringFilter", data: this.filterFinal });
+            this.hideModal();
+            this.removeLoading(["btnApply"]);
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "tagFilterRemove") {
+                    this.removeItem(event.data.field);
+                    this.addEvent({ name: "stringFilter" });
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+            },
+            deep: true,
+        },
+    },
+}
+
+
+</script>
+
+<style scoped>
+.div-btn {
+    margin-top: 38px;
+}
+
+.div-date {
+    width: 300px;
+}
+
+.molded {
+    border: 1px solid #e8eaed;
+    background-color: white;
+    border-radius: 8px !important;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    margin-bottom: 10px;
+}
+
+.icon-remove {
+    color: #F0134D;
+    cursor: pointer;
+    margin-top: 15px;
+    font-size: 17px;
+}
+</style>

package/src/component/shared/filter-builder/FilterQuery.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="div-main">
+        <div>
+            <Button _key="btnFilter" tooltip="Aplicar Filtros" color="black" backGroundColor="#F0F0F0" title="Filtros"
+                classIcon="fa-sharp fa-solid fa-filters" size="small" :clicked="openFilter" />
+        </div>
+
+        <div class="side-by-side" v-for="item in tags">
+            <div class="side-by-side div-tag">
+                <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag" :clickedBody="openFilter"
+                    :clickedRemove="removeTag" :title="item.title" :value="item.value" :tagRemoved="false" />
+            </div>
+        </div>
+
+        <Modal title="Filtros" :width="700" :height="750" v-if="showModal('filter')">
+            <FilterBuilder :filters="filters" v-model="filterFinal" />
+        </Modal>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import FilterBuilder from "./FilterBuilder.vue";
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
+
+import { mapGetters, mapMutations } from "vuex";
+
+
+export default {
+    name: "FilterQuery",
+    props: ["filters", "value"],
+    components: {
+        Button, Modal, FilterBuilder, Tag
+    },
+    data() {
+        return {
+            filterFinal: [],
+            tags: [],
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["showModal", "event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading"]),
+        openFilter() {
+            this.openModal("filter");
+            this.removeLoading(["btnFilter"]);
+        },
+        removeTag(params) {
+            this.tags = this.tags.filter(item => item.field !== params.field);
+            this.addEvent({ name: "tagFilterRemove", data: params });
+        }
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "stringFilter") {
+                    var data = JSON.stringify(event.data);
+                    this.tags = JSON.parse(data);
+                }
+            },
+            deep: true,
+        },
+        filterFinal: {
+            handler(filterFinal) {
+                this.$emit("input", filterFinal);
+            },
+            deep: true,
+        },
+    },
+
+}
+
+</script>.
+<style>
+.div-main {
+    margin-bottom: 20px;
+}
+
+.div-tag {
+    margin-left: 2px;
+}
+</style>

package/src/component/shared/query-builder/Tags.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
     <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
-      <Tag
-        :eventName="eventName"
-        :eventData="tag"
-        :title="tag.title"
-        :value="tag.value"
-      />
+      <Tag :eventName="eventName" :eventData="tag" :title="tag.title" :value="tag.value" />
     </div>
   </div>
 </template>

package/src/component/template/ListViewWithDataHandler.vue

@@ -312,6 +312,10 @@ export default {
       handler(event) {
         if (event.name == "tableDragAndDrop") this.orderAll(event.data);
 
+        if (event.name == "stringFilter") {
+          this.getAll();
+        }
+
         if (event.name == "tagRemoved") {
 
           this.removeTag(event.data);