@nixweb/nixloc-ui 0.0.254 → 0.0.255

package/package.json

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

package/src/component/forms/DateTime.vue

@@ -10,11 +10,11 @@
       <date-picker lang="pt-br" :disabled="disabled" :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"
+        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>
     </div>
 
@@ -30,7 +30,7 @@
 import Tip from "../shared/Tip";
 import DatePicker from "vue2-datepicker";
 
-import { mapState, mapMutations } from "vuex";
+import { mapState, mapMutations, mapGetters } from "vuex";
 
 export default {
   components: { Tip, DatePicker },
@@ -72,7 +72,7 @@ export default {
       "removeValidation",
       "updateFormDirty",
     ]),
-    ...mapMutations("generic", ["addFilter"]),
+    ...mapMutations("generic", ["addFilter", "removeTag", "addEvent"]),
     validate() {
       this.notifications = [];
 
@@ -91,15 +91,13 @@ export default {
       }
     },
     close() {
-      let obj = {
-        fieldTarget: this.fieldTarget,
-        value: { start: "", end: "" },
-      };
-      this.addFilter(obj);
+      this.removeTag("period");
+      this.addEvent({ name: "tagRemoved", data: "period" });
     },
   },
   computed: {
     ...mapState("validation", ["resetForm", "validations"]),
+    ...mapGetters("generic", ["event"]),
   },
   watch: {
     valueLocal() {
@@ -137,6 +135,15 @@ export default {
       },
       deep: true,
     },
+    event: {
+      handler(event) {
+        if (event.name == "tagRemoved") {
+          this.valueLocal = [];
+
+        }
+      },
+      deep: true,
+    },
   },
 };
 </script>

package/src/component/shared/HorizontalFilter.vue

@@ -5,21 +5,21 @@
       icon: 'fas fa-arrow-alt-circle-down',
       type: 'info',
     }" :buttonHide="{
-  title: 'Menos filtros',
-  icon: 'fas fa-arrow-alt-circle-up',
-  type: 'warning',
-}">
+      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"></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 },
-          ]" v-model="totalPerPage" />
+          <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
+      { content: '10', id: 10 },
+      { content: '20', id: 20 },
+      { content: '30', id: 30 },
+      { content: '50', id: 50 },
+      { content: '100', id: 100 },
+    ]" v-model="totalPerPage" />
         </b-col>
       </b-row>
     </Collapse>
@@ -31,7 +31,7 @@ import Collapse from "./Collapse.vue";
 import SelectStatic from "../forms/SelectStatic.vue";
 import Select from "../forms/Select";
 
-import { mapMutations } from "vuex";
+import { mapMutations, mapState } from "vuex";
 
 export default {
   name: "ListViewWithHandlerData",
@@ -42,10 +42,19 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      initialValue: {}
+    }
+  },
+  created() {
+    this.initialValue = { content: this.paginations.totalPerPage, id: this.paginations.totalPerPage }
+  },
   computed: {
+    ...mapState("generic", ["paginations"]),
     totalPerPage: {
       get() {
-        return this.$store.state.generic.totalPerPage;
+        return this.$store.state.generic.paginations.totalPerPage;
       },
       set(value) {
         this.updateTotalPerPage(value);

package/src/component/shared/Pagination.vue

@@ -1,71 +1,109 @@
 <template>
   <div>
-    <b-pagination v-model="pagination(_key).currentPage" align="right" :hide-goto-end-buttons="true"
-      :per-page="totalPerPage.id" :total-rows="totalRecords">
-      <template #first-text>
-        <i class="fa-regular fa-chevron-left"></i>
-      </template>
-      <template #prev-text>
-        <i class="fa-regular fa-chevron-left"></i>
-      </template>
-      <template #next-text>
-        <i class="fa-regular fa-chevron-right"></i>
-      </template>
-      <template #last-text>
-        <i class="fa-regular fa-chevron-right"></i>
-      </template>
-    </b-pagination>
+    <div class="pagination">
+      <button class="btn-pagination" @click="previousPage" :disabled="currentPage === 1 || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
+      <div class="div-pagination text-center">
+        <span v-if="isLoading('loadingLine')">
+          <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>
+      </div>
+      <button class="btn-pagination" @click="nextPage"
+        :disabled="currentPage === totalPages || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
+    </div>
   </div>
 </template>
-
 <script>
+
 import { mapGetters, mapMutations, mapState } from "vuex";
 
 export default {
-  name: "Pagination",
   props: {
-    _key: String,
     totalRecords: Number,
   },
-  created() {
-    this.addPagination({
-      key: this._key,
+  data() {
+    return {
       currentPage: 1,
-      totalPerPage: 10,
-    });
+      totalPerPage: 10 // Substitua pelo número de registros por página desejado
+    };
+  },
+  created() {
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter)
+      this.currentPage = filter.baseParams.currentPage;
   },
   computed: {
-    ...mapGetters("generic", ["pagination"]),
-    ...mapState("generic", ["totalPerPage"]),
+    ...mapState("generic", ["paginations"]),
+    ...mapGetters("generic", ["isLoading", "getFilterStorage"]),
+    totalPages() {
+      return Math.ceil(this.totalRecords / this.paginations.totalPerPage);
+    },
+    paginatedData() {
+      const startIndex = (this.currentPage - 1) * this.paginations.totalPerPage;
+      const endIndex = Math.min(startIndex + this.paginations.totalPerPage, this.totalRecords);
+      return Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex + 1);
+    }
   },
   methods: {
-    ...mapMutations("generic", ["addPagination"]),
-  },
+    ...mapMutations("generic", ["addEvent"]),
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    },
+    previousPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    }
+  }
 };
 </script>
 
-<style>
-.page-item {
-  font-size: 15px !important;
-  border: 0px solid !important;
-  width: 50px !important;
-  font-weight: 700 !important;
+<style scoped>
+.div-pagination {
+  width: 100px;
+}
+
+.btn-pagination {
+  padding: 5px;
+  cursor: pointer;
+  border: none;
+  min-width: 35px;
+  border-radius: 30px !important;
+  font-size: 13px !important;
+  font-weight: 400;
+  letter-spacing: 1px !important;
+}
+
+
+.pagination {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 10px;
 }
 
-.page-item.active .page-link {
-  z-index: 3 !important;
-  color: black !important;
-  background-color: #ECECEC !important;
-  border-radius: 50px !important;
-  width: 37px !important;
-  height: 37px !important;
+.pagination-button:hover {
+  background-color: #ccc;
 }
 
-.page-link {
-  color: #6c757d !important;
-  border: 0px solid #dee2e6 !important;
-  border-radius: 50px !important;
-  width: 37px !important;
-  height: 37px !important;
+.pagination-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 </style>

package/src/component/shared/Search.vue

@@ -1,46 +1,68 @@
 <template>
-  <b-row>
-    <b-col xs="12" sm="12" md="12" lg="7" xl="6">
-      <div class="margin">
-        <div class="molded">
-          <b-row>
-            <b-col sm="9">
-              <input class="input-search" type="text" name="search" placeholder="Pesquisar ..."
-                @keyup="verifyCleanSearch()" @keyup.enter.prevent="executeSearch()" v-model="search.content" /></b-col>
-            <b-col sm="3">
-              <div class="div-select">
-                <SelectStatic classCss="select-search" fieldTarget="filter" :onlyQuery="true"
-                  :initialValue="{ content: 'Contém', id: 'contains' }" v-model="search.filter" :showBorder="false" :data="[
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="7" xl="6">
+        <div class="margin">
+          <div class="molded">
+            <b-row>
+              <b-col sm="9">
+
+                <input class="input-search" type="text" name="search" placeholder="Pesquisar ..."
+                  @keyup="verifyCleanSearch()" @keyup.enter.prevent="executeSearch()" v-model="search.content" />
+              </b-col>
+              <b-col sm="3">
+                <div class="div-select">
+                  <SelectStatic classCss="select-search" fieldTarget="filter" :onlyQuery="true"
+                    :initialValue="{ content: 'Contém', id: 'contains' }" v-model="search.filter" :showBorder="false"
+                    :data="[
                     { content: 'Contém', id: 'contains' },
                     { content: 'Igual', id: 'equal' },
                   ]" />
-              </div>
-            </b-col>
-          </b-row>
+                </div>
+              </b-col>
+            </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 class="div-filter">
+              <i class="fa-solid fa-filter"></i>
+              Filtro Ativo
+            </div>
+          </div>
         </div>
-      </div>
-    </b-col>
-    <b-col xs="4" sm="4" md="4" lg="4" xl="4">
-      <div class="div-button">
-        <Button _key="btnSearch" type="info" title="Buscar" classIcon="fas fa-search" size="small"
-          :clicked="executeSearch" />
-        <Button _key="btnClean" type="info" title="Limpar" classIcon="fas fa-broom" size="small"
-          :clicked="executeClean" />
-      </div>
-    </b-col>
-  </b-row>
+
+      </b-col>
+      <b-col xs="4" sm="4" md="4" lg="4" xl="4">
+        <div class="div-button">
+          <Button _key="btnSearch" type="info" title="Buscar" classIcon="fas fa-search" size="small"
+            :clicked="executeSearch" />
+          <Button _key="btnClean" type="info" title="Limpar" classIcon="fas fa-broom" size="small"
+            :clicked="executeClean" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 
 <script>
 import Button from "../forms/Button";
 import SelectStatic from "../forms/SelectStatic.vue";
 
-import { mapMutations } from "vuex";
+import { mapMutations, mapGetters, mapState } from "vuex";
 
 export default {
   components: { Button, SelectStatic },
   name: "Search",
+  data() {
+    return {
+      showFilterStorage: false,
+    }
+  },
   computed: {
+    ...mapGetters("generic", ["getFilterStorage"]),
     search: {
       get() {
         return this.$store.state.generic.search;
@@ -116,4 +138,22 @@ input[type="text"]:focus {
   margin-top: -30px;
   margin-right: 5px;
 }
+
+.filter-active {
+  margin-right: 13px;
+  margin-left: -10px;
+  color: #F1BC31;
+}
+
+.div-filter {
+  margin-left: 13px;
+  font-size: 11px;
+  background-color: #F1BC31;
+  color: white;
+  margin-top: 5px;
+  padding-left: 7px;
+  padding-right: 5px;
+  border-radius: 10px;
+  width: 100px;
+}
 </style>

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

@@ -18,9 +18,9 @@
               <b-row>
                 <b-col sm="3">
                   <RadioGroup :options="[
-                    { text: 'e', value: 'and' },
-                    { text: 'ou', value: 'or' },
-                  ]" v-model="andOr" />
+                  { text: 'e', value: 'and' },
+                  { text: 'ou', value: 'or' },
+                ]" v-model="andOr" />
                 </b-col>
               </b-row>
             </div>

package/src/component/template/ListViewWithDataHandler.vue

@@ -115,7 +115,7 @@ export default {
         totalRecords: 0,
       },
       baseParams: {
-        search: undefined,
+        search: "",
         filter: "contains",
         currentPage: 1,
         totalPerPage: 10,
@@ -126,13 +126,11 @@ export default {
     };
   },
   created() {
-    // o carregamento inicial getAll() é feito pela mudança no paginationKey
-  },
-  mounted() {
-    this.updatePagination({
-      key: "templateList",
-      totalPerPage: this.totalPerPage.id,
-    });
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter) {
+      this.updateCurrentPage(filter.baseParams.currentPage);
+    }
+    this.getAll();
   },
   beforeDestroy() {
     let search = { content: "", filter: { content: "Contém", id: "contains" } };
@@ -148,12 +146,11 @@ export default {
       "clearedSearch",
       "totalPerPage",
       "selectStatic",
+      "paginations",
+      "filterStorage",
       "tags"
     ]),
-    ...mapGetters("generic", ["pagination", "isLoading", "event", "showModal"]),
-    paginationKey: function () {
-      return this.pagination("templateList");
-    },
+    ...mapGetters("generic", ["isLoading", "getFilterStorage", "event", "showModal"]),
   },
   methods: {
     ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
@@ -162,30 +159,51 @@ export default {
       "addLoading",
       "removeLoading",
       "addSelected",
-      "updatePagination",
       "updateSearch",
+      "updateCurrentPage",
       "addTag",
       "removeTag",
       "cleanTags",
       "openModal",
-      "hideModal"
+      "hideModal",
+      "addFilterStorage",
+      "removeFilterStorage"
     ]),
     getAll() {
-      this.baseParams.totalPerPage = this.totalPerPage.id
+      this.addLoading("loadingLine");
+      var filter = this.getFilterStorage(this.$route.name);
+
+      let self = this;
+      if (filter) {
+        this.baseParams = filter.baseParams;
+        this.dynamicFilter = filter.dynamicFilter;
+        this.propsParam = filter.propsParam;
+        this.paramsFilter = filter.paramsFilter;
 
-      let obj = {
-        ...this.baseParams,
-        ...this.dynamicFilter,
-        ...this.propsParam,
-      };
-      let params = { url: this.templateList.urlGetApi, obj: obj };
-      this.getApi(params).then((response) => {
-        this.content = response.content;
-        let self = this;
         setTimeout(function () {
-          self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
-        }, 350);
-      });
+          let search = { content: filter.baseParams.search, filter: { content: "Contém", id: "contains" } };
+          self.updateSearch(search);
+          self.updateCurrentPage(filter.baseParams.currentPage);
+          self.generateDynamicFilter();
+        }, 200);
+      }
+
+      setTimeout(function () {
+        let obj = {
+          ...self.baseParams,
+          ...self.dynamicFilter,
+          ...self.propsParam,
+        };
+
+        let params = { url: self.templateList.urlGetApi, obj: obj };
+        console.log(params);
+        self.getApi(params).then((response) => {
+          self.content = response.content;
+          setTimeout(function () {
+            self.removeLoading(["panel", "loadingLine", "btnSearch", "btnClean"]);
+          }, 350);
+        });
+      }, 250);
     },
     orderAll(data) {
       if (this.templateList.urlOrderAllApi) {
@@ -201,26 +219,43 @@ export default {
       }
     },
     selectFilter(value) {
+
       let fieldTarget = value.fieldTarget;
-      let obj = { tag: value.tag, key: fieldTarget, value: value.value };
 
-      if (obj.value != "")
-        this.paramsFilter.push(obj);
+      if (fieldTarget != "totalPerPage") {
+        let obj = { tag: value.tag, key: fieldTarget, value: value.value };
 
+        if (obj.value !== "") {
+          const existingIndex = this.paramsFilter.findIndex(item => item.key === obj.key);
+          if (existingIndex !== -1) {
+            // Se já existe, atualiza o valor
+            this.paramsFilter[existingIndex] = obj;
+          } else {
+            // Se não existe, adiciona ao paramsFilter
+            this.paramsFilter.push(obj);
+          }
+        }
+      } else { this.baseParams.currentPage = 1; }
       this.convertToObjectAndGetAll();
     },
     convertToObjectAndGetAll() {
+      this.generateDynamicFilter();
+      this.getAll();
+    },
+    generateDynamicFilter() {
       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;
 
+          if (value.start)
+            tag = `Período: ${value.start}-${value.end}`;
+
         } else {
           result[key] = value;
         }
@@ -233,17 +268,9 @@ export default {
         } else {
           this.removeTag(key);
         }
-
       }
 
       this.dynamicFilter = result;
-
-      this.updatePagination({
-        key: "templateList",
-        totalPerPage: this.dynamicFilter.totalPerPage,
-      });
-
-      this.getAll();
     },
     confirmRemoved() {
       this.removeLoading(["remove"]);
@@ -263,6 +290,17 @@ export default {
     cleanParams() {
       this.baseParams.currentPage = 1;
     },
+    addStorage() {
+      let obj =
+      {
+        key: this.$route.name,
+        baseParams: this.baseParams,
+        dynamicFilter: this.dynamicFilter,
+        propsParam: this.propsParam,
+        paramsFilter: this.paramsFilter
+      };
+      this.addFilterStorage(obj);
+    }
   },
   watch: {
     event: {
@@ -272,16 +310,23 @@ export default {
         if (event.name == "tagRemoved") {
 
           this.removeTag(event.data);
+
           let filter = this.paramsFilter.filter(x => x.key != event.data);
           this.paramsFilter = filter;
 
-          this.convertToObjectAndGetAll();
+          this.addStorage();
+          this.getAll();
         }
         if (event.name == "getAllListViewWithDataHandler") {
           this.addSelected([]);
           this.getAll();
         }
 
+        if (event.name == "page-click") {
+          this.baseParams.currentPage = event.data;
+          this.addStorage();
+          this.getAll();
+        }
       },
       deep: true,
     },
@@ -296,6 +341,8 @@ export default {
       }
     },
     executedSearch: function () {
+      this.addStorage();
+
       this.baseParams.search = this.search.content;
       if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
       this.cleanParams();
@@ -307,17 +354,28 @@ export default {
       this.cleanParams();
       this.getAll();
     },
-    paginationKey: {
+    selectStatic: {
       handler(value) {
-        this.cleanParams();
-        this.baseParams.currentPage = value.currentPage;
-        this.getAll();
+        this.selectFilter(value);
       },
       deep: true,
     },
-    selectStatic: {
+    dynamicFilter: {
       handler(value) {
-        this.selectFilter(value);
+        this.addStorage();
+      },
+      deep: true,
+    },
+    propsParam: {
+      handler(value) {
+        this.addStorage();
+      },
+      deep: true,
+    },
+    paginations: {
+      handler(value) {
+        this.baseParams.totalPerPage = value.totalPerPage;
+        this.addStorage();
       },
       deep: true,
     },

package/src/store/modules/generic.js

@@ -19,6 +19,7 @@ export default {
         },
         notifications: [],
         pagination: [],
+        paginations: { currentPage: 1, totalPerPage: 10 },
         totalPerPage: { "content": "10", "id": 10 },
         selected: [],
         loading: [],
@@ -65,6 +66,19 @@ export default {
             if (loading) return true;
             return false;
         },
+        getFilterStorage: (state) => (key) => {
+            return state.filterStorage.find(x => x.key === key);
+        },
+        paramsFilterStorage: (state) => (route, key, returnIfNull) => {
+            var filter = state.filterStorage.find(x => x.key === route);
+
+            if (filter) {
+                var obj = filter.paramsFilter.find(x => x.key === key);
+                if (obj) return obj.value;
+                return returnIfNull;
+            }
+            return returnIfNull;
+        },
         pagination: (state) => (key) => {
             return state.pagination.find(obj => {
                 return obj.key === key
@@ -243,8 +257,11 @@ export default {
         clearedSearch: (state) => {
             state.clearedSearch = state.clearedSearch = !state.clearedSearch
         },
+        updateCurrentPage: (state, value) => {
+            state.paginations.currentPage = value;
+        },
         updateTotalPerPage: (state, value) => {
-            state.totalPerPage = value;
+            state.paginations.totalPerPage = value.id;
         },
         addSelected: (state, selected) => {
             state.selected = selected;
@@ -268,7 +285,6 @@ export default {
                 state.methodExecutedApi = "";
             }, 100);
         },
-
         addLoading: (state, key) => {
             state.loading.push(key);
         },
@@ -280,15 +296,6 @@ export default {
                 state.loading = filter;
             });
         },
-        addPagination: (state, pagination) => {
-            state.pagination.push(pagination);
-        },
-        updatePagination: (state, pagination) => {
-            state.pagination.forEach(function (obj) {
-                if (obj.key == pagination.key)
-                    obj.totalPerPage = pagination.totalPerPage;
-            });
-        },
         updateDocumentHtml: (state, value) => {
             state.documentHtml = value;
         },
@@ -336,6 +343,23 @@ export default {
         cleanTags: (state) => {
             state.tags = []
         },
+        openModal: (state, name) => {
+            state.modal.name = name;
+            state.modal.open = true;
+        },
+        addFilterStorage: (state, obj) => {
+            const index = state.filterStorage.findIndex(x => x.key === obj.key);
+            if (index !== -1) {
+                state.filterStorage[index] = obj;
+
+            } else {
+                state.filterStorage.push(obj);
+            }
+        },
+        removeFilterStorage: (state, key) => {
+            let filter = state.filterStorage.filter(x => x.key != key);
+            state.filterStorage = filter;
+        },
     },
     actions: {
         postApi: async function (context, params) {
@@ -419,8 +443,6 @@ export default {
             })
                 .then((response) => {
 
-                    console.log(response);
-
                     if (response.data.success) {
                         context.commit('addMethodExecutedApi', params.methodExecutedApi);
                         context.commit('removeNotificarions');