@nixweb/nixloc-ui 0.0.127 → 0.0.129

package/src/component/shared/TimeLine.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Loading :center="false" v-if="loading" />
+    <div v-else>
+      <ScrollBar :minHeight="200" :maxHeight="300">
+        <Timeline
+          dateLocale="pt-BR"
+          order="desc"
+          :uniqueTimeline="true"
+          :timeline-items="timelineItems"
+          message-when-no-items="Nenhum registro encontrado!"
+        />
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+<script>
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Timeline from "timeline-vuejs";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  name: "TimeLine",
+  props: {
+    loading: Boolean,
+    timelineItems: Array,
+  },
+  components: {
+    Loading,
+    Timeline,
+    ScrollBar,
+  },
+};
+</script>
+<style>
+.timeline {
+  max-width: 1000px !important;
+}
+
+.timeline-item .date-item {
+  font-size: 14px !important;
+  letter-spacing: 1px !important;
+  font-weight: normal !important;
+}
+</style>

package/src/component/shared/TotalizationReport.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <hr class="hr-report" />
+    <div class="text-right">
+      <span class="title"> Total de Registro(s) </span>
+      <span class="title value"> {{ totalRecords }} </span>
+    </div>
+    <div class="text-right" v-for="item in totalization" :key="item.title">
+      <span :class="convertName(item[0]).classCss">
+        <span class="title">
+          {{ convertName(item[0]).title }}
+          <span class="title value">
+            <span v-if="convertName(item[0]).type == 'currency'">
+              {{ item[1] | currency }}
+            </span>
+            <span v-if="convertName(item[0]).type == 'numeric'">
+              {{ Math.round(item[1]) }}
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "TotalizationReport",
+  props: ["totalization", "totalRecords"],
+  computed: {
+    ...mapState("report", ["finalQueryFormatOData"]),
+  },
+  methods: {
+    convertName(value) {
+      var filter = this.finalQueryFormatOData.totalization.filter((item) => {
+        return item.value == value;
+      });
+      return Object.assign(filter[0]);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.value {
+  margin-left: 50px;
+}
+
+.hr-report {
+  background: black !important;
+  height: 0px !important;
+}
+</style>

package/src/component/shared/query-builder/ConvertToOdata.js

@@ -5,7 +5,7 @@ export default class ConvertToOdata {
         if (operator === "igual" && rule.typeField === "text") return `${rule.name} eq '${rule.value}'`;
         if (operator === "diferente" && rule.typeField === "text") return `${rule.name} ne '${rule.value}'`;
         if (operator === "contem") return `contains(${rule.name},'${rule.value}')`;
-        
+
         if (operator === "igual" && rule.typeField === "numeric") return `${rule.name} eq ${rule.value}`;
         if (operator === "diferente" && rule.typeField === "numeric") return `${rule.name} ne ${rule.value}`;
         if (operator === "menor") return `${rule.name} lt ${rule.value}`;
@@ -32,13 +32,13 @@ export default class ConvertToOdata {
         var size = options.length;
         let self = this;
         options.forEach(function (value) {
+
             if (type == "field") {
                 query += `${name} eq ${value}`;
                 if (seq + 1 != size) query += ` or `;
             }
             if (type == "totalization") {
-                let convertName = self.convertName(value);
-                query += `${name} with ${value} as ${convertName}${title}`;
+                query += `${name} with ${value} as ${value}${name.charAt(0).toUpperCase() + name.slice(1)}`;
                 if (seq + 1 != size) query += `,`;
             }
             seq++;
@@ -68,10 +68,4 @@ export default class ConvertToOdata {
 
         return iso;
     }
-    convertName(value) {
-        if (value === "sum") return "soma";
-        if (value === "average") return "media";
-        if (value === "max") return "maximo";
-        if (value === "minimo") return "minimo";
-    }
 }

package/src/component/shared/query-builder/DynamicComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vqb-rule card">
+  <div class="vqb-rule card move">
     <div class="form-inline">
       <label :class="rule.classCss" class="mr-5">
         <i :class="rule.icon"></i>
@@ -96,6 +96,10 @@ export default {
 };
 </script>
 <style scoped>
+.move {
+  cursor: move;
+}
+
 .btn-remove {
   font-size: 16px;
   color: darkgray;

package/src/component/shared/query-builder/DynamicComponentList.vue

@@ -1,13 +1,21 @@
 <template>
-  <div class="component">
-    <component
-      :is="component()"
-      v-for="(rule, index) in selectedRules"
-      :key="index"
-      :rule="rule"
-    />
-    <div v-if="selectedRules.length == 0">
-      <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
+  <div>
+    <div class="component">
+      <span v-if="selectedRules.length > 0">
+        <i class="fas fa-expand-arrows-alt"></i> Clique e arraste para ordenar
+      </span>
+      <draggable :list="selectedRules">
+        <component
+          :is="component()"
+          v-for="(rule, index) in selectedRules"
+          :key="index"
+          :rule="rule"
+        />
+      </draggable>
+      <br />
+      <div v-if="selectedRules.length == 0">
+        <Alert type="info"> Selecione o filtro desejado e clique em +Adicionar</Alert>
+      </div>
     </div>
   </div>
 </template>
@@ -15,11 +23,14 @@
 <script>
 import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 
+import draggable from "vuedraggable";
+
 import { mapState, mapMutations } from "vuex";
 
 export default {
   components: {
     Alert,
+    draggable,
   },
   data() {
     return {

package/src/component/template/ListViewWithDataHandler.vue

@@ -14,6 +14,9 @@
       </b-row>
       <b-row>
         <b-col sm="6">
+          <div v-if="templateList.dragAndDrop">
+            <i class="fa-regular fa-maximize"></i> Clique e arraste para ordenar
+          </div>
           <TableTotalization :totalization="content.totalization" />
         </b-col>
         <b-col sm="6">
@@ -21,7 +24,7 @@
         </b-col>
       </b-row>
       <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
-      <FixedBar posicao="topo" v-show="selected.length > 0">
+      <div class="fixed-bar-options" v-show="selected.length > 0">
         <div>
           <Button
             v-if="buttonRemove"
@@ -33,11 +36,12 @@
           />
           <slot name="content-buttons-table-header"></slot>
         </div>
-      </FixedBar>
+      </div>
       <Table
         :header="templateList.headerTable"
         :data="content.data"
         :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop"
       >
         <div slot="content-buttons-table">
           <slot name="content-buttons-table"></slot>
@@ -128,14 +132,15 @@ export default {
       "totalPerPage",
       "selectStatic",
     ]),
-    ...mapGetters("generic", ["pagination", "isLoading"]),
+    ...mapGetters("generic", ["pagination", "isLoading", "event"]),
     paginationKey: function () {
       return this.pagination("templateList");
     },
   },
   methods: {
-    ...mapActions("generic", ["getApi", "deleteAllApi"]),
+    ...mapActions("generic", ["getApi", "orderAllApi", "deleteAllApi"]),
     ...mapMutations("generic", [
+      "addLoading",
       "removeLoading",
       "addSelected",
       "updatePagination",
@@ -152,6 +157,17 @@ export default {
         }, 350);
       });
     },
+    orderAll(data) {
+      let obj = { listIds: data.listIds };
+
+      let params = {
+        url: this.templateList.urlOrderAllApi,
+        obj: obj,
+        notNotifyToast: true,
+      };
+
+      this.orderAllApi(params).then((response) => {});
+    },
     removeSelected() {
       let params = {
         url: this.templateList.urlDeleteAllApi,
@@ -167,6 +183,12 @@ export default {
     },
   },
   watch: {
+    event: {
+      handler(event) {
+        if (event.name == "tableDragAndDrop") this.orderAll(event.data);
+      },
+      deep: true,
+    },
     methodExecutedApi: function (value) {
       if (
         value === "postApi" ||

package/src/component/template/ReportCreateUpdate.vue

@@ -60,7 +60,7 @@ export default {
   },
   methods: {
     ...mapActions("generic", ["postApi", "putApi"]),
-    ...mapMutations("generic", ["removeLoading", "removeEvent", "hideModal"]),
+    ...mapMutations("generic", ["removeLoading", "addEvent", "hideModal"]),
     ...mapMutations("validation", ["resetValidation"]),
     saveReport() {
       var custom = this.report.id ? "" : "Custom";
@@ -82,7 +82,10 @@ export default {
       if (this.report.id) {
         let params = { url: this.urlUpdate, obj: obj };
         this.putApi(params).then((response) => {
-          if (response.success) this.hideModal();
+          if (response.success) {
+            this.sendEvent();
+            this.hideModal();
+          }
           this.removeLoading(["btnSaveReport"]);
         });
       } else {
@@ -94,12 +97,16 @@ export default {
               name: query.routeName,
               params: { id: response.content.id, name: response.content.name },
             });
+            this.sendEvent();
             this.hideModal();
           }
           this.removeLoading(["btnSaveReport"]);
         });
       }
     },
+    sendEvent() {
+      this.addEvent({ name: "savedReport" });
+    },
   },
   watch: {
     event: {

package/src/component/template/ViewTemplateConfiguration.vue

@@ -2,6 +2,7 @@
   <div>
     <div>
       <slot name="content-buttons"></slot>
+      <br v-if="templateList.dragAndDrop" />
       <div v-if="showSearch">
         <Search />
         <br />

package/src/component/template/ViewTemplateDocumentView.vue

@@ -83,6 +83,7 @@
               <b-row>
                 <b-col class="text-center">
                   <Button
+                    v-if="false"
                     v-print="'#printMe'"
                     key="print"
                     type="edit"

package/src/component/template/ViewTemplateReportList.vue

@@ -24,7 +24,7 @@
                     </b-col>
                     <b-col sm="1">
                       <Confirmation
-                        title="Deseja delete?"
+                        title="Deseja excluir?"
                         type="danger"
                         :data="report"
                         :confirmed="confirmDelete"

package/src/component/template/ViewTemplateReportPreview.vue

@@ -26,7 +26,7 @@
                   type="primary"
                   title="Buscar"
                   classIcon="fas fa-file-search"
-                  :disabled="btnSaveDisabled || !rulesIsValid"
+                  :disabled="btnSearchDisabled || !rulesIsValid"
                   size="medium"
                   :clicked="getAll"
                 />
@@ -38,7 +38,7 @@
                   title="Salvar"
                   classIcon="fas fa-save"
                   size="small"
-                  :disabled="isLoading || !rulesIsValid"
+                  :disabled="isLoading || btnSaveDisabled || !rulesIsValid"
                   :params="{ name: 'save', title: 'Salvar', width: 550 }"
                   :clicked="executeOpenModal"
                 />
@@ -83,7 +83,11 @@
           </Alert>
         </div>
         <div class="body-report" v-show="showBodyReport && rulesIsValid">
-          <BodyReport :header="content.headerTable" :data="content.data" />
+          <Report
+            :header="content.headerTable"
+            :data="content.data"
+            :totalization="content.totalization"
+          />
         </div>
       </div>
     </Panel>
@@ -120,7 +124,7 @@ import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
 import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
 import Tags from "@nixweb/nixloc-ui/src/component/shared/query-builder/Tags.vue";
-import BodyReport from "../shared/BodyReport.vue";
+import Report from "../shared/Report.vue";
 
 import ReportCreateUpdate from "@nixweb/nixloc-ui/src/component/template/ReportCreateUpdate.vue";
 import Fields from "@nixweb/nixloc-ui/src/component/shared/query-builder/Fields.vue";
@@ -143,7 +147,7 @@ export default {
     Modal,
     Alert,
     Tags,
-    BodyReport,
+    Report,
     ReportCreateUpdate,
     Fields,
     Rules,
@@ -156,7 +160,7 @@ export default {
         headerTable: [],
         data: [],
         totalPages: [],
-        totalization: [],
+        totalization: {},
         noDataReturned: false,
       },
       baseParams: {
@@ -170,7 +174,8 @@ export default {
         title: "",
         width: 0,
       },
-      btnSaveDisabled: false,
+      btnSearchDisabled: false,
+      btnSaveDisabled: true,
       isLoading: false,
       showBodyReport: false,
     };
@@ -184,7 +189,7 @@ export default {
 
     if (this.id) this.getById();
 
-    if (!this.id) this.removeLoading(["panel"]);
+    if (!this.id) this.removeLoadingWithTime();
   },
   beforeDestroy() {
     this.removeInitialReportCustom();
@@ -206,15 +211,18 @@ export default {
           selectedRules: query.selectedRules,
         };
         this.addInitialReportCustom(report);
-        this.removeLoading(["panel"]);
+        this.removeLoadingWithTime();
       });
     },
     getAll() {
-      this.btnSaveDisabled = true;
+      this.btnSearchDisabled = true;
 
       if (this.rulesIsValid) {
         this.getTotalRecords();
         this.removeLoading(["btnSearchReport"]);
+
+        if (this.oDataFilter.totalization) this.totalization();
+        if (!this.oDataFilter.totalization) this.content.totalization = {};
       }
     },
     getTotalRecords() {
@@ -237,10 +245,20 @@ export default {
         this.showBodyReport = true;
       });
     },
+    totalization() {
+      let params = { url: this.urlTotalization };
+      this.getApiOdata(params).then((response) => {
+        const result = Object.entries(response[0]);
+        this.content.totalization = result;
+      });
+    },
     loadingOnlyIfOnePage(data) {
       this.content.data = data;
-      this.btnSaveDisabled = true;
-      this.isLoading = false;
+      this.btnSearchDisabled = true;
+      let self = this;
+      setTimeout(function () {
+        self.isLoading = false;
+      }, 350);
     },
     loadingOnlyIfManyPages() {
       let seq = 0;
@@ -280,6 +298,13 @@ export default {
       this.hideModal("templateReport");
       this.removeLoading(["btnApplyFieldsAndRules"]);
     },
+    removeLoadingWithTime() {
+      let self = this;
+      setTimeout(function () {
+        self.btnSaveDisabled = true;
+        self.removeLoading(["panel"]);
+      }, 350);
+    },
   },
   computed: {
     ...mapGetters("generic", ["showModal", "event"]),
@@ -297,11 +322,26 @@ export default {
       let baseUrl = `${this.templateList.urlGetApi}?${this.oDataSelect}&${this.oDataOrderBy}&${this.oDataFilter.query}&$skip=${skip}&$top=${this.baseParams.totalPerPage}&$count=true`;
       return baseUrl.replace("&&", "&");
     },
+    urlTotalization() {
+      let query = this.oDataFilter.query
+        ? `$apply=filter(${this.oDataFilter.query.replace("$filter=", "")})/`
+        : "$apply=";
+      let baseUrl = `${
+        this.templateList.urlGetApi
+      }?${query}aggregate(${this.oDataFilter.totalization.replace(",", "")})`;
+      return baseUrl;
+    },
     liveTotalRecords() {
       return this.content.data.length;
     },
   },
   watch: {
+    event: {
+      handler(event) {
+        if (event.name == "savedReport") this.btnSaveDisabled = true;
+      },
+      deep: true,
+    },
     "content.totalPages": {
       handler(totalPages) {
         if (totalPages.length > 0) {
@@ -316,18 +356,21 @@ export default {
     },
     oDataFilter: {
       handler(totalPages) {
+        this.btnSearchDisabled = false;
         this.btnSaveDisabled = false;
       },
       deep: true,
     },
     oDataSelect: {
       handler(totalPages) {
+        this.btnSearchDisabled = false;
         this.btnSaveDisabled = false;
       },
       deep: true,
     },
     oDataOrderBy: {
       handler(totalPages) {
+        this.btnSearchDisabled = false;
         this.btnSaveDisabled = false;
       },
       deep: true,

package/src/component/value-objects/Contact.vue

@@ -10,6 +10,7 @@
           :maxLength="20"
           :required="required"
           v-model="contact.phone"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="4" xl="4">
@@ -21,6 +22,7 @@
           :maxLength="100"
           :required="required"
           v-model="contact.webSite"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="4" xl="4">
@@ -32,6 +34,7 @@
           :maxLength="100"
           :required="required"
           v-model="contact.email"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
     </b-row>
@@ -53,6 +56,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
     value: Object,
   },
   components: { InputText, Button },

package/src/component/value-objects/Person.vue

@@ -5,11 +5,13 @@
         <RadioGroup
           field="typePerson"
           :formName="formName"
+          v-show="showTypePerson"
           :options="[
             { text: 'Física', value: 1 },
             { text: 'Jurídica', value: 2 },
           ]"
           v-model="person.typePerson"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
     </b-row>
@@ -23,6 +25,7 @@
           :maxLength="30"
           :required="required"
           v-model="person.document"
+          :markFormDirty="markFormDirty"
           ><div class="glyphicon margin-button">
             <Button
               v-if="person.typePerson == 2"
@@ -43,6 +46,7 @@
           :maxLength="50"
           :required="required"
           v-model="person.stateInscription"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="4" xl="4">
@@ -54,6 +58,7 @@
           :maxLength="50"
           :required="required"
           v-model="person.municipalInscription"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
     </b-row>
@@ -67,6 +72,7 @@
           :required="true"
           :maxLength="100"
           v-model="person.companyName"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
       <b-col xs="12" sm="12" md="12" lg="4" xl="4">
@@ -77,6 +83,7 @@
           :required="true"
           :maxLength="100"
           v-model="person.tradeName"
+          :markFormDirty="markFormDirty"
         />
       </b-col>
     </b-row>
@@ -99,6 +106,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    showTypePerson: {
+      type: Boolean,
+      default: true,
+    },
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
     value: Object,
   },
   components: { RadioGroup, InputText, Button },