@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/template/ViewTemplateReportPreview.vue

@@ -9,449 +9,370 @@
     >
       <div slot="content-main">
         <br />
-        {{ urlConsulta }}
-        <div class="div-progresso" v-if="carregando && tamanhoDados > 0">
+        <div class="div-progress" v-if="liveTotalRecords != baseParams.totalRecords">
           <ProgressBar
-            :texto="`Loading ${tamanhoDados} registro(s) de ${content.totalRecords}`"
-            :valor="tamanhoDados"
-            :maximo="content.totalRecords"
+            :text="`Carregando ${liveTotalRecords} registro(s) de ${baseParams.totalRecords}`"
+            :value="liveTotalRecords"
+            :max="baseParams.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')">
-                <Rules :rules="rules" />
-                <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')">
-                <Fields :fields="fields" />
-                <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 class="side-by-side">
+                <Button
+                  _key="btnSearchReport"
+                  type="primary"
+                  title="Buscar"
+                  classIcon="fas fa-file-search"
+                  :disabled="btnSearchDisabled || !rulesIsValid"
+                  size="medium"
+                  :clicked="getAll"
+                />
+              </div>
+              <div class="side-by-side">
+                <Button
+                  _key="btnSaveReport"
+                  type="success"
+                  title="Salvar"
+                  classIcon="fas fa-save"
+                  size="small"
+                  :disabled="isLoading || btnSaveDisabled || !rulesIsValid"
+                  :params="{ name: 'save', title: 'Salvar', width: 550 }"
+                  :clicked="executeOpenModal"
+                />
               </div>
             </b-col>
-            <b-col sm="6">
-              <TableTotalRecords :totalRecords="content.totalRecords" />
+            <b-col class="text-right" sm="6">
+              <div class="side-by-side">
+                <Button
+                  _key="btnExecuteOpenModal"
+                  type="info"
+                  title="Campos"
+                  classIcon="fas fa-database"
+                  size="small"
+                  :disabled="isLoading"
+                  :params="{ name: 'fields', title: 'Campos', width: 550 }"
+                  :clicked="executeOpenModal"
+                />
+              </div>
+              <div class="side-by-side">
+                <Button
+                  _key="btnExecuteOpenModal"
+                  type="info"
+                  title="Filtros"
+                  classIcon="fas fa-filter"
+                  size="small"
+                  :disabled="isLoading"
+                  :params="{ name: 'rules', title: 'Filtros', width: 900 }"
+                  :clicked="executeOpenModal"
+                />
+              </div>
             </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>
+        </Molded>
+        <div class="div-tags">
+          <Tags eventName="tagReport" />
         </div>
-        <div class="div-sem-data" v-if="nenhumDadoRetornado">
-          <Alert type="info">
-            <span> Nenhum registro foi encontrato!</span>
+        <div class="div-required" v-show="!rulesIsValid">
+          <Alert type="warning" v-for="rule in rulesRequired" :key="rule.id">
+            É necessário informar o filtro
+            <span class="filter-required">{{ rule.title }}</span
+            >, clique no botão "Filtros" para adicionar.
           </Alert>
         </div>
-        <div class="div-Totalization" v-if="content.totalization.length > 0">
-          <Totalization :data="content.totalization" />
+        <div class="body-report" v-show="showBodyReport && rulesIsValid">
+          <Report
+            :header="content.headerTable"
+            :data="content.data"
+            :totalization="content.totalization"
+          />
         </div>
       </div>
     </Panel>
+    <Modal
+      :title="modalOptions.title"
+      :width="modalOptions.width"
+      v-show="showModal('templateReport')"
+    >
+      <ReportCreateUpdate :module="panel.module" v-show="modalOptions.name == 'save'" />
+      <Fields v-if="modalOptions.name == 'fields'" />
+      <Rules v-show="modalOptions.name == 'rules'" />
+      <div
+        class="text-right btn-apply"
+        v-show="modalOptions.name == 'fields' || modalOptions.name == 'rules'"
+      >
+        <Button
+          _key="btnApplyFieldsAndRules"
+          type="primary"
+          title="Aplicar"
+          classIcon="fas fa-filter"
+          size="small"
+          :clicked="applyFieldsAndRules"
+        />
+      </div>
+    </Modal>
   </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 Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
-import AddEditReport from "@nixweb/nixloc-ui/src/component/template/AddEditReport.vue";
+import Report from "../shared/Report.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,
-    rules: Array,
-    fields: Array,
-    field: Array,
+    templateReport: Object,
   },
   components: {
-    Alert,
-    Modal,
-    Button,
-    TableTotalRecords,
-    Table,
     Panel,
-    ScrollBar,
     Molded,
-    Totalization,
     ProgressBar,
+    Button,
+    Modal,
+    Alert,
     Tags,
-    AddEditReport,
-    ExportExcel,
-    HeaderPrint,
+    Report,
+    ReportCreateUpdate,
     Fields,
     Rules,
   },
   data() {
     return {
+      id: this.$route.params.id,
+      urlGetById: "api/v1/shared/report/get-by-id",
       content: {
         headerTable: [],
         data: [],
-        totalization: [],
-        pagination: 0,
-        currentPage: 1,
+        totalPages: [],
+        totalization: {},
+        noDataReturned: false,
+      },
+      baseParams: {
+        currentPage: 0,
         totalPerPage: 100,
+        totalPage: 0,
         totalRecords: 0,
       },
-      btnDesativado: true,
-      carregando: false,
-      nenhumDadoRetornado: false,
-      teste: this.router,
+      modalOptions: {
+        name: "",
+        title: "",
+        width: 0,
+      },
+      btnSearchDisabled: false,
+      btnSaveDisabled: true,
+      isLoading: false,
+      showBodyReport: false,
     };
   },
   mounted() {
-    this.removeLoading(["panel"]);
+    this.addReport({
+      id: this.id,
+      fields: this.templateReport.fields,
+      rules: this.templateReport.rules,
+    });
+
+    if (this.id) this.getById();
+
+    if (!this.id) this.removeLoadingWithTime();
   },
   beforeDestroy() {
-    this.updateOptionsInitValue({});
-    this.atualizaCampoOrdenado({});
-    this.atualizaFiltroSelecionado({ children: [] });
+    this.removeInitialReportCustom();
   },
-  computed: {
-    ...mapGetters("generic", ["showModal", "event"]),
-    ...mapGetters("report", [
-      "headerTable",
-      "selectedRules",
-      "requiredRules",
-      "regraObrigatoriaJaAdicionada",
-      "hasSelectedField",
-      "oDataSelect",
-      "oDataFilter",
-      "oDataOrderBy",
+  methods: {
+    ...mapActions("generic", ["getApi", "getApiOdata"]),
+    ...mapActions("report", [
+      "addReport",
+      "addInitialReportCustom",
+      "removeInitialReportCustom",
     ]),
-    ...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);
+    ...mapMutations("generic", ["addEvent", "openModal", "hideModal", "removeLoading"]),
+    getById() {
+      let params = { url: this.urlGetById, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        const query = JSON.parse(response.content.query);
+        let report = {
+          selectedFields: query.selectedFields,
+          selectedRules: query.selectedRules,
+        };
+        this.addInitialReportCustom(report);
+        this.removeLoadingWithTime();
       });
-
-      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;
+      this.btnSearchDisabled = true;
 
-      if (!this.invalid) {
-        this.mostraEscondeCampos();
-        this.pagination();
-        this.removeLoading(["buscarRelatorio"]);
+      if (this.rulesIsValid) {
+        this.getTotalRecords();
+        this.removeLoading(["btnSearchReport"]);
 
-        if (this.oDataFilter.totalization) this.resumoOData();
-        if (!this.oDataFilter.totalization) this.content.totalization = [];
+        if (this.oDataFilter.totalization) this.totalization();
+        if (!this.oDataFilter.totalization) this.content.totalization = {};
       }
     },
-    pagination() {
-      let paramsConsulta = { url: this.urlConsulta };
-      this.reiniciaDados();
+    getTotalRecords() {
+      let paramsQuery = { url: this.urlQuery };
+      this.resetData();
 
-      this.getApiOdata(paramsConsulta).then((response) => {
+      this.getApiOdata(paramsQuery).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 == 0) this.noDataReturned = true;
 
-        if (totalRecords <= this.content.totalPerPage) {
-          this.consultaOdata();
-          this.content.headerTable = this.headerTable;
-        }
-        if (this.content.pagination == 0) this.carregando = false;
+        this.baseParams.totalRecords = totalRecords;
+        this.baseParams.totalPage = Math.ceil(
+          totalRecords / this.baseParams.totalPerPage
+        );
+
+        if (this.baseParams.totalPage <= 1) this.loadingOnlyIfOnePage(response.value);
+        if (this.baseParams.totalPage > 1) this.loadingOnlyIfManyPages();
+
+        this.content.headerTable = this.headerTable;
+        this.showBodyReport = true;
       });
     },
-    reiniciaDados() {
-      this.carregando = true;
-      this.content.data = [];
-      this.content.currentPage = 1;
-      this.nenhumDadoRetornado = false;
+    totalization() {
+      let params = { url: this.urlTotalization };
+      this.getApiOdata(params).then((response) => {
+        const result = Object.entries(response[0]);
+        this.content.totalization = result;
+      });
+    },
+    loadingOnlyIfOnePage(data) {
+      this.content.data = data;
+      this.btnSearchDisabled = true;
+      let self = this;
+      setTimeout(function () {
+        self.isLoading = false;
+      }, 350);
     },
-    consultaOdata() {
-      let paramsConsulta = { url: this.urlConsulta };
-      this.getApiOdata(paramsConsulta).then((response) => {
+    loadingOnlyIfManyPages() {
+      let seq = 0;
+      while (seq <= this.baseParams.totalPage - 1) {
+        this.content.totalPages.push(seq);
+        seq++;
+      }
+    },
+    getAllManyPages() {
+      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;
+      this.content.totalPages.pop();
+      this.baseParams.currentPage++;
     },
-    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);
-            }
-          });
-        });
-      });
+    resetData() {
+      this.isLoading = true;
+      this.content.data = [];
+      this.content.totalPages = [];
+      this.baseParams.currentPage = 0;
+      this.noDataReturned = false;
+    },
+    executeOpenModal(params) {
+      if (this.id && params.name == "save") {
+        this.addEvent({ name: "saveReport" });
+      } else {
+        this.modalOptions = params;
+        this.openModal("templateReport");
+        this.removeLoading(["btnExecuteOpenModal", "btnSaveReport"]);
+      }
     },
-    abrirCampo() {
-      this.showModal("field");
-      this.removeLoading(["abrirCampo"]);
+    applyFieldsAndRules() {
+      this.hideModal("templateReport");
+      this.removeLoading(["btnApplyFieldsAndRules"]);
     },
-    abrirFiltro() {
-      this.showModal("filter");
-      this.removeLoading(["abrirFiltro"]);
+    removeLoadingWithTime() {
+      let self = this;
+      setTimeout(function () {
+        self.btnSaveDisabled = true;
+        self.removeLoading(["panel"]);
+      }, 350);
     },
-    aplicarFiltro() {
-      this.hideModal();
-      this.removeLoading(["aplicaFiltro", "aplicaCampo"]);
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    ...mapGetters("report", [
+      "headerTable",
+      "oDataFilter",
+      "oDataSelect",
+      "oDataOrderBy",
+      "rulesIsValid",
+      "rulesRequired",
+    ]),
+    ...mapState("report", ["report"]),
+    urlQuery() {
+      let skip = this.baseParams.currentPage * this.baseParams.totalPerPage;
+      let baseUrl = `${this.templateList.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.query}&$skip=${skip}&$top=${this.baseParams.totalPerPage}&$count=true`;
+      return baseUrl.replace("&&", "&");
     },
-    saveReport() {
-      this.addEvent({ nome: "changeReport" });
-      this.showModal("salvar");
-      this.removeLoading(["saveReport"]);
+    urlTotalization() {
+      let query = this.oDataFilter.query
+        ? `$apply=filter(${this.oDataFilter.query.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${
+        this.templateList.urlGetApi
+      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
+      return baseUrl;
     },
-    mostraEscondeCampos() {
-      let self = this;
-      this.report.fields.forEach(function (field) {
-        if (self.hasSelectedField(field.field, self.selectedField)) {
-          value.show = true;
-        } else {
-          value.show = false;
-        }
-      });
+    liveTotalRecords() {
+      return this.content.data.length;
     },
   },
   watch: {
     event: {
       handler(event) {
-        if (event.nome == "tagRelatorio") this.showModal("filter");
-      },
-      deep: true,
-    },
-    selectedField: {
-      handler() {
-        this.mostraEscondeCampos();
+        console.log(event);
+        if (event.name == "savedReport") this.btnSaveDisabled = true;
       },
       deep: true,
     },
-    "content.currentPage": {
-      handler(currentPage) {
-        if (currentPage <= this.content.pagination - 1) {
+    "content.totalPages": {
+      handler(totalPages) {
+        if (totalPages.length > 0) {
           let self = this;
           setTimeout(function () {
-            self.consultaOdata();
+            self.getAllManyPages();
           }, 200);
         }
-        if (currentPage == this.content.pagination && currentPage != 0)
-          this.carregando = false;
-      },
-      deep: true,
-    },
-    "content.pagination": {
-      handler() {
-        this.consultaOdata();
+        if (totalPages.length == 1) this.isLoading = false;
       },
       deep: true,
     },
-    "oDataFilter.query": {
-      handler() {
-        this.btnDesativado = false;
+    oDataFilter: {
+      handler(totalPages) {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
       },
       deep: true,
     },
     oDataSelect: {
-      handler() {
-        this.btnDesativado = false;
+      handler(totalPages) {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
       },
       deep: true,
     },
     oDataOrderBy: {
-      handler() {
-        this.btnDesativado = false;
+      handler(totalPages) {
+        this.btnSearchDisabled = false;
+        this.btnSaveDisabled = false;
       },
       deep: true,
     },
@@ -464,7 +385,7 @@ export default {
   padding-bottom: 15px;
 }
 
-.div-progresso {
+.div-progress {
   margin-bottom: 10px;
 }
 
@@ -472,7 +393,7 @@ export default {
   margin-top: 20px;
 }
 
-.div-tabela {
+.div-table {
   margin-top: 20px;
 }
 
@@ -489,11 +410,19 @@ export default {
   margin-top: 15px;
 }
 
-.div-obrigatorio {
+.div-required {
   margin-top: 20px;
 }
 
-.filter-obrigatorio {
+.filter-required {
   font-weight: 500;
 }
+
+.btn-apply {
+  margin-top: 10px;
+}
+
+.body-report {
+  margin-top: 30px;
+}
 </style>