@nixweb/nixloc-ui 0.0.147 → 0.0.148

package/package.json

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

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 23px;
+  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,8 +6,12 @@
           <img :src="urlImage" />
         </div>
       </li>
-      <li v-for="(item, index) in menuFilter(true)" :key="index">
-        <div class="box-main">
+      <li class="molded">
+        <div
+          class="box-main"
+          v-for="(item, index) in menuFilter(true)"
+          :key="index"
+        >
           <a
             href="#"
             @click.prevent="openSubMenu(item.module)"
@@ -172,13 +176,15 @@ export default {
   z-index: 1000;
 }
 .div-logo {
-  padding-top: 4px;
+  padding-top: 12px;
+  padding-left: 10px;
   padding-bottom: 15px;
 }
 
 .icon-close {
-  margin-right: 15px;
-  font-size: 18px;
+  margin-right: 10px;
+  margin-top: -5px;
+  font-size: 22px;
 }
 
 .icon {
@@ -222,4 +228,14 @@ img {
 .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/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/template/ViewTemplateImportFile.vue

@@ -78,12 +78,12 @@
               />
               <Button
                 v-if="listError.length > 0"
-                _key="btnValidate"
+                _key="btnListError"
                 type="danger"
                 title="Erro(s)"
                 classIcon="fa-sharp fa-solid fa-triangle-exclamation"
                 size="small"
-                :clicked="validate"
+                :clicked="openListError"
               />
             </div>
             <br />
@@ -110,6 +110,14 @@
         </Molded>
       </div>
     </Panel>
+    <Modal
+      title="Erro(s)"
+      :width="900"
+      :height="750"
+      v-show="showModal('listError')"
+    >
+      <ListErrorImport :listError="listError" />
+    </Modal>
   </div>
 </template>
 
@@ -120,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",
@@ -133,8 +143,10 @@ export default {
     Molded,
     FileUpload,
     Loading,
+    ListErrorImport,
     TableImport,
     Alert,
+    Modal,
   },
   props: {
     panel: Object,
@@ -155,9 +167,12 @@ export default {
       isValid: false,
     };
   },
+  computed: {
+    ...mapGetters("generic", ["showModal"]),
+  },
   methods: {
     ...mapActions("generic", ["postApi"]),
-    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("generic", ["openModal", "removeLoading"]),
     successUploadFile() {
       this.loading = true;
       let self = this;
@@ -203,8 +218,13 @@ export default {
         this.removeLoading(["btnValidate"]);
       });
     },
+    openListError() {
+      this.openModal("listError");
+      this.removeLoading(["btnListError"]);
+    },
     back() {
       this.fileName = "";
+      this.listError = [];
       this.removeLoading(["btnBack"]);
     },
   },