Mercurial > gemma
changeset 1123:d9e6a1f6f394 store-refactoring
moved all collapse flags for UI elements to store
UI elements can now be expanded/collapsed via the application store
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 06 Nov 2018 13:00:17 +0100 |
parents | a4c74a95c177 |
children | 86ed7a56e9f1 |
files | client/src/application/Main.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/Userbar.vue client/src/bottlenecks/Bottlenecks.vue client/src/identify/Identify.vue client/src/layers/Layers.vue client/src/login/Login.vue client/src/logs/logs.vue client/src/map/Maplayer.vue client/src/morphtool/Morphtool.vue client/src/pdftool/Pdftool.vue client/src/store/application.js client/src/usermanagement/Userdetail.vue client/src/usermanagement/Usermanagement.vue |
diffstat | 15 files changed, 92 insertions(+), 159 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/application/Main.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,7 +1,7 @@ <template> <div class="main d-flex flex-column"> - <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> - <div v-if="isSplitscreen" class="profile d-flex flex-row"> + <Maplayer :split="showSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> + <div v-if="showSplitscreen" class="profile d-flex flex-row"> <FairwayProfile :additionalSurveys="additionalSurveys" :height="height" @@ -62,7 +62,7 @@ }; }, computed: { - ...mapGetters("application", ["isSplitscreen"]), + ...mapState("application", ["showSplitscreen"]), ...mapState("fairwayprofile", [ "currentProfile", "minAlt",
--- a/client/src/application/Sidebar.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/application/Sidebar.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,10 +1,13 @@ <template> <div :class="sidebarStyle"> <div :class="menuStyle"> - <div class="menupoints" v-if="!this.sidebarCollapsed"> + <div class="menupoints" v-if="this.showSidebar"> <router-link to="/" class="text-body d-flex flex-row nav-link"> <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link> - <a v-if="routeName == 'mainview'" href="#" class="text-body d-flex flex-row nav-link" @click="$store.commit('application/toggleBottlenecks');"> + <a v-if="routeName == 'mainview'" + href="#" + class="text-body d-flex flex-row nav-link" + @click="$store.commit('application/showBottlenecks', !showBottlenecks);"> Bottlenecks </a> <div v-if="isSysAdmin"> @@ -41,14 +44,14 @@ * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapGetters } from "vuex"; +import { mapGetters, mapState } from "vuex"; export default { name: "sidebar", props: ["routeName"], computed: { ...mapGetters("user", ["isSysAdmin"]), - ...mapGetters("application", ["sidebarCollapsed"]), + ...mapState("application", ["showSidebar", "showBottlenecks"]), menuStyle() { return { menu: true, @@ -61,8 +64,8 @@ "ui-element": true, sidebar: true, overlay: true, - sidebarcollapsed: this.sidebarCollapsed, - sidebarextended: !this.sidebarCollapsed, + sidebarcollapsed: !this.showSidebar, + sidebarextended: this.showSidebar, shadow: true, "d-print-none": true };
--- a/client/src/application/Topbar.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/application/Topbar.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,6 +1,6 @@ <template> <div class="topbar d-flex flex-row"> - <div @click="toggleSidebar"> + <div @click="$store.commit('application/showSidebar', !showSidebar)"> <i class="ui-element menubutton d-print-none fa fa-bars"></i> </div> <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> @@ -10,8 +10,8 @@ </span> </div> <div class="searchgroup"> - <input @keyup.enter="takeFirstSearchresult" v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none"> - <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group d-print-none"> + <input @keyup.enter="takeFirstSearchresult" v-if="showSearchbar" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none"> + <ul v-if="showSearchbar && searchResults !== null " class="list-group d-print-none"> <li v-for="entry of searchResults" :key="entry.name" class="list-group-item"> <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a> </li> @@ -19,7 +19,7 @@ </div> </div> <div v-if="routeName == 'mainview' && Object.keys(currentProfile).length" class="splitbutton"> - <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> + <i @click="$store.commit('application/showSplitscreen', !showSplitscreen)" class="ui-element splitscreen fa fa-window-restore shadow"></i> </div> <div class=""> <Layers v-if="routeName == 'mainview'"></Layers> @@ -132,7 +132,6 @@ }, data() { return { - searchbarCollapsed: true, searchQuery: "", searchQueryIsDirty: false, searchResults: null, @@ -140,6 +139,7 @@ }; }, computed: { + ...mapState("application", ["showSidebar", "showSplitscreen", "showSearchbar"]), ...mapState("map", ["openLayersMap"]), ...mapState("fairwayprofile", ["currentProfile"]), searchIndicator: function() { @@ -155,8 +155,8 @@ return { "input-group": true, searchcontainer: true, - "searchbar-collapsed": this.searchbarCollapsed, - "searchbar-expanded": !this.searchbarCollapsed + "searchbar-collapsed": !this.showSearchbar, + "searchbar-expanded": this.showSearchbar }; } }, @@ -235,17 +235,10 @@ this.toggleSearchbar(); }, toggleSearchbar() { - if (this.searchbarCollapsed) { + if (!this.showSearchbar) { setTimeout(setFocus, 300); } - this.searchbarCollapsed = !this.searchbarCollapsed; - }, - toggleSidebar() { - this.$store.commit("application/toggleSidebar"); - }, - splitScreen() { - if (Object.keys(this.currentProfile).length == 0) return; - this.$store.commit("application/toggleSplitScreen"); + this.$store.commit("application/showSearchbar", !this.showSearchbar) } } };
--- a/client/src/application/Userbar.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/application/Userbar.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,9 +1,9 @@ <template> <div> - <img @click="extendUserMenu" class="ui-element userpic shadow" src="../application/assets/user.png"> + <img @click="$store.commit('application/showUsermenu', !showUsermenu)" class="ui-element userpic shadow" src="../application/assets/user.png"> <div :class="userManagementStyle"> - <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ user }}</span> - <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff"> + <span v-if="showUsermenu" class="username align-self-center">{{ user }}</span> + <span v-if="showUsermenu" class="logout align-self-center" @click="logoff"> <i class="fa fa-power-off"></i> </span> </div> @@ -66,20 +66,17 @@ return {}; }, methods: { - extendUserMenu() { - this.$store.commit("application/toggleUserMenu"); - }, logoff() { this.$store.commit("user/clearAuth"); - this.$store.commit("application/resetSidebar"); - this.$store.commit("application/resetUserMenu"); - this.$store.commit("application/resetSplitScreen"); + this.$store.commit("application/showSidebar", false); + this.$store.commit("application/showUsermenu", false); + this.$store.commit("application/showSplitscreen", false); this.$router.push("/login"); } }, computed: { ...mapState("user", ["user"]), - ...mapGetters("application", ["isUsermenuCollapsed"]), + ...mapState("application", ["showUsermenu"]), userManagementStyle() { return { "ui-element": true, @@ -87,8 +84,8 @@ "flex-row": true, "justify-content-around": true, usermanagement: true, - usermanagementcollapsed: this.isUsermenuCollapsed, - usermanagementexpanded: !this.isUsermenuCollapsed, + usermanagementcollapsed: !this.showUsermenu, + usermanagementexpanded: this.showUsermenu, shadow: true }; }
--- a/client/src/bottlenecks/Bottlenecks.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div :class="bottlenecksStyle" :style="'left: ' + (sidebarCollapsed ? '64px' : '17rem')"> - <div @click="$store.commit('application/toggleBottlenecks');" class="ui-element close-bottlenecks"> + <div :class="bottlenecksStyle" :style="'left: ' + (showSidebar ? '17rem' : '64px')"> + <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks"> <i class="fa fa-close"></i> </div> @@ -82,17 +82,16 @@ }; }, computed: { - ...mapState("application", ["bottlenecksCollapsed"]), + ...mapState("application", ["showBottlenecks", "showSidebar"]), ...mapState("bottlenecks", ["bottlenecks"]), ...mapState("map", ["openLayersMap"]), - ...mapGetters("application", ["sidebarCollapsed"]), bottlenecksStyle() { return { "ui-element": true, bottlenecks: true, overlay: true, - bottleneckscollapsed: this.bottlenecksCollapsed, - bottlenecksextended: !this.bottlenecksCollapsed, + bottleneckscollapsed: !this.showBottlenecks, + bottlenecksextended: this.showBottlenecks, shadow: true }; },
--- a/client/src/identify/Identify.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/identify/Identify.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="identifymenu"> - <div @click="collapse" class="d-flex flex-column ui-element minimizer"> + <div @click="$store.commit('application/showIdentify', !showIdentify)" class="d-flex flex-column ui-element minimizer"> <div :class="infoStyle"> <i class="fa fa-info"></i> </div> </div> <div :class="identifyStyle"> - <div v-if="!collapsed" class="card-body"> + <div v-if="showIdentify" class="card-body"> <div class="headline"> <h4 class="card-title">Identified</h4> </div> @@ -97,18 +97,13 @@ * Thomas Junk <thomas.junk@intevation.de> * Bernhard E. Reiter <bernhard.reiter@intevation.de> */ -import { mapState } from "vuex"; -import { mapGetters } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { name: "identify", - data() { - return { - collapsed: true - }; - }, computed: { ...mapGetters("application", ["versionStr"]), + ...mapState("application", ["showIdentify"]), ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), identifyStyle() { return { @@ -116,8 +111,8 @@ card: true, identify: true, shadow: true, - identifyexpanded: !this.collapsed, - identifycollapsed: this.collapsed + identifyexpanded: this.showIdentify, + identifycollapsed: !this.showIdentify }; }, infoStyle() { @@ -129,9 +124,6 @@ } }, methods: { - collapse() { - this.collapsed = !this.collapsed; - }, prepareProperties(feature) { // return dict object with propertyname:plainvalue prepared for display var properties = feature.getProperties();
--- a/client/src/layers/Layers.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/layers/Layers.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,12 +1,12 @@ <template> <div class="layerselectmenu"> - <div @click="collapse" class="d-flex flex-column ui-element minimizer"> + <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer"> <div> <i class="fa fa-th-list"></i> </div> </div> <div :class="layerSelectStyle"> - <div v-if="!collapsed" class="card-body layers"> + <div v-if="showLayers" class="card-body layers"> <div class="headline"> <h4 class="card-title">Layers</h4> </div> @@ -68,34 +68,27 @@ * Thomas Junk <thomas.junk@intevation.de> */ import Layerselect from "./Layerselect"; -import { mapGetters } from "vuex"; +import { mapGetters, mapState } from "vuex"; export default { name: "layers", - data() { - return { - collapsed: false - }; - }, components: { Layerselect }, computed: { ...mapGetters("map", ["layersForLegend"]), + ...mapState("application", ["showLayers"]), layerSelectStyle() { return { "ui-element": true, card: true, layerselection: true, shadow: true, - layerselectionexpanded: !this.collapsed, - layerselectioncollapsed: this.collapsed + layerselectionexpanded: this.showLayers, + layerselectioncollapsed: !this.showLayers }; } }, methods: { - collapse() { - this.collapsed = !this.collapsed; - }, visibilityToggled(layer) { this.$store.commit("map/toggleVisibility", layer); }
--- a/client/src/login/Login.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/login/Login.vue Tue Nov 06 13:00:17 2018 +0100 @@ -94,7 +94,7 @@ </style> <script> -import { mapGetters } from "vuex"; +import { mapState } from "vuex"; import { HTTP } from "../application/lib/http.js"; import { displayError } from "../application/lib/errors.js"; @@ -150,7 +150,7 @@ } return result; }, - ...mapGetters("application", ["appTitle", "secondaryLogo"]) + ...mapState("application", ["appTitle", "secondaryLogo"]) }, methods: { login() {
--- a/client/src/logs/logs.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/logs/logs.vue Tue Nov 06 13:00:17 2018 +0100 @@ -103,7 +103,7 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ -import { mapGetters } from "vuex"; +import { mapState } from "vuex"; import { HTTP } from "../application/lib/http.js"; import "../../node_modules/highlight.js/styles/paraiso-dark.css"; import Vue from "vue"; @@ -144,7 +144,7 @@ } }, computed: { - ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]), + ...mapState("application", ["showSidebar"]), accesslogStyle() { return { active: this.currentLog == ACCESSLOG, @@ -160,8 +160,8 @@ spacer() { return { spacer: true, - "spacer-expanded": !this.sidebarCollapsed, - "spacer-collapsed": this.sidebarCollapsed + "spacer-expanded": this.showSidebar, + "spacer-collapsed": !this.showSidebar }; } }
--- a/client/src/map/Maplayer.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/map/Maplayer.vue Tue Nov 06 13:00:17 2018 +0100 @@ -155,7 +155,7 @@ this.calculateIntersection(vectorSource, profileLine); }) .then(() => { - this.$store.commit("application/openSplitScreen"); + this.$store.commit("application/showSplitscreen", true); }) .catch(error => { const { status, data } = error.response;
--- a/client/src/morphtool/Morphtool.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/morphtool/Morphtool.vue Tue Nov 06 13:00:17 2018 +0100 @@ -119,7 +119,7 @@ methods: { clearSelection() { this.$store.dispatch("bottlenecks/setSelectedBottleneck", null); - this.$store.commit("application/closeSplitScreen"); + this.$store.commit("application/showSplitscreen", false); if (this.drawMode) { this.$store.commit("map/toggleDrawModeLine"); }
--- a/client/src/pdftool/Pdftool.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/pdftool/Pdftool.vue Tue Nov 06 13:00:17 2018 +0100 @@ -1,10 +1,10 @@ <template> <div class="pdftool"> - <div @click="collapse" class="d-flex flex-column ui-element minimizer"> - <i :class="['fa', 'mt-1', {'fa-file-pdf-o': collapsed}, {'fa-close': !collapsed}]"></i> + <div @click="$store.commit('application/showPdfTool', !showPdfTool)" class="d-flex flex-column ui-element minimizer"> + <i :class="['fa', 'mt-1', {'fa-file-pdf-o': !showPdfTool}, {'fa-close': showPdfTool}]"></i> </div> <div :class="style"> - <div v-if="!collapsed" class="card-body"> + <div v-if="showPdfTool" class="card-body"> <div class="headline"> <h4 class="card-title">Generate PDF</h4> </div> @@ -102,7 +102,6 @@ name: "pdftool", data() { return { - collapsed: true, form: { format: "landscape", downloadType: "download" @@ -110,22 +109,19 @@ }; }, computed: { - ...mapState("application", ["showPrintDialog"]), + ...mapState("application", ["showPdfTool"]), style() { return { "ui-element": true, card: true, inner: true, shadow: true, - pdftoolexpanded: !this.collapsed, - pdftoolcollapsed: this.collapsed + pdftoolexpanded: this.showPdfTool, + pdftoolcollapsed: !this.showPdfTool }; } }, methods: { - collapse() { - this.collapsed = !this.collapsed; - }, download() { // generate PDF and open it // TODO: replace this src with an API reponse after actually generating PDFs
--- a/client/src/store/application.js Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/store/application.js Tue Nov 06 13:00:17 2018 +0100 @@ -16,53 +16,23 @@ import { version } from "../../package.json"; -const defaultCollapseState = true; - -const initializeSplitScreen = () => { - return { - active: false, - mode: "v" - }; -}; - export default { namespaced: true, state: { appTitle: process.env.VUE_APP_TITLE, secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL, - sidebar: { - iscollapsed: defaultCollapseState - }, - bottlenecksCollapsed: true, - splitsceen: initializeSplitScreen(), - usermenu: { - iscollapsed: defaultCollapseState - }, + showSidebar: false, + showUsermenu: false, + showBottlenecks: false, + showSplitscreen: false, + showSearchbar: false, + showIdentify: false, + showLayers: true, + showPdfTool: false, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"], version }, getters: { - countries: state => { - return state.countries; - }, - sidebarCollapsed: state => { - return state.sidebar.iscollapsed; - }, - isUsermenuCollapsed: state => { - return state.usermenu.iscollapsed; - }, - appTitle: state => { - return state.appTitle; - }, - secondaryLogo: state => { - return state.secondaryLogo; - }, - isSplitscreen: state => { - return state.splitsceen.active; - }, - splitMode: state => { - return state.splitsceen.mode; - }, versionStr: state => { // version number from package.json let versionStr = "v" + state.version; @@ -80,39 +50,29 @@ } }, mutations: { - toggleSidebar: state => { - state.sidebar.iscollapsed = !state.sidebar.iscollapsed; + showSidebar: (state, show) => { + state.showSidebar = show; }, - toggleBottlenecks: state => { - state.bottlenecksCollapsed = !state.bottlenecksCollapsed; - }, - toggleUserMenu: state => { - state.usermenu.iscollapsed = !state.usermenu.iscollapsed; + showBottlenecks: (state, show) => { + state.showBottlenecks = show; }, - toggleSplitScreen: state => { - state.splitsceen.active = !state.splitsceen.active; + showSplitscreen: (state, show) => { + state.showSplitscreen = show; }, - openSplitScreen: state => { - state.splitsceen.active = true; - }, - closeSplitScreen: state => { - state.splitsceen.active = false; + showUsermenu: (state, show) => { + state.showUsermenu = show; }, - resetSidebar: state => { - state.sidebar.iscollapsed = defaultCollapseState; + showSearchbar: (state, show) => { + state.showSearchbar = show; }, - collapseSidebar: state => { - state.sidebar.iscollapsed = true; - }, - resetUserMenu: state => { - state.usermenu.iscollapsed = defaultCollapseState; + showIdentify: (state, show) => { + state.showIdentify = show; }, - collapseUserMenu: state => { - state.usermenu.iscollapsed = true; + showLayers: (state, show) => { + state.showLayers = show; }, - resetSplitScreen: state => { - state.splitsceen = initializeSplitScreen(); + showPdfTool: (state, show) => { + state.showPdfTool = show; } - }, - actions: {} + } };
--- a/client/src/usermanagement/Userdetail.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/usermanagement/Userdetail.vue Tue Nov 06 13:00:17 2018 +0100 @@ -107,7 +107,7 @@ */ import { HTTP } from "../application/lib/http"; import { displayError } from "../application/lib/errors.js"; -import { mapGetters } from "vuex"; +import { mapState } from "vuex"; import PasswordField from "./Passwordfield"; const emptyErrormessages = () => { @@ -189,7 +189,7 @@ if (this.currentUser.isNew) return "N.N"; return ""; }, - ...mapGetters("application", ["countries"]), + ...mapState("application", ["countries"]), user() { return this.$store.getters["usermanagement/currentUser"]; },
--- a/client/src/usermanagement/Usermanagement.vue Tue Nov 06 11:21:29 2018 +0100 +++ b/client/src/usermanagement/Usermanagement.vue Tue Nov 06 13:00:17 2018 +0100 @@ -193,7 +193,7 @@ */ import Userdetail from "./Userdetail"; import store from "../store"; -import { mapGetters } from "vuex"; +import { mapGetters, mapState } from "vuex"; import { displayError } from "../application/lib/errors.js"; export default { @@ -210,12 +210,12 @@ }, computed: { ...mapGetters("usermanagement", ["isUserDetailsVisible"]), - ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]), + ...mapState("application", ["showSidebar", "showUsermenu"]), spacerStyle() { return { spacer: true, - "spacer-expanded": !(this.isUsermenuCollapsed && this.sidebarCollapsed), - "spacer-collapsed": this.isUsermenuCollapsed && this.sidebarCollapsed + "spacer-expanded": (this.showUsermenu && this.showSidebar), + "spacer-collapsed": !this.showUsermenu && this.showSidebar }; }, users() {