view client/src/components/usermanagement/Usermanagement.vue @ 5095:e21cbb9768a2

Prevent duplicate fairway areas In principal, there can be only one or no fairway area at each point on the map. Since polygons from real data will often be topologically inexact, just disallow equal geometries. This will also help to avoid importing duplicates with concurrent imports, once the history of fairway dimensions will be preserved.
author Tom Gottfried <tom@intevation.de>
date Wed, 25 Mar 2020 18:10:02 +0100
parents 6b054b91d9b2
children 45b03e8ca47e
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' }
            ]"
          />
          <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 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";

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",
      "currentUser"
    ]),
    ...mapState("application", ["showSidebar"]),
    usersLabel() {
      return this.$gettext("Users");
    },
    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: {
    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>