@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/template/ViewTemplateReportPreview.vue

@@ -0,0 +1,500 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-main">
+        <br />
+        {{ urlConsulta }}
+        <div class="div-progresso" v-if="carregando && tamanhoDados > 0">
+          <ProgressBar
+            :texto="`Loading ${tamanhoDados} registro(s) de ${content.totalRecords}`"
+            :valor="tamanhoDados"
+            :maximo="content.totalRecords"
+            size="medium"
+          />
+        </div>
+        <Modal title="Salvar" :width="550" v-show="showModal('salvar')">
+          <AddEditReport :module="panel.module" />
+        </Modal>
+        <Molded>
+          <div>
+            <div slot="content-filter-horizontal">
+              <b-row>
+                <b-col sm="6">
+                  <div class="side-by-side">
+                    {{ invalid }}
+                    <Button
+                      key="buscarRelatorio"
+                      type="primary"
+                      title="Buscar"
+                      classIcon="fas fa-file-search"
+                      size="medium"
+                      :disabled="invalid || btnDesativado"
+                      :clicked="getAll"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      v-if="!invalid"
+                      key="saveReport"
+                      type="success"
+                      title="Salvar Modelo"
+                      classIcon="fas fa-save"
+                      :disabled="carregando || invalid"
+                      size="small"
+                      :clicked="saveReport"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="side-by-side">
+                    <Button
+                      key="abrirCampo"
+                      type="info"
+                      title="fields"
+                      classIcon="fas fa-database"
+                      size="small"
+                      :disabled="carregando"
+                      :clicked="abrirCampo"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      key="abrirFiltro"
+                      type="info"
+                      title="Filtros"
+                      classIcon="fas fa-filter"
+                      size="small"
+                      :disabled="carregando"
+                      :clicked="abrirFiltro"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+              <Modal title="Filtros" :width="900" v-show="showModal('filter')">
+                <slot name="filter"></slot>
+                <br />
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="side-by-side">
+                      <Button
+                        key="aplicaFiltro"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :clicked="aplicarFiltro"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+              <Modal title="fields" :width="600" v-show="showModal('field')">
+                <slot name="field"></slot>
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="side-by-side">
+                      <Button
+                        key="aplicaFiltro"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :disabled="selectedField.length == 0"
+                        :clicked="aplicarFiltro"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+            </div>
+          </div>
+        </Molded>
+        <div class="div-obrigatorio" v-show="invalid">
+          <Alert type="info" v-for="item in requiredRules" :key="item.id">
+            É necessário informar o filter
+            <span class="filter-obrigatorio">{{ item.title }}</span
+            >, clicked no botão "Filtros" para adicionar.
+          </Alert>
+        </div>
+        <div class="div-tags">
+          <Tags eventName="tagRelatorio" />
+        </div>
+        <div class="g-div-molded div-tabela" v-if="!carregando && tamanhoDados > 0">
+          <b-row>
+            <b-col sm="6">
+              <div class="div-button">
+                <div class="side-by-side">
+                  <ExportExcel
+                    :button="{ type: 'edit', title: 'Excel', size: 'small' }"
+                    fileName="Auditoria"
+                    :cabecalho="content.headerTable"
+                    :data="content.data"
+                  />
+                </div>
+                <div class="side-by-side">
+                  <div>
+                    <Button
+                      v-print="'#printMe'"
+                      key="aplicaFiltro"
+                      type="edit"
+                      title="Imprimir"
+                      classIcon="fas fa-print"
+                      size="small"
+                      :clicked="aplicarFiltro"
+                    />
+                  </div>
+                </div>
+              </div>
+            </b-col>
+            <b-col sm="6">
+              <TableTotalRecords :totalRecords="content.totalRecords" />
+            </b-col>
+          </b-row>
+          <ScrollBar :minHeight="400" :maxHeight="600">
+            <div id="printMe">
+              <HeaderPrint />
+              {{ content.headerTable }}
+              <Table
+                :headerTable="content.headerTable"
+                :data="content.data"
+                :showChecks="templateList.showChecks"
+              />
+            </div>
+          </ScrollBar>
+        </div>
+        <div class="div-sem-data" v-if="nenhumDadoRetornado">
+          <Alert type="info">
+            <span> Nenhum registro foi encontrato!</span>
+          </Alert>
+        </div>
+        <div class="div-rodape" v-if="content.totalization.length > 0">
+          <Rodape :data="content.totalization" />
+        </div>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+import Table from "../shared/Table.vue";
+import HeaderPrint from "../shared/HeaderPrint.vue";
+import TableTotalRecords from "../shared/TableTotalRecords.vue";
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
+import Rodape from "@nixweb/nixloc-ui/src/component/shared/construtor-query/Rodape.vue";
+import Tags from "@nixweb/nixloc-ui/src/component/shared/construtor-query/Tags.vue";
+import AddEditReport from "@nixweb/nixloc-ui/src/component/template/AddEditReport.vue";
+import print from "vue-print-nb";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TemplateReportView",
+  directives: {
+    print,
+  },
+  props: {
+    templateList: Object,
+    field: Array,
+    panel: Object,
+  },
+  components: {
+    Alert,
+    Modal,
+    Button,
+    TableTotalRecords,
+    Table,
+    Panel,
+    ScrollBar,
+    Molded,
+    Rodape,
+    ProgressBar,
+    Tags,
+    AddEditReport,
+    ExportExcel,
+    HeaderPrint,
+  },
+  data() {
+    return {
+      content: {
+        headerTable: [],
+        data: [],
+        totalization: [],
+        pagination: 0,
+        currentPage: 1,
+        totalPerPage: 100,
+        totalRecords: 0,
+      },
+      btnDesativado: true,
+      carregando: false,
+      nenhumDadoRetornado: false,
+      teste: this.router,
+    };
+  },
+  mounted() {
+    this.removeLoading(["panel"]);
+  },
+  beforeDestroy() {
+    this.updateOptionsInitValue({});
+    this.atualizaCampoOrdenado({});
+    this.atualizaFiltroSelecionado({ children: [] });
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapGetters("report", [
+      "headerTable",
+      "selectedRules",
+      "requiredRules",
+      "regraObrigatoriaJaAdicionada",
+      "hasSelectedField",
+      "oDataSelect",
+      "oDataFilter",
+      "oDataOrderBy",
+    ]),
+    ...mapState("report", ["report", "selectedField", "totalization"]),
+    urlConsulta() {
+      let baseUrl = `${this.templateList.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.query}&$skip=${this.skip}&$top=${this.content.totalPerPage}&$count=true`;
+      return baseUrl.replace("&&", "&");
+    },
+    urlResumo() {
+      let query = this.oDataFilter.totalization
+        ? `$apply=filter(${this.oDataFilter.query.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${this.templateList.urlGetApi}?${query}aggregate(${this.oDataFilter.totalization})`;
+      return baseUrl;
+    },
+    skip() {
+      return (this.content.currentPage - 1) * this.content.totalPerPage;
+    },
+    invalid() {
+      let retorno = true;
+      this.requiredRules.forEach((rule) => {
+        retorno = this.regraObrigatoriaJaAdicionada(rule);
+      });
+
+      if (this.requiredRules.length == 0) retorno = false;
+
+      return retorno;
+    },
+    tamanhoDados() {
+      return this.content.data.length;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApiOdata"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "showModal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    ...mapMutations("report", [
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "updateOptionsInitValue",
+      "atualizaCabecalhoTabela",
+    ]),
+    getAll() {
+      this.content.data = [];
+      this.content.totalization = [];
+      this.btnDesativado = true;
+
+      if (!this.invalid) {
+        this.mostraEscondeCampos();
+        this.pagination();
+        this.removeLoading(["buscarRelatorio"]);
+
+        if (this.oDataFilter.totalization) this.resumoOData();
+        if (!this.oDataFilter.totalization) this.content.totalization = [];
+      }
+    },
+    pagination() {
+      let paramsConsulta = { url: this.urlConsulta };
+      this.reiniciaDados();
+
+      this.getApiOdata(paramsConsulta).then((response) => {
+        let totalRecords = response["@odata.count"];
+        if (totalRecords == 0) this.nenhumDadoRetornado = true;
+        this.content.totalRecords = totalRecords;
+        this.content.pagination = Math.round(
+          totalRecords / this.content.totalPerPage
+        );
+
+        if (totalRecords <= this.content.totalPerPage) {
+          this.consultaOdata();
+          this.content.headerTable = this.headerTable;
+        }
+        if (this.content.pagination == 0) this.carregando = false;
+      });
+    },
+    reiniciaDados() {
+      this.carregando = true;
+      this.content.data = [];
+      this.content.currentPage = 1;
+      this.nenhumDadoRetornado = false;
+    },
+    consultaOdata() {
+      let paramsConsulta = { url: this.urlConsulta };
+      this.getApiOdata(paramsConsulta).then((response) => {
+        let self = this;
+        response.value.forEach(function (obj) {
+          self.content.data.push(obj);
+        });
+        this.content.currentPage++;
+      });
+      this.content.headerTable = this.headerTable;
+    },
+    resumoOData() {
+      let paramsResumo = { url: this.urlResumo };
+      this.getApiOdata(paramsResumo).then((response) => {
+        this.content.totalization = [];
+        const result = Object.entries(response[0]);
+        let self = this;
+        result.forEach(function (value) {
+          self.totalization.forEach(function (legenda) {
+            let obj = {
+              title: "",
+              valor: value[1],
+              classCss: legenda.classCss,
+              type: legenda.type,
+            };
+            if (legenda.valor == value[0]) {
+              obj.title = legenda.title;
+              self.content.totalization.push(obj);
+            }
+          });
+        });
+      });
+    },
+    abrirCampo() {
+      this.showModal("field");
+      this.removeLoading(["abrirCampo"]);
+    },
+    abrirFiltro() {
+      this.showModal("filter");
+      this.removeLoading(["abrirFiltro"]);
+    },
+    aplicarFiltro() {
+      this.hideModal();
+      this.removeLoading(["aplicaFiltro", "aplicaCampo"]);
+    },
+    saveReport() {
+      this.addEvent({ nome: "changeReport" });
+      this.showModal("salvar");
+      this.removeLoading(["saveReport"]);
+    },
+    mostraEscondeCampos() {
+      let self = this;
+      this.report.fields.forEach(function (field) {
+        if (self.hasSelectedField(field.field, self.selectedField)) {
+          value.show = true;
+        } else {
+          value.show = false;
+        }
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.nome == "tagRelatorio") this.showModal("filter");
+      },
+      deep: true,
+    },
+    selectedField: {
+      handler() {
+        this.mostraEscondeCampos();
+      },
+      deep: true,
+    },
+    "content.currentPage": {
+      handler(currentPage) {
+        if (currentPage <= this.content.pagination - 1) {
+          let self = this;
+          setTimeout(function () {
+            self.consultaOdata();
+          }, 200);
+        }
+        if (currentPage == this.content.pagination && currentPage != 0)
+          this.carregando = false;
+      },
+      deep: true,
+    },
+    "content.pagination": {
+      handler() {
+        this.consultaOdata();
+      },
+      deep: true,
+    },
+    "oDataFilter.query": {
+      handler() {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataSelect: {
+      handler() {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+    oDataOrderBy: {
+      handler() {
+        this.btnDesativado = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button {
+  padding-bottom: 15px;
+}
+
+.div-progresso {
+  margin-bottom: 10px;
+}
+
+.div-sem-data {
+  margin-top: 20px;
+}
+
+.div-tabela {
+  margin-top: 20px;
+}
+
+.div-separacao {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+.div-rodape {
+  margin-top: 20px;
+}
+
+.div-tags {
+  margin-top: 15px;
+}
+
+.div-obrigatorio {
+  margin-top: 20px;
+}
+
+.filter-obrigatorio {
+  font-weight: 500;
+}
+</style>

package/src/component/template/ViewTemplateWithSalveCancel.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showFilter="panel.showFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-buttons">
+        <slot name="content-buttons"></slot>
+      </div>
+      <div slot="content-main">
+        <slot name="content-main"></slot>
+      </div>
+    </Panel>
+    <SaveCancel :formName="panel.formName" />
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import SaveCancel from "@nixweb/nixloc-ui/src/component/shared/SaveCancel";
+
+export default {
+  name: "ViewTemplateCrud",
+  components: { Panel, SaveCancel },
+  props: {
+    panel: Object,
+  },
+};
+</script>

package/src/component/template/ViewTemplateWithTable.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-filter-vertical">
+        <slot name="content-filter-vertical"></slot>
+      </div>
+      <div slot="content-buttons">
+        <slot name="content-buttons"></slot>
+      </div>
+      <div slot="content-main">
+        <ListViewWithHandlerData :templateList="templateList" :buttonRemove="buttonRemove">
+          <div slot="content-buttons-table-header">
+            <slot name="content-buttons-table-header"></slot>
+          </div>
+          <div slot="content-filter-horizontal">
+            <slot name="content-filter-horizontal"></slot>
+          </div>
+          <div slot="content-buttons-table">
+            <slot name="content-buttons-table"></slot>
+          </div>
+        </ListViewWithHandlerData>
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from '@nixweb/nixloc-ui/src/component/layout/Panel.vue'
+import ListViewWithHandlerData from "@nixweb/nixloc-ui/src/component/template/ListViewWithHandlerData.vue";
+
+export default {
+  name: "TemplateView",
+  components: { Panel, ListViewWithHandlerData },
+  props: {
+    panel: Object,
+    templateList: Object,
+    buttonRemove: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>

package/src/component/template/model/Report.js

@@ -0,0 +1,6 @@
+export default class report {
+    constructor() {
+        this.id = "";
+        this.nome = "";
+    }
+}