@nixweb/nixloc-ui 0.0.146 → 0.0.148

package/package.json

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

package/src/component/forms/Button.vue

@@ -90,9 +90,6 @@ export default {
   font-weight: normal;
   font-style: normal !important;
   letter-spacing: 1px !important;
-  -webkit-box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
-  -moz-box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 12%);
 }
 
 .small {
@@ -110,7 +107,6 @@ export default {
   font-size: 14px;
 }
 
-
 .disabled {
   background: #bbbbbb !important;
   border-color: #bbbbbb !important;

package/src/component/forms/ButtonFilter.vue

@@ -71,7 +71,8 @@ export default {
 }
 
 .selected {
-  background-color: #f7f7f7;
+  background-color: #4BB4E2;
+  color:white;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;

package/src/component/layout/Account.vue

@@ -59,7 +59,7 @@ export default {
 <style scoped>
 .photo-container {
   margin-top: -37px;
-  padding-right: 10px;
+  padding-right: 30px;
   cursor: pointer;
   position: fixed;
   float: right;

package/src/component/layout/Header.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
+    <div class="top-margin"></div>
     <div class="top" :style="'background-color:' + backgroundColor">
-      <div class="side-by-side">
+      <div class="side-by-side top-space">
         <slot></slot>
       </div>
     </div>
@@ -25,14 +26,32 @@ export default {
 
 <style scoped>
 .top {
-  border-radius: 0px 0px 0px 0px;
+  border-radius: 12px 12px 12px 12px;
+  margin-top: 7px;
+  left: 120px;
+  right: 1%;
   height: 50px;
-  width: 100%;
-  position: fixed;
   top: 0;
-  left: 100px;
-  z-index: 20;
+  z-index: 1000;
   box-shadow: 0px 10px 30px -6px rgb(0 0 0 / 10%);
   border-bottom: 0px solid #eff0f1;
+  position: fixed;
+}
+
+.top-space {
+  margin-right: 10px;
+  width: 100%;
+}
+
+.top-margin {
+  width: 100%;
+  widows: 100%;
+  height: 10px;
+  margin-right: 80px;
+  top: 0;
+  margin-left: 120px;
+  z-index: 1000;
+  background-color: #fdfdfd;
+  position: fixed;
 }
 </style>

package/src/component/layout/IconMolded.vue

@@ -7,7 +7,15 @@
       v-b-tooltip.hover
       :title="icon.tooltip"
     >
-      <div class="icon-molded"><i :class="icon.icon"></i></div>
+      <div
+        class="icon-molded"
+        :class="{
+          'icon-active-top': menuActive == icon.module,
+          'icon-normal-top': menuActive != icon.module,
+        }"
+      >
+        <i :class="icon.icon"></i>
+      </div>
     </div>
   </div>
 </template>
@@ -20,6 +28,9 @@ export default {
   props: {
     icons: Array,
   },
+  data() {
+    return { menuActive: "" };
+  },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
     executeEvent(eventName) {
@@ -28,6 +39,14 @@ export default {
       });
     },
   },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.menuActive = router.matched[0].props.default.module;
+      },
+      deep: true,
+    },
+  },
 };
 </script>
 

package/src/component/layout/Menu.vue

@@ -6,44 +6,43 @@
           <img :src="urlImage" />
         </div>
       </li>
-      <!-- <li>
-        <div :class="{ 'menu-active': menuActive == 'Dashboard' }">
-          <a
-            href="#"
-            @click.prevent="navegateTo({ routeName: 'dashboard', module: 'Dashboard' })"
-            :class="highlightSession('home')"
-          >
-            <div class="div-icon side-by-side">
-              <i
-                :class="{
-                  'icon-active': menuActive == 'Dashboard',
-                  'icon-normal': menuActive != 'Dashboard',
-                }"
-                class="fas fa-chart-area icon-dash"
-              ></i>
-            </div>
-            <div class="title">Dashboard</div>
-          </a>
-        </div>
-      </li>-->
-      <li v-for="(item, index) in menuFilter(true)" :key="index">
-        <div :class="{ 'menu-active': menuActive == item.module }">
+      <li class="molded">
+        <div
+          class="box-main"
+          v-for="(item, index) in menuFilter(true)"
+          :key="index"
+        >
           <a
             href="#"
             @click.prevent="openSubMenu(item.module)"
             :class="highlightSession(item.module)"
           >
-            <div class="div-icon side-by-side">
-              <span
-                :class="{
-                  'icon-active': menuActive == item.module,
-                  'icon-normal': menuActive != item.module,
-                }"
-              >
-                <i :class="item.icon"></i>
-              </span>
+            <div
+              :class="{
+                'icon-active': menuActive == item.module,
+                'icon-normal': menuActive != item.module,
+              }"
+            >
+              <b-row>
+                <b-col sm="12">
+                  <div class="box-icon text-center">
+                    <i :class="item.icon"></i></div
+                ></b-col>
+              </b-row>
+              <b-row>
+                <b-col sm="12">
+                  <div class="div-title text-center">
+                    <span
+                      :class="{
+                        'title-active': menuActive == item.module,
+                        'title-normal': menuActive != item.module,
+                      }"
+                      >{{ item.title }}</span
+                    >
+                  </div>
+                </b-col>
+              </b-row>
             </div>
-            <div class="title">{{ item.title }}</div>
           </a>
         </div>
       </li>
@@ -73,12 +72,16 @@
             >
               <b-row>
                 <b-col sm="1">
-                  <i :class="item.icon" aria-hidden="true"></i
-                ></b-col>
+                  <i
+                    class="menu-icon"
+                    :style="'color:' + item.iconColor"
+                    :class="item.icon"
+                  ></i>
+                </b-col>
                 <b-col sm="10">
-                  <span class="title-sub"> {{ item.title }}</span></b-col
-                ></b-row
-              >
+                  <span class="title-sub"> {{ item.title }}</span>
+                </b-col>
+              </b-row>
             </a>
           </li>
         </ul>
@@ -173,41 +176,66 @@ export default {
   z-index: 1000;
 }
 .div-logo {
-  padding-top: 4px;
-  padding-bottom: 6px;
-}
-.div-icon {
-  width: 35px;
-  height: 35px;
-  padding-top: 5px;
-  margin-left: 38px;
+  padding-top: 12px;
+  padding-left: 10px;
+  padding-bottom: 15px;
 }
+
 .icon-close {
-  margin-right: 60px;
+  margin-right: 10px;
+  margin-top: -5px;
+  font-size: 22px;
 }
+
 .icon {
   font-size: 20px;
 }
+
 .icon-dash {
   font-size: 22px;
 }
-.title {
-  font-size: 13px;
-  font-weight: 400;
-  margin-top: -5px;
-  text-align: center;
-  width: 100%;
+
+.box-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.box-icon {
+  width: 80px;
+  border-radius: 18px;
+}
+
+.div-title {
+  margin-top: -17px;
 }
+
 .title-sub {
   margin-left: -3px;
   font-weight: 400;
 }
+
 .sub-title {
   font-size: 16px;
   font-weight: normal;
 }
+
 img {
   height: 36px;
   margin-top: 5px;
 }
+
+.menu-icon {
+  font-size: 15px;
+}
+
+.molded {
+  margin-top: 5px;
+  margin-left: 10px;
+  padding: 5px;
+  padding-bottom: 1px !important;
+  background-color: white !important;
+  border: 1px solid #e8eaed;
+  border-radius: 12px !important;
+}
 </style>

package/src/component/layout/Molded.vue

@@ -17,12 +17,13 @@ export default {
 </script>
 <style scoped>
 .molded {
-  border: 1px solid #E5E4E8;
+  border: 1px solid #e8eaed;
   background-color: white;
+  border-radius: 12px !important;
+  padding: 10px;
   padding-top: 15px;
   padding-left: 30px;
   padding-right: 30px;
   padding-bottom: 10px;
-  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
 }
 </style>

package/src/component/layout/Panel.vue

@@ -135,6 +135,8 @@ export default {
 }
 
 .panel {
-  padding: 25px;
+  margin-top: 50px;
+  padding-left: 30px;
+  padding-right: 30px;
 }
 </style>

package/src/component/shared/ListErrorImport.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <ScrollBar :minHeight="400" :maxHeight="400">
+      <div>
+        <br />
+        <table class="table table-responsive-xs">
+          <thead>
+            <tr>
+              <th class="title-header">Mensagem</th>
+            </tr>
+          </thead>
+          <tbody v-for="error in listError">
+            <tr>
+              <td>
+                <span class="message"> {{ error }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollBar>
+  </div>
+</template>
+
+<script>
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+export default {
+  name: "ListErrorImport",
+  props: {
+    listError: Array,
+  },
+  components: {
+    ScrollBar,
+  },
+};
+</script><style scoped>
+.table th,
+.table td {
+  height: 10px !important;
+  padding-left: 5px !important;
+  padding-top: 7px !important;
+  padding-bottom: 5px !important;
+  padding-right: 5px !important;
+  padding-left: 10px !important;
+  border-bottom: 0px !important;
+}
+
+.title-header {
+  font-size: 14px;
+  color: #757d8c;
+  font-weight: 400;
+}
+
+.tabela-principal {
+  font-size: 14px;
+  max-width: 200px;
+}
+
+.tabela-descricao {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.message {
+  color: red;
+}
+</style>

package/src/component/shared/SaveCancel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <FixedBar position="footer" v-show="formDirty && !modal.open">
+    <FixedBar position="footer" backgroundColor="#FAFAFC" v-show="formDirty && !modal.open">
       <div class="margin">
         <Button
           _key="cancelSaveCancel"

package/src/component/shared/Table.vue

@@ -132,6 +132,11 @@ table tbody tr td {
   border-bottom: 0px !important;
 }
 
+.table thead tr {
+  background-color: #FAFAFC !important;
+ 
+}
+
 .td-checkbox {
   width: 30px;
 }

package/src/component/shared/TableImport.vue

@@ -78,6 +78,7 @@ export default {
   font-weight: 400;
 }
 
+
 .tabela-description {
   white-space: nowrap;
   overflow: hidden;

package/src/component/template/ViewTemplateImportFile.vue

@@ -9,8 +9,18 @@
     >
       <div slot="content-main">
         <br />
-        <Molded>
+        <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>
+        <Molded v-show="!loading">
           <div v-show="!fileName">
+            <div class="import-icon">
+              <i class="fas fa-file-import"></i>
+            </div>
             <slot></slot>
             <Alert type="info">
               <span>
@@ -24,8 +34,8 @@
             </Alert>
             <div class="div-file">
               <FileUpload
-                title="Carregar arquivo .xlsx"
-                classIcon="fa-solid fa-file-excel"
+                title="Carregar arquivo"
+                classIcon="fa-sharp fa-solid fa-upload"
                 :container="container"
                 accepted=".xlsx"
                 allowed=".xlsx"
@@ -38,14 +48,6 @@
               />
             </div>
           </div>
-
-          <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="fileName && !loading">
             <div class="import-icon">
               <i class="fas fa-file-import"></i>
@@ -65,23 +67,40 @@
                 :clicked="back"
               />
               <Button
-                _key="print"
+                v-if="!isValid"
+                _key="btnValidate"
                 type="primary"
                 title="Iniciar Validação"
-                :disabled="true"
+                :disabled="false"
                 classIcon="fa-solid fa-arrow-right-arrow-left"
                 size="small"
-                :clicked="print"
+                :clicked="validate"
+              />
+              <Button
+                v-if="listError.length > 0"
+                _key="btnListError"
+                type="danger"
+                title="Erro(s)"
+                classIcon="fa-sharp fa-solid fa-triangle-exclamation"
+                size="small"
+                :clicked="openListError"
               />
             </div>
             <br />
+            <Alert type="danger" v-if="listError.length > 0">
+              <span>
+                Atenção, foram identificados
+                <b>{{ listError.length }}</b> erro(s), corrija-os!
+              </span>
+            </Alert>
             <Alert type="info">
               <span>
-                Total de <b> {{ totalRecords }} </b> registro(s), porem para o
-                mapeamento serão carregados somente os <b> 10 </b> primeiros
-                registros (se houver).
+                Total de <b> {{ totalRecords }} </b> registro(s), para o
+                mapeamento serão carregados somente os <b> 10 </b> primeiros (se
+                houver).
               </span>
             </Alert>
+
             <TableImport
               :select="select"
               :headerTable="headerTable"
@@ -91,6 +110,14 @@
         </Molded>
       </div>
     </Panel>
+    <Modal
+      title="Erro(s)"
+      :width="900"
+      :height="750"
+      v-show="showModal('listError')"
+    >
+      <ListErrorImport :listError="listError" />
+    </Modal>
   </div>
 </template>
 
@@ -101,10 +128,12 @@ import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
 import FileUpload from "@nixweb/nixloc-ui/src/component/forms/FileUpload";
 import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
 import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
 
 import TableImport from "@nixweb/nixloc-ui/src/component/shared/TableImport.vue";
+import ListErrorImport from "@nixweb/nixloc-ui/src/component/shared/ListErrorImport.vue";
 
-import { mapState, mapActions, mapMutations } from "vuex";
+import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
 
 export default {
   name: "ViewTemplateImportFileView",
@@ -114,28 +143,36 @@ export default {
     Molded,
     FileUpload,
     Loading,
+    ListErrorImport,
     TableImport,
     Alert,
+    Modal,
   },
   props: {
     panel: Object,
     select: Array,
     container: String,
     typeImport: Number,
+    urlMapping: String,
+    urlValidate: String,
   },
   data() {
     return {
       fileName: "",
-      urlMapping: "/api/v1/stock/import-product/mapping",
       loading: false,
       headerTable: [],
       data: [],
       totalRecords: 0,
+      listError: [],
+      isValid: false,
     };
   },
+  computed: {
+    ...mapGetters("generic", ["showModal"]),
+  },
   methods: {
     ...mapActions("generic", ["postApi"]),
-    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("generic", ["openModal", "removeLoading"]),
     successUploadFile() {
       this.loading = true;
       let self = this;
@@ -162,8 +199,32 @@ export default {
         }
       });
     },
+    validate() {
+      let params = {
+        url: this.urlValidate,
+        obj: {
+          fileName: this.fileName,
+          container: this.container,
+          typeImport: this.typeImport,
+          items: this.headerTable,
+        },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.listError = response.content;
+          if (this.listError.length == 0) this.isValid = true;
+        }
+        this.removeLoading(["btnValidate"]);
+      });
+    },
+    openListError() {
+      this.openModal("listError");
+      this.removeLoading(["btnListError"]);
+    },
     back() {
       this.fileName = "";
+      this.listError = [];
       this.removeLoading(["btnBack"]);
     },
   },

package/src/component/template/ViewTemplateReportList.vue

@@ -9,7 +9,14 @@
     >
       <div slot="content-main">
         <b-row>
-          <b-col xs="12" sm="12" md="12" lg="6" xl="6" v-if="allReports.saved.length > 0">
+          <b-col
+            xs="12"
+            sm="12"
+            md="12"
+            lg="6"
+            xl="6"
+            v-if="allReports.saved.length > 0"
+          >
             <div><i class="fas fa-file-alt icon-saved"></i> Personalizado</div>
             <hr class="hr" />
             <div class="div-molded" v-for="report in allReports.saved">
@@ -40,7 +47,9 @@
             </div>
           </b-col>
           <b-col xs="12" sm="12" md="12" lg="6" xl="6">
-            <div><i class="fas fa-file-chart-line"></i> Padrão</div>
+            <div>
+              <i class="fas fa-file-chart-line icon-default"></i> Padrão
+            </div>
             <hr class="hr" />
             <div class="div-molded" v-for="report in allReports.default">
               <div>
@@ -179,6 +188,11 @@ export default {
 <style scoped>
 .icon-saved {
   color: #94aa2a;
+  font-size: 20px;
+}
+
+.icon-default {
+  font-size: 20px;
 }
 
 .icon-remove {