@nixweb/nixloc-ui 0.0.308 → 0.0.310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.308",
+  "version": "0.0.310",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/layout/NewMenu.vue

@@ -68,7 +68,7 @@
                                                     </span>
                                                     <span class="div-new"
                                                         v-if="item.showNewUntil && showNewUntil(item.showNewUntil)">
-                                                        Novo 
+                                                        Novo
                                                     </span>
                                                 </span>
                                             </b-col>
@@ -204,9 +204,11 @@ export default {
             let filter = [];
             let self = this;
             let userLogged = this.userLogged.user.userName;
+            let companyId = this.userLogged.companyId;
             this.menu.items.forEach(function (obj) {
                 if (obj.isModule == isModule && obj.module === self.module) {
                     if (obj.isVisible == "all") filter.push(obj);
+                    if (obj.isVisible == companyId) filter.push(obj);
 
                     if (obj.isVisible == "support" && userLogged == "UserTemp")
                         filter.push(obj);

package/src/component/layout/Zoom.vue

@@ -5,14 +5,18 @@
                 <span v-if="showZoomLabel">{{ (zoom * 100).toFixed(0) }}%</span>
             </transition>
         </div>
-        <div class="zoom-area" :style="zoomStyle">
-            <slot></slot>
+
+        <div class="zoom-container">
+            <div class="zoom-area" :style="zoomStyle">
+                <slot></slot>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapActions } from "vuex";
+
+import { mapGetters } from "vuex";
 
 export default {
     name: 'Zoom',
@@ -32,8 +36,7 @@ export default {
             return {
                 transform: `scale(${this.zoom})`,
                 transformOrigin: 'top left',
-                display: 'inline-block',
-
+                width: `${100 / this.zoom}%`
             }
         }
     },
@@ -55,7 +58,7 @@ export default {
             clearTimeout(this.zoomTimeout)
             this.zoomTimeout = setTimeout(() => {
                 this.showZoomLabel = false
-            }, 3000)
+            }, 1000)
         }
     },
     beforeDestroy() {
@@ -82,10 +85,14 @@ export default {
     gap: 8px;
 }
 
-.zoom-controls button {
-    padding: 5px 10px;
-    font-weight: bold;
-    cursor: pointer;
+.zoom-container {
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+
+.zoom-area {
+    background: #fff;
 }
 
 .fade-enter-active,
@@ -101,9 +108,4 @@ export default {
 .zoom-controls span {
     font-size: 13px;
 }
-
-.zoom-area {
-    background: #fff;
-
-}
 </style>

package/src/component/report/Report.vue

@@ -47,28 +47,39 @@
                 </div>
                 <div v-if="show" class="preview">
                     <div class="toolbar">
-                        <div v-if="loadingFile" class="icon-toolbar">
-                            <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
-                        </div>
+
                         <div class="icon-toolbar" v-print="'#printMe'">
                             <i class="fas fa-print"></i>
                         </div>
-                        <div @click="generatePDF" class="icon-toolbar">
+                        <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">
-                            <HeaderReport :title="name" />
-                            <div>
-                                <span>Total de <b> {{ totalRecords }}</b> registro(s) </span>
-                            </div>
-                            <ReportTable :header="dataConditional" :data="data" />
-                            <Totalization :totalization="totalization" />
+                            <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>
@@ -94,10 +105,10 @@ 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 jsPDF from 'jspdf'
-import html2canvas from 'html2canvas'
+import html2pdf from 'html2pdf.js'
 
 import { mapMutations, mapActions, mapGetters } from "vuex";
 
@@ -107,7 +118,7 @@ export default {
         print,
     },
     props: ["name", "module", "urlGet", "header", "filters", "minHeight"],
-    components: { ScrollBar, HeaderReport, Alert, ExportExcel, ReportTable, Molded, FilterQuery, Button, Fields, Panel, Loading, Totalization, ProgressBar },
+    components: { ScrollBar, HeaderReport, Alert, Zoom, ExportExcel, ReportTable, Molded, FilterQuery, Button, Fields, Panel, Loading, Totalization, ProgressBar },
     data() {
         return {
             loading: false,
@@ -153,7 +164,7 @@ export default {
         }
     },
     methods: {
-        ...mapMutations("generic", ["removeLoading"]),
+        ...mapMutations("generic", ["addEvent", "removeLoading"]),
         ...mapActions("generic", ["getApi"]),
         executeSearch() {
             this.cancel = false;
@@ -215,24 +226,29 @@ export default {
             }
         },
         async generatePDF() {
-            this.loadingFile = true;
-            const tabela = document.getElementById('printMe')
-            const canvas = await html2canvas(tabela, {
-                scale: 4
-            })
-            const imgData = canvas.toDataURL('image/png')
-
-            const pdf = new jsPDF('l', 'mm', 'a4')
-            const pageWidth = pdf.internal.pageSize.getWidth()
-            const pageHeight = pdf.internal.pageSize.getHeight()
-
-            const imgProps = pdf.getImageProperties(imgData)
-            const pdfWidth = pageWidth
-            const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
-
-            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
-            pdf.save(this.name + '.pdf')
-            this.loadingFile = false;
+            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) {
@@ -284,6 +300,13 @@ export default {
     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;

package/src/component/shared/Report.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="preview">
     <div class="toolbar">
-      <div v-if="loadingFile" class="icon-toolbar">
-        <i class="fa-duotone fa-solid fa-spinner-third loading-icon"></i>
-      </div>
       <div class="icon-toolbar" v-print="'#printMeSub'">
         <i class="fas fa-print"></i>
       </div>
-      <div @click="generatePDF" class="icon-toolbar">
+      <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">
@@ -74,9 +74,8 @@ import HeaderReport from "../shared/HeaderReport.vue";
 import TotalizationReport from "../shared/TotalizationReport.vue";
 import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
 
-import jsPDF from 'jspdf'
-import html2canvas from 'html2canvas'
 import print from "vue-print-nb";
+import html2pdf from 'html2pdf.js'
 
 import { mapMutations } from "vuex";
 
@@ -111,24 +110,29 @@ export default {
       if (eventName) this.addEvent({ name: eventName, data: data });
     },
     async generatePDF() {
-      this.loadingFile = true;
-      const tabela = document.getElementById('printMeSub')
-      const canvas = await html2canvas(tabela, {
-        scale: 4
-      })
-      const imgData = canvas.toDataURL('image/png')
-
-      const pdf = new jsPDF('l', 'mm', 'a4')
-      const pageWidth = pdf.internal.pageSize.getWidth()
-      const pageHeight = pdf.internal.pageSize.getHeight()
-
-      const imgProps = pdf.getImageProperties(imgData)
-      const pdfWidth = pageWidth
-      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
-
-      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
-      pdf.save(this.name + '.pdf')
-      this.loadingFile = false;
+      try {
+        this.loadingFile = true;
+
+        const element = document.getElementById('printMeSub');
+
+        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;
+      }
     },
   },
 };