@nixweb/nixloc-ui 0.0.290 → 0.0.292

package/package.json

@@ -1,89 +1,89 @@
-{
-  "name": "@nixweb/nixloc-ui",
-  "version": "0.0.290",
-  "description": "Componentes UI",
-  "author": "Fábio Ávila <fabio@nixweb.com.br>",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@ckeditor/ckeditor5-vue2": "^2.0.0",
-    "@fullcalendar/core": "^5.11.3",
-    "@fullcalendar/daygrid": "^5.11.3",
-    "@fullcalendar/interaction": "^5.11.3",
-    "@fullcalendar/list": "^5.11.3",
-    "@fullcalendar/timegrid": "^5.11.3",
-    "@fullcalendar/vue": "^5.11.2",
-    "axios": "^0.24.0",
-    "bootstrap-vue": "^2.0.0-rc.11",
-    "core-js": "^3.6.5",
-    "frappe-gantt": "^0.6.1",
-    "sass-loader": "^10.1.1",
-    "timeline-vuejs": "^1.1.7",
-    "v-runtime-template": "^1.10.0",
-    "vodal": "^2.4.0",
-    "vue": "^2.6.11",
-    "vue-color": "^2.7.0",
-    "vue-currency-filter": "^3.3.0",
-    "vue-html2pdf": "^1.8.0",
-    "vue-image-crop-upload": "^3.0.3",
-    "vue-js-toggle-button": "^1.3.0",
-    "vue-json-excel": "^0.3.0",
-    "vue-loading-template": "^1.3.0",
-    "vue-moment": "^4.0.0",
-    "vue-multiselect": "^2.1.0",
-    "vue-numeric": "^2.4.1",
-    "vue-pdf-app": "^2.1.0",
-    "vue-print-nb": "^1.7.5",
-    "vue-router": "^3.0.1",
-    "vue-simple-progress": "^1.1.1",
-    "vue-the-mask": "^0.11.1",
-    "vue-toasted": "^1.1.28",
-    "vue-toggles": "^1.1.4",
-    "vue-upload-file": "^1.1.0",
-    "vue2-datepicker": "^2.13.0",
-    "vue2-editor": "^2.6.6",
-    "vue2-google-maps": "^0.10.7",
-    "vuedraggable": "^2.24.3",
-    "vuejs-ace-editor": "^1.0.1",
-    "vuex": "^3.6.2",
-    "vuex-persistedstate": "^4.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "script-loader": "^0.7.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "engines": {
-    "node": "16.14.2",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "main": "babel.config.js"
+{
+  "name": "@nixweb/nixloc-ui",
+  "version": "0.0.292",
+  "description": "Componentes UI",
+  "author": "Fábio Ávila <fabio@nixweb.com.br>",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "@ckeditor/ckeditor5-vue2": "^2.0.0",
+    "@fullcalendar/core": "^5.11.3",
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/list": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
+    "@fullcalendar/vue": "^5.11.2",
+    "axios": "^0.24.0",
+    "bootstrap-vue": "^2.0.0-rc.11",
+    "core-js": "^3.6.5",
+    "frappe-gantt": "^0.6.1",
+    "sass-loader": "^10.1.1",
+    "timeline-vuejs": "^1.1.7",
+    "v-runtime-template": "^1.10.0",
+    "vodal": "^2.4.0",
+    "vue": "^2.6.11",
+    "vue-color": "^2.7.0",
+    "vue-currency-filter": "^3.3.0",
+    "vue-html2pdf": "^1.8.0",
+    "vue-image-crop-upload": "^3.0.3",
+    "vue-js-toggle-button": "^1.3.0",
+    "vue-json-excel": "^0.3.0",
+    "vue-loading-template": "^1.3.0",
+    "vue-moment": "^4.0.0",
+    "vue-multiselect": "^2.1.0",
+    "vue-numeric": "^2.4.1",
+    "vue-pdf-app": "^2.1.0",
+    "vue-print-nb": "^1.7.5",
+    "vue-router": "^3.0.1",
+    "vue-simple-progress": "^1.1.1",
+    "vue-the-mask": "^0.11.1",
+    "vue-toasted": "^1.1.28",
+    "vue-toggles": "^1.1.4",
+    "vue-upload-file": "^1.1.0",
+    "vue2-datepicker": "^2.13.0",
+    "vue2-editor": "^2.6.6",
+    "vue2-google-maps": "^0.10.7",
+    "vuedraggable": "^2.24.3",
+    "vuejs-ace-editor": "^1.0.1",
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "script-loader": "^0.7.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "engines": {
+    "node": "16.14.2",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "main": "babel.config.js"
 }

package/src/component/forms/Select.vue

@@ -5,27 +5,69 @@
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />
     </label>
-    <div class="select" :class="{
+    <div
+      class="select"
+      :class="{
         'select-invalid': notifications.length > 0 && formDirty,
         border: showBorder,
-      }">
-      <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
-        v-model.trim="currentValue" :custom-label="label" placeholder :disabled="disabled" :showLabels="true"
-        :noResult="false" :maxHeight="250" ref="multiselect" selectLabel deselectLabel selectedLabel>
+      }"
+    >
+      <multiselect
+        @open="onOpen"
+        @select="onSelected"
+        @search-change="onSearch"
+        :options="data"
+        v-model.trim="currentValue"
+        :custom-label="label"
+        placeholder
+        :disabled="disabled"
+        :showLabels="true"
+        :noResult="false"
+        :maxHeight="250"
+        ref="multiselect"
+        selectLabel
+        deselectLabel
+        selectedLabel
+      >
         <div slot="beforeList">
-          <vue-loading v-if="loading" type="bubbles" color="#577696"
-            :size="{ width: '40px', height: '40px' }"></vue-loading>
+          <vue-loading
+            v-if="loading"
+            type="bubbles"
+            color="#577696"
+            :size="{ width: '40px', height: '40px' }"
+          ></vue-loading>
           <div class="before-list" v-if="!loading">
-            <Button v-if="showNewRegister" key="addNewRegister" type="primary" title="Novo" size="small"
-              :clicked="addNewRegister" />
-            <Button key="cleanSelect" title="Limpar" type="warning" classIcon="fas fa-broom" size="small"
-              :clicked="cleanSelect" />
+            <Button
+              v-if="showNewRegister"
+              key="addNewRegister"
+              type="primary"
+              title="Novo"
+              size="small"
+              :clicked="addNewRegister"
+            />
+            <Button
+              key="cleanSelect"
+              title="Limpar"
+              type="warning"
+              classIcon="fas fa-broom"
+              size="small"
+              :clicked="cleanSelect"
+            />
           </div>
         </div>
-        <div slot="afterList" v-if="totalRecords > 20 && data.length < totalRecords">
+        <div
+          slot="afterList"
+          v-if="totalRecords > 20 && data.length < totalRecords"
+        >
           <div class="after-list text-center">
-            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
-              :clicked="loadingMore" />
+            <Button
+              key="loadingMore"
+              type="info"
+              title="Carregar mais..."
+              classIcon="fas fa-redo-alt"
+              size="small"
+              :clicked="loadingMore"
+            />
           </div>
         </div>
         <div slot="noOptions">Lista está vazia</div>
@@ -38,8 +80,16 @@
       </div>
     </div>
 
-    <vodal v-if="nameNewRegister" :duration="50" :show="showVodal(nameNewRegister)" @hide="hide()"
-      :width="widthNewRegister" :height="heightNewRegister" :closeOnEsc="true" :closeButton="true">
+    <vodal
+      v-if="nameNewRegister"
+      :duration="50"
+      :show="showVodal(nameNewRegister)"
+      @hide="hide()"
+      :width="widthNewRegister"
+      :height="heightNewRegister"
+      :closeOnEsc="true"
+      :closeButton="true"
+    >
       <Messages v-if="vodal.open" />
       <div class="title-new-form">{{ titleNewRegister }}</div>
       <hr class="hr" />
@@ -152,7 +202,11 @@ export default {
       this.$emit("input", value);
       if (this.changed) this.changed();
       if (this.fieldTarget) {
-        let obj = { tag: `${this.title}: ${value.content}`, fieldTarget: this.fieldTarget, value: value.id };
+        let obj = {
+          tag: `${this.title}: ${value.content}`,
+          fieldTarget: this.fieldTarget,
+          value: value.id,
+        };
         this.addFilter(obj);
       }
     },
@@ -221,11 +275,9 @@ export default {
   watch: {
     event: {
       handler(event) {
-
         if (event.name == "tagRemoved") {
           if (this.fieldTarget == event.data) this.cleanSelect();
         }
-
       },
       deep: true,
     },

package/src/component/layout/Menu.vue

@@ -10,12 +10,22 @@
         <div class="text-center div-photo" @click="editProfile">
           <img class="photo" :src="urlPhoto" />
         </div>
-        <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="{
-    'icon-active': menuActive == item.module,
-    'icon-normal': menuActive != item.module,
-  }">
+        <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="{
+                'icon-active': menuActive == item.module,
+                'icon-normal': menuActive != item.module,
+              }"
+            >
               <b-row>
                 <b-col sm="12">
                   <div class="box-icon text-center">
@@ -51,16 +61,29 @@
             <li v-for="(item, index) in subMenuFilter(false)" :key="index">
               <h5 v-if="item.type === 'group'" class="context-menu__title">
                 <span class="sub-title"> {{ item.groupName }}</span>
-                <span v-if="index === 0" @click.prevent="hideSubMenu" class="context-menu__btn-close icon-close"
-                  href="#">
+                <span
+                  v-if="index === 0"
+                  @click.prevent="hideSubMenu"
+                  class="context-menu__btn-close icon-close"
+                  href="#"
+                >
                   <i class="fas fa-times-circle"></i>
                 </span>
               </h5>
 
-              <a v-else href="#" @click.prevent="navegateTo(item)" :class="classSubMenu(item.title)">
+              <a
+                v-else
+                href="#"
+                @click.prevent="navegateTo(item)"
+                :class="classSubMenu(item.title)"
+              >
                 <b-row>
                   <b-col sm="1">
-                    <i class="menu-icon" :style="'color:' + item.iconColor" :class="item.icon"></i>
+                    <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>
@@ -141,11 +164,8 @@ export default {
       let self = this;
       let userLogged = this.userLogged.user.userName;
       this.menu.items.forEach(function (obj) {
-
-
         if (obj.isModule == isModule && obj.module === self.module) {
-          if (obj.isVisible == "all")
-            filter.push(obj);
+          if (obj.isVisible == "all") filter.push(obj);
 
           if (obj.isVisible == "support" && userLogged == "UserTemp")
             filter.push(obj);

package/src/component/layout/NewAccount.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="icon-logout" @click="execute">
+      <i class="fa-solid fa-right-from-bracket"></i>
+    </div>
+    <div class="profile-container" v-if="hideShow">
+      <div class="item-header text-center">
+        <span>Conta</span>
+      </div>
+      <div class="profile-content" v-for="item in items" :key="item.title">
+        <div class="item-content" @click="navegateTo(item.routeName)">
+          <div class="title-container">
+            <span>
+              <i :class="item.classIcon"></i>
+              <span class="title-profile title-input">{{ item.title }}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="profile-content" @click="execute">
+        <div class="item-content">
+          <div class="title-container">
+            <span>
+              <i class="fas fa-sign-in"></i>
+              <span class="title-profile title-input">Sair</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Account",
+  props: {
+    items: [],
+    exited: Function,
+  },
+  data() {
+    return {
+      hideShow: false,
+    };
+  },
+  methods: {
+    navegateTo(routeName) {
+      this.$router.push({ name: routeName });
+      this.hideShow = false;
+    },
+    execute() {
+      if (this.exited) this.exited();
+    },
+  },
+};
+</script>
+<style scoped>
+.icon-logout {
+  padding-left: 12px;
+  padding-top: 2px;
+  margin-top: -43px;
+  margin-right: 28px;
+  cursor: pointer;
+  position: fixed;
+  float: right;
+  left: auto;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  color: #3D4EAE;
+  font-size: 22px;
+}
+
+img {
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
+
+.profile-container {
+  position: fixed;
+  float: right;
+  left: auto;
+  right: 0;
+  margin-right: 20px;
+  height: 100%;
+  z-index: 1000;
+  width: 190px;
+  margin-top: 26px;
+  background-color: white;
+  height: auto;
+  border-bottom: 1px solid #e9ebec;
+}
+
+.profile-content {
+  right: 0;
+  height: 100%;
+  z-index: 101;
+  width: 190px;
+  height: auto;
+}
+
+.item-header {
+  padding: 8px 20px;
+  background: #f8f8f8;
+  border-left: 1px solid #e9ebec;
+  border-right: 1px solid #e9ebec;
+  border-top: 1px solid #e9ebec;
+}
+
+.item-content {
+  padding-left: 15px;
+  height: 45px;
+  background: white;
+  border: 1px solid #e9ebec;
+  border-bottom: 0px solid #e9ebec;
+  cursor: pointer;
+}
+
+.item-content:hover {
+  background: #f8f8f8;
+}
+
+.title-container {
+  padding-top: 10px;
+}
+
+.title-container:hover {
+  padding-top: 10px;
+  color: #37597c;
+}
+
+.title-profile {
+  padding-left: 10px;
+}
+</style>

package/src/component/layout/NewHeader.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <div :class="['top', { collapsed: isSidebarCollapsed }]" :style="'background-color:' + backgroundColor">
+            <div class="side-by-side top-space">
+                <slot></slot>
+            </div>
+        </div>
+        <br />
+    </div>
+</template>
+
+<script>
+
+import { mapGetters } from "vuex";
+
+export default {
+    name: "Top",
+    props: {
+        backgroundColor: {
+            type: String,
+            default: "#4680A5",
+        },
+    },
+    data() {
+        return {
+            isSidebarCollapsed: false
+        }
+    },
+    computed: {
+        ...mapGetters("generic", ["event"]),
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "isSidebarCollapsed") {
+                    this.isSidebarCollapsed = event.data;
+                }
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.top {
+    padding-top: 4px;
+    left: 298px;
+    right: 10px;
+    height: 55px;
+    top: 5px;
+    border-radius: 18px;
+    border-bottom: 0px solid #eff0f1;
+    box-shadow: 0px 10px 30px -6px rgb(0 0 0 / 10%);
+    position: fixed;
+    transition: all 0.3s ease;
+    z-index: 100;
+}
+
+.top.collapsed {
+    left: 110px;
+}
+</style>

package/src/component/layout/NewIconMolded.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div v-for="icon in icons" class="molded-icon side-by-side" @click="executeEvent(icon.eventName)" v-b-tooltip.hover
+      :title="icon.tooltip">
+      <div class="icon-molded-icon" :class="{
+        'icon-active-top': menuActive == icon.module,
+        'icon-normal-top': menuActive != icon.module,
+      }">
+        <i :class="icon.icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "IconMolded",
+  props: {
+    icons: Array,
+  },
+  data() {
+    return { menuActive: "" };
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    executeEvent(eventName) {
+      this.addEvent({
+        name: eventName,
+      });
+    },
+  },
+  watch: {
+    $route: {
+      handler: function (router) {
+        this.menuActive = router.matched[0].props.default.module;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.molded-icon {
+  height: 38px;
+  width: 38px;
+  margin-left: 10px;
+  margin-top: 4px;
+  cursor: pointer;
+
+}
+
+.icon-molded-icon {
+  font-size: 20px;
+  margin-left: 10px;
+  color: #2c3453 !important;
+}
+</style>

package/src/component/layout/NewMenu.vue

@@ -0,0 +1,419 @@
+<template>
+    <div>
+        <div :class="['sidebar', { collapsed: isSidebarCollapsed }]">
+            <div class="sidebar-header">
+                <span class="header-logo">
+                    <img src="https://espaco.blob.core.windows.net/nixloc-photo-user/E29W4HNYQG_10.png"
+                        alt="CodingNepal" />
+                </span>
+                <button class="sidebar-toggler" @click="toggleSidebar">
+                    <span class="material-symbols-rounded icon-menu-arrow">
+                        <i class="fa-solid fa-angle-left"></i>
+                    </span>
+                </button>
+            </div>
+
+            <div :class="{ sub: isSidebarCollapsed }">
+                <div v-for="(item, index) in menuFilter(true)">
+                    <div>
+                        <div v-if="isSidebarCollapsed" class="molded-icon text-center"
+                            @mouseover="handleMouseOver(item.title, item.module)">
+                            <i :class="item.icon"></i>
+                        </div>
+                        <div class="molded-icon-open" v-else @click="toggleSubMenu(item.title, item.module)">
+                            <b-row>
+                                <b-col sm="1">
+                                    <i :class="item.icon"></i>
+                                </b-col>
+                                <b-col sm="8">
+                                    <span class="title-menu">{{ item.title }} </span>
+                                </b-col>
+                                <b-col sm="1">
+                                    <div>
+                                        <i v-if="titleSubMenu == item.title" class="fa-sharp fa-solid fa-angle-down"
+                                            :class="{ 'rotate': titleSubMenu == item.title }"></i>
+
+                                        <i v-else class="fa-sharp fa-solid fa-angle-down"
+                                            :class="{ 'rotate-down': titleSubMenu != item.title }"></i>
+                                    </div>
+                                </b-col>
+                            </b-row>
+                        </div>
+                    </div>
+
+
+                    <transition name="slide-fade">
+                        <div class="sub-menu" v-if="!isSidebarCollapsed && titleSubMenu == item.title">
+                            <div v-for="(item, index) in subMenuFilter(false)" :key="index">
+                                <div v-if="item.title" class="sub-menu-title" @click.prevent="navegateTo(item)">
+                                    <b-row>
+                                        <b-col sm="3"> <i :class="item.icon"></i></b-col>
+                                        <span> {{ item.title }}</span>
+                                    </b-row>
+                                </div>
+                            </div>
+                        </div>
+                    </transition>
+
+                    <transition name="slide-fade">
+                        <div class="sub-menu-collapsed sub-menu" @mouseleave="handleMouseLeave"
+                            v-if="isSidebarCollapsed && titleSubMenuCollapsed == item.title">
+                            <div v-for="(item, index) in subMenuFilter(false)" :key="index">
+                                <div v-if="item.title" class="sub-menu-title-collapsed"
+                                    @click.prevent="navegateTo(item)">
+                                    <b-row>
+                                        <b-col sm="3"> <i :class="item.icon"></i></b-col>
+                                        <span> {{ item.title }}</span>
+                                    </b-row>
+                                </div>
+                            </div>
+                        </div>
+                    </transition>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+    data() {
+        return {
+            module: "",
+            isSidebarCollapsed: false,
+            openDropdowns: {},
+            titleSubMenu: "",
+            titleSubMenuCollapsed: "",
+        };
+    },
+    computed: {
+        ...mapState("user", ["menu", "userLogged"]),
+        ...mapGetters("generic", ["event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        toggleSidebar() {
+            this.isSidebarCollapsed = !this.isSidebarCollapsed;
+            this.addEvent({ name: "isSidebarCollapsed", data: this.isSidebarCollapsed });
+            this.titleSubMenu = "";
+            this.titleSubMenuCollapsed = "";
+        },
+        toggleSubMenu(title, module) {
+            this.module = module;
+            if (this.titleSubMenu === title) {
+                this.titleSubMenu = "";
+            } else {
+                this.titleSubMenu = title;
+            }
+        },
+        handleMouseOver(title, module) {
+            this.module = module;
+            this.titleSubMenuCollapsed = title;
+        },
+        handleMouseLeave() {
+            this.titleSubMenuCollapsed = "";
+        },
+        menuFilter(isModule) {
+            let filter = [];
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule) filter.push(obj);
+            });
+            return filter.sort((a, b) => a.order - b.order);
+        },
+        subMenuFilter(isModule) {
+            let filter = [];
+            let self = this;
+            let userLogged = this.userLogged.user.userName;
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule && obj.module === self.module) {
+                    if (obj.isVisible == "all") filter.push(obj);
+
+                    if (obj.isVisible == "support" && userLogged == "UserTemp")
+                        filter.push(obj);
+                }
+            });
+            return filter;
+        },
+        navegateTo(item) {
+            this.$router.push({
+                name: item.routeName,
+            });
+            this.titleSubMenu = "";
+            this.titleSubMenuCollapsed = "";
+        },
+    },
+};
+</script>
+
+<style scoped>
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 270px;
+    height: 100vh;
+    background: #577696;
+    transition: all 0.4s ease;
+}
+
+.sidebar.collapsed {
+    width: 85px;
+}
+
+.sidebar .sidebar-header {
+    display: flex;
+    position: relative;
+    padding: 10px 20px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sidebar-header .header-logo img {
+    width: 46px;
+    height: 46px;
+    display: block;
+    object-fit: contain;
+    border-radius: 50%;
+}
+
+.sidebar-header .sidebar-toggler,
+.sidebar-menu-button {
+    position: absolute;
+    right: 20px;
+    height: 35px;
+    width: 35px;
+    color: #151A2D;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    background: #EEF2FF;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: 0.4s ease;
+}
+
+.sidebar.collapsed .sidebar-header .sidebar-toggler {
+    transform: translate(-4px, 65px);
+}
+
+.sidebar-header .sidebar-toggler span,
+.sidebar-menu-button span {
+    font-size: 1.75rem;
+    transition: 0.4s ease;
+}
+
+.sidebar.collapsed .sidebar-header .sidebar-toggler span {
+    transform: rotate(180deg);
+}
+
+.sidebar-header .sidebar-toggler:hover {
+    background: #d9e1fd;
+}
+
+.sidebar-nav .nav-list {
+    list-style: none;
+    display: flex;
+    gap: 4px;
+    padding: 0 15px;
+    flex-direction: column;
+    transform: translateY(15px);
+    transition: 0.4s ease;
+}
+
+.sidebar .sidebar-nav .primary-nav {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding-bottom: 20px;
+    height: calc(100vh - 227px);
+    scrollbar-color: transparent transparent;
+}
+
+.sidebar .sidebar-nav .primary-nav:hover {
+    scrollbar-color: #EEF2FF transparent;
+}
+
+.sidebar.collapsed .sidebar-nav .primary-nav {
+    overflow: unset;
+    transform: translateY(65px);
+}
+
+.sidebar-nav .nav-item .nav-link {
+    color: #fff;
+    display: flex;
+    gap: 12px;
+    white-space: nowrap;
+    border-radius: 8px;
+    padding: 11px 15px;
+    align-items: center;
+    text-decoration: none;
+    border: 1px solid #151A2D;
+    transition: 0.4s ease;
+}
+
+.sidebar-nav .nav-item:is(:hover, .open)>.nav-link:not(.dropdown-title) {
+    color: #151A2D;
+    background: #EEF2FF;
+}
+
+.sidebar .nav-link .nav-label {
+    transition: opacity 0.3s ease;
+    color: white;
+}
+
+.sidebar.collapsed .nav-link :where(.nav-label, .dropdown-icon) {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.sidebar.collapsed .nav-link .dropdown-icon {
+    transition: opacity 0.3s 0s ease;
+}
+
+.sidebar-nav .secondary-nav {
+    position: absolute;
+    bottom: 35px;
+    width: 100%;
+    background: #151A2D;
+}
+
+.sidebar-nav .nav-item {
+    position: relative;
+}
+
+
+.icon-menu-arrow {
+    font-size: 18px !important;
+    margin-top: 1px !important;
+}
+
+.molded-icon-open {
+    padding-left: 10px;
+    cursor: pointer;
+    margin-top: 10px;
+    color: white;
+    font-size: 17px;
+    margin: 15px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon-open:hover {
+    color: #2C3453;
+    background-color: white;
+}
+
+.molded-icon {
+    cursor: pointer;
+    margin-top: 10px;
+    color: white;
+    font-size: 18px;
+    margin: 15px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon:hover {
+    background-color: white;
+    color: #2C3453;
+    margin: 15px;
+    border-radius: 8px;
+    transition: all 0.8s ease;
+}
+
+.sub {
+    margin-top: 70px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.sub-menu {
+    margin: 15px;
+    padding: 10px;
+    border-radius: 15px;
+    color: white;
+    font-size: 14px;
+    background-color: #2C3453;
+    transition: all 0.5s ease;
+}
+
+.sub-menu-title {
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 5px;
+    transition: all 1s ease;
+}
+
+.sub-menu-title:hover {
+    padding: 5px;
+    color: #2C3453;
+    background-color: white;
+    font-weight: bold;
+    transition: all 0.8s ease;
+}
+
+.sub-menu-collapsed {
+    width: 260px;
+    margin-top: -50px;
+    margin-left: 85px;
+    position: fixed;
+    border-radius: 0px 15px 15px 0px;
+    background-color: #2C3453;
+}
+
+.sub-menu-title-collapsed {
+    padding: 10px;
+    border-radius: 8px;
+}
+
+.sub-menu-title-collapsed:hover {
+    background-color: white;
+    color: #2C3453;
+    transition: all 0.8s ease;
+}
+
+.rotate {
+    transform: rotate(180deg);
+    transition: transform 0.5s ease;
+}
+
+.rotate-down {
+    transform: rotate(360deg);
+    transition: transform 0.5s ease;
+}
+
+.title-menu {
+    font-size: 14px;
+    padding: 20px;
+}
+
+.div-arrow {
+    margin-left: 50px;
+}
+
+.div-menu-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px;
+}
+
+.div-icon-bottom {
+    cursor: pointer;
+    font-size: 17px;
+    color: white;
+    border-radius: 10px;
+    background-color: #2C3453;
+}
+
+.title-logout {
+    font-size: 16px;
+    margin-left: 10px;
+}
+    
+</style>

package/src/component/report/Report.vue

@@ -10,8 +10,8 @@
                             <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="executeSearch" />
+                                        :title="loading ? 'Aguarde...' : 'Buscar'" classIcon="fas fa-file-search"
+                                        size="medium" :clicked="executeSearch" />
                                 </div>
                             </div>
                             <div class="side-by-side">
@@ -23,13 +23,16 @@
                         </div>
                     </Molded>
                 </div>
-                <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 v-if="!cancel">
+                    <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>
+
                 <div v-if="!isValid">
                     <Alert type="info">
                         <span>
@@ -50,10 +53,6 @@
                         <div class="icon-toolbar icon-excel">
                             <ExportExcel :nameFile="name" :header="dataConditional" :data="data" />
                         </div>
-                        <div v-if="loading" class="icon-toolbar">
-                            <vue-loading type="bubbles" color="orange" :size="{ width: '26px', height: '26px' }">
-                            </vue-loading>
-                        </div>
                     </div>
                     <ScrollBar :minHeight="400" :maxHeight="820">
                         <br />
@@ -150,6 +149,7 @@ export default {
         executeSearch() {
             this.cancel = false;
             this.data = [];
+            this.pagination = [];
             this.totalization = [];
             this.getAll();
         },
@@ -229,7 +229,7 @@ export default {
                     if (event.name == "stringFilter" || event.name == "orderedFilter") {
                         let self = this;
                         setTimeout(function () {
-                            self.getAll();
+                            //  self.getAll();
                         }, 500);
                     }
                 }
@@ -243,6 +243,12 @@ export default {
 <style scoped>
 .main {
     margin-bottom: 30px;
+
+}
+
+.title {
+    font-size: 12px;
+    font-weight: normal;
 }
 
 .div-btn {