@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/layout/NewMenu.vue

@@ -1,473 +0,0 @@
-<template>
-    <div>
-        <div :class="['sidebar', { collapsed: menuCollapsed }]">
-            <div class="sidebar-header">
-                <span class="header-logo" @click="editProfile">
-                    <img class="photo" :src="urlPhoto" />
-                </span>
-                <div :style="'margin-left:' + (menuCollapsed ? 55 : 170) + 'px'" class="div-menu-toggle"
-                    @click="toggleSidebar">
-                    <div class="icon-menu-arrow">
-                        <i v-if="menuCollapsed" class="fa-solid fa-angle-right "></i>
-                        <i v-else class="fa-solid fa-angle-left"></i>
-                    </div>
-                </div>
-            </div>
-
-            <ScrollBar :minHeight="pageSize" :maxHeight="pageSize">
-                <div :class="{ 'sub': menuCollapsed }">
-                    <div v-for="(item, index) in menuFilter(true)">
-                        <div @mouseover="handleMouseOver(item.title, item.module)">
-                            <div :ref="item.title" v-if="menuCollapsed" class="molded-icon text-center" :class="{
-                                'menu-active': moduleActive === item.module,
-                                'module-selected': module === item.module
-                            }">
-                                <i :style="'font-size:18px'" :class="item.icon"></i>
-                                <div v-if="false" :style="'margin-top:-16px'">
-                                    <span class="title-menu-collapsed">{{ item.abbreviatedTitle }}</span>
-                                </div>
-                            </div>
-                            <div class="molded-icon-open" :class="{
-                                'menu-active': moduleActive === item.module
-                            }" v-else @mouseover="handleMouseOver(item.title, item.module)">
-                                <b-row>
-                                    <b-col sm="12">
-                                        <b-row>
-                                            <b-col sm="2">
-                                                <i :class="item.icon"></i>
-                                            </b-col>
-                                            <b-col sm="10">
-                                                <span class="title-menu">{{ item.title }} </span>
-                                            </b-col>
-                                        </b-row>
-                                    </b-col>
-                                </b-row>
-                            </div>
-                        </div>
-
-                        <transition name="slide-fade">
-                            <div :ref="item.title + 'sub'" class="sub-menu-collapsed sub-menu"
-                                :style="'margin-left:' + (menuCollapsed ? 85 : 200) + 'px'"
-                                v-if="titleSubMenuCollapsed == item.title">
-                                <div v-for="(item, index) in subMenuFilter(false)" :key="index">
-                                    <div :class="{ 'sub-menu-title-collapsed': item.title }"
-                                        @click.prevent="navegateTo(item, item.module)">
-                                        <b-row>
-                                            <b-col sm="2" v-if="item.title">
-                                                <i :class="item.icon"></i>
-                                            </b-col>
-                                            <b-col sm="9">
-                                                <div v-if="item.groupName" class="div-group">
-                                                    {{ item.groupName }}
-                                                </div>
-                                                <span>
-
-                                                    <span> {{ item.title }}</span>
-                                                    <span class="div-new" v-if="item.isVisible == 'support'">
-                                                        Suporte
-                                                    </span>
-                                                    <span class="div-new"
-                                                        v-if="item.showNewUntil && showNewUntil(item.showNewUntil)">
-                                                        Novo
-                                                    </span>
-                                                </span>
-                                            </b-col>
-                                        </b-row>
-                                    </div>
-                                </div>
-                            </div>
-                        </transition>
-                    </div>
-                    <br>
-                    <br>
-                    <br>
-                </div>
-            </ScrollBar>
-        </div>
-    </div>
-</template>
-
-<script>
-
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-import { mapState, mapMutations, mapGetters } from "vuex";
-
-export default {
-    props: {
-        urlPhoto: String,
-    },
-    components: {
-        ScrollBar
-    },
-    data() {
-        return {
-            module: "",
-            moduleActive: "",
-            isSidebarCollapsed: true,
-            openDropdowns: {},
-            titleSubMenu: "",
-            titleSubMenuCollapsed: "",
-            pageSize: 0,
-            distanceFromBottom: 0,
-        };
-    },
-    mounted() {
-        this.updatePageSize();
-        window.addEventListener('resize', this.updatePageSize);
-
-        if (!localStorage.getItem('menuCollapsed')) {
-            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
-        }
-
-        if (localStorage.getItem('menuCollapsed') === 'open') {
-            this.toggleMenu(false);
-        } else {
-            this.toggleMenu(true);
-        }
-
-        if (this.$route.matched[0])
-            this.moduleActive = this.$route.matched[0].props.default.module;
-
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.updatePageSize);
-    },
-    computed: {
-        ...mapState("user", ["menu", "userLogged"]),
-        ...mapState("generic", ["menuCollapsed"]),
-        ...mapGetters("generic", ["event"]),
-    },
-    methods: {
-        ...mapMutations("generic", ["addEvent", "toggleMenu"]),
-        showNewUntil(dateStr) {
-            const [day, month, year] = dateStr.split('/');
-            const inputDate = new Date(year, month - 1, day);
-            const today = new Date();
-
-            // Zerar horas para comparar apenas a data
-            inputDate.setHours(0, 0, 0, 0);
-            today.setHours(0, 0, 0, 0);
-
-            return today < inputDate;
-        },
-        updatePageSize() {
-            const windowHeight = window.innerHeight;
-            this.pageSize = windowHeight;
-        },
-        toggleSidebar() {
-            this.isSidebarCollapsed = !this.isSidebarCollapsed;
-            this.toggleMenu(this.isSidebarCollapsed);
-            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
-            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;
-
-            var divSub = this.$refs[title + 'sub'];
-
-            if (divSub) {
-                let self = this;
-                setTimeout(function () {
-                    const heightSubMenu = divSub[0].getBoundingClientRect();
-
-                    if (heightSubMenu.top < 0 || heightSubMenu.left < 0 || heightSubMenu.bottom > window.innerHeight || heightSubMenu.right > window.innerWidth) {
-                        divSub[0].style.bottom = '0px';
-                    }
-
-                }, 100);
-            }
-        },
-        handleMouseLeave() {
-            this.titleSubMenuCollapsed = "";
-            if (this.menuCollapsed)
-                this.module = "";
-        },
-        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;
-            let companyId = this.userLogged.companyId;
-            this.menu.items.forEach(function (obj) {
-                if (obj.isModule == isModule && obj.module === self.module) {
-                    if (obj.isVisible == "all") filter.push(obj);
-                    if (obj.isVisible == companyId) filter.push(obj);
-
-                    if (obj.isVisible == "support" && userLogged == "UserTemp")
-                        filter.push(obj);
-                }
-            });
-            return filter;
-        },
-        navegateTo(item, module) {
-            this.$router.push({
-                name: item.routeName,
-            });
-
-            this.moduleActive = module;
-            this.titleSubMenuCollapsed = "";
-        },
-        editProfile() {
-            this.addEvent({ name: "clickedProfile" });
-        },
-    },
-    watch: {
-        event: {
-            handler: function (event) {
-                if (event.name == "handleMouseOver") {
-                    this.handleMouseLeave();
-                }
-            },
-            deep: true,
-        },
-        $route: {
-            handler: function (router) {
-                this.moduleActive = router.matched[0].props.default.module;
-            },
-            deep: true,
-        },
-    },
-};
-</script>
-
-<style scoped>
-.sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 200px;
-    height: 100vh;
-    border-radius: 0px 20px 0px 0px;
-    background-color: #577696;
-    transition: all 0.4s ease;
-    z-index: 1000;
-}
-
-.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;
-    cursor: pointer;
-    border-radius: 50%;
-}
-
-.sidebar-header .sidebar-toggler,
-.sidebar-menu-button {
-    position: absolute;
-    left: 70px;
-    height: 30px;
-    width: 30px;
-    color: #151A2D;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    background: #EEF2FF;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50px;
-    transition: 0.4s ease;
-}
-
-.sidebar.collapsed .sidebar-header .sidebar-toggler {
-    transform: translate(-4px, 65px);
-}
-
-.div-menu-toggle {
-    position: fixed;
-    font-size: 18px;
-    top: 25px;
-    width: 20px;
-    height: 20px;
-    background-color: #D98621;
-    border-radius: 50%;
-    cursor: pointer;
-    z-index: 2000;
-    transition: all 0.4s ease;
-}
-
-.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;
-}
-
-.menu-active {
-    background-color: #D98621;
-}
-
-.module-selected {
-    color: #2C3453 !important;
-    background-color: white !important;
-}
-
-.icon-menu-arrow {
-    font-size: 14px;
-    margin-top: -4px;
-    margin-left: 6px;
-    color: white;
-}
-
-.molded-icon {
-    cursor: pointer;
-    color: white;
-    font-size: 18px;
-    margin: 13px;
-    border-radius: 10px;
-    transition: all 0.3s ease;
-}
-
-.molded-icon:hover {
-    background-color: white;
-    color: #2C3453;
-    border-radius: 10px;
-    transition: all 0.8s ease;
-}
-
-.sub {
-    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: -100px;
-    position: absolute;
-    border-radius: 0px 15px 15px 0px;
-    background-color: #2C3453;
-    cursor: pointer;
-}
-
-.sub-menu-title-collapsed {
-    padding: 10px;
-    border-radius: 8px;
-    font-size: 13px;
-}
-
-.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: 13px;
-}
-
-.title-menu-collapsed {
-    font-size: 11.5px;
-}
-
-.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;
-}
-
-.div-group {
-    margin-left: 10px;
-    padding: 5px;
-}
-
-.div-new {
-    background-color: #0A36DB;
-    font-size: 11px;
-    border-radius: 20px;
-    padding: 1px 3px 2px 2px;
-    margin-left: 5px;
-    color: white !important;
-}
-</style>

package/src/component/layout/Panel.vue

@@ -1,185 +0,0 @@
-<template>
-  <div :class="['panel', { collapsed: menuCollapsed }]">
-    <Toast />
-    <Loading v-show="isLoading('panel')" />
-    <div v-show="!isLoading('panel')">
-      <div v-show="showVerticalFilter">
-        <VerticalFilter>
-          <slot name="content-filter"></slot>
-        </VerticalFilter>
-      </div>
-      <div class="local-container" :class="{ 'layout-small': layout == 'small' }">
-        <div v-if="!modal.open && !vodal.open" class="div-message-panel">
-          <Messages />
-        </div>
-        <br>
-        <br>
-        <div class="row">
-          <div class="col-10">
-            <div class="div-title">
-              <span class="module">
-                <span class="icon-panel"><i class="fas fa-compass"></i></span>
-                {{ module }} <span v-if="title">|</span></span>
-              <span class="title"> {{ title }}</span>
-            </div>
-          </div>
-          <div class="col-2" v-if="currentRoute != 'dashboard'">
-            <div class="div-back text-right" @click="back()">
-              <i class="fa-solid fa-circle-arrow-left"></i>
-              <span> Voltar</span>
-            </div>
-          </div>
-        </div>
-        <br v-show="showButtons" />
-        <div class="row" v-show="showButtons">
-          <div class="col-12" v-show="showButtons">
-            <slot name="content-buttons"></slot>
-          </div>
-        </div>
-        <br v-show="showButtons || showSearch" />
-        <div v-show="showButtons || showSearch">
-          <div>
-            <div v-show="showSearch">
-              <Search />
-            </div>
-          </div>
-        </div>
-        <br v-show="showSearch" />
-        <div>
-          <slot name="content-main"></slot>
-        </div>
-      </div>
-    </div>
-    <br /><br /><br />
-  </div>
-</template>
-
-<script>
-import Toast from "../shared/Toast.vue";
-import Messages from "../shared/Messages.vue";
-import Search from "../shared/Search.vue";
-import Loading from "../shared/Loading.vue";
-import VerticalFilter from "../shared/VerticalFilter";
-import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
-
-import { mapState, mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Panel",
-  components: {
-    Loading,
-    VerticalFilter,
-    Search,
-    Messages,
-    Toast,
-    Molded,
-  },
-  props: {
-    module: String,
-    title: String,
-    showVerticalFilter: Boolean,
-    showSearch: Boolean,
-    showButtons: Boolean,
-    layout: {
-      type: String,
-      default: "small"
-    }
-  },
-  data() {
-    return {
-      currentRoute: this.$route.name,
-    };
-  },
-  created() {
-    this.addLoading("panel");
-  },
-  updated() {
-    this.currentRoute = this.$route.name;
-  },
-  computed: {
-    ...mapGetters("generic", ["isLoading", "event"]),
-    ...mapState("generic", ["modal", "vodal", "menuCollapsed"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["addLoading"]),
-    back() {
-      window.history.back();
-    },
-  },
-};
-</script>
-<style scoped>
-.local-container {
-  margin: auto;
-  padding-left: 100px;
-}
-
-.div-title {
-  margin-top: 15px;
-}
-
-.module {
-  font-size: 17px;
-  font-weight: 400;
-  color: #aaaebb;
-}
-
-.title {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.icon-panel {
-  opacity: 0.8;
-  font-size: 20px;
-}
-
-.c-back {
-  margin-top: 20px;
-  margin-right: 12px;
-  font-size: 16px;
-  cursor: pointer;
-  color: #8ca1b7;
-}
-
-.c-back:hover {
-  color: #8ca1b7;
-}
-
-.panel {
-  padding-right: 30px;
-  margin-left: 130px;
-}
-
-.panel.collapsed {
-  margin-left: 10px;
-  transition: all 0.3s ease;
-}
-
-.div-back {
-  margin-top: 18px;
-  font-size: 16px;
-  cursor: pointer;
-  padding-top: 3px;
-  padding-left: 10px;
-  padding-right: 30px;
-  font-weight: 400;
-  color: #242424;
-}
-
-.div-back:hover {
-  color: #505050;
-}
-
-.div-message-panel {
-  width: calc(100% - 60px);
-  position: fixed;
-  top: -55px;
-  left: 30px;
-  right: 30px;
-  margin: 0;
-  z-index: 2000 !important;
-  transition: top 0.5s ease; 
-}
-
-</style>