# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1632397233 -7200
# Node ID 90506606a7ef6d09f4a3b7bcd2a54c2ec053f6b3
# Parent  2604beecbd1a95ce9597ce1ab48213950d5e0d7c
Client: Distinguish deactivated users in the table

* Grey out the deactivated users and disable the corresponding buttons  to mark this status of users.

diff -r 2604beecbd1a -r 90506606a7ef client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Wed Sep 22 18:53:19 2021 +0200
+++ b/client/src/components/usermanagement/Usermanagement.vue	Thu Sep 23 13:40:33 2021 +0200
@@ -22,6 +22,7 @@
             <template v-slot:row="{ item: user }">
               <div
                 class="table-cell center col-1"
+                :style="{ opacity: user.active ? '1' : '0.7' }"
                 @click="selectUser(user.user)"
               >
                 <font-awesome-icon
@@ -30,16 +31,25 @@
                   class="fa-lg"
                 />
               </div>
-              <div class="table-cell col-4" @click="selectUser(user.user)">
+              <div
+                class="table-cell col-4"
+                @click="selectUser(user.user)"
+                :style="{ opacity: user.active ? '1' : '0.7' }"
+              >
                 {{ user.user }}
               </div>
               <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)">
+              <div
+                class="table-cell col-3"
+                @click="selectUser(user.user)"
+                :style="{ opacity: user.active ? '1' : '0.7' }"
+              >
                 {{ user.email }}
               </div>
               <div class="table-cell center col-1">
@@ -52,6 +62,7 @@
                   @change="toggleReport(user)"
                   v-tooltip="receivesReportLabel"
                   :width="40"
+                  :disabled="!user.active"
                   :height="20"
                 />
               </div>
@@ -61,6 +72,8 @@
                   class="btn btn-xs btn-dark mr-1"
                   v-tooltip="sendMailLabel"
                   v-if="user.email"
+                  :disabled="!user.active"
+                  :style="{ cursor: user.active ? 'pointer' : 'default' }"
                 >
                   <font-awesome-icon icon="paper-plane" fixed-width />
                 </button>
@@ -68,6 +81,8 @@
                   @click="deleteUser(user.user)"
                   class="btn btn-xs btn-dark"
                   v-tooltip="deleteUserLabel"
+                  :style="{ cursor: user.active ? 'pointer' : 'default' }"
+                  :disabled="!user.active"
                 >
                   <font-awesome-icon icon="trash" fixed-width />
                 </button>