@nixweb/nixloc-ui 0.0.162 → 0.0.164

package/package.json

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

package/src/component/shared/ParameterLegend.vue

@@ -77,12 +77,12 @@ export default {
     ...mapState("generic", ["search", "executedSearch", "clearedSearch"]),
     grouped() {
       let legend = [];
-      this.legendLocal.forEach((item) => {
+    /*  this.legendLocal.forEach((item) => {
         if (item.showModule.includes(this.module) || item.showModule == "all")
           legend.push(item);
-      });
+      });*/
 
-      var list = this.groupBy({ array: legend, key: "groupName" });
+      var list = this.groupBy({ array: this.legendLocal, key: "groupName" });
       return list;
     },
   },

package/src/component/shared/TableImport.vue

@@ -5,16 +5,13 @@
       <table class="table table-responsive-xs">
         <thead>
           <tr>
-            <th
-              v-for="(obj, ind) in headerTable"
-              :key="ind"
-              class="title-header"
-            >
+            <th v-for="(obj, ind) in headerTableMap" :key="ind" class="title-header">
               <div class="div-select">
                 <SelectStatic
                   :title="obj.title"
                   :data="select"
                   :markFormDirty="false"
+                  :initialValue="obj.target"
                   v-model="obj.target"
                 />
               </div>
@@ -49,6 +46,17 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    headerTableMap() {
+      var i = 0;
+      this.headerTable.forEach((item) => {
+        item.target = this.select[i];
+        i++;
+      });
+
+      return this.headerTable;
+    },
+  },
   methods: {},
 };
 </script>
@@ -77,7 +85,6 @@ export default {
   font-weight: 400;
 }
 
-
 .tabela-description {
   white-space: nowrap;
   overflow: hidden;

package/src/component/shared/TableItem.vue

@@ -185,6 +185,11 @@ export default {
   border-radius: 30px;
 }
 
+.img-bank {
+  width: 40px;
+  height: 40px;
+}
+
 .period-rent {
   cursor: pointer;
 }

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

@@ -6,23 +6,31 @@
           <div class="div-custom">
             <b-row>
               <b-col sm="6">
-                <SelectRule :options="rules" class="select" v-model="selectedRule" />
-              </b-col>
-              <b-col sm="3">
-                <RadioGroup
-                  :options="[
-                    { text: 'e', value: 'and' },
-                    { text: 'ou', value: 'or' },
-                  ]"
-                  v-model="andOr"
+                <SelectRule
+                  :options="rules"
+                  class="select"
+                  v-model="selectedRule"
                 />
               </b-col>
               <b-col sm="3">
-                <button type="button" class="btn btn-secondary" @click="add">
-                  + Adicionar
-                </button>
+                <div class="div-btn">
+                  <i class="fa-solid fa-circle-plus" @click="add"></i>
+                </div>
               </b-col>
             </b-row>
+            <div class="div-and-or">
+              <b-row>
+                <b-col sm="3">
+                  <RadioGroup
+                    :options="[
+                      { text: 'e', value: 'and' },
+                      { text: 'ou', value: 'or' },
+                    ]"
+                    v-model="andOr"
+                  />
+                </b-col>
+              </b-row>
+            </div>
           </div>
         </div>
       </div>
@@ -133,6 +141,16 @@ export default {
 </script>
 
 <style>
+.card {
+  border: 1px solid #e8eaed !important;
+  background-color: white !important;
+  border-radius: 8px !important;
+}
+
+.card-body {
+  padding: 10px;
+}
+
 .title-option {
   padding: 10px;
 }
@@ -173,6 +191,17 @@ export default {
   color: rgb(150, 150, 150);
 }
 
+.div-btn {
+  margin-top: -3px;
+  font-size: 25px;
+  color: #577696;
+  cursor: pointer;
+}
+
+.div-and-or {
+  margin-top: 10px;
+}
+
 @media (min-width: 768px) {
   .vue-query-builder .vqb-rule.form-inline .form-group {
     display: block;

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

@@ -69,6 +69,7 @@
 
       <Select
         v-if="rule.typeField == 'select'"
+        :showNewRegister="false"
         :url="rule.props.url"
         v-model="rule.value"
       />

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

@@ -13,12 +13,6 @@
           :index="index"
         />
       </draggable>
-      <br />
-      <div v-if="selectedRules.length == 0">
-        <Alert type="info">
-          Selecione o filtro desejado e clique em +Adicionar</Alert
-        >
-      </div>
     </div>
   </div>
 </template>
@@ -66,12 +60,11 @@ export default {
 
 <style scoped>
 .component {
-  min-height: 450px;
-  max-height: 450px;
-  overflow-y: visible;
-  overflow-x: hidden;
   padding-left: 10px;
   padding-right: 10px;
   margin-top: 10px;
+  max-width: 1100px;
+  margin: auto;
+  padding-top: 20px;
 }
 </style>

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

@@ -46,13 +46,14 @@ export default {
   outline: none;
   height: 40px;
   line-height: 40px;
-  z-index: 1000;
+  z-index: 500;
 }
 
 .selected-filter .selected {
   background-color: white;
-  border-bottom: 1px solid #dbdee0;
-  color: black;
+  border: 1px solid #DBDEE0;
+  border-radius: 6px;
+  color: #495057;
   padding-left: 1em;
   cursor: pointer;
   user-select: none;
@@ -61,7 +62,7 @@ export default {
 .selected-filter .selected:after {
   position: absolute;
   content: "";
-  top: 22px;
+  top: 19px;
   right: 1em;
   width: 0;
   height: 0;

package/src/component/template/ViewTemplateImportFile.vue

@@ -9,37 +9,38 @@
     >
       <div slot="content-main">
         <br />
-        <div v-show="!success">
+        <div class="div-loading" v-show="loading">
+          <span>
+            {{ msg }}
+          </span>
+          <Loading type="line" :center="false" />
+        </div>
+        <div v-show="!success && !loading">
           <b-tabs>
             <b-tab title="Importar">
-              <div class="div-loading" v-show="loading">
-                <span
-                  >Aguarde, estamos carregando os dados, isso pode levar alguns
-                  minutos...
-                </span>
-                <Loading type="line" :center="false" />
-              </div>
-              <div v-show="!loading">
+              <div>
                 <div v-show="!fileName">
-                  <div class="import-icon">
-                    <i class="fas fa-file-import"></i>
-                  </div>
-                  <slot></slot>
                   <Alert type="info">
                     <span>
-                      Selecione o arquivo no formato <b> .xlsx </b> baseado na
-                      planilha modelo e aguarde até carregar os dados para
-                      conferência. </span
-                    ><br />
+                      Selecione o arquivo Excel no formato
+                      <b> .xlsx </b> baseado na planilha
+                      <a :href="urlTemplate" class="text-download">
+                        <b>BAIXAR MODELO</b>
+                      </a>
+                      e aguarde até carregar os dados para conferência.
+                    </span>
+                    <br />
                     <span>
                       Até <b> 1000 </b> itens por planilha ou <b> 1MB </b> no
                       arquivo.
                     </span>
                   </Alert>
+                  <br />
+                  <slot></slot>
                   <div class="div-file">
                     <FileUpload
-                      title="Carregar arquivo"
-                      classIcon="fa-sharp fa-solid fa-upload"
+                      title="Carregar .xlsx"
+                      classIcon="fa-solid fa-file-excel"
                       :container="container"
                       accepted=".xlsx"
                       allowed=".xlsx"
@@ -56,10 +57,13 @@
                   <div class="import-icon">
                     <i class="fas fa-file-import"></i>
                   </div>
-                  <span>
+                  <span v-if="!isValid">
                     Efetue o <b> mapeamento </b> dos campos e clique em iniciar
-                    validação.</span
-                  >
+                    validação.
+                  </span>
+                  <span v-else>
+                    Dados <b> validado com sucesso, </b> clique em importar.
+                  </span>
                   <br />
                   <div class="div-btn">
                     <Button
@@ -232,6 +236,7 @@ export default {
     urlMapping: String,
     urlValidate: String,
     urlImport: String,
+    urlTemplate: String,
   },
   data() {
     return {
@@ -244,6 +249,8 @@ export default {
       isValid: false,
       idRemove: "",
       success: false,
+      msg: "",
+      loadingImport: false,
     };
   },
   computed: {
@@ -253,7 +260,10 @@ export default {
     ...mapActions("generic", ["postApi", "deleteAllApi"]),
     ...mapMutations("generic", ["openModal", "hideModal", "removeLoading"]),
     successUploadFile() {
+      this.listError = [];
       this.loading = true;
+      this.msg =
+        "Aguarde, estamos carregando os dados, isso pode levar alguns minutos...";
       let self = this;
       setTimeout(function () {
         self.mapping(self.fileName);
@@ -279,6 +289,10 @@ export default {
       });
     },
     validate() {
+      this.loading = true;
+      this.msg =
+        "Aguarde, estamos validando os dados, isso pode levar alguns minutos...";
+      this.isValid = false;
       let params = {
         url: this.urlValidate,
         obj: {
@@ -295,9 +309,16 @@ export default {
           if (this.listError.length == 0) this.isValid = true;
         }
         this.removeLoading(["btnValidate"]);
+        let self = this;
+        setTimeout(function () {
+          self.loading = false;
+        }, 2000);
       });
     },
     startImport() {
+      this.loading = true;
+      this.msg =
+        "Aguarde, estamos importando os dados, isso pode levar alguns minutos...";
       let params = {
         url: this.urlImport,
         obj: {
@@ -312,9 +333,9 @@ export default {
         if (response.success) {
           this.success = true;
           this.isValid = false;
-          this.removeLoading(["btnImport"]);
         }
-        this.removeLoading(["btnValidate"]);
+        this.removeLoading(["btnImport"]);
+        this.loading = false;
       });
     },
     removeSelected() {
@@ -342,6 +363,7 @@ export default {
       this.fileName = "";
       this.listError = [];
       this.success = false;
+      this.isValid = false;
       this.removeLoading(["btnBack"]);
     },
   },
@@ -384,6 +406,11 @@ export default {
   margin: auto;
 }
 
+.text-download {
+  color: #1990ff;
+  cursor: pointer;
+}
+
 .msg-success {
   font-size: 18px;
 }

package/src/component/template/ViewTemplateReportPreview.vue

@@ -9,91 +9,115 @@
     >
       <div slot="content-main">
         <br />
-        <div
-          class="div-progress"
-          v-if="liveTotalRecords != baseParams.totalRecords && isLoading"
-        >
-          <ProgressBar
-            :text="`Carregando ${liveTotalRecords} registro(s) de ${baseParams.totalRecords}`"
-            :value="liveTotalRecords"
-            :max="baseParams.totalRecords"
-            size="medium"
-          />
+        <div v-show="!showFilter">
+          <div
+            class="div-progress"
+            v-if="liveTotalRecords != baseParams.totalRecords"
+          >
+            <ProgressBar
+              :text="`Carregando ${liveTotalRecords} registro(s) de ${baseParams.totalRecords}`"
+              :value="liveTotalRecords"
+              :max="baseParams.totalRecords"
+              size="medium"
+            />
+          </div>
+          <Molded>
+            <b-row>
+              <b-col sm="6">
+                <div class="side-by-side">
+                  <Button
+                    _key="btnSearchReport"
+                    type="primary"
+                    title="Buscar"
+                    classIcon="fas fa-file-search"
+                    :disabled="btnSearchDisabled || !rulesIsValid"
+                    size="medium"
+                    :clicked="getAll"
+                  />
+                </div>
+                <div class="side-by-side">
+                  <Button
+                    _key="btnSaveReport"
+                    type="success"
+                    title="Salvar"
+                    classIcon="fas fa-save"
+                    size="small"
+                    :disabled="isLoading || btnSaveDisabled || !rulesIsValid"
+                    :params="{ name: 'save', title: 'Salvar', width: 550 }"
+                    :clicked="executeOpenModal"
+                  />
+                </div>
+              </b-col>
+              <b-col class="text-right" sm="6">
+                <div class="side-by-side">
+                  <Button
+                    _key="btnExecuteOpenModal"
+                    type="info"
+                    title="Campos"
+                    classIcon="fas fa-database"
+                    size="small"
+                    :disabled="isLoading"
+                    :params="{ name: 'fields', title: 'Campos', width: 550 }"
+                    :clicked="executeOpenModal"
+                  />
+                </div>
+                <div class="side-by-side">
+                  <Button
+                    _key="btnExecuteOpenModal"
+                    type="info"
+                    title="Filtros"
+                    classIcon="fas fa-filter"
+                    size="small"
+                    :disabled="isLoading"
+                    :params="{ name: 'rules', title: 'Filtros', width: 900 }"
+                    :clicked="executeShowFilter"
+                  />
+                </div>
+              </b-col>
+            </b-row>
+          </Molded>
+          <div class="div-tags">
+            <Tags eventName="tagReport" />
+          </div>
+          <div class="div-required" v-show="!rulesIsValid">
+            <Alert type="info" v-for="rule in rulesRequired" :key="rule.id">
+              É necessário informar o filtro
+              <span class="filter-required">{{ rule.title }}</span
+              >, clique no botão "Filtros" para adicionar.
+            </Alert>
+          </div>
+          <div class="body-report" v-show="showBodyReport && rulesIsValid">
+            <Report
+              :header="content.headerTable"
+              :data="content.data"
+              :totalization="content.totalization"
+            />
+          </div>
         </div>
-        <Molded>
-          <b-row>
-            <b-col sm="6">
-              <div class="side-by-side">
-                <Button
-                  _key="btnSearchReport"
-                  type="primary"
-                  title="Buscar"
-                  classIcon="fas fa-file-search"
-                  :disabled="btnSearchDisabled || !rulesIsValid"
-                  size="medium"
-                  :clicked="getAll"
-                />
-              </div>
-              <div class="side-by-side">
-                <Button
-                  _key="btnSaveReport"
-                  type="success"
-                  title="Salvar"
-                  classIcon="fas fa-save"
-                  size="small"
-                  :disabled="isLoading || btnSaveDisabled || !rulesIsValid"
-                  :params="{ name: 'save', title: 'Salvar', width: 550 }"
-                  :clicked="executeOpenModal"
-                />
-              </div>
-            </b-col>
-            <b-col class="text-right" sm="6">
-              <div class="side-by-side">
-                <Button
-                  _key="btnExecuteOpenModal"
-                  type="info"
-                  title="Campos"
-                  classIcon="fas fa-database"
-                  size="small"
-                  :disabled="isLoading"
-                  :params="{ name: 'fields', title: 'Campos', width: 550 }"
-                  :clicked="executeOpenModal"
-                />
-              </div>
-              <div class="side-by-side">
-                <Button
-                  _key="btnExecuteOpenModal"
-                  type="info"
-                  title="Filtros"
-                  classIcon="fas fa-filter"
-                  size="small"
-                  :disabled="isLoading"
-                  :params="{ name: 'rules', title: 'Filtros', width: 900 }"
-                  :clicked="executeOpenModal"
-                />
-              </div>
-            </b-col>
-          </b-row>
-        </Molded>
-        <div class="div-tags">
-          <Tags eventName="tagReport" />
-        </div>
-        <div class="div-required" v-show="!rulesIsValid">
-          <Alert type="warning" v-for="rule in rulesRequired" :key="rule.id">
-            É necessário informar o filtro
-            <span class="filter-required">{{ rule.title }}</span
-            >, clique no botão "Filtros" para adicionar.
-          </Alert>
-        </div>
-        <div class="body-report" v-show="showBodyReport && rulesIsValid">
-          <Report
-            :header="content.headerTable"
-            :data="content.data"
-            :totalization="content.totalization"
-          />
+        <div v-show="showFilter">
+          <Rules />
+          <br />
+          <div class="text-center">
+            <Button
+              _key="btnCancelFilter"
+              type="info"
+              classIcon="fa-solid fa-arrow-left"
+              size="small"
+              :clicked="executeHideFilter"
+            />
+            <Button
+              _key="btnApplyFilter"
+              type="primary"
+              title="Aplicar"
+              classIcon="fas fa-filter"
+              size="small"
+              :clicked="executeHideFilter"
+            />
+          </div>
         </div>
       </div>
     </Panel>
+
     <Modal
       :title="modalOptions.title"
       :width="modalOptions.width"
@@ -104,7 +128,6 @@
         v-show="modalOptions.name == 'save'"
       />
       <Fields v-if="modalOptions.name == 'fields'" />
-      <Rules v-show="modalOptions.name == 'rules'" />
       <div
         class="text-right btn-apply"
         v-show="modalOptions.name == 'fields' || modalOptions.name == 'rules'"
@@ -171,7 +194,7 @@ export default {
       },
       baseParams: {
         currentPage: 0,
-        totalPerPage: 100,
+        totalPerPage: 50,
         totalPage: 0,
         totalRecords: 0,
       },
@@ -184,6 +207,7 @@ export default {
       btnSaveDisabled: true,
       isLoading: false,
       showBodyReport: false,
+      showFilter: false,
     };
   },
   mounted() {
@@ -307,6 +331,14 @@ export default {
         this.removeLoading(["btnExecuteOpenModal", "btnSaveReport"]);
       }
     },
+    executeShowFilter() {
+      this.showFilter = true;
+      this.removeLoading(["btnExecuteOpenModal", "btnSaveReport"]);
+    },
+    executeHideFilter() {
+      this.showFilter = false;
+      this.removeLoading(["btnCancelFilter", "btnApplyFilter"]);
+    },
     applyFieldsAndRules() {
       this.hideModal("templateReport");
       this.removeLoading(["btnApplyFieldsAndRules"]);
@@ -361,7 +393,7 @@ export default {
           let self = this;
           setTimeout(function () {
             self.getAllManyPages();
-          }, 200);
+          }, 1000);
         }
         if (totalPages.length == 1) this.isLoading = false;
       },