@nixweb/nixloc-ui 1.16.0 → 1.19.0

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

@@ -1,313 +1,378 @@
-<template>
-    <div class="main">
-        <Panel :module="module" layout="large" :title="name" :showVerticalFilter="false" :showSearch="false"
-            :showButtons="false">
-            <div slot="content-main">
-                <br>
-                <div class="div-btn">
-                    <Molded>
-                        <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" />
-                                </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" />
-                            </div>
-                            <div class="side-by-side div-filter-query">
-                                <FilterQuery :filters="filters" v-model="stringFilter" />
-                            </div>
-                        </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>
-                <div v-if="!isValid">
-                    <Alert type="info">
-                        <span>
-                            É necessário informar o filtro <div class="badge badge-default">
-                                {{ fieldsRequired }}
-                            </div>, clique no botão <b> <i class="div-icon-btn fa-sharp fa-solid fa-filters"
-                                    aria-hidden="true"></i> Filtros
-                            </b>para
-                            adicionar.
-                        </span>
-                    </Alert>
-                </div>
-
-                <div v-if="show && isDateFilterValid && isValid" class="preview">
-                    <div class="toolbar">
-                        <div class="icon-toolbar" v-print="'#printMe'">
-                            <i class="fas fa-print"></i>
-                        </div>
-                        <div v-if="loadingFile" class="icon-toolbar">
-                            <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
-                        </div>
-                        <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>
-                        <div class="div-pipe icon-toolbar"></div>
-                        <div class="icon-toolbar" @click="addEvent({ name: 'zoomIn' })">
-                            <i class="fa-regular fa-magnifying-glass-plus"></i>
-                        </div>
-
-                        <div class="icon-toolbar" @click="addEvent({ name: 'zoomOut' })">
-                            <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>
-                        </div>
-                    </ScrollBar>
-                </div>
-            </div>
-        </Panel>
-        <br>
-        <br>
-    </div>
-</template>
-
-<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 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 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 },
-    data() {
-        return {
-            loading: false,
-            show: false,
-            stringFilter: [],
-            cancel: false,
-            anos: [],
-            data: [],
-            loadingFile: false,
-        }
-    },
-    mounted() {
-        this.removeLoading(["panel"]);
-    },
-    computed: {
-        ...mapGetters("generic", ["event"]),
-        isDateFilterValid() {
-            const restrictedDates = ["DueDate", "ConciliationDate", "CompetenceDate"];
-            const found = this.stringFilter.filter(f => restrictedDates.includes(f.field));
-            return found.length <= 1;
-        },
-        isValid() {
-            var hasRequired = this.filters.some(item => item.required);
-            if (hasRequired) {
-                return this.stringFilter.some(item => item.required == true && item.value !== "");
-            } else {
-                return true;
-            }
-        },
-        fieldsRequired() {
-            let title = "";
-            var filter = this.filters.filter(item => item.required);
-            filter.forEach(item => {
-                title += item.title + ' ou '
-            });
-            return title.replace(/ ou\s*$/, '');
-        }
-    },
-    methods: {
-        ...mapMutations("generic", ["addEvent", "removeLoading"]),
-        ...mapActions("generic", ["getApi"]),
-        executeSearch() {
-            this.cancel = false;
-            this.data = [];
-            this.getAll();
-        },
-        getAll() {
-            if (this.isValid && this.isDateFilterValid) {
-                this.removeLoading(["btnSearchReport"]);
-                this.loading = true;
-                this.cancel = false;
-
-                let params = {
-                    url: this.urlGet,
-                    obj:
-                    {
-                        stringFilter: JSON.stringify(this.stringFilter),
-                        noPaginated: true
-                    }
-                };
-
-                this.getApi(params).then((response) => {
-
-                    this.data = response.content.data.grouped;
-                    this.anos = response.content.data.listYear;
-
-                    let self = this;
-
-                    this.show = true;
-                    setTimeout(function () {
-                        self.loading = false;
-                    }, 500);
-
-                });
-            }
-        },
-        async generatePDF() {
-            try {
-                this.loadingFile = true;
-
-                const element = document.getElementById('printMe');
-
-                const opt = {
-                    margin: 0,
-                    filename: 'Relatório de Desempenho Financeiro.pdf',
-                    image: { type: 'jpeg', quality: 0.98 },
-                    html2canvas: { scale: 2 },
-                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
-                };
-
-                await html2pdf()
-                    .set(opt)
-                    .from(element)
-                    .save();
-
-            } catch (error) {
-                console.error('Erro ao gerar PDF:', error);
-            } finally {
-                this.loadingFile = false;
-            }
-        },
-        openFields() {
-            this.removeLoading(["btnOpenFields"]);
-        }
-    },
-};
-</script>
-
-<style scoped>
-.main {
-    margin-bottom: 30px;
-}
-
-.title {
-    font-size: 12px;
-    font-weight: normal;
-}
-
-.div-btn {
-    margin-bottom: 30px;
-}
-
-.div-pipe {
-    border-left: 1.5px solid rgb(189, 189, 189);
-    margin: 0px -15px -6px 0px;
-    height: 25px;
-}
-
-
-.preview {
-    background-color: #fafafa;
-    padding-bottom: 20px;
-    border: 1px solid #e4e6ec;
-    height: 100%;
-}
-
-.toolbar {
-    height: 40px;
-    border-bottom: 1px hsl(0, 0%, 82.7%) solid;
-    overflow: hidden;
-}
-
-.icon-toolbar {
-    width: 20px;
-    font-size: 18px;
-    margin-left: 10px;
-    margin-top: 2px;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.a4 {
-    max-width: 1200px;
-    padding: 20px;
-    border-radius: var(--ck-border-radius);
-    background: white;
-    box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
-    margin: 0 auto;
-}
-
-.div-filter {
-    margin-bottom: -12px;
-}
-
-.div-filter-query {
-    margin-top: 10px;
-}
-
-.footer {
-    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;
-}
-
-.cancel {
-    color: red;
-    cursor: pointer;
-}
-
-.badge-default {
-    background-color: #eeeeee;
-    font-size: 13px !important;
-}
+<template>
+    <div class="main">
+        <Panel :module="module" layout="large" :title="name" :showVerticalFilter="false" :showSearch="false"
+            :showButtons="false">
+            <div slot="content-main">
+                <br>
+                <div class="div-btn">
+                    <Molded>
+                        <div class="div-filter">
+                            <div class="side-by-side">
+                                <div class="div-filter">
+                                    <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">
+                                <Fields :data="header" v-model="ordering" />
+                            </div>
+                            <div class="side-by-side div-filter-query">
+                                <FilterQuery :filters="filters" v-model="stringFilter" />
+                            </div>
+                        </div>
+                    </Molded>
+                </div>
+                <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>
+                            É necessário informar o filtro <div class="badge badge-default">
+                                {{ fieldsRequired }}
+                            </div>, clique no botão <b> <i class="div-icon-btn fa-sharp fa-solid fa-filters"
+                                    aria-hidden="true"></i> Filtros
+                            </b>para
+                            adicionar.
+                        </span>
+                    </Alert>
+                </div>
+                <div v-if="show" class="preview">
+                    <div class="toolbar">
+
+                        <div class="icon-toolbar" v-print="'#printMe'">
+                            <i class="fas fa-print"></i>
+                        </div>
+                        <div v-if="loadingFile" class="icon-toolbar">
+                            <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
+                        </div>
+                        <div v-else @click="generatePDF" class="icon-toolbar">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
+                        <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' })">
+                            <i class="fa-regular fa-magnifying-glass-plus"></i>
+                        </div>
+
+                        <div class="icon-toolbar" @click="addEvent({ name: 'zoomOut' })">
+                            <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">
+                            <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>
+            </div>
+        </Panel>
+        <br>
+        <br>
+    </div>
+</template>
+
+<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 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", "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,
+            loadingFile: false,
+        }
+    },
+    mounted() {
+        this.removeLoading(["panel"]);
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        dataConditional() {
+            return this.header.filter(item => item.show);
+        },
+        liveTotalRecords() {
+            return this.data.length;
+        },
+        isValid() {
+            var hasRequired = this.filters.some(item => item.required);
+            if (hasRequired) {
+                return this.stringFilter.some(item => item.required == true && item.value !== "");
+            } else {
+                return true;
+            }
+        },
+        fieldsRequired() {
+            let title = "";
+            var filter = this.filters.filter(item => item.required);
+            filter.forEach(item => {
+                title += item.title + ' ou '
+            });
+            return title.replace(/ ou\s*$/, '');
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "removeLoading"]),
+        ...mapActions("generic", ["getApi"]),
+        executeSearch() {
+            this.cancel = false;
+            this.data = [];
+            this.pagination = [];
+            this.totalization = [];
+            this.getAll();
+        },
+        getAll() {
+            if (this.isValid && !this.cancel) {
+                this.removeLoading(["btnSearchReport"]);
+                this.loading = true;
+                this.cancel = false;
+
+                let params = {
+                    url: this.urlGet,
+                    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;
+
+                    if (this.pagination.length == 0) {
+                        this.currentPage = 1;
+                        this.data = [];
+                    }
+
+                    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();
+                });
+            }
+        },
+        async generatePDF() {
+            try {
+                this.loadingFile = true;
+
+                const element = document.getElementById('printMe');
+
+                const opt = {
+                    margin: 0,
+                    filename: this.name + '.pdf',
+                    image: { type: 'jpeg', quality: 0.98 },
+                    html2canvas: { scale: 2 },
+                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
+                };
+
+                await html2pdf()
+                    .set(opt)
+                    .from(element)
+                    .save();
+
+            } catch (error) {
+                console.error('Erro ao gerar PDF:', error);
+            } finally {
+                this.loadingFile = false;
+            }
+        },
+        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 {
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.div-btn {
+    margin-bottom: 30px;
+}
+
+.div-pipe {
+    border-left: 1.5px solid rgb(189, 189, 189);
+    margin: 0px -15px -6px 0px;
+    height: 25px;
+}
+
+
+.preview {
+    background-color: #fafafa;
+    padding-bottom: 20px;
+    border: 1px solid #e4e6ec;
+    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;
+    overflow: hidden;
+}
+
+.icon-toolbar {
+    width: 20px;
+    font-size: 18px;
+    margin-left: 10px;
+    margin-top: 2px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.a4 {
+    max-width: 1200px;
+    padding: 20px;
+    border-radius: var(--ck-border-radius);
+    background: white;
+    box-shadow: 0 0 5px hsl(0deg 0% 0% / 10%);
+    margin: 0 auto;
+}
+
+.div-filter {
+    margin-bottom: -12px;
+}
+
+.div-filter-query {
+    margin-top: 10px;
+}
+
+.footer {
+    margin-bottom: 10px;
+}
+
+.icon-excel {
+    color: green;
+}
+
+.cancel {
+    color: red;
+    cursor: pointer;
+}
+
+.badge-default {
+    background-color: #eeeeee;
+    font-size: 13px !important;
+}
 </style>