@nixweb/nixloc-ui 0.0.269 → 0.0.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.269",
+  "version": "0.0.271",
   "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="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
+      <i class="div-icon-btn" :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>
@@ -64,6 +64,10 @@ export default {
   margin-left: 5px;
 }
 
+.div-icon-btn {
+  margin-right: 3px;
+}
+
 .title {
   margin: 2px;
 }

package/src/component/forms/CheckboxServer.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div>
+      <div class="div-btn side-by-side">
+        <Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
+          :title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
+          classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
+      </div>
+      <div v-show="show" class="side-by-side">
+        <div class="input-container">
+          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
+        </div>
+      </div>
+
+    </div>
+    <div v-show="show">
+      <div class="div-loading">
+        <Loading type="line" :center="false" v-show="loading" />
+      </div>
+      <ScrollBar :minHeight="0" :maxHeight="200">
+        <div class="div-check">
+          <div class="div-items" v-for="item in data" :key="item.id">
+            <b-form-checkbox v-model="item.selected" @change="add(item)">
+              <span class="title">{{ item.content }}</span>
+            </b-form-checkbox>
+          </div>
+        </div>
+        <div 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" />
+          </div>
+        </div>
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "CheckboxServer",
+  components: {
+    Button, ScrollBar, Loading, InputText
+  },
+  props: {
+    title: String,
+    url: String,
+    propsParams: Object,
+    value: Array,
+  },
+  data() {
+    return {
+      show: false,
+      loading: true,
+      data: [],
+      selected: [],
+      totalRecords: 0,
+      baseParams: {
+        search: "",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+    };
+  },
+  mounted() {
+    this.getAll();
+
+    if (this.value.length > 0) {
+      this.selected = this.value;
+    }
+
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    quantitySelected() {
+      return this.selected.length > 0 ? this.selected.length : 0;
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      let obj = { ...this.baseParams, ...this.propsParams };
+      let params = { url: this.url, obj: obj };
+      this.loading = true;
+      this.getApi(params).then((response) => {
+        this.totalRecords = response.content.totalRecords;
+        if (this.baseParams.currentPage == 1) {
+          this.data = [];
+        }
+
+        let self = this;
+        response.content.data.forEach(item => {
+          self.data.push(item);
+        });
+
+        this.markSelected();
+
+        this.loading = false;
+        this.removeLoading(["loadingMore"]);
+      });
+    },
+    loadingMore() {
+      this.baseParams.currentPage++;
+      this.getAll();
+    },
+    add(item) {
+      const index = this.selected.indexOf(item.content);
+      if (index > -1) {
+        this.selected.splice(index, 1);
+      } else {
+        this.selected.push(item.content);
+      }
+    },
+    showHide() {
+      this.show = this.show == true ? false : true;
+      this.removeLoading(["btnShow"]);
+    },
+    markSelected() {
+      this.data.forEach(item => {
+        if (this.selected.includes(item.content)) {
+          item.selected = true;
+        }
+      });
+    }
+  },
+  watch: {
+    selected: {
+      handler(value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+    'baseParams.search': {
+      handler(value) {
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-check {
+  margin: 10px;
+}
+
+.div-items {
+  margin-left: 10px;
+}
+
+.div-loading {
+  margin-top: 3px;
+}
+
+.div-btn {
+  padding-bottom: 5px;
+}
+
+.div-icon {
+  margin-left: 10px;
+  font-size: 16px;
+  color: green;
+  cursor: pointer;
+}
+
+.input-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+input {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border: 1px solid #E5E4E8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 300px;
+}
+</style>

package/src/component/shared/DocumentPublic.vue

@@ -23,11 +23,9 @@ export default {
 <style scoped>
 .main {
   background-color: white;
-  min-height: 900px;
 }
 
 .content {
-  width: 1024px;
   margin: auto;
 }
 </style>

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="#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">
@@ -18,14 +12,12 @@
                     <b-row>
                         <b-col sm="11">
                             <CheckboxGroup v-if="item.type == 'options'" :title="item.title" :options="item.options"
-                                v-model="item.value" />
-
+                                :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,8 +28,11 @@
                                     </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>
                         <b-col sm="1">
@@ -49,7 +44,7 @@
                 </div>
             </div>
             <div class="text-center">
-                <Button _key="btnApply" title="Aplicar" backGroundColor="#156EBE" color="white" size="small"
+                <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
                     :clicked="apply" />
             </div>
         </div>
@@ -63,23 +58,30 @@ 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 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",
     props: ["filters", "value"],
-    components: { SelectStatic, Button, CheckboxGroup, InputText, ScrollBar, DateTime, InputDecimal },
+    components: { SelectStatic, Button, CheckboxGroup, CheckboxServer, InputText, ScrollBar, DateTime, InputDecimal },
     data() {
         return {
             filterSelected: {},
             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 => {
@@ -91,6 +93,7 @@ export default {
                         options: filter.options,
                         title: filter.title,
                         type: filter.type,
+                        url: filter.url,
                         value: filter.value
                     });
             });
@@ -107,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);
@@ -134,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,
         },
@@ -168,10 +183,16 @@ export default {
     margin-bottom: 10px;
 }
 
+
 .icon-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    width: 30px;
+    cursor: pointer;
     color: #F0134D;
     cursor: pointer;
-    margin-top: 15px;
     font-size: 17px;
 }
 </style>

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,13 +10,10 @@
       </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="propsParam" :isFilterStorage="true"
+          <ListViewWithDataHandler :templateList="templateList"
+            :propsParam="{ stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
             :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
               <slot name="content-buttons-table-header"></slot>
@@ -37,26 +34,28 @@
 <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) {