@nixweb/nixloc-ui 0.0.285 → 0.0.287

package/package.json

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

package/src/component/forms/Button.vue

@@ -12,8 +12,8 @@
       danger: type === 'danger',
       disabled: disabled,
     }" :disabled="disabled" @click="execute()">
-      <i class="div-icon-btn" :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
-      <span class="title-btn" v-if="!isLoading(this._key)">{{ title }}</span>
+      <i :class="classIcon" v-if="!isLoading(this._key) && classIcon"></i>
+      <span class="title-btn" v-if="!isLoading(this._key) && title">{{ title }}</span>
       <vue-loading v-if="isLoading(this._key)" type="bubbles" color="#fff"
         :size="{ width: '26px', height: '26px' }"></vue-loading>
     </button>
@@ -64,9 +64,6 @@ export default {
   margin-left: 5px;
 }
 
-.div-icon-btn {
-  margin-right: 0px;
-}
 
 .title-btn {
   margin-left: 3px;

package/src/component/layout/Tag.vue

@@ -65,7 +65,7 @@ export default {
   display: flex;
   font-size: 13px;
   height: 32px;
-  margin: 4px 8px 4px 0;
+  margin: 4px -9px 4px 0;
   outline: none;
   padding: 0 6px 0 16px;
   position: relative;

package/src/component/report/Fields.vue

@@ -62,8 +62,10 @@ export default {
         }
     },
     created() {
-        this.initialValue = { content: this.data[0].title, id: this.data[0].fieldOrderBy };
-        this.$emit("input", { ordering: this.ordering, field: this.data[0].fieldOrderBy });
+        const targetObject = this.data.find(item => item.initialOrderBy === true);
+
+        this.initialValue = { content: targetObject.title, id: targetObject.fieldOrderBy };
+        this.$emit("input", { ordering: this.ordering, field: targetObject.fieldOrderBy });
     },
     computed: {
         ...mapGetters("generic", ["showModal"]),

package/src/component/report/Report.vue

@@ -10,13 +10,14 @@
                             <div class="side-by-side">
                                 <div class="div-filter">
                                     <Button _key="btnSearchReport" :disabled="loading || !isValid" type="primary"
-                                        title="Buscar" classIcon="fas fa-file-search" size="medium" :clicked="getAll" />
+                                        title="Buscar" classIcon="fas fa-file-search" size="medium"
+                                        :clicked="executeSearch" />
                                 </div>
                             </div>
                             <div class="side-by-side">
                                 <Fields :data="header" v-model="ordering" />
                             </div>
-                            <div class="side-by-side">
+                            <div class="side-by-side div-filter-query">
                                 <FilterQuery :filters="filters" v-model="stringFilter" />
                             </div>
                         </div>
@@ -25,6 +26,9 @@
                 <div v-if="liveTotalRecords != totalRecords">
                     <ProgressBar :text="`Carregando ${liveTotalRecords} registros de ${totalRecords}`"
                         :value="liveTotalRecords" :max="totalRecords" size="medium" />
+                    <div class="text-center cancel" @click="stop">
+                        <i class="fa-solid fa-ban"></i> Cancelar
+                    </div>
                 </div>
                 <div v-if="!isValid">
                     <Alert type="info">
@@ -106,7 +110,8 @@ export default {
             totalRecords: 0,
             currentPage: 1,
             totalPerPage: 50,
-            pagination: []
+            pagination: [],
+            cancel: false,
         }
     },
     mounted() {
@@ -140,10 +145,18 @@ export default {
     methods: {
         ...mapMutations("generic", ["removeLoading"]),
         ...mapActions("generic", ["getApi"]),
+        executeSearch() {
+            this.cancel = false;
+            this.data = [];
+            this.totalization = [];
+            this.getAll();
+        },
         getAll() {
-            if (this.isValid) {
+            if (this.isValid && !this.cancel) {
                 this.removeLoading(["btnSearchReport"]);
                 this.loading = true;
+                this.cancel = false;
+
                 let params = {
                     url: this.urlGet,
                     obj:
@@ -184,7 +197,6 @@ export default {
                     this.show = true;
                     setTimeout(function () {
                         self.loading = false;
-
                     }, 500);
 
                     this.verifyIfPagination();
@@ -202,6 +214,10 @@ export default {
             } else {
                 this.currentPage = 1;
             }
+        },
+        stop() {
+            this.cancel = true;
+            this.loading = false;
         }
     },
     watch: {
@@ -266,6 +282,10 @@ export default {
     margin-bottom: -12px;
 }
 
+.div-filter-query {
+    margin-top: 10px;
+}
+
 .footer {
     margin-bottom: 10px;
 }
@@ -273,4 +293,9 @@ export default {
 .icon-excel {
     color: green;
 }
+
+.cancel {
+    color: red;
+    cursor: pointer;
+}
 </style>

package/src/component/report/ReportTable.vue

@@ -12,7 +12,7 @@
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="(row, index) in data" :key="index" :style="row.rowCss">
+                <tr class="div-row" v-for="(row, index) in data" :key="index" :style="row.rowCss">
                     <td v-for="(obj, ind) in header" :key="ind">
                         <div :style="obj.styleBody" @click="sendEvent(obj.eventName, row)"
                             :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
@@ -105,4 +105,8 @@ table tbody tr td {
     font-size: 12px;
     min-width: 100px;
 }
+
+.div-row {
+    border-bottom: 1px solid #D3D3D3;
+}
 </style>

package/src/component/template/ViewTemplateReportList.vue

@@ -82,7 +82,8 @@ export default {
     ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
   },
   mounted() {
-    this.getAll();
+    //this.getAll();
+    this.removeLoading(["panel"]);
     this.allReports = JSON.parse(JSON.stringify(this.reports)); // remove observable
   },
   methods: {