@nixweb/nixloc-ui 0.0.128 → 0.0.129

package/src/component/shared/query-builder/utilities.js

@@ -1,22 +1,22 @@
-/**
- * Returns a depply cloned object without reference.
- * Copied from Vue MultiSelect and Vuex.
- * @type {Object}
- */
-const deepClone = function (obj) {
-  if (Array.isArray(obj)) {
-    return obj.map(deepClone)
-  } else if (obj && typeof obj === 'object') {
-    var cloned = {}
-    var keys = Object.keys(obj)
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
-      cloned[key] = deepClone(obj[key])
-    }
-    return cloned
-  } else {
-    return obj
-  }
-}
-
+/**
+ * Returns a depply cloned object without reference.
+ * Copied from Vue MultiSelect and Vuex.
+ * @type {Object}
+ */
+const deepClone = function (obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone)
+  } else if (obj && typeof obj === 'object') {
+    var cloned = {}
+    var keys = Object.keys(obj)
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+      cloned[key] = deepClone(obj[key])
+    }
+    return cloned
+  } else {
+    return obj
+  }
+}
+
 export default deepClone;

package/src/component/template/ListViewWithDataHandler.vue

@@ -1,260 +1,260 @@
-<template>
-  <div>
-    <div :class="{ 'g-div-molded': showMolded }">
-      <b-row>
-        <b-col sm="12">
-          <div>
-            <HorizontalFilter v-if="showHorizontalFilter">
-              <div slot="content-filter-horizontal">
-                <slot name="content-filter-horizontal"></slot>
-              </div>
-            </HorizontalFilter>
-          </div>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col sm="6">
-          <div v-if="templateList.dragAndDrop">
-            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
-          </div>
-          <TableTotalization :totalization="content.totalization" />
-        </b-col>
-        <b-col sm="6">
-          <TableTotalRecords :totalRecords="content.totalRecords" />
-        </b-col>
-      </b-row>
-      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
-      <FixedBar posicao="topo" v-show="selected.length > 0">
-        <div>
-          <Button
-            v-if="buttonRemove"
-            key="remove"
-            :title="`Remover  ${selected.length}`"
-            type="danger"
-            size="small"
-            :clicked="removeSelected"
-          />
-          <slot name="content-buttons-table-header"></slot>
-        </div>
-      </FixedBar>
-      <Table
-        :header="templateList.headerTable"
-        :data="content.data"
-        :showChecks="templateList.showChecks"
-        :dragAndDrop="templateList.dragAndDrop"
-      >
-        <div slot="content-buttons-table">
-          <slot name="content-buttons-table"></slot>
-        </div>
-      </Table>
-    </div>
-    <br />
-    <Pagination _key="templateList" :totalRecords="content.totalRecords" />
-  </div>
-</template>
-
-<script>
-import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
-import Table from "../shared/Table.vue";
-import Button from "../forms/Button.vue";
-import FixedBar from "../layout/FixedBar.vue";
-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 { mapState, mapGetters, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "ListViewWithDataHandler",
-  props: {
-    templateList: Object,
-    propsParam: Object,
-    showMolded: {
-      type: Boolean,
-      default: true,
-    },
-    showHorizontalFilter: {
-      type: Boolean,
-      default: true,
-    },
-    buttonRemove: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    HorizontalFilter,
-    TableTotalization,
-    TableTotalRecords,
-    Loading,
-    FixedBar,
-    Button,
-    Table,
-    Pagination,
-  },
-  data() {
-    return {
-      content: {
-        data: [],
-        totalRecords: 0,
-      },
-      baseParams: {
-        search: undefined,
-        filter: "contains",
-        currentPage: 1,
-        totalPerPage: 10,
-      },
-      paramsFilter: [],
-      dynamicFilter: {},
-    };
-  },
-  created() {
-    // o carregamento inicial getAll() é feito pela mudança no paginationKey
-  },
-  mounted() {
-    this.updatePagination({
-      key: "templateList",
-      totalPerPage: this.baseParams.totalPerPage,
-    });
-  },
-  beforeDestroy() {
-    let search = { content: "", filter: { content: "Contém", id: "contains" } };
-    this.updateSearch(search);
-  },
-  computed: {
-    ...mapState("generic", [
-      "selected",
-      "methodExecutedApi",
-      "search",
-      "executedSearch",
-      "clearedSearch",
-      "totalPerPage",
-      "selectStatic",
-    ]),
-    ...mapGetters("generic", ["pagination", "isLoading", "event"]),
-    paginationKey: function () {
-      return this.pagination("templateList");
-    },
-  },
-  methods: {
-    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
-    ...mapMutations("generic", [
-      "addLoading",
-      "removeLoading",
-      "addSelected",
-      "updatePagination",
-      "updateSearch",
-    ]),
-    getAll() {
-      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);
-      });
-    },
-    orderAll(data) {
-      let obj = { listIds: data.listIds };
-
-      let params = {
-        url: this.templateList.urlOrderAllApi,
-        obj: obj,
-        notNotifyToast: true,
-      };
-
-      this.orderAllApi(params).then((response) => {});
-    },
-    removeSelected() {
-      let params = {
-        url: this.templateList.urlDeleteAllApi,
-        selected: this.selected,
-      };
-      this.deleteAllApi(params).then(() => {
-        this.removeLoading(["remove"]);
-        this.addSelected([]);
-      });
-    },
-    cleanParams() {
-      this.baseParams.currentPage = 1;
-    },
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
-      },
-      deep: true,
-    },
-    methodExecutedApi: function (value) {
-      if (
-        value === "postApi" ||
-        value === "putApi" ||
-        value === "deleteAllApi" ||
-        value === "deleteAllApiErro"
-      ) {
-        this.getAll();
-      }
-    },
-    executedSearch: function () {
-      this.baseParams.search = this.search.content;
-      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
-      this.cleanParams();
-      this.getAll();
-    },
-    clearedSearch: function () {
-      this.baseParams.search = "";
-      this.baseParams.filter = "";
-      this.cleanParams();
-      this.getAll();
-    },
-    paginationKey: {
-      handler(value) {
-        this.cleanParams();
-        this.baseParams.currentPage = value.currentPage;
-        this.getAll();
-      },
-      deep: true,
-    },
-    selectStatic: {
-      handler(value) {
-        let fieldTarget = value.fieldTarget;
-        let obj = { key: fieldTarget, value: value.value };
-        this.paramsFilter.push(obj);
-
-        var result = {};
-        for (var i = 0; i < this.paramsFilter.length; i++) {
-          let key = this.paramsFilter[i].key;
-          let value = this.paramsFilter[i].value;
-
-          if (key == "period") {
-            result["start"] = value.inicio;
-            result["end"] = value.fim;
-          } else {
-            result[key] = value;
-          }
-        }
-
-        this.dynamicFilter = result;
-
-        this.updatePagination({
-          key: "templateList",
-          totalPerPage: this.dynamicFilter.totalPerPage,
-        });
-
-        this.getAll();
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.div-button-excluir {
-  padding-bottom: 10px;
-}
-</style>
+<template>
+  <div>
+    <div :class="{ 'g-div-molded': showMolded }">
+      <b-row>
+        <b-col sm="12">
+          <div>
+            <HorizontalFilter v-if="showHorizontalFilter">
+              <div slot="content-filter-horizontal">
+                <slot name="content-filter-horizontal"></slot>
+              </div>
+            </HorizontalFilter>
+          </div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="6">
+          <div v-if="templateList.dragAndDrop">
+            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
+          </div>
+          <TableTotalization :totalization="content.totalization" />
+        </b-col>
+        <b-col sm="6">
+          <TableTotalRecords :totalRecords="content.totalRecords" />
+        </b-col>
+      </b-row>
+      <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
+      <div class="fixed-bar-options" v-show="selected.length > 0">
+        <div>
+          <Button
+            v-if="buttonRemove"
+            key="remove"
+            :title="`Remover  ${selected.length}`"
+            type="danger"
+            size="small"
+            :clicked="removeSelected"
+          />
+          <slot name="content-buttons-table-header"></slot>
+        </div>
+      </div>
+      <Table
+        :header="templateList.headerTable"
+        :data="content.data"
+        :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop"
+      >
+        <div slot="content-buttons-table">
+          <slot name="content-buttons-table"></slot>
+        </div>
+      </Table>
+    </div>
+    <br />
+    <Pagination _key="templateList" :totalRecords="content.totalRecords" />
+  </div>
+</template>
+
+<script>
+import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
+import Table from "../shared/Table.vue";
+import Button from "../forms/Button.vue";
+import FixedBar from "../layout/FixedBar.vue";
+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 { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "ListViewWithDataHandler",
+  props: {
+    templateList: Object,
+    propsParam: Object,
+    showMolded: {
+      type: Boolean,
+      default: true,
+    },
+    showHorizontalFilter: {
+      type: Boolean,
+      default: true,
+    },
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    HorizontalFilter,
+    TableTotalization,
+    TableTotalRecords,
+    Loading,
+    FixedBar,
+    Button,
+    Table,
+    Pagination,
+  },
+  data() {
+    return {
+      content: {
+        data: [],
+        totalRecords: 0,
+      },
+      baseParams: {
+        search: undefined,
+        filter: "contains",
+        currentPage: 1,
+        totalPerPage: 10,
+      },
+      paramsFilter: [],
+      dynamicFilter: {},
+    };
+  },
+  created() {
+    // o carregamento inicial getAll() é feito pela mudança no paginationKey
+  },
+  mounted() {
+    this.updatePagination({
+      key: "templateList",
+      totalPerPage: this.baseParams.totalPerPage,
+    });
+  },
+  beforeDestroy() {
+    let search = { content: "", filter: { content: "Contém", id: "contains" } };
+    this.updateSearch(search);
+  },
+  computed: {
+    ...mapState("generic", [
+      "selected",
+      "methodExecutedApi",
+      "search",
+      "executedSearch",
+      "clearedSearch",
+      "totalPerPage",
+      "selectStatic",
+    ]),
+    ...mapGetters("generic", ["pagination", "isLoading", "event"]),
+    paginationKey: function () {
+      return this.pagination("templateList");
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
+    ...mapMutations("generic", [
+      "addLoading",
+      "removeLoading",
+      "addSelected",
+      "updatePagination",
+      "updateSearch",
+    ]),
+    getAll() {
+      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);
+      });
+    },
+    orderAll(data) {
+      let obj = { listIds: data.listIds };
+
+      let params = {
+        url: this.templateList.urlOrderAllApi,
+        obj: obj,
+        notNotifyToast: true,
+      };
+
+      this.orderAllApi(params).then((response) => {});
+    },
+    removeSelected() {
+      let params = {
+        url: this.templateList.urlDeleteAllApi,
+        selected: this.selected,
+      };
+      this.deleteAllApi(params).then(() => {
+        this.removeLoading(["remove"]);
+        this.addSelected([]);
+      });
+    },
+    cleanParams() {
+      this.baseParams.currentPage = 1;
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
+      },
+      deep: true,
+    },
+    methodExecutedApi: function (value) {
+      if (
+        value === "postApi" ||
+        value === "putApi" ||
+        value === "deleteAllApi" ||
+        value === "deleteAllApiErro"
+      ) {
+        this.getAll();
+      }
+    },
+    executedSearch: function () {
+      this.baseParams.search = this.search.content;
+      if (this.search.filter.id) this.baseParams.filter = this.search.filter.id;
+      this.cleanParams();
+      this.getAll();
+    },
+    clearedSearch: function () {
+      this.baseParams.search = "";
+      this.baseParams.filter = "";
+      this.cleanParams();
+      this.getAll();
+    },
+    paginationKey: {
+      handler(value) {
+        this.cleanParams();
+        this.baseParams.currentPage = value.currentPage;
+        this.getAll();
+      },
+      deep: true,
+    },
+    selectStatic: {
+      handler(value) {
+        let fieldTarget = value.fieldTarget;
+        let obj = { key: fieldTarget, value: value.value };
+        this.paramsFilter.push(obj);
+
+        var result = {};
+        for (var i = 0; i < this.paramsFilter.length; i++) {
+          let key = this.paramsFilter[i].key;
+          let value = this.paramsFilter[i].value;
+
+          if (key == "period") {
+            result["start"] = value.inicio;
+            result["end"] = value.fim;
+          } else {
+            result[key] = value;
+          }
+        }
+
+        this.dynamicFilter = result;
+
+        this.updatePagination({
+          key: "templateList",
+          totalPerPage: this.dynamicFilter.totalPerPage,
+        });
+
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button-excluir {
+  padding-bottom: 10px;
+}
+</style>