Mercurial > gemma
view client/src/usermanagement/Usermanagement.vue @ 1063:7ec2133c6404
client: add area measurement. simpify code
* Add a third draw mode which can only be activated when no
morphology is selected and we are already in LineString mode.
It adds an area calculation. Because the Polygon drawMode ends
on a double click, there needs to be an extra callback for this to
run identify so that the area calculation is shown all times.
* Add Bernhard as author to some files and also simplify copyright
note.
* Remove DRAWMODES in the code to simplify as this is just one
indirection used once in stores/application.js.
* Use mapState instead mapGetters to get the drawMode at all places
to save some code lines.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 25 Oct 2018 23:16:53 +0200 |
parents | ca628dce90dd |
children | d9e6a1f6f394 |
line wrap: on
line source
<template> <div class="main d-flex flex-row"> <div :class="spacerStyle"></div> <div class="d-flex content flex-column"> <div class="d-flex flex-row"> <div :class="userlistStyle"> <div class="card"> <div class="card-header shadow-sm text-white bg-info mb-3"> Users </div> <div class="card-body"> <table id="datatable" :class="tableStyle"> <thead> <tr> <th scope="col" @click="sortBy('user')"> <span>Username <i v-if="sortCriterion=='user'" class="fa fa-angle-down"></i> </span> </th> <th scope="col" @click="sortBy('country')"> <span>Country <i v-if="sortCriterion=='country'" class="fa fa-angle-down"></i> </span> </th> <th scope="col" @click="sortBy('email')"> <span>Email <i v-if="sortCriterion=='email'" class="fa fa-angle-down"></i> </span> </th> <th scope="col" @click="sortBy('role')"> <span>Role <i v-if="sortCriterion=='role'" class="fa fa-angle-down"></i> </span> </th> <th scope="col"></th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.user" @click="selectUser(user.user)"> <td>{{ user.user }}</td> <td>{{ user.country }}</td> <td>{{ user.email}}</td> <td> <i v-tooltip="user.roleLabel" :class="{ fa:true, icon:true, 'fa-user':user.role==='waterway_user', 'fa-star':user.role=='sys_admin', 'fa-adn':user.role==='waterway_admin'}"></i> </td> <td> <i @click="deleteUser(user.user)" class="icon fa fa-trash-o"></i> </td> </tr> </tbody> </table> </div> <div class="d-flex flex-row pagination"> <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> </div> <div class="adduser "> <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> </div> </div> </div> <Userdetail v-if="isUserDetailsVisible "></Userdetail> </div> </div> </div> </template> <style scoped lang="scss"> @import "../application/assets/tooltip.scss"; .spacer { margin-left: $offset; height: 100vh; } .spacer-collapsed { min-width: $icon-width + $offset; transition: $transition-fast; } @media screen and (min-width: 600px) { .spacer-expanded { min-width: $icon-width + $offset; } } @media screen and (max-width: 1650px) { .spacer-expanded { min-width: $sidebar-width + $offset; } } .main { height: 100vh; } .backwards { margin-right: $small-offset; } .forwards { margin-left: $small-offset; } @media screen and (min-width: 600px) { .content { margin-left: $offset; margin-right: auto; } } @media screen and (min-width: 1650px) { .content { margin-left: $sidebar-width; margin-right: auto; } } .adduser { margin-right: $offset; padding-bottom: $offset; } .icon { font-size: large; } .userlist { margin-top: $offset; margin-right: $offset; min-width: 520px; height: 100%; } .pagination { margin-left: auto; margin-right: auto; } .userlistsmall { width: 30vw; } .userlistextended { width: 70vw; } .table { width: 90% !important; margin: auto; } .table th, .pages { cursor: pointer; } .table th, td { font-size: $smaller; border-top: 0px !important; text-align: left; padding: $small-offset !important; } .table td { font-size: $smaller; cursor: pointer; } tr span { display: flex; } </style> <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> */ import Userdetail from "./Userdetail"; import store from "../store"; import { mapGetters } from "vuex"; import { displayError } from "../application/lib/errors.js"; export default { name: "userview", data() { return { sortCriterion: "user", pageSize: 10, currentPage: 1 }; }, components: { Userdetail }, computed: { ...mapGetters("usermanagement", ["isUserDetailsVisible"]), ...mapGetters("application", ["sidebarCollapsed", "isUsermenuCollapsed"]), spacerStyle() { return { spacer: true, "spacer-expanded": !(this.isUsermenuCollapsed && this.sidebarCollapsed), "spacer-collapsed": this.isUsermenuCollapsed && this.sidebarCollapsed }; }, users() { let users = [...this.$store.getters["usermanagement/users"]]; users.sort((a, b) => { if ( a[this.sortCriterion].toLowerCase() < b[this.sortCriterion].toLowerCase() ) return -1; if ( a[this.sortCriterion].toLowerCase() > b[this.sortCriterion].toLowerCase() ) return 1; return 0; }); const start = (this.currentPage - 1) * this.pageSize; return users.slice(start, start + this.pageSize); }, pages() { let users = [...this.$store.getters["usermanagement/users"]]; return Math.ceil(users.length / this.pageSize); }, tableStyle() { return { table: true, "table-hover": true, "table-sm": this.isUserDetailsVisible, fadeIn: true, animated: true }; }, userlistStyle() { return { userlist: true, shadow: true, userlistsmall: this.isUserDetailsVisible, userlistextended: !this.isUserDetailsVisible }; } }, methods: { tween() {}, nextPage() { if (this.currentPage < this.pages) { document.querySelector("#datatable").classList.add("fadeOut"); setTimeout(() => { document.querySelector("#datatable").classList.remove("fadeOut"); this.currentPage += 1; }, 10); } return; }, prevPage() { if (this.currentPage > 0) { document.querySelector("#datatable").classList.add("fadeOut"); setTimeout(() => { document.querySelector("#datatable").classList.remove("fadeOut"); this.currentPage -= 1; }, 10); } return; }, sortBy(criterion) { this.sortCriterion = criterion; }, deleteUser(name) { this.$store .dispatch("usermanagement/deleteUser", { name: name }) .then(() => { this.submitted = false; this.$store.dispatch("usermanagement/loadUsers").catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, addUser() { this.$store.commit("usermanagement/clearCurrentUser"); this.$store.commit("usermanagement/setUserDetailsVisible"); }, selectUser(name) { const user = this.$store.getters["usermanagement/getUserByName"](name); this.$store.commit("usermanagement/setCurrentUser", user); } }, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers") .then(next) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data}` }); }); }, beforeRouteLeave(to, from, next) { store.commit("usermanagement/clearCurrentUser"); store.commit("usermanagement/setUserDetailsInvisible"); next(); } }; </script>