Mercurial > gemma
view client/src/components/Sidebar.vue @ 1296:99c039e86624
replaced manual store cleanup on logout with central store reset
The store files now provide a init method with which the store can be resetted on logout.
This is reasonable because missing store cleanups on logout caused bugs.
Furthermore the localStorage.clear() was replaced specific removal of values since currently there are also
saved cross profiles which should be persistent.
The initialization of the cut/line/polygon tool was moved from their respective buttons to the map store
right after saving the ol map object in the store. Before that change the map object was not present sometimes
when trying to initiate those tools.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 22 Nov 2018 17:00:26 +0100 |
parents | b9fd587d8ea0 |
children | 2738a6ae9ad8 |
line wrap: on
line source
<template> <div :class="sidebarStyle"> <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton p-2 bg-white rounded position-absolute d-flex justify-content-center" > <i class="ui-element d-print-none fa fa-bars"></i> </div> <div class="menu text-nowrap text-left"> <router-link to="/"> <i class="fa fa-map-o"></i> Map </router-link> <a href="#" @click="toggleContextBox('bottlenecks')" :class="['secondary', { active: isActive('bottlenecks') }]"> <i class="fa fa-ship"></i> Bottlenecks </a> <div v-if="isWaterwayAdmin"> <a href="#" @click="toggleContextBox('imports')" :class="['secondary', { active: isActive('imports') }]"> <i class="fa fa-upload align-self-center navicon"></i> Import soundingresults </a> <a href="#" @click="toggleContextBox('staging')" :class="['secondary', { active: isActive('staging') }]"> <i class="fa fa-list-ol align-self-center navicon"></i> Staging area </a> <small class="text-muted pl-3">Systemadministration</small> <hr class="m-0"> <router-link to="usermanagement"> <i class="fa fa-address-card-o"></i> Users </router-link> </div> <div v-if="isSysAdmin"> <router-link to="systemconfiguration"> <i class="fa fa-wrench"></i> Systemconfiguration </router-link> <router-link to="logs"> <i class="fa fa-book"></i> Logs </router-link> <router-link to="importqueue"> <i class="fa fa-exchange"></i> Importqueue </router-link> </div> <hr class="m-0"> <a href="#" @click="logoff"> <i class="fa fa-power-off"></i> Logout {{ user }} </a> </div> </div> </template> <script> /* * This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapGetters, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), ...mapState("application", [ "showSidebar", "showSearchbarLastState", "contextBoxContent", "showContextBox" ]), sidebarStyle() { return [ "ui-element position-relative sidebar rounded shadow-xs d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar } ]; } }, methods: { logoff() { this.$store.commit("reset"); this.$store.commit("user/clearAuth"); this.$router.push("/login"); }, toggleContextBox(context) { this.$router.push("/"); this.$store.commit("application/showContextBox", true); this.$store.commit("application/contextBoxContent", context); this.$store.commit("application/showSearchbar", true); }, isActive(item) { return ( this.showContextBox && this.contextBoxContent === item && this.routeName == "mainview" ); } } }; </script> <style lang="sass" scoped> .menubutton height: $icon-height width: $icon-width top: 0 left: 0 color: #666 .menu a display: block text-align: left padding: 0.5rem 1rem color: #333 text-decoration: none i color: #666 margin-right: $small-offset &:hover background-color: #f8f8f8 &.router-link-exact-active background-color: $color-info color: #fff i color: #fff &.secondary font-size: 0.9rem &.active background: lighten($color-info, 55) color: darken($color-info, 15) i color: darken($color-info, 15) .sidebar background-color: #ffffff padding-top: $large-offset opacity: $slight-transparent transition: $transition-fast overflow: hidden .sidebarcollapsed max-height: 30px max-width: 30px .sidebarextended max-height: 35rem max-width: $sidebar-width </style>