@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/{components/modules/finance/dre/ReportCrossTable.vue → component/report/Report.vue}

@@ -9,15 +9,13 @@
                         <div class="div-filter">
                             <div class="side-by-side">
                                 <div class="div-filter">
-                                    <Button _key="btnSearchReport" :disabled="loading || !isValid || !isDateFilterValid"
-                                        type="primary" :title="loading ? 'Aguarde...' : 'Buscar'"
-                                        classIcon="fas fa-file-search" size="medium" :clicked="executeSearch" />
+                                    <Button _key="btnSearchReport" :disabled="loading || !isValid" type="primary"
+                                        :title="loading ? 'Aguarde...' : 'Buscar'" classIcon="fas fa-file-search"
+                                        size="medium" :clicked="executeSearch" />
                                 </div>
                             </div>
                             <div class="side-by-side">
-                                <Button v-if="data.length > 0" _key="btnOpenFields" eventName="openFields" color="black"
-                                    backGroundColor="#F0F0F0" title="Campos" classIcon="fa-sharp fa-solid fa-text-size"
-                                    size="small" :clicked="openFields" />
+                                <Fields :data="header" v-model="ordering" />
                             </div>
                             <div class="side-by-side div-filter-query">
                                 <FilterQuery :filters="filters" v-model="stringFilter" />
@@ -25,15 +23,16 @@
                         </div>
                     </Molded>
                 </div>
-                <div v-if="!isDateFilterValid && isValid">
-                    <Alert type="danger">
-                        <span>
-                            É permitido somente um filtro por vez <div class="badge badge-default">
-                                {{ fieldsRequired }}
-                            </div>
-                        </span>
-                    </Alert>
+                <div v-if="!cancel">
+                    <div v-if="liveTotalRecords != totalRecords">
+                        <ProgressBar :text="`Carregando ${liveTotalRecords} registros de ${totalRecords}`"
+                            :value="liveTotalRecords" :max="totalRecords" size="medium" />
+                        <div class="text-center cancel" @click="stop">
+                            <i class="fa-solid fa-ban"></i> Cancelar
+                        </div>
+                    </div>
                 </div>
+
                 <div v-if="!isValid">
                     <Alert type="info">
                         <span>
@@ -46,9 +45,9 @@
                         </span>
                     </Alert>
                 </div>
-
-                <div v-if="show && isDateFilterValid && isValid" class="preview">
+                <div v-if="show" class="preview">
                     <div class="toolbar">
+
                         <div class="icon-toolbar" v-print="'#printMe'">
                             <i class="fas fa-print"></i>
                         </div>
@@ -58,8 +57,8 @@
                         <div v-else @click="generatePDF" class="icon-toolbar">
                             <i class="fa-solid fa-file-pdf"></i>
                         </div>
-                        <div class="icon-toolbar icon-excel" @click="addEvent({ name: 'openExcel' })">
-                            <i class="fas fa-file-excel"></i>
+                        <div class="icon-toolbar icon-excel">
+                            <ExportExcel :nameFile="name" :header="dataConditional" :data="data" />
                         </div>
                         <div class="div-pipe icon-toolbar"></div>
                         <div class="icon-toolbar" @click="addEvent({ name: 'zoomIn' })">
@@ -70,14 +69,17 @@
                             <i class="fa-regular fa-magnifying-glass-minus"></i>
                         </div>
                     </div>
-
                     <ScrollBar :minHeight="400" :maxHeight="820">
                         <br />
                         <div id="printMe" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
-                            <DataCrossTable v-if="data.length > 0 && !loading" :dadosAnos="anos"
-                                :dadosFinanceiros="data" />
-                            <div v-if="data.length == 0 && !loading">Nenhum registro encontrado!</div>
-                            <div v-if="loading">Carregando...</div>
+                            <Zoom>
+                                <HeaderReport :title="name" />
+                                <div>
+                                    <span>Total de <b> {{ totalRecords }}</b> registro(s) </span>
+                                </div>
+                                <ReportTable :header="dataConditional" :data="data" />
+                                <Totalization :totalization="totalization" />
+                            </Zoom>
                         </div>
                     </ScrollBar>
                 </div>
@@ -90,37 +92,46 @@
 
 <script>
 
-
 import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
-import DataCrossTable from './DataCrossTable.vue'
+import HeaderReport from "../shared/HeaderReport.vue";
+import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
+import ReportTable from "@nixweb/nixloc-ui/src/component/report/ReportTable.vue";
+import Totalization from "@nixweb/nixloc-ui/src/component/report/Totalization.vue";
 import FilterQuery from '@nixweb/nixloc-ui/src/component/shared/filter-builder/FilterQuery.vue'
 import ProgressBar from "@nixweb/nixloc-ui/src/component/shared/ProgressBar";
 import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 import Fields from "@nixweb/nixloc-ui/src/component/report/Fields.vue";
 import Panel from "@nixweb/nixloc-ui/src/component/layout/Panel.vue";
 import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Zoom from "@nixweb/nixloc-ui/src/component/layout/Zoom";
 
 import print from "vue-print-nb";
 import html2pdf from 'html2pdf.js'
 
 import { mapMutations, mapActions, mapGetters } from "vuex";
 
+
 export default {
     directives: {
         print,
     },
-    props: ["name", "module", "urlGet", "filters", "minHeight"],
-    components: { ScrollBar, Alert, Molded, FilterQuery, Button, Fields, Panel, Loading, ProgressBar, DataCrossTable },
+    props: ["name", "module", "urlGet", "header", "filters", "minHeight"],
+    components: { ScrollBar, HeaderReport, Alert, Zoom, ExportExcel, ReportTable, Molded, FilterQuery, Button, Fields, Panel, Loading, Totalization, ProgressBar },
     data() {
         return {
             loading: false,
             show: false,
+            data: [],
+            totalization: [],
+            ordering: {},
             stringFilter: [],
+            totalRecords: 0,
+            currentPage: 1,
+            totalPerPage: 50,
+            pagination: [],
             cancel: false,
-            anos: [],
-            data: [],
             loadingFile: false,
         }
     },
@@ -129,10 +140,11 @@ export default {
     },
     computed: {
         ...mapGetters("generic", ["event"]),
-        isDateFilterValid() {
-            const restrictedDates = ["DueDate", "ConciliationDate", "CompetenceDate"];
-            const found = this.stringFilter.filter(f => restrictedDates.includes(f.field));
-            return found.length <= 1;
+        dataConditional() {
+            return this.header.filter(item => item.show);
+        },
+        liveTotalRecords() {
+            return this.data.length;
         },
         isValid() {
             var hasRequired = this.filters.some(item => item.required);
@@ -157,10 +169,12 @@ export default {
         executeSearch() {
             this.cancel = false;
             this.data = [];
+            this.pagination = [];
+            this.totalization = [];
             this.getAll();
         },
         getAll() {
-            if (this.isValid && this.isDateFilterValid) {
+            if (this.isValid && !this.cancel) {
                 this.removeLoading(["btnSearchReport"]);
                 this.loading = true;
                 this.cancel = false;
@@ -170,22 +184,44 @@ export default {
                     obj:
                     {
                         stringFilter: JSON.stringify(this.stringFilter),
+                        fieldOrder: this.ordering.field,
+                        ordering: this.ordering.ordering,
+                        currentPage: this.currentPage,
+                        totalPerPage: this.totalPerPage,
                         noPaginated: true
                     }
                 };
 
                 this.getApi(params).then((response) => {
+                    let self = this;
+                    this.totalization = response.content.totalization;
+                    this.totalRecords = response.content.totalRecords;
 
-                    this.data = response.content.data.grouped;
-                    this.anos = response.content.data.listYear;
+                    if (this.pagination.length == 0) {
+                        this.currentPage = 1;
+                        this.data = [];
+                    }
 
-                    let self = this;
+                    if (this.pagination.length == 0) {
+                        var pagination = response.content.totalRecords / this.totalPerPage;
+                        var arr = Math.ceil(pagination);
+                        for (var i = 1; i <= arr; i++) {
+                            self.pagination.push(i);
+                        }
+                    } else {
+                        this.pagination.pop();
+                    }
+
+                    response.content.data.forEach(item => {
+                        self.data.push(item);
+                    });
 
                     this.show = true;
                     setTimeout(function () {
                         self.loading = false;
                     }, 500);
 
+                    this.verifyIfPagination();
                 });
             }
         },
@@ -197,7 +233,7 @@ export default {
 
                 const opt = {
                     margin: 0,
-                    filename: 'Relatório de Desempenho Financeiro.pdf',
+                    filename: this.name + '.pdf',
                     image: { type: 'jpeg', quality: 0.98 },
                     html2canvas: { scale: 2 },
                     jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
@@ -214,16 +250,45 @@ export default {
                 this.loadingFile = false;
             }
         },
-        openFields() {
-            this.removeLoading(["btnOpenFields"]);
+        verifyIfPagination() {
+            if (this.pagination.length > 0) {
+                this.currentPage++;
+
+                let self = this;
+                setTimeout(function () {
+                    self.getAll();
+                }, 500);
+            } else {
+                this.currentPage = 1;
+            }
+        },
+        stop() {
+            this.cancel = true;
+            this.loading = false;
         }
     },
+    watch: {
+        event: {
+            handler(event) {
+                if (this.show) {
+                    if (event.name == "stringFilter" || event.name == "orderedFilter") {
+                        let self = this;
+                        setTimeout(function () {
+                            //  self.getAll();
+                        }, 500);
+                    }
+                }
+            },
+            deep: true,
+        },
+    },
 };
 </script>
 
 <style scoped>
 .main {
     margin-bottom: 30px;
+
 }
 
 .title {
@@ -249,6 +314,18 @@ export default {
     height: 100%;
 }
 
+.loading-icon {
+    color: orange;
+    font-size: 19px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .toolbar {
     height: 40px;
     border-bottom: 1px hsl(0, 0%, 82.7%) solid;
@@ -285,18 +362,6 @@ export default {
     margin-bottom: 10px;
 }
 
-.loading-icon {
-    color: orange;
-    font-size: 19px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
 .icon-excel {
     color: green;
 }

package/src/component/report/ReportTable.vue

@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <table class="table table-responsive-md">
+            <thead>
+                <tr>
+                    <th v-for="(obj, ind) in header" :key="ind">
+                        <div class="title-margem" :class="obj.classCssTitle" :style="obj.styleHeader">
+                            <i class="fas fa-search" v-if="obj.iconSearch"></i>
+                            <span class="title-header"> {{ obj.title }}</span>
+                        </div>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="div-row" v-for="(row, index) in data" :key="index" :style="row.rowCss">
+                    <td v-for="(obj, ind) in header" :key="ind">
+                        <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)"
+                            :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
+                            {{ row[obj.field] }}
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+            <tbody v-show="data.length == 0">
+                <tr>
+                    <td colspan="12">
+                        <span>Nenhum registro encontrado!</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+</template>
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ReportTable",
+    props: ["header", "data"],
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        convertClass(fieldComparison, classCssBody) {
+            if (Array.isArray(classCssBody)) {
+                let ret = [];
+                classCssBody.forEach(function (value) {
+                    let classCss = value.classCss;
+                    let condition = value.fieldComparison == fieldComparison;
+                    let obj = { [classCss]: condition };
+                    ret.push(obj);
+                });
+                return ret;
+            } else {
+                return classCssBody;
+            }
+        },
+        sendEvent(eventName, data) {
+            if (eventName) this.addEvent({ name: eventName, data: data });
+        }
+    },
+}
+
+</script>
+<style scoped>
+table tbody tr td {
+    width: 1100px;
+}
+
+.table thead tr {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+}
+
+.table th,
+.table td {
+    height: 10px !important;
+    padding-left: 0px !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    padding-right: 5px !important;
+    border-bottom: 0px !important;
+    border-top: 0px !important;
+    font-size: 13px !important;
+}
+
+.title-header {
+    font-size: 12px;
+    color: #757d8c;
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+.table-number {
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.table-main {
+    color: #757d8c;
+    max-width: 200px;
+}
+
+.table-currency {
+    font-size: 12px;
+    min-width: 100px;
+}
+
+.div-row {
+    border-bottom: 1px solid #D3D3D3;
+}
+</style>

package/src/component/report/Totalization.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <hr class="hr-report" />
+        <div class="text-right" v-for="item in totalization" :key="item.title">
+            <b-row>
+                <b-col sm="10">
+                    <span>
+                        <span class="title-report-header">
+                            {{ item.title }} ..................
+                        </span>
+                    </span>
+                </b-col>
+                <b-col sm="2">
+                    {{ item.value }}
+                </b-col>
+            </b-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Totalization",
+    props: ["totalization"],
+
+}
+
+</script>
+<style scoped>
+.hr-report {
+    background: black !important;
+    height: 0px !important;
+}
+</style>

package/src/component/shared/CodeEditor.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="div-download title" @click="download">
+      <i class="fa-solid fa-download icon-download"></i>
+      <span class="title-download">Baixar</span>
+    </div>
+    <AceEditor v-model="code" lang="html" @init="editorInit" theme="monokai" width="100%" height="400px" :options="{
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      fontSize: 15,
+      highlightActiveLine: true,
+      enableSnippets: false,
+      showLineNumbers: true,
+      tabSize: 2,
+      showPrintMargin: false,
+      showGutter: true,
+    }" />
+    <div v-if="!editMode" class="apply">
+      <b-row>
+        <b-col class="text-right">
+          <Button key="applyCode" type="primary" title="Aplicar" classIcon="far fa-code" size="small"
+            :clicked="apply" />
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import AceEditor from "vuejs-ace-editor";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  name: "CodeEditor",
+  props: {
+    editMode: Boolean
+  },
+  components: {
+    AceEditor,
+    Button,
+  },
+  data() {
+    return {
+      code: "",
+    };
+  },
+  mounted() {
+    this.code = this.editMode ? this.documentHtmlFinal : this.documentHtml;
+  },
+  computed: {
+    ...mapState("generic", ["documentHtml", "documentHtmlFinal"]),
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateDocumentHtml",
+      "updateDocumentHtmlFinal",
+      "hideModal",
+      "removeLoading",
+    ]),
+    apply() {
+      this.updateDocumentHtml(this.code);
+      this.hideModal("code");
+      this.removeLoading(["applyCode"]);
+    },
+    editorInit: function () {
+      require("brace/ext/language_tools"); //language extension prerequsite...
+      require("brace/mode/html");
+      require("brace/mode/javascript"); //language
+      require("brace/mode/less");
+      require("brace/theme/monokai");
+      require("brace/snippets/javascript"); //snippet
+    },
+    download() {
+      const blob = new Blob([this.code], { type: 'text/plain' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'arquivo.txt';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    }
+  },
+  watch: {
+    code: {
+      handler(code) {
+        this.updateDocumentHtmlFinal(this.code);
+      },
+      deep: true,
+    },
+    documentHtml: {
+      handler(documentHtml) {
+        this.code = documentHtml;
+      },
+      deep: true,
+    },
+    documentHtmlFinal: {
+      handler(documentHtmlFinal) {
+        this.code = documentHtmlFinal;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.apply {
+  margin-top: 10px;
+}
+
+.div-download {
+  cursor: pointer;
+  margin-bottom: 5px;
+}
+
+.title-download {
+  margin-left: 6px;
+  font-size: 14px;
+}
+
+.title-download:hover {
+  text-decoration: underline;
+}
+
+.icon-download {
+  font-size: 18px;
+}
+</style>