Mercurial > gemma
view client/src/components/usermanagement/Usermanagement.vue @ 5348:45b03e8ca47e extented-report
Toggles in user overview and in details section as well established
This commit introduces toggles to change the state for administrative
users to be able to receive the DQL Report.
For quick access there is the possibility to change via overview.
If you want to edit this in the details or if you change the role
of the user to a non administrative, there is the possibility to change
the flag in a fast way.
When the user looses administrative privilege the option is not available
and the according flag is set to "false".
Aside: Changed user.go to resolve inconsitencies in frontend where the
key "reports" was missing due to "omitempty" in marshalling the go objects.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 21 Jun 2021 16:41:39 +0200 |
parents | 6b054b91d9b2 |
children | 59db9836e29a |
line wrap: on
line source
<template> <div class="main d-flex flex-row" style="position: relative;"> <Spacer /> <div class="d-flex content py-2"> <div :class="userlistStyle"> <div class="card shadow-xs"> <UIBoxHeader icon="users-cog" :title="usersLabel" /> <UITableHeader :columns="[ { id: 'role', title: `${roleForColumLabel}`, class: 'col-1' }, { id: 'user', title: `${usernameLabel}`, class: 'col-4' }, { id: 'country', title: `${countryLabel}`, class: 'col-2' }, { id: 'email', title: `${emailLabel}`, class: 'col-3' }, { id: 'reportreceiver', title: `${reportsLabel}`, class: 'col-1' } ]" /> <UITableBody :data="users | sortTable(sortColumn, sortDirection, page, pageSize)" :isActive="item => item === currentUser" maxHeight="47rem" > <template v-slot:row="{ item: user }"> <div class="table-cell center col-1" @click="selectUser(user.user)" > <font-awesome-icon v-tooltip="roleLabel(user.role)" :icon="roleIcon(user.role)" class="fa-lg" /> </div> <div class="table-cell col-4" @click="selectUser(user.user)"> {{ user.user }} </div> <div class="table-cell center col-2" @click="selectUser(user.user)" > {{ user.country }} </div> <div class="table-cell col-3" @click="selectUser(user.user)"> {{ user.email }} </div> <div class="table-cell center col-1"> <toggle-button v-if="DQLDownloadAllowed(user)" :value="user.reports" v-model="user.reports" class="pt-1" :sync="true" :speed="100" @change="toggleReport(user)" v-tooltip="receivesReportLabel" :width="40" :height="20" /> </div> <div class="table-cell col text-right justify-content-end"> <button @click="sendTestMail(user.user)" class="btn btn-xs btn-dark mr-1" v-tooltip="sendMailLabel" v-if="user.email" > <font-awesome-icon icon="paper-plane" fixed-width /> </button> <button @click="deleteUser(user.user)" class="btn btn-xs btn-dark" v-tooltip="deleteUserLabel" > <font-awesome-icon icon="trash" fixed-width /> </button> </div> </template> </UITableBody> <div class="p-3 border-top d-flex justify-content-between"> <div></div> <div> <button @click="prevPage" v-if="this.page !== 1" class="mr-2 btn btn-sm btn-light align-self-center" > <font-awesome-icon icon="angle-left" /> </button> {{ this.page }} / {{ this.pages }} <button @click="nextPage" v-if="this.page !== this.pages" class="ml-2 btn btn-sm btn-light align-self-center" > <font-awesome-icon icon="angle-right" /> </button> </div> <button @click="addUser" class="btn btn-info addbutton shadow-sm"> <translate>Add User</translate> </button> </div> </div> </div> <Userdetail v-if="isUserDetailsVisible" /> </div> </div> </template> <style lang="sass" scoped> .content width: 100% .userdetails width: 50% .main height: 100% .icon font-size: large .userlist min-width: 520px height: 100% .userlistsmall width: 100% .userlistextended width: 100% </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 store from "@/store"; import { mapGetters, mapState } from "vuex"; import { displayError, displayInfo } from "@/lib/errors"; import { HTTP } from "@/lib/http"; import { sortTable } from "@/lib/mixins"; import Vue from "vue"; export default { name: "userview", mixins: [sortTable], data() { return { sortColumn: "user" // overriding the sortTable mixin's empty default value }; }, components: { Userdetail: () => import("./Userdetail"), Spacer: () => import("@/components/Spacer") }, computed: { ...mapGetters("usermanagement", ["isUserDetailsVisible", "users"]), ...mapState("application", ["showSidebar"]), ...mapState("usermanagement", ["currentUser"]), usersLabel() { return this.$gettext("Users"); }, reportsLabel() { return this.$gettext("DQL Report"); }, receivesReportLabel() { return this.$gettext("User receives Data Quality Report"); }, sendMailLabel() { return this.$gettext("Send testmail"); }, deleteUserLabel() { return this.$gettext("Delete user"); }, roleForColumLabel() { return this.$gettext("Role"); }, usernameLabel() { return this.$gettext("Username"); }, countryLabel() { return this.$gettext("Country"); }, emailLabel() { return this.$gettext("Email"); }, pages() { return Math.ceil(this.users.length / this.pageSize); }, tableStyle() { return { table: true, "table-hover": true, "table-sm": this.isUserDetailsVisible, fadeIn: true, animated: true }; }, userlistStyle() { return [ "userlist mr-2", { userlistsmall: this.isUserDetailsVisible, userlistextended: !this.isUserDetailsVisible } ]; } }, methods: { DQLDownloadAllowed(user) { return user.role === "waterway_admin" || user.role === "sys_admin"; }, toggleReport(user) { HTTP.patch( `/users/${user.user}`, { reports: user.reports }, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } } ) .then(() => { Vue.set(this.currentUser, "reports", user.reports); }) .catch(error => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); user.reports = !user.reports; }); }, sendTestMail(user) { HTTP.get("/testmail/" + encodeURIComponent(user), { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then(() => { displayInfo({ message: this.$gettext("Testmail sent") }); }) .catch(error => { this.loginFailed = true; let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); }, nextPage() { if (this.page < this.pages) { this.page += 1; } }, prevPage() { if (this.page > 0) { this.page -= 1; } }, deleteUser(name) { this.$store.commit("application/popup", { icon: "trash", title: this.$gettext("Delete User"), content: this.$gettext( "Do you really want to delete the following user account:" ) + `<br> <b>${name}</b>`, confirm: { label: this.$gettext("Delete"), icon: "trash", callback: () => { this.$store .dispatch("usermanagement/deleteUser", { name }) .then(() => { this.$store .dispatch("usermanagement/loadUsers") .catch(error => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); }) .catch(error => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); } }, cancel: { label: this.$gettext("Cancel"), icon: "times" } }); }, 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); }, roleIcon(role) { if (role === "sys_admin") return "star"; if (role === "waterway_admin") return ["fab", "adn"]; return "user"; }, roleLabel(role) { const labels = { sys_admin: this.$gettext("System-Administrator"), waterway_admin: this.$gettext("Waterway Admin"), waterway_user: this.$gettext("Waterway User") }; return labels[role]; } }, beforeRouteEnter(to, from, next) { store .dispatch("usermanagement/loadUsers") .then(next) .catch(error => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); }, beforeRouteLeave(to, from, next) { store.commit("usermanagement/clearCurrentUser"); store.commit("usermanagement/setUserDetailsInvisible"); next(); } }; </script>