@nixweb/nixloc-ui 0.0.131 → 0.0.132

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.131",
+  "version": "0.0.132",
   "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/forms/InputText.vue

@@ -4,6 +4,7 @@
       <i class="title class-icon-title" :class="classIconTitle"></i>
       <span class="title" :style="'color: ' + titleColor">{{ title }} </span>
       <span class="required" v-if="required">*</span>
+      <Tip :field="field" :formName="formName" />
     </label>
     <div class="inner-addon right-addon">
       <div

package/src/component/layout/Panel.vue

@@ -99,7 +99,7 @@ export default {
 <style scoped>
 .local-container {
   margin: auto;
-  padding-left: 130px;
+  padding-left: 100px;
   max-width: 1500px;
 }
 

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/shared/TableButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Button
-      v-if="obj.qualBotao == 'button'"
+      v-if="obj.typeButton == 'default'"
       :key="row.id"
       :title="obj.button.title"
       :type="obj.button.type"
@@ -11,7 +11,7 @@
       :eventData="row"
     />
     <Dropdown
-      v-if="obj.qualBotao == 'botaodropdown'"
+      v-if="obj.typeButton == 'botaodropdown'"
       :title="obj.button.title"
       :type="obj.button.type"
       :size="obj.button.size"

package/src/component/shared/TableItem.vue

@@ -6,7 +6,11 @@
       @click="navegateTo(obj, row)"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)"
     >
-      <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
+      <DisplayPeriodRent
+        :periodRent="row[obj.field]"
+        :fontSize="14"
+        :showDeliveryDevolution="true"
+      />
     </div>
     <div
       v-if="obj.type === 'text'"

package/src/component/template/ViewTemplateDocumentView.vue

@@ -37,6 +37,15 @@
                   </div>
                 </b-col>
                 <b-col class="text-right" sm="6">
+                  <div class="side-by-side" v-if="id">
+                    <Button
+                      key="showModalConfig"
+                      type="info"
+                      classIcon="fa-solid fa-gear"
+                      size="small"
+                      :clicked="showModalConfig"
+                    />
+                  </div>
                   <div class="side-by-side">
                     <Button
                       key="showModalLegend"
@@ -69,7 +78,7 @@
               </b-row>
             </Molded>
           </div>
-          <Modal title="Salvar" :width="500" v-show="showModal('saveDocument')">
+          <Modal title="Salvar" :width="800" v-show="showModal('saveDocument')">
             <slot></slot>
           </Modal>
           <Modal title="Parâmetros" :width="1100" v-if="showModal('legenda')">
@@ -100,7 +109,7 @@
                   <div class="a4">
                     <div id="printMe">
                       <DocumentPreview
-                        :template="documentPreview"
+                        :template="documentPreview('dev')"
                         :d="parameterExemple"
                       />
                     </div>
@@ -165,7 +174,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" });
@@ -177,6 +191,10 @@ export default {
     saveAs() {
       this.addEvent({ name: "saveAs" });
     },
+    showModalConfig() {
+      this.openModal("saveDocument");
+      this.removeLoading(["showModalConfig"]);
+    },
     showModalLegend() {
       this.openModal("legenda");
       this.removeLoading(["showModalLegend"]);

package/src/store/modules/generic.js

@@ -1,4 +1,5 @@
 import axios from "@/config/axios";
+import Tips from "@/config/tips";
 import Token from "@nixweb/nixloc-ui/src/config/token";
 
 export default {
@@ -35,7 +36,13 @@ export default {
     },
     getters: {
         tip: (state) => (tipId) => {
-            return "";
+            var tips = new Tips();
+            let message = "";
+            tips.help.find(value => {
+                if (value.tipId == tipId)
+                    message = value.message;
+            })
+            return message;
         },
         showModal: (state) => (name) => {
             if (name == state.modal.name) return true;
@@ -60,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");
@@ -86,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;
@@ -112,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);
@@ -134,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) => {
@@ -393,7 +420,7 @@ export default {
                 }, (err) => {
                     if (err.response)
                         if (err.response.status === 403)
-                            context.commit('addNotifications', [{ message: "Usuário sem permissão para remove!" }])
+                            context.commit('addNotifications', [{ message: "Usuário sem permissão para remover!" }])
 
                     if (!err.response)
                         context.commit('addNotificationErrorApi');