@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/template/{ListViewWithHandlerData.vue → ListViewWithDataHandler.vue}

@@ -1,231 +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">
-          <TableTotalization :totalization="content.totalization" />
-        </b-col>
-        <b-col sm="6">
-          <TableTotalRecords :totalRecords="content.totalRecords" />
-        </b-col>
-      </b-row>
-      <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"
-      >
-        <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 "../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 { mapState, mapGetters, mapActions, mapMutations } from "vuex";
-
-export default {
-  name: "ListViewWithHandlerData",
-  props: {
-    templateList: Object,
-    propsParam: Object,
-    showMolded: {
-      type: Boolean,
-      default: true,
-    },
-    showHorizontalFilter: {
-      type: Boolean,
-      default: true,
-    },
-    buttonRemove: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    HorizontalFilter,
-    TableTotalization,
-    TableTotalRecords,
-    FixedBar,
-    Button,
-    Table,
-    Pagination,
-  },
-  data() {
-    return {
-      content: {
-        data: [],
-        totalRecords: 0,
-      },
-      baseParams: {
-        search: undefined,
-        filter: "contem",
-        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: "contem", id: "contem" } };
-    this.updateSearch(search);
-  },
-  computed: {
-    ...mapState("generic", [
-      "selected",
-      "methodExecutedApi",
-      "search",
-      "executedSearch",
-      "clearedSearch",
-      "totalPerPage",
-      "selectStatic",
-    ]),
-    ...mapGetters("generic", ["pagination"]),
-    paginationKey: function () {
-      return this.pagination("templateList");
-    },
-  },
-  methods: {
-    ...mapActions("generic", ["getApi", "deleteAllApi"]),
-    ...mapMutations("generic", [
-      "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;
-        this.removeLoading(["panel", "modeloSubView", "search", "clean"]);
-      });
-    },
-    removeSelected() {
-      let params = {
-        url: this.templateList.urlRemoverTodosApi,
-        selected: this.selected,
-      };
-      this.deleteAllApi(params).then(() => {
-        this.removeLoading(["remove"]);
-        this.addSelected([]);
-      });
-    },
-    limpaParams() {
-      this.baseParams.currentPage = 1;
-    },
-  },
-  watch: {
-    methodExecutedApi: function (value) {
-      if (
-        value === "postApi" ||
-        value === "putApi" ||
-        value === "deleteAllApi" ||
-        value === "deleteAllApiErro"
-      ) {
-        this.getAll();
-      }
-    },
-    executedSearch: function () {
-      this.baseParams.search = this.search.content;
-      this.baseParams.filter = this.search.filter.id;
-      this.limpaParams();
-      this.getAll();
-    },
-    clearedSearch: function () {
-      this.baseParams.search = "";
-      this.baseParams.filter = "";
-      this.limpaParams();
-      this.getAll();
-    },
-    paginationKey: {
-      handler(value) {
-        this.limpaParams();
-        this.baseParams.currentPage = value.currentPage;
-        this.getAll();
-      },
-      deep: true,
-    },
-    selectStatic: {
-      handler(value) {
-        let fieldTarget = value.fieldTarget;
-        let obj = { key: fieldTarget, valor: value.valor };
-        this.paramsFilter.push(obj);
-
-        var result = {};
-        for (var i = 0; i < this.paramsFilter.length; i++) {
-          let key = this.paramsFilter[i].key;
-          let valor = this.paramsFilter[i].valor;
-
-          if (key == "periodo") {
-            result["inicio"] = valor.inicio;
-            result["fim"] = valor.fim;
-          } else {
-            result[key] = valor;
-          }
-        }
-
-        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')" />
+      <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>

package/src/component/template/{AddEditReport.vue → ReportCreateUpdate.vue}

@@ -1,8 +1,8 @@
 <template>
   <div>
     <b-row>
-      <b-col sm="12"
-        ><InputText
+      <b-col sm="12">
+        <InputText
           title="Nome"
           field="name"
           :formName="formName"
@@ -17,7 +17,7 @@
       <b-col sm="12">
         <div class="text-right">
           <Button
-            key="save"
+            _key="btnSaveReport"
             type="success"
             title="Salvar"
             :disabled="!isFormValid(formName)"
@@ -34,41 +34,44 @@
 <script>
 import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
 import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
 import Report from "@nixweb/nixloc-ui/src/component/template/model/Report.js";
 
 import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
 
 export default {
-  name: "AddEditReport",
+  name: "ReportCreateUpdate",
   components: { Button, InputText },
   props: {
     module: String,
   },
   data() {
     return {
-      formName: "reportAddEditView",
+      formName: "reportCreateUpdate",
       report: new Report(),
-      urlAdicionar: "/api/v1/shared/report/adicionar",
-      urlModificar: "/api/v1/shared/report/modificar",
+      urlCreate: "/api/v1/shared/report/create",
+      urlUpdate: "/api/v1/shared/report/update",
     };
   },
   computed: {
     ...mapGetters("validation", ["isFormValid"]),
     ...mapGetters("generic", ["event"]),
-    ...mapGetters("report", ["headerTable", "filtroSelecionado"]),
-    ...mapState("report", ["selectedField", "campoOrdenado"]),
+    ...mapState("report", ["selectedFields", "selectedRules"]),
   },
   methods: {
     ...mapActions("generic", ["postApi", "putApi"]),
-    ...mapMutations("generic", ["removeLoading", "removeEvent", "hideModal"]),
+    ...mapMutations("generic", ["removeLoading", "addEvent", "hideModal"]),
     ...mapMutations("validation", ["resetValidation"]),
     saveReport() {
-      var personalizado = this.report.id ? "" : "Personalizado";
+      var custom = this.report.id ? "" : "Custom";
       const query = {
-        routeName: `${this.$route.name}${personalizado}`,
-        field: this.selectedField,
-        ordenacao: this.campoOrdenado,
-        filter: this.filtroSelecionado.children,
+        routeName: `${this.$route.name}${custom}`,
+        selectedFields: {
+          orderBy: this.selectedFields.orderBy,
+          selected: this.selectedFields.selected,
+          sort: this.selectedFields.sort,
+        },
+        selectedRules: this.selectedRules,
       };
       let obj = {
         id: this.report.id,
@@ -77,26 +80,41 @@ export default {
         query: JSON.stringify(query),
       };
       if (this.report.id) {
-        let params = { url: this.urlModificar, obj: obj };
+        let params = { url: this.urlUpdate, obj: obj };
         this.putApi(params).then((response) => {
-          if (response.success) this.hideModal();
-          this.removeLoading(["save"]);
+          if (response.success) {
+            this.sendEvent();
+            this.hideModal();
+          }
+          this.removeLoading(["btnSaveReport"]);
         });
       } else {
-        let params = { url: this.urlAdicionar, obj: obj };
+        let params = { url: this.urlCreate, obj: obj };
         this.postApi(params).then((response) => {
-          if (response.success) this.hideModal();
-          this.removeLoading(["save"]);
+          if (response.success) {
+            const query = JSON.parse(response.content.query);
+            this.$router.replace({
+              name: query.routeName,
+              params: { id: response.content.id, name: response.content.name },
+            });
+            this.sendEvent();
+            this.hideModal();
+          }
+          this.removeLoading(["btnSaveReport"]);
         });
       }
     },
+    sendEvent() {
+      this.addEvent({ name: "savedReport" });
+    },
   },
   watch: {
     event: {
       handler(event) {
-        if (event.name == "changeReport") {
+        if (event.name == "saveReport") {
           this.report.id = this.$route.params.id;
           if (this.report.id) this.report.name = this.$route.params.name;
+          this.saveReport();
         }
       },
       deep: true,