@nixweb/nixloc-ui 0.0.270 → 0.0.272

package/package.json

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

package/src/component/forms/CheckboxServer.vue

@@ -71,6 +71,11 @@ export default {
   },
   mounted() {
     this.getAll();
+
+    if (this.value.length > 0) {
+      this.selected = this.value;
+    }
+
   },
   computed: {
     ...mapGetters("generic", ["showModal", "event"]),

package/src/component/shared/Search.vue

@@ -22,10 +22,8 @@
             </b-row>
           </div>
         </div>
-        <div v-if="getFilterStorage($route.name)">
-          <div v-if="getFilterStorage($route.name).paramsFilter.length !== 0
-                    || getFilterStorage($route.name).baseParams.search !== ''
-                    || getFilterStorage($route.name).baseParams.currentPage !== 1">
+        <div v-if="hasActiveFilter">
+          <div>
             <div class="div-filter">
               Filtro Ativo
               <span class="icon-close" @click="removeFilter()">
@@ -34,7 +32,6 @@
             </div>
           </div>
         </div>
-
       </b-col>
       <b-col xs="4" sm="4" md="4" lg="4" xl="4">
         <div class="div-button">
@@ -63,6 +60,7 @@ export default {
     }
   },
   computed: {
+    ...mapState("generic", ["queryTags"]),
     ...mapGetters("generic", ["getFilterStorage"]),
     search: {
       get() {
@@ -72,6 +70,14 @@ export default {
         this.updateSearch(value);
       },
     },
+    hasActiveFilter() {
+      const filterStorage = this.getFilterStorage(this.$route.name);
+      return filterStorage && (
+        filterStorage.baseParams.search !== '' ||
+        filterStorage.baseParams.currentPage !== 1 ||
+        this.queryTags.length > 0
+      );
+    },
   },
   methods: {
     ...mapMutations("generic", [
@@ -93,6 +99,7 @@ export default {
     },
     removeFilter() {
       this.addEvent({ name: "filterStorageRemoved" });
+      this.executeClean();
     }
   },
 };

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

@@ -5,12 +5,6 @@
                 <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="#017AFF" color="white"
-                        classIcon="fa-regular fa-plus-large" size="small" :clicked="add" />
-                </div>
-            </b-col>
         </b-row>
         <div>
             <div v-for="item in filtersAdded">
@@ -19,13 +13,11 @@
                         <b-col sm="11">
                             <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
                                 :initialValue="item.value" 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">
@@ -36,12 +28,10 @@
                                     </b-col>
                                 </b-row>
                             </div>
-
                             <div v-if="item.type == 'multiOptions'">
                                 <div class="div-multi-options">
                                     <CheckboxServer :title="item.title" :url="item.url" v-model="item.value" />
                                 </div>
-
                             </div>
                             <InputText v-if="item.type == 'text'" :title="item.title" v-model="item.value" />
                         </b-col>
@@ -72,7 +62,7 @@ import CheckboxServer from "@nixweb/nixloc-ui/src/component/forms/CheckboxServer
 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";
+import { mapMutations, mapState, mapGetters } from "vuex";
 
 export default {
     name: "FilterBuilder",
@@ -81,14 +71,17 @@ export default {
     data() {
         return {
             filterSelected: {},
-            filtersAdded: [{ "id": "dateRange", "content": "Período de Locação", "field": "PeriodRent", "title": "Período de Locação", "type": "dateRange", "value": ["06/08/2024", "31/08/2024"] }, { "id": "options", "content": "Faturamento", "field": "StatusInvoiceName", "options": [{ "text": "Faturado", "value": "Faturado" }, { "text": "Parcial", "value": "Parcial" }, { "text": "Não Faturado", "value": "Não Faturado" }, { "text": "Não Fatura", "value": "Não Fatura" }], "title": "Faturamento", "type": "options", "value": ["Parcial", "Não Faturado"] }, { "id": "decimal", "content": "Valor", "field": "TotalValue", "title": "Valor", "type": "decimal", "valueStart": 100, "valueEnd": 200 }],
+            filtersAdded: [],
         }
     },
     mounted() {
+        var filterStorage = this.getQueryFilter(this.$route.name);
+        this.filtersAdded = filterStorage.filtersAdded;
         this.addEvent({ name: "stringFilter", data: this.filterFinal });
     },
     computed: {
-        ...mapGetters("generic", ["event"]),
+        ...mapGetters("generic", ["event", "getQueryFilter"]),
+        ...mapState("generic", ["filterQuery"]),
         options() {
             let options = [];
             this.filters.forEach(filter => {
@@ -117,7 +110,7 @@ export default {
         },
     },
     methods: {
-        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading", "addFilterQuery"]),
         add() {
             if (this.filterSelected.id && !this.contentExists(this.filterSelected.field)) {
                 this.filtersAdded.push(this.filterSelected);
@@ -144,12 +137,24 @@ export default {
                     this.removeItem(event.data.field);
                     this.addEvent({ name: "stringFilter" });
                 }
+
+                if (event.name == "filterStorageRemoved") {
+                    this.filtersAdded = [];
+                    this.addEvent({ name: "stringFilter", data: this.filterFinal });
+                }
             },
             deep: true,
         },
         filterFinal: {
             handler(filterFinal) {
                 this.$emit("input", filterFinal);
+                this.addFilterQuery({ routeName: this.$route.name, filtersAdded: this.filtersAdded });
+            },
+            deep: true,
+        },
+        filterSelected: {
+            handler(filterSelected) {
+                this.add();
             },
             deep: true,
         },

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

@@ -44,7 +44,7 @@ export default {
         ...mapGetters("generic", ["showModal", "event"]),
     },
     methods: {
-        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading"]),
+        ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags"]),
         openFilter() {
             this.openModal("filter");
             this.removeLoading(["btnFilter"]);
@@ -70,6 +70,12 @@ export default {
             },
             deep: true,
         },
+        tags: {
+            handler(tags) {
+                this.updateQueryTags(tags);
+            },
+            deep: true,
+        },
     },
 
 }

package/src/component/template/ViewTemplateWithTable.vue

@@ -10,12 +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" :disabled="propsParam.showAll" :title="tag.tag" />
-          </div>
-        </div>
+        <!--  <FilterQuery v-if="filters.length > 0" :filters="filters" v-model="stringFilter" />-->
         <Molded>
+          <!-- <ListViewWithDataHandler :templateList="templateList"
+            :propsParam="{ stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
+            :buttonRemove="buttonRemove">-->
           <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :isFilterStorage="true"
             :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
@@ -37,26 +36,29 @@
 <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";
+import FilterQuery from '@nixweb/nixloc-ui/src/component/shared/filter-builder/FilterQuery.vue'
 
 export default {
   name: "TemplateView",
-  components: { Panel, Molded, Tag, ListViewWithDataHandler },
+  components: { Panel, Molded, ListViewWithDataHandler, FilterQuery },
   props: {
     panel: Object,
     templateList: Object,
     propsParam: Object,
+    filters: {
+      type: Array,
+      default: [],
+    },
     buttonRemove: {
       type: Boolean,
       default: true,
     },
   },
-  computed: {
-    ...mapState("generic", ["tags"]),
+  data() {
+    return {
+      stringFilter: [],
+    }
   },
 };
 </script>

package/src/store/modules/generic.js

@@ -41,6 +41,8 @@ export default {
         clearedSearch: false,
         methodExecutedApi: undefined,
         filterStorage: [],
+        filterQuery: [],
+        queryTags: [],
     },
     getters: {
         tip: (state) => (tipId) => {
@@ -69,6 +71,9 @@ export default {
         getFilterStorage: (state) => (key) => {
             return state.filterStorage.find(x => x.key === key);
         },
+        getQueryFilter: (state) => (routeName) => {
+            return state.filterQuery.find(x => x.routeName === routeName);
+        },
         paramsFilterStorage: (state) => (route, key, returnIfNull) => {
             var filter = state.filterStorage.find(x => x.key === route);
 
@@ -360,6 +365,19 @@ export default {
             let filter = state.filterStorage.filter(x => x.key != key);
             state.filterStorage = filter;
         },
+        addFilterQuery: (state, obj) => {
+            // função abaixo é para não deixar duplicidade
+            const index = state.filterQuery.findIndex(x => x.routeName === obj.routeName);
+            if (index !== -1) {
+                state.filterQuery[index] = obj;
+
+            } else {
+                state.filterQuery.push(obj);
+            }
+        },
+        updateQueryTags: (state, tags) => {
+            state.queryTags = tags;
+        },
     },
     actions: {
         postApi: async function (context, params) {