@nixweb/nixloc-ui 0.0.306 → 0.0.308

package/package.json

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

package/src/component/layout/NewMenu.vue

@@ -55,17 +55,21 @@
                                         <b-row>
                                             <b-col sm="2" v-if="item.title">
                                                 <i :class="item.icon"></i>
-
                                             </b-col>
                                             <b-col sm="9">
                                                 <div v-if="item.groupName" class="div-group">
                                                     {{ item.groupName }}
                                                 </div>
                                                 <span>
+
                                                     <span> {{ item.title }}</span>
-                                                    <span class="div-support" v-if="item.isVisible == 'support'">
+                                                    <span class="div-new" v-if="item.isVisible == 'support'">
                                                         Suporte
                                                     </span>
+                                                    <span class="div-new"
+                                                        v-if="item.showNewUntil && showNewUntil(item.showNewUntil)">
+                                                        Novo 
+                                                    </span>
                                                 </span>
                                             </b-col>
                                         </b-row>
@@ -136,6 +140,17 @@ export default {
     },
     methods: {
         ...mapMutations("generic", ["addEvent", "toggleMenu"]),
+        showNewUntil(dateStr) {
+            const [day, month, year] = dateStr.split('/');
+            const inputDate = new Date(year, month - 1, day);
+            const today = new Date();
+
+            // Zerar horas para comparar apenas a data
+            inputDate.setHours(0, 0, 0, 0);
+            today.setHours(0, 0, 0, 0);
+
+            return today < inputDate;
+        },
         updatePageSize() {
             const windowHeight = window.innerHeight;
             this.pageSize = windowHeight;
@@ -445,11 +460,11 @@ export default {
     padding: 5px;
 }
 
-.div-support {
+.div-new {
     background-color: #0A36DB;
     font-size: 11px;
     border-radius: 20px;
-    padding: 1px 2px 2px 2px;
+    padding: 1px 3px 2px 2px;
     margin-left: 5px;
     color: white !important;
 }

package/src/component/layout/Zoom.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <div class="zoom-controls">
+            <transition name="fade">
+                <span v-if="showZoomLabel">{{ (zoom * 100).toFixed(0) }}%</span>
+            </transition>
+        </div>
+        <div class="zoom-area" :style="zoomStyle">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+    name: 'Zoom',
+    data() {
+        return {
+            zoom: 1,
+            zoomStep: 0.1,
+            zoomMin: 0.5,
+            zoomMax: 2.0,
+            showZoomLabel: false,
+            zoomTimeout: null
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+        zoomStyle() {
+            return {
+                transform: `scale(${this.zoom})`,
+                transformOrigin: 'top left',
+                display: 'inline-block',
+
+            }
+        }
+    },
+    methods: {
+        zoomIn() {
+            if (this.zoom < this.zoomMax) {
+                this.zoom += this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        zoomOut() {
+            if (this.zoom > this.zoomMin) {
+                this.zoom -= this.zoomStep
+                this.showZoomTemporarily()
+            }
+        },
+        showZoomTemporarily() {
+            this.showZoomLabel = true
+            clearTimeout(this.zoomTimeout)
+            this.zoomTimeout = setTimeout(() => {
+                this.showZoomLabel = false
+            }, 3000)
+        }
+    },
+    beforeDestroy() {
+        clearTimeout(this.zoomTimeout)
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "zoomIn") this.zoomIn();
+                if (event.name == "zoomOut") this.zoomOut();
+            },
+            deep: true,
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.zoom-controls {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.zoom-controls button {
+    padding: 5px 10px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.zoom-controls span {
+    font-size: 13px;
+}
+
+.zoom-area {
+    background: #fff;
+
+}
+</style>

package/src/component/report/Report.vue

@@ -47,9 +47,15 @@
                 </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">
+                            <i class="fa-solid fa-file-pdf"></i>
+                        </div>
                         <div class="icon-toolbar icon-excel">
                             <ExportExcel :nameFile="name" :header="dataConditional" :data="data" />
                         </div>
@@ -90,6 +96,8 @@ 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 jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
 
 import { mapMutations, mapActions, mapGetters } from "vuex";
 
@@ -113,6 +121,7 @@ export default {
             totalPerPage: 50,
             pagination: [],
             cancel: false,
+            loadingFile: false,
         }
     },
     mounted() {
@@ -205,6 +214,26 @@ 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;
+        },
         verifyIfPagination() {
             if (this.pagination.length > 0) {
                 this.currentPage++;
@@ -262,6 +291,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;

package/src/component/shared/Report.vue

@@ -1,14 +1,20 @@
 <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">
+        <i class="fa-solid fa-file-pdf"></i>
+      </div>
       <div class="icon-toolbar icon-excel">
         <ExportExcel :nameFile="name" :header="header" :data="data" />
       </div>
     </div>
-    <ScrollBar :minHeight="400" :maxHeight="820">
+    <ScrollBar :minHeight="400" :maxHeight="500">
       <br />
       <div id="printMeSub" :style="'min-height:' + minHeight + 'px'" class="a4 footer">
         <HeaderReport :title="titleHeader" />
@@ -67,6 +73,9 @@ import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 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 { mapMutations } from "vuex";
@@ -77,6 +86,11 @@ export default {
   },
   props: ["name", "titleHeader", "header", "data", "totalization", "totalizationCustom", "minHeight"],
   components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
+  data() {
+    return {
+      loadingFile: false,
+    }
+  },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
     convertClass(fieldComparison, classCssBody) {
@@ -96,6 +110,26 @@ export default {
     sendEvent(eventName, data) {
       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;
+    },
   },
 };
 </script>
@@ -150,6 +184,18 @@ table tbody tr td {
   border: 1px solid #e4e6ec;
 }
 
+.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;

package/src/component/shared/TotalizationReport.vue

@@ -3,19 +3,19 @@
     <hr class="hr-report" />
     <div class="text-right">
       <b-row>
-        <b-col sm="10">
+        <b-col sm="9">
           <span class="title-report-header"> Total de Registros .................. </span>
         </b-col>
-        <b-col sm="2">
+        <b-col sm="3">
           <span class="title-report-header value-report-header"> {{ totalRecords }} </span>
         </b-col>
       </b-row>
       <!-- Utilizado para calculo do subReport -->
       <b-row v-if="totalizationCustom">
-        <b-col sm="10">
+        <b-col sm="9">
           <span class="title-report-header"> {{ totalizationCustom[0].title }} .................. </span>
         </b-col>
-        <b-col sm="2">
+        <b-col sm="3">
           <span class="title-report-header value-report-header"> {{ totalizationCustom[0].value | currency }} </span>
         </b-col>
       </b-row>

package/src/component/template/ViewTemplateReportList.vue

@@ -43,6 +43,9 @@
                       <i class="fas fa-file-alt icon-report"></i>
                     </b-col>
                     <b-col sm="11" @click="navegateTo(report)">
+                      <div v-if="report.showNewUntil && showNewUntil(report.showNewUntil)" class="side-by-side div-new">
+                        <span>Novo</span>
+                      </div>
                       <div class="title-report side-by-side">{{ report.name }}</div>
                       <div><span class="description-report">{{ report.description }}</span></div>
                     </b-col>
@@ -80,6 +83,7 @@ export default {
   },
   computed: {
     ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
+
   },
   mounted() {
     this.getAll();
@@ -89,6 +93,16 @@ export default {
   methods: {
     ...mapMutations("generic", ["removeLoading"]),
     ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    showNewUntil(dateStr) {
+      const [day, month, year] = dateStr.split('/');
+      const inputDate = new Date(year, month - 1, day);
+      const today = new Date();
+
+      inputDate.setHours(0, 0, 0, 0);
+      today.setHours(0, 0, 0, 0);
+
+      return today < inputDate;
+    },
     getAll() {
       let obj = { module: this.panel.module };
       let params = { url: this.urlGetAll, obj: obj };
@@ -191,6 +205,15 @@ export default {
   color: #577696;
 }
 
+.div-new {
+  background-color: #0A36DB;
+  font-size: 11px;
+  border-radius: 20px;
+  padding: 1px 8px 2px 8px;
+  margin-right: 10px;
+  color: white !important;
+}
+
 .div-molded {
   margin-bottom: 10px;
   cursor: pointer;