@nixweb/nixloc-ui 1.4.0 → 1.6.0

package/package.json

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

package/src/component/layout/BottomActionsBar.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script>
-
 import { mapMutations } from "vuex";
 
 export default {
@@ -39,11 +38,17 @@ export default {
             return Array.isArray(this.selected) && this.selected.length > 0;
         }
     },
+    watch: {
+        isOpen(val) {
+            document.body.classList.toggle("bab-open", val);
+        }
+    },
     mounted() {
         document.addEventListener("keydown", this.onKeydown);
     },
     beforeDestroy() {
         document.removeEventListener("keydown", this.onKeydown);
+        document.body.classList.remove("bab-open");
     },
     methods: {
         ...mapMutations("generic", ["addEvent"]),
@@ -59,19 +64,24 @@ export default {
 </script>
 
 <style>
+body.bab-open {
+    margin-bottom: 150px;
+    transition: margin-bottom 0.25s ease;
+}
+
 .bab-container {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     height: 200px;
-
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
     box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
     z-index: 9999;
     display: flex;
     flex-direction: column;
+    background: #fff;
     animation: elevate 0.2s ease-in-out;
 }
 
@@ -156,6 +166,7 @@ export default {
     gap: 12px;
 }
 
+/* --- Animações e transições --- */
 .slide-up-enter-active,
 .slide-up-leave-active {
     transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
@@ -179,6 +190,7 @@ export default {
     }
 }
 
+/* --- Responsivo --- */
 @media (max-width: 640px) {
     .bab-container {
         height: 220px;

package/src/component/shared/DocumentPreview.vue

@@ -50,6 +50,15 @@ export default {
       });
       return sum.reduce((a, b) => a + b, 0);
     },
+    somaGrupoMaster(grupoMaster) {
+      let sum = [];
+      this.d.itensLocacao.forEach((item) => {
+        if (item.grupoMaster === grupoMaster) {
+          sum.push(item.totalValue);
+        }
+      });
+      return sum.reduce((a, b) => a + b, 0);
+    },
     convertToNumber(value) {
       return parseFloat(value.replace("R$", "").replace(",", "."));
     },
@@ -64,6 +73,21 @@ export default {
       var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
       return group;
     },
+    produtoGrupoSubgrupo() {
+      const resultado = {};
+
+      this.d.itensLocacao.forEach(item => {
+        const nomeGrupoMaster = item.grupoMaster;
+        const nomeGrupo = item.grupo;
+
+        if (!resultado[nomeGrupoMaster]) { resultado[nomeGrupoMaster] = {}; }
+        if (!resultado[nomeGrupoMaster][nomeGrupo]) { resultado[nomeGrupoMaster][nomeGrupo] = []; }
+
+        resultado[nomeGrupoMaster][nomeGrupo].push(item);
+      });
+
+      return resultado;
+    }
   },
   watch: {
     event: {

package/src/component/shared/actions/ActionButtons.vue

@@ -2,11 +2,22 @@
     <div>
         <div class="side-by-side" v-for="item in actions" :key="item.type">
 
-            <Button v-if="item.type === 'delete'" key="remove" classIcon="fa-solid fa-trash" :title="item.title"
+            <Button v-if="item.type === 'delete'" tooltip="Gerar Retorno" key="remove" classIcon="fa-solid fa-trash" :title="item.title"
                 type="danger" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
 
+            <Button v-if="item.type === 'component'" key="component" :title="item.title" :classIcon="item.classIcon"
+                :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
+                :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
+                :clicked="() => $emit('confirm', item)" />
+
             <Button v-if="item.type === 'options'" key="options" :title="item.title" :classIcon="item.classIcon"
-                type="primary" size="small" :params="item" :clicked="() => $emit('confirm', item)" />
+                :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item" color="white"
+                :backGroundColor="item.backgroundColor ? item.backgroundColor : ''"
+                :clicked="() => $emit('confirm', item)" />
+
+            <Button v-if="item.type === 'event'" :eventName="item.eventName" key="event" :title="item.title"
+                :classIcon="item.classIcon" :type="item.backgroundColor ? '' : 'primary'" size="small" :params="item"
+                color="white" :backGroundColor="item.backgroundColor ? item.backgroundColor : ''" />
 
         </div>
     </div>
@@ -15,15 +26,18 @@
 <script>
 import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 
+import { mapMutations } from "vuex";
+
 export default {
     name: "ActionButtons",
     components: { Button },
     props: {
         actions: { type: Array, default: () => [] },
     },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+    }
 };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/component/shared/actions/ActionsOptions.vue

@@ -2,6 +2,14 @@
     <div class="actions-options">
         <div class="ao-body">
             <ScrollBar :minHeight="minHeight" :maxHeight="maxHeight" class="ao-scroll">
+                <span class="ao-description title">
+                    {{ actionSelected.description }}
+                </span>
+
+                <div v-if="actionSelected.type == 'component'">
+                    <component :is="actionSelected.component" v-model="optionSelected"></component>
+                </div>
+
                 <div v-if="actionSelected.type == 'options'" class="ao-radios" role="group"
                     :aria-labelledby="'ao-title'">
                     <RadioGroup :field="fieldName" :options="filteredOptions" v-model="optionSelected" />
@@ -148,6 +156,12 @@ export default {
     bottom: 0;
 }
 
+.ao-description {
+    color: #475569;
+    font-weight: 500;
+    font-size: 13px;
+}
+
 .ao-footer-right {
     display: flex;
     gap: 8px;

package/src/component/shared/actions/ActionsSelected.vue

@@ -30,7 +30,7 @@
         </Modal>
 
         <Modal title="Selecione a opção desejada" :showValidation="false" :closeOnEsc="true" :closeButton="true"
-            :width="600" :height="750" v-if="showModal('options')">
+            :width="600" :height="750" v-if="showModal('actionsOptions')">
             <ActionsOptions :actionSelected="actionSelected" v-model="optionSelected" />
         </Modal>
     </div>
@@ -106,7 +106,7 @@ export default {
             this.selected.forEach((id) => this.$set(this.status, id, "waiting"));
 
             if (params.type != "delete") {
-                this.openModal("options");
+                this.openModal("actionsOptions");
             } else {
                 this.openModal("confirm");
             }
@@ -120,6 +120,7 @@ export default {
                     notNotifyToast: true
                 }
             );
+            this.addEvent({ name: "actionsUpdated" });
             return response;
         },
         async remove(id) {
@@ -130,6 +131,7 @@ export default {
                     notNotifyToast: true
                 }
             );
+            this.addEvent({ name: "actionsUpdated" });
             return response;
         },
         async ok() {
@@ -148,10 +150,6 @@ export default {
                     if (this.actionSelected.method == "put")
                         result = await this.put(id);
 
-                    console.log(this.actionSelected);
-                    console.log(result);
-
-
                     if (result?.success) {
                         this.$set(this.status, id, "done");
                         this.selectedDone.push(id);

package/src/store/modules/generic.js

@@ -106,9 +106,24 @@ export default {
         },
         documentPreview: (state) => (env) => {
             let documentHtml = state.documentHtml
-            let ret = documentHtml;
-
             var template = null;
+            let tableStart = 0;
+            let tableEnd = 0;
+            let removedTableHtml = ""
+
+            const tabelaGrupoSubGrupo = "t.produtoGrupoSubgrupo";
+            const idxMarker = documentHtml.indexOf(tabelaGrupoSubGrupo);
+            const marcadorDiv = `<tabela-grupo-subgrupo></tabela-grupo-subgrupo>`;
+
+            if (idxMarker !== -1) {
+                tableStart = documentHtml.lastIndexOf("<table", idxMarker);
+                tableEnd = documentHtml.indexOf("</table>", idxMarker) + "</table>".length;
+
+                removedTableHtml = documentHtml.substring(tableStart, tableEnd); // armazena
+                documentHtml = documentHtml.substring(0, tableStart) + marcadorDiv + documentHtml.substring(tableEnd);
+            }
+
+            let ret = documentHtml;
 
             if (env == 'dev')
                 template = document.getElementById("template-dev");
@@ -131,7 +146,7 @@ export default {
                         vForGrouped: "",
                         vForSimple: "",
                         nameGroup: "",
-                        nameGroupReplace: ""
+                        nameGroupReplace: "",
                     };
 
                     if (th) {
@@ -141,6 +156,7 @@ export default {
                         let isProduct = th.innerText.includes("t.produtoLocacao");
                         let isInvoice = th.innerText.includes("t.produtoFatura");
                         let isGrouped = th.innerText.includes("t.produtoAgrupado");
+                        let isGroupedSubgroup = th.innerText.includes("t.produtoGrupoSubgrupo");
                         let isMoviment = th.innerText.includes("t.produtoMovimentacao");
                         let isCustumerAddress = th.innerText.includes("t.enderecoCliente");
                         let isAddressRent = th.innerText.includes("t.saidaRetornoLocacao");
@@ -179,7 +195,6 @@ export default {
                             obj.vForSimple = "v-for='produto in itensLocacao'";
 
                             // neste cenário basicamente temos que montar o <tbody> no array de agrupamento
-
                             var initIndex = documentHtml.split("<tbody>", index + 1).join("<tbody>").length;
                             var lastIndex = documentHtml.split("</tbody>", index + 1).join("</tbody>").length;
 
@@ -194,7 +209,10 @@ export default {
 
                             config.push(obj);
 
-                        } else if (isMoviment) {
+                        } else if (isGroupedSubgroup) {
+                            // não faz nda, quem altera essa tabela é a após retParse
+                        }
+                        else if (isMoviment) {
                             obj.vForSimple = "v-for='produto in d.itensMovimentacao'";
                             config.push(obj);
                         } else if (isCustumerAddress) {
@@ -223,12 +241,55 @@ export default {
                 var retParse = ret.replaceAll("\"", "'");
                 retParse = eval(`retParse${replace}`);
 
+                if (removedTableHtml) {
+
+                    removedTableHtml = removedTableHtml.replace("<tbody>", `<tbody v-for="(grupos, grupoMaster) in produtoGrupoSubgrupo">`);
+
+                    const inicio = removedTableHtml.indexOf("<tbody");
+                    const fim = removedTableHtml.indexOf("</tbody>", inicio) + "</tbody>".length;
+                    let tbodyHtml = removedTableHtml.substring(inicio, fim);
+                    const trs = [...tbodyHtml.matchAll(/<tr[^>]*>/g)];
+                    if (trs.length >= 3) {
+                        const grupoStart = trs[1].index;
+                        const produtoStart = trs[2].index;
+                        const produtoEnd = tbodyHtml.indexOf("</tr>", produtoStart) + "</tr>".length;
+
+                        const wrapStart = grupoStart;
+                        const wrapEnd = produtoEnd;
+
+                        let templateContent = tbodyHtml.substring(wrapStart, wrapEnd);
+
+                        const innerTrs = [...templateContent.matchAll(/<tr[^>]*>/g)];
+                        if (innerTrs.length >= 2) {
+                            const prodTag = innerTrs[1];
+                            const pStart = prodTag.index;
+                            const pEnd = pStart + prodTag[0].length;
+
+                            templateContent =
+                                templateContent.substring(0, pStart) +
+                                `<tr v-for="produto in itensLocacao">` +
+                                templateContent.substring(pEnd);
+                        }
+
+                        tbodyHtml = tbodyHtml.substring(0, wrapStart) +
+                            `<template v-for="(itensLocacao, grupo) in grupos">` +
+                            templateContent +
+                            `</template>` +
+                            tbodyHtml.substring(wrapEnd);
+
+                        removedTableHtml = removedTableHtml.substring(0, inicio) + tbodyHtml + removedTableHtml.substring(fim);
+                    }
+
+                    retParse = retParse.replace(marcadorDiv, `<div>${removedTableHtml}</div>`);
+                }
+
                 var classImportant = retParse
                     .replaceAll("t.pagamentoLocacao", "")
                     .replaceAll("t.periodoLocacao", "")
                     .replaceAll("t.produtoLocacao", "")
                     .replaceAll("t.produtoFatura", "")
                     .replaceAll("t.produtoAgrupado", "")
+                    .replaceAll("t.produtoGrupoSubgrupo", "")
                     .replaceAll("t.produtoMovimentacao", "")
                     .replaceAll("t.enderecoCliente", "")
                     .replaceAll("t.saidaRetornoLocacao", "")