@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

@@ -9,13 +9,15 @@
                         <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" />
+                                    <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">
-                                <Fields :data="header" v-model="ordering" />
+                                <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" />
@@ -23,16 +25,15 @@
                         </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 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>
@@ -45,9 +46,9 @@
                         </span>
                     </Alert>
                 </div>
-                <div v-if="show" class="preview">
-                    <div class="toolbar">
 
+                <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>
@@ -57,8 +58,8 @@
                         <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 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' })">
@@ -69,17 +70,14 @@
                             <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>
+                            <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>
@@ -92,46 +90,37 @@
 
 <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 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 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 },
+    props: ["name", "module", "urlGet", "filters", "minHeight"],
+    components: { ScrollBar, Alert, Molded, FilterQuery, Button, Fields, Panel, Loading, ProgressBar, DataCrossTable },
     data() {
         return {
             loading: false,
             show: false,
-            data: [],
-            totalization: [],
-            ordering: {},
             stringFilter: [],
-            totalRecords: 0,
-            currentPage: 1,
-            totalPerPage: 50,
-            pagination: [],
             cancel: false,
+            anos: [],
+            data: [],
             loadingFile: false,
         }
     },
@@ -140,11 +129,10 @@ export default {
     },
     computed: {
         ...mapGetters("generic", ["event"]),
-        dataConditional() {
-            return this.header.filter(item => item.show);
-        },
-        liveTotalRecords() {
-            return this.data.length;
+        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);
@@ -169,12 +157,10 @@ export default {
         executeSearch() {
             this.cancel = false;
             this.data = [];
-            this.pagination = [];
-            this.totalization = [];
             this.getAll();
         },
         getAll() {
-            if (this.isValid && !this.cancel) {
+            if (this.isValid && this.isDateFilterValid) {
                 this.removeLoading(["btnSearchReport"]);
                 this.loading = true;
                 this.cancel = false;
@@ -184,44 +170,22 @@ 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;
 
-                    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();
-                    }
+                    this.data = response.content.data.grouped;
+                    this.anos = response.content.data.listYear;
 
-                    response.content.data.forEach(item => {
-                        self.data.push(item);
-                    });
+                    let self = this;
 
                     this.show = true;
                     setTimeout(function () {
                         self.loading = false;
                     }, 500);
 
-                    this.verifyIfPagination();
                 });
             }
         },
@@ -233,7 +197,7 @@ export default {
 
                 const opt = {
                     margin: 0,
-                    filename: this.name + '.pdf',
+                    filename: 'Relatório de Desempenho Financeiro.pdf',
                     image: { type: 'jpeg', quality: 0.98 },
                     html2canvas: { scale: 2 },
                     jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
@@ -250,45 +214,16 @@ export default {
                 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;
+        openFields() {
+            this.removeLoading(["btnOpenFields"]);
         }
     },
-    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 {
@@ -314,18 +249,6 @@ 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;
@@ -362,6 +285,18 @@ 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/components/modules/finance/new-payable-receivable/PayableReceivableConfig.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <CheckboxGroup :stacked="true" :initialValue="initialValue" :options="options" v-model="optionsSelected"
+            :changed="onChanged" />
+    </div>
+</template>
+
+<script>
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+
+export default {
+    name: "PayableReceivableConfig",
+    components: { CheckboxGroup, RadioGroup },
+    data() {
+        return {
+            options: [
+                { text: "Mostrar baixadas", value: "showClosed" },
+                { text: "Mostrar saldo diário", value: "showBalance" },
+                { text: "Mostrar resumo financeiro", value: "showSummary" },
+                { text: "Vencimento (mais recente primeiro)", value: "sortDueDateDesc" },
+            ],
+            initialValue: ["showClosed", "showBalance", "showSummary", "sortDueDateDesc"],
+            optionsSelected: [],
+        };
+    },
+    methods: {
+        onChanged() {
+            console.log(JSON.stringify(this.optionsSelected));
+            //JSON.parse(str);
+
+        },
+    },
+};
+</script>