changeset 5510:b7792e8d5c62 deactivate-users

Client: Improve users-table layout * Make editing/reactivating of users more recognizable by adding a reactive/edit button to the action column, that behaves according to the user's status(active,inactive). * Disable clicking the other cells for editing user.
author Fadi Abbud <fadi.abbud@intevation.de>
date Wed, 29 Sep 2021 17:10:42 +0200
parents 36cbf14b878a
children ba014cc5f969
files client/src/components/usermanagement/Usermanagement.vue client/src/main.js
diffstat 2 files changed, 18 insertions(+), 4 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/usermanagement/Usermanagement.vue	Fri Sep 24 13:10:25 2021 +0200
+++ b/client/src/components/usermanagement/Usermanagement.vue	Wed Sep 29 17:10:42 2021 +0200
@@ -30,7 +30,6 @@
               <div
                 class="table-cell center col-1"
                 :style="{ opacity: user.active ? '1' : '0.7' }"
-                @click="selectUser(user.user)"
               >
                 <font-awesome-icon
                   v-tooltip="roleLabel(user.role)"
@@ -40,7 +39,6 @@
               </div>
               <div
                 class="table-cell col-4"
-                @click="selectUser(user.user)"
                 :style="{ opacity: user.active ? '1' : '0.7' }"
               >
                 {{ user.user }}
@@ -48,13 +46,11 @@
               <div
                 :style="{ opacity: user.active ? '1' : '0.7' }"
                 class="table-cell center col-1"
-                @click="selectUser(user.user)"
               >
                 {{ user.country }}
               </div>
               <div
                 class="table-cell col-3"
-                @click="selectUser(user.user)"
                 :style="{ opacity: user.active ? '1' : '0.7' }"
               >
                 {{ user.email }}
@@ -75,6 +71,18 @@
               </div>
               <div class="table-cell col text-right justify-content-end">
                 <button
+                  @click="selectUser(user.user)"
+                  class="btn btn-xs btn-dark mr-1"
+                  v-tooltip="getEditLabel(user.active)"
+                >
+                  <font-awesome-icon
+                    v-if="user.active"
+                    icon="pencil-alt"
+                    fixed-width
+                  />
+                  <font-awesome-icon v-else icon="undo" fixed-width />
+                </button>
+                <button
                   @click="sendTestMail(user.user)"
                   class="btn btn-xs btn-dark mr-1"
                   v-tooltip="sendMailLabel"
@@ -261,6 +269,10 @@
     this.usersForTable = this.users;
   },
   methods: {
+    getEditLabel(active) {
+      if (active) return this.$gettext("Edit user");
+      return this.$gettext("Reactivate user");
+    },
     changeDisplayingState() {
       this.areSomeUsersHidden = !this.areSomeUsersHidden;
       this.filterUsers();
--- a/client/src/main.js	Fri Sep 24 13:10:25 2021 +0200
+++ b/client/src/main.js	Wed Sep 29 17:10:42 2021 +0200
@@ -106,6 +106,7 @@
   faWater,
   faWrench,
   faRedo,
+  faUndo,
   faSync,
   faCrosshairs
 } from "@fortawesome/free-solid-svg-icons";
@@ -178,6 +179,7 @@
   faWater,
   faWrench,
   faRedo,
+  faUndo,
   faSync,
   faWindowMinimize,
   faWindowMaximize,