@nixweb/nixloc-ui 0.0.286 → 0.0.288

package/package.json

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

package/src/component/layout/ScrollBar.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <style scoped>
-div {
+.scrollbar {
   overflow-y: visible;
   overflow-x: hidden;
 }

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/shared/filter-builder/FilterBuilder.vue

@@ -45,10 +45,10 @@
                     </b-row>
                 </div>
             </div>
-            <div class="text-center">
-                <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
-                    :clicked="apply" />
-            </div>
+        </div>
+        <div class="text-center">
+            <Button _key="btnApply" title="Aplicar" backGroundColor="#017AFF" color="white" size="small"
+                :clicked="apply" />
         </div>
     </div>
 </template>

package/src/component/template/ReportCreateUpdate.vue

@@ -2,29 +2,15 @@
   <div>
     <b-row>
       <b-col sm="12">
-        <InputText
-          title="Nome"
-          field="name"
-          :formName="formName"
-          :required="true"
-          :maxLength="40"
-          v-model="report.name"
-          :markFormDirty="false"
-        />
+        <InputText title="Nome" field="name" :formName="formName" :required="true" :maxLength="40" v-model="report.name"
+          :markFormDirty="false" />
       </b-col>
     </b-row>
     <b-row>
       <b-col sm="12">
         <div class="text-right">
-          <Button
-            _key="btnSaveReport"
-            type="success"
-            title="Salvar"
-            :disabled="!isFormValid(formName)"
-            classIcon="fas fa-save"
-            size="medium"
-            :clicked="saveReport"
-          />
+          <Button _key="btnSaveReport" type="success" title="Salvar" :disabled="!isFormValid(formName)"
+            classIcon="fas fa-save" size="medium" :clicked="saveReport" />
         </div>
       </b-col>
     </b-row>

package/src/component/template/ViewTemplateReportList.vue

@@ -83,6 +83,7 @@ export default {
   },
   mounted() {
     this.getAll();
+    //this.removeLoading(["panel"]);
     this.allReports = JSON.parse(JSON.stringify(this.reports)); // remove observable
   },
   methods: {