@nixweb/nixloc-ui 0.0.129 → 0.0.130

package/package.json

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

package/src/component/forms/Button.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="c-div-button">
     <button
+      :style="'background-color:' + backroundColor + ';color:' + color"
       class="button"
       :class="{
         small: size === 'small',
@@ -17,7 +18,11 @@
       :disabled="disabled"
       @click="execute()"
     >
-      <i class="title" :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
+      <i
+        class="title"
+        :class="classIcon"
+        v-if="!isLoading(this._key) && classIcon"
+      ></i>
       <span v-if="!isLoading(this._key)">{{ title }}</span>
       <vue-loading
         v-if="isLoading(this._key)"
@@ -39,6 +44,8 @@ export default {
     title: String,
     type: String,
     size: String,
+    color: String,
+    backroundColor: String,
     eventName: String,
     eventData: Object,
     classIcon: String,

package/src/component/forms/CheckboxSimple.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
+    <b-form-checkbox
+      v-model="valueLocal"
+      :value="true"
+      :unchecked-value="false"
+    >
       {{ title }}
       <Tip :field="field" :formName="formName" />
     </b-form-checkbox>
@@ -20,6 +24,7 @@ export default {
     formName: String,
     field: String,
     value: Boolean,
+    changed: Function,
     markFormDirty: {
       type: Boolean,
       default: true,
@@ -40,6 +45,7 @@ export default {
     valueLocal() {
       this.$emit("input", this.valueLocal);
       if (this.markFormDirty) this.updateFormDirty(true);
+      if (this.changed) this.changed();
     },
   },
 };

package/src/component/shared/DocumentEditor.vue

@@ -4,12 +4,14 @@
       <div>
         <div class="document-editor__toolbar"></div>
         <div class="document-editor__editable-container">
-          <ckeditor
-            :editor="editor"
-            v-model="documentHtml"
-            @ready="onReady"
-            @focus="changed"
-          ></ckeditor>
+          <div id="template-dev">
+            <ckeditor
+              :editor="editor"
+              v-model="documentHtml"
+              @ready="onReady"
+              @focus="changed"
+            ></ckeditor>
+          </div>
         </div>
       </div>
     </div>
@@ -46,7 +48,9 @@ export default {
   methods: {
     ...mapMutations("generic", ["updateDocumentHtml", "addEvent"]),
     onReady(editor) {
-      const toolbarContainer = document.querySelector(".document-editor__toolbar");
+      const toolbarContainer = document.querySelector(
+        ".document-editor__toolbar"
+      );
       toolbarContainer.appendChild(editor.ui.view.toolbar.element);
     },
     changed() {
@@ -78,12 +82,11 @@ export default {
   padding: 10px;
   border: 1px solid #e4e6ec;
   background: var(--ck-color-base-foreground);
-  overflow-y: scroll;
 }
 
 .document-editor__editable-container .ck-editor__editable {
   width: 22cm;
-  min-height: 21cm;
+  height: 700px;
   padding: 20px;
   border: 1px hsl(0, 0%, 82.7%) solid;
   border-radius: var(--ck-border-radius);
@@ -98,7 +101,9 @@ export default {
 }
 
 .document-editor .ck-heading-dropdown .ck-list .ck-button__label {
-  line-height: calc(1.7 * var(--ck-line-height-base) * var(--ck-font-size-base));
+  line-height: calc(
+    1.7 * var(--ck-line-height-base) * var(--ck-font-size-base)
+  );
   min-width: 6em;
 }
 
@@ -130,7 +135,10 @@ export default {
   color: hsl(203, 100%, 50%);
 }
 
-.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
+.document-editor
+  .ck-heading-dropdown
+  .ck-heading_heading2.ck-on
+  .ck-button__label {
   color: var(--ck-color-list-button-on-text);
 }
 

package/src/component/shared/DocumentPreview.vue

@@ -16,12 +16,11 @@ export default {
     template: String,
     d: Object,
   },
-
   methods: {
-    sMg(grN) {
+    somaGrupo(grupo) {
       let total = "";
-      this.d.pLoc.forEach((x) => {
-        if (x.pGp === grN) return (total = x.pGpT);
+      this.d.itensLocacao.forEach((x) => {
+        if (x.grupo === grupo) return (total = x.valorTotal);
       });
       return total;
     },
@@ -29,7 +28,8 @@ export default {
   computed: {
     ...mapGetters("generic", ["groupBy"]),
     produtoAgrupado() {
-      return this.groupBy({ array: this.d.produto, key: "pGp" });
+      var group = this.groupBy({ array: this.d.itensLocacao, key: "grupo" });
+      return group;
     },
   },
 };

package/src/component/shared/FullCalendar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Loading type="line" :center="false" v-show="loading" />
-    <FullCalendar ref="cc" :options="calendarOptions" />
+    <FullCalendar :options="calendarOptions" />
   </div>
 </template>
 
@@ -137,6 +137,11 @@ export default {
   cursor: pointer !important;
 }
 
+.fc-event-time {
+  color: black !important;
+  font-weight: normal !important;
+}
+
 .fc-list-day-side-text {
   color: black !important;
 }
@@ -153,6 +158,10 @@ export default {
   color: black !important;
 }
 
+.fc-list-event-title {
+  cursor: pointer !important;
+}
+
 .fc-button-primary:hover {
   background: #3e90b3 !important;
 }

package/src/component/shared/ParameterLegend.vue

@@ -6,25 +6,25 @@
       <table class="table table-responsive-xs">
         <thead>
           <tr>
-            <th><span class="title-header">Parâmetro</span></th>
             <th><span class="title-header">Descrição</span></th>
             <th><span class="title-header">Exemplo</span></th>
+            <th><span class="title-header">Parâmetro</span></th>
           </tr>
         </thead>
         <tbody v-for="(legendLocal, groupName) in grouped">
           <td class="group text-center" colspan="8">
-            <div>{{ groupName.toUpperCase() }}</div>
+            <div>{{ groupName }}</div>
           </td>
           <tr v-for="item in legendLocal">
-            <td class="parametro">
-              <span> {{ item.parameter }}</span>
-            </td>
-            <td>
+            <td class="description">
               <span> {{ item.description }}</span>
             </td>
             <td>
               <span class="exemplo"> {{ item.example }}</span>
             </td>
+            <td class="parametro">
+              <span> {{ item.parameter }}</span>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -70,23 +70,26 @@ export default {
       let legend = [];
       let self = this;
       setTimeout(function () {
-        self.legend.forEach(function (item) {
-          if (self.search.filter.content == "equal") {
-            if (item.description == self.search.content) legend.push(item);
-          }
-          if (self.search.filter.content == "contains") {
-            if (item.description.includes(self.search.content)) legend.push(item);
-          }
-        });
-        self.legendLocal = legend;
-        self.removeLoading(["search", "clean"]);
+        if (self.search.content) {
+          self.legend.forEach(function (item) {
+            if (self.search.filter.content == "equal") {
+              if (item.description == self.search.content) legend.push(item);
+            }
+            if (self.search.filter.content == "contains") {
+              if (item.description.includes(self.search.content))
+                legend.push(item);
+            }
+          });
+          self.legendLocal = legend;
+        }
+        self.removeLoading(["btnSearch", "btnClean"]);
       }, 300);
     },
     clearedSearch: function () {
       let self = this;
       setTimeout(function () {
         self.legendLocal = self.legend;
-        self.removeLoading(["search", "clean"]);
+        self.removeLoading(["btnSearch", "btnClean"]);
       }, 300);
     },
   },
@@ -116,6 +119,10 @@ export default {
   font-weight: 500;
 }
 
+.description {
+  width: 350px;
+}
+
 .div-warning {
   margin-bottom: 20px;
 }

package/src/component/template/ViewTemplateDocumentView.vue

@@ -100,7 +100,7 @@
                   <div class="a4">
                     <div id="printMe">
                       <DocumentPreview
-                        :template="documentPreview"
+                        :template="documentPreview('dev')"
                         :d="parameterExemple"
                       />
                     </div>
@@ -165,7 +165,12 @@ export default {
     ...mapGetters("generic", ["showModal", "event", "documentPreview"]),
   },
   methods: {
-    ...mapMutations("generic", ["openModal", "hideModal", "removeLoading", "addEvent"]),
+    ...mapMutations("generic", [
+      "openModal",
+      "hideModal",
+      "removeLoading",
+      "addEvent",
+    ]),
     saveDocument() {
       if (this.id) {
         this.addEvent({ name: "saveDocument" });

package/src/store/modules/generic.js

@@ -67,11 +67,17 @@ export default {
         event: (state) => {
             return state.event;
         },
-        documentPreview: (state) => {
+        documentPreview: (state) => (env) => {
             let documentHtml = state.documentHtml
             let ret = documentHtml;
 
-            var template = document.getElementById("template");
+            var template = null;
+
+            if (env == 'dev')
+                template = document.getElementById("template-dev");
+
+            if (env == 'prod')
+                template = document.getElementById("template-prod");
 
             if (template != null) {
                 var tables = template.getElementsByTagName("table");
@@ -93,24 +99,30 @@ export default {
 
                     if (th) {
 
-                        let isGrouped = th.innerText.includes("n.grupo");
-                        let isProduct = th.innerText.includes("p.pLoc");
-                        let isPeriod = th.innerText.includes("n.periodo");
                         let isPayment = th.innerText.includes("n.pagamento");
-                        let isMoviment = th.innerText.includes("p.pMoviment");
+
+
+                        let isPeriod = th.innerText.includes("t.periodoLocacao");
+                        let isProduct = th.innerText.includes("t.produtoLocacao");
+                        let isGrouped = th.innerText.includes("t.produtoAgrupado");
+                        let isMoviment = th.innerText.includes("t.produtoMovimentacao");
+                        let isCustumerAdress = th.innerText.includes("t.enderecoCliente");
+
 
                         if (isProduct) {
-                            obj.vForSimple = "v-for='p in d.pLoc'";
+                            obj.vForSimple = "v-for='produto in d.itensLocacao'";
                             config.push(obj);
                         } else if (isPeriod) {
-                            obj.vForSimple = "v-for='pe in d.periodo'";
+                            obj.vForSimple = "v-for='periodo in d.periodoLocacao'";
                             config.push(obj);
                         } else if (isPayment) {
                             obj.vForSimple = "v-for='pg in d.pagamento'";
                             config.push(obj);
                         } else if (isGrouped) {
-                            obj.vForGrouped = "v-for='(produto, grN) in produtoAgrupado'";
-                            obj.vForSimple = "v-for='p in d.pLoc'";
+                            obj.vForGrouped = "v-for='(itensLocacao, grupo) in produtoAgrupado'";
+                            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;
@@ -119,13 +131,18 @@ export default {
 
                             let tr = tbody.substring(tbody.indexOf("<tr>"), tbody.lastIndexOf("</tr>"));
 
+                            // faz o replace nameGroup para tirar o <tr/>
                             obj.nameGroup = tr.substring(0, tr.indexOf('</tr>')) + "</tr>";
                             obj.nameGroup = obj.nameGroup.replaceAll("\"", "'");
                             obj.nameGroupReplace = obj.nameGroup.replace("<tr>", "").replace("</tr>", "");
+
                             config.push(obj);
 
                         } else if (isMoviment) {
-                            obj.vForSimple = "v-for='pM in d.pMoviment'";
+                            obj.vForSimple = "v-for='produto in d.itensMovimentacao'";
+                            config.push(obj);
+                        } else if (isCustumerAdress) {
+                            obj.vForSimple = "v-for='endereco in d.locacao.cliente.endereco'";
                             config.push(obj);
                         } else {
                             config.push(obj);
@@ -141,17 +158,20 @@ export default {
                     replace += `.replace("<tbody>${x.nameGroup}<tr>", "<tbody ${x.vForGrouped}>${x.nameGroupReplace}<tr ${x.vForSimple}>")`;
                 });
 
+
+
                 var retParse = ret.replaceAll("\"", "'");
-                retParse = eval(`ret${replace}`);
+                retParse = eval(`retParse${replace}`);
 
                 var classImportant = retParse
-                    .replaceAll("n.grupo", "")
-                    .replaceAll("p.pLoc", "")
-                    .replaceAll("p.pMoviment", "")
-                    .replaceAll("n.periodo", "")
-                    .replaceAll("n.pagamento", "")
+                    .replaceAll("t.periodoLocacao", "")
+                    .replaceAll("t.produtoLocacao", "")
+                    .replaceAll("t.produtoAgrupado", "")
+                    .replaceAll("t.produtoMovimentacao", "")
+                    .replaceAll("t.enderecoCliente", "")
                     .replaceAll("<p>&nbsp!important;</p>", "<p>&nbsp</p>");
             }
+
             return classImportant;
         },
         groupBy: () => (obj) => {