@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/template/ViewTemplateReportPreviewCOPIASEGURANCA.vue

@@ -0,0 +1,497 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-main">
+        <br />
+        <!-- <div class="div-progress" v-if="loading && liveTotalRecords > 0">
+          <ProgressBar
+            :text="`Carregando ${liveTotalRecords} registro(s) de ${content.totalRecords}`"
+            :value="liveTotalRecords"
+            :max="content.totalRecords"
+            size="medium"
+          />
+        </div>
+        <Modal title="Salvar" :width="550" v-show="showModal('saveReport')">
+          <ReportCreateUpdate :module="panel.module" />
+        </Modal>
+        <Molded>
+          <div>
+            <div slot="content-filter-horizontal">
+              <b-row>
+                <b-col sm="6">
+                  <div class="side-by-side">
+                    <Button
+                      _key="searchReport"
+                      type="primary"
+                      title="Buscar"
+                      classIcon="fas fa-file-search"
+                      size="medium"
+                      :disabled="invalid || btnDisabled"
+                      :clicked="getAll"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      v-if="!invalid"
+                      _key="btnSaveReport"
+                      type="success"
+                      title="Salvar Modelo"
+                      classIcon="fas fa-save"
+                      :disabled="loading || invalid"
+                      size="small"
+                      :clicked="openSaveReport"
+                    />
+                  </div>
+                </b-col>
+                <b-col class="text-right" sm="6">
+                  <div class="side-by-side">
+                    <Button
+                      _key="btnOpenFields"
+                      type="info"
+                      title="Campos"
+                      classIcon="fas fa-database"
+                      size="small"
+                      :disabled="loading"
+                      :clicked="openFields"
+                    />
+                  </div>
+                  <div class="side-by-side">
+                    <Button
+                      _key="btnOpenFilters"
+                      type="info"
+                      title="Filtros"
+                      classIcon="fas fa-filter"
+                      size="small"
+                      :disabled="loading"
+                      :clicked="openFilters"
+                    />
+                  </div>
+                </b-col>
+              </b-row>
+              <Modal title="Campos" :width="600" v-if="showModal('fields')">
+                <Fields />
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="side-by-side">
+                      <Button
+                        _key="btnApplyFilters"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :disabled="fields.selected.length == 0"
+                        :clicked="applyFilters"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+              <Modal title="Filtros" :width="900" v-show="showModal('filters')">
+                  <Rules :rules="rules" />
+                <br />
+                <b-row>
+                  <b-col class="text-right" sm="12">
+                    <div class="side-by-side">
+                      <Button
+                        _key="btnApplyFilters"
+                        type="primary"
+                        title="Aplicar"
+                        classIcon="fas fa-filter"
+                        size="small"
+                        :clicked="applyFilters"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </Modal>
+            </div>
+          </div>
+        </Molded>
+        <div class="div-required" v-show="invalid">
+          <Alert type="info" v-for="item in requiredRules" :key="item.id">
+            É necessário informar o filtro
+            <span class="filter-required">{{ item.title }}</span
+            >, clique no botão "Filtros" para adicionar.
+          </Alert>
+        </div>
+        <div class="div-tags">
+          <Tags eventName="tagReport" />
+        </div>
+        <div class="g-div-molded div-table" v-if="!loading && liveTotalRecords > 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="btnApplyFilters"
+                      type="edit"
+                      title="Imprimir"
+                      classIcon="fas fa-print"
+                      size="small"
+                      :clicked="applyFilters"
+                    />
+                  </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="noDataReturned">
+          <Alert type="info">
+            <span> Nenhum registro foi encontrato!</span>
+          </Alert>
+        </div>
+        <div class="div-Totalization" v-if="content.totalization.length > 0">
+          <Totalization :data="content.totalization" />
+        </div>
+      </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 Totalization from "@nixweb/nixloc-ui/src/component/shared/query-builder/Totalization.vue";
+import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
+import ReportCreateUpdate from "@nixweb/nixloc-ui/src/component/template/ReportCreateUpdate.vue";
+import Fields from "@nixweb/nixloc-ui/src/component/shared/query-builder/Fields.vue";
+import Rules from "@nixweb/nixloc-ui/src/component/shared/query-builder/Rules.vue";
+import print from "vue-print-nb";
+
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TemplateReportView",
+  directives: {
+    print,
+  },
+  props: {
+    panel: Object,
+    templateList: Object,
+    templateReport: Object,
+  },
+  components: {
+    Alert,
+    Modal,
+    Button,
+    TableTotalRecords,
+    Table,
+    Panel,
+    ScrollBar,
+    Molded,
+    Totalization,
+    ProgressBar,
+    Tags,
+    ReportCreateUpdate,
+    ExportExcel,
+    HeaderPrint,
+    Fields,
+    Rules,
+  },
+  data() {
+    return {
+      content: {
+        headerTable: [],
+        data: [],
+        totalization: [],
+        pagination: 0,
+        currentPage: 1,
+        totalPerPage: 100,
+        totalRecords: 0,
+      },
+      btnDisabled: true,
+      loading: false,
+      noDataReturned: false,
+    };
+  },
+  mounted() {
+    this.addReport(this.templateReport);
+    this.removeLoading(["panel"]);
+  },
+  beforeDestroy() {
+    /* this.updateOptionsInitValue({});
+    this.atualizaCampoOrdenado({});
+    this.atualizaFiltroSelecionado({ children: [] });*/
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapGetters("report", [
+      "headerTable",
+      "selectedRules",
+      "requiredRules",
+      "requiredRulesAlreadyAdded",
+      "hasSelectedFields",
+      "oDataSelect",
+      "oDataFilter",
+      "oDataOrderBy",
+    ]),
+    ...mapState("report", ["report", "fields", "totalization"]),
+    urlQuery() {
+      let baseUrl = `${this.templateList.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.query}&$skip=${this.skip}&$top=${this.content.totalPerPage}&$count=true`;
+      return baseUrl.replace("&&", "&");
+    },
+    urlTotalization() {
+      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 ret = true;
+      this.requiredRules.forEach((rule) => {
+        ret = this.requiredRulesAlreadyAdded(rule);
+      });
+
+      if (this.requiredRules.length == 0) ret = false;
+
+      return ret;
+    },
+    liveTotalRecords() {
+      return this.content.data.length;
+    },
+  },
+  methods: {
+    ...mapActions("generic", ["getApiOdata"]),
+    ...mapMutations("generic", ["addEvent", "openModal", "hideModal", "removeLoading"]),
+    ...mapMutations("report", [
+      "addReport",
+      "atualizaFiltroSelecionado",
+      "atualizaCampoOrdenado",
+      "updateOptionsInitValue",
+      "atualizaCabecalhoTabela",
+    ]),
+    getAll() {
+      this.content.data = [];
+      this.content.totalization = [];
+      this.btnDisabled = true;
+
+      if (!this.invalid) {
+        this.showHideFields();
+        this.pagination();
+        this.removeLoading(["searchReport"]);
+
+        if (this.oDataFilter.totalization) this.totalizationOData();
+        if (!this.oDataFilter.totalization) this.content.totalization = [];
+      }
+    },
+    pagination() {
+      let paramsQuery = { url: this.urlQuery };
+      this.resetData();
+
+      this.getApiOdata(paramsQuery).then((response) => {
+        let totalRecords = response["@odata.count"];
+        if (totalRecords == 0) this.noDataReturned = true;
+        this.content.totalRecords = totalRecords;
+        this.content.pagination = Math.round(totalRecords / this.content.totalPerPage);
+
+        if (totalRecords <= this.content.totalPerPage) {
+          this.queryOData();
+          this.content.headerTable = this.headerTable;
+        }
+        if (this.content.pagination == 0) this.loading = false;
+      });
+    },
+    resetData() {
+      this.loading = true;
+      this.content.data = [];
+      this.content.currentPage = 1;
+      this.noDataReturned = false;
+    },
+    queryOData() {
+      let paramsQuery = { url: this.urlQuery };
+      this.getApiOdata(paramsQuery).then((response) => {
+        let self = this;
+        response.value.forEach(function (obj) {
+          self.content.data.push(obj);
+        });
+        this.content.currentPage++;
+      });
+      this.content.headerTable = this.headerTable;
+    },
+    totalizationOData() {
+      let paramsResumo = { url: this.urlTotalization };
+      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 (totalization) {
+            let obj = {
+              title: "",
+              value: value[1],
+              classCss: totalization.classCss,
+              type: totalization.type,
+            };
+            if (totalization.value == value[0]) {
+              obj.title = totalization.title;
+              self.content.totalization.push(obj);
+            }
+          });
+        });
+      });
+    },
+    openSaveReport() {
+      this.addEvent({ nome: "changeReport" });
+      this.openModal("saveReport");
+      this.removeLoading(["btnSaveReport"]);
+    },
+    openFields() {
+      this.openModal("fields");
+      this.removeLoading(["btnOpenFields"]);
+    },
+    openFilters() {
+      this.openModal("filters");
+      this.removeLoading(["btnOpenFilters"]);
+    },
+    applyFilters() {
+      this.hideModal();
+      this.removeLoading(["btnApplyFilters"]);
+    },
+    showHideFields() {
+      let self = this;
+      this.report.fields.forEach(function (field) {
+        /*  if (self.hasSelectedFields(field.field, self.selectedFields)) {
+          field.show = true;
+        } else {
+          field.show = false;
+        }*/
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.nome == "tagReport") this.openModal("filters");
+      },
+      deep: true,
+    },
+    selectedFields: {
+      handler() {
+        this.showHideFields();
+      },
+      deep: true,
+    },
+    "content.currentPage": {
+      handler(currentPage) {
+        if (currentPage <= this.content.pagination - 1) {
+          let self = this;
+          setTimeout(function () {
+            self.queryOData();
+          }, 200);
+        }
+        if (currentPage == this.content.pagination && currentPage != 0)
+          this.loading = false;
+      },
+      deep: true,
+    },
+    "content.pagination": {
+      handler() {
+        this.queryOData();
+      },
+      deep: true,
+    },
+    "oDataFilter.query": {
+      handler() {
+        this.btnDisabled = false;
+      },
+      deep: true,
+    },
+    oDataSelect: {
+      handler() {
+        this.btnDisabled = false;
+      },
+      deep: true,
+    },
+    oDataOrderBy: {
+      handler() {
+        this.btnDisabled = false;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-button {
+  padding-bottom: 15px;
+}
+
+.div-progress {
+  margin-bottom: 10px;
+}
+
+.div-sem-data {
+  margin-top: 20px;
+}
+
+.div-table {
+  margin-top: 20px;
+}
+
+.div-separacao {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+.div-Totalization {
+  margin-top: 20px;
+}
+
+.div-tags {
+  margin-top: 15px;
+}
+
+.div-required {
+  margin-top: 20px;
+}
+
+.filter-required {
+  font-weight: 500;
+}
+</style>

package/src/component/template/ViewTemplateSelectOption.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Panel
+      :module="panel.module"
+      :title="panel.title"
+      :showFilter="panel.showFilter"
+      :showSearch="panel.showSearch"
+      :showButtons="panel.showButtons"
+    >
+      <div slot="content-main">
+        <SelectOption
+          :title="title"
+          :titleSize="18"
+          buttonSize="large"
+          buttonClassIcon="fas fa-arrow-circle-right"
+          :width="180"
+          :height="190"
+          :options="options"
+          v-model="selectedOption"
+          :clickedNext="execute"
+        />
+      </div>
+    </Panel>
+  </div>
+</template>
+
+<script>
+import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel";
+import SelectOption from "@nixweb/nixloc-ui/src/component/shared/SelectOption.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "ViewTemplateSelectOption",
+  components: { Panel, SelectOption },
+  props: {
+    title: String,
+    panel: Object,
+    options: Array,
+    clickedNext: Function,
+  },
+  data() {
+    return {
+      selectedOption: null,
+    };
+  },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.removeLoading(["panel"]);
+    }, 350);
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    execute() {
+      if (this.clickedNext) this.clickedNext(this.selectedOption);
+    },
+  },
+};
+</script>

package/src/component/template/ViewTemplateWithSalveCancel.vue

@@ -1,32 +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>
+<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>