From e487b8fec8faaaaff119bd38258696dc34eba356 Mon Sep 17 00:00:00 2001
From: GabrielMeyer <meyergabriel@live.de>
Date: Tue, 30 Jul 2019 13:27:22 +0200
Subject: [PATCH] Adds icons to display status 'inactive', 'is present' and 'is
 committee'

- In `user-list.component` and in `user-detail.component`
- Also removes the method `getUserTooltip()` from `base-list-view.ts`
---
 client/src/app/site/base/base-list-view.ts    | 11 --------
 .../user-detail/user-detail.component.html    |  7 ++++-
 .../user-detail/user-detail.component.scss    |  8 ++++++
 .../user-list/user-list.component.html        | 27 +++++++++----------
 .../user-list/user-list.component.scss        | 10 +++++++
 5 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/client/src/app/site/base/base-list-view.ts b/client/src/app/site/base/base-list-view.ts
index e23c695b3..400d781a6 100644
--- a/client/src/app/site/base/base-list-view.ts
+++ b/client/src/app/site/base/base-list-view.ts
@@ -8,7 +8,6 @@ import { PblColumnDefinition, PblDataSource } from '@pebula/ngrid';
 import { StorageService } from 'app/core/core-services/storage.service';
 import { BaseViewComponent } from './base-view';
 import { BaseViewModel } from './base-view-model';
-import { ViewUser } from '../users/models/view-user';
 
 export abstract class BaseListViewComponent<V extends BaseViewModel> extends BaseViewComponent implements OnDestroy {
     /**
@@ -117,14 +116,4 @@ export abstract class BaseListViewComponent<V extends BaseViewModel> extends Bas
     public saveScrollIndex(key: string, index: number): void {
         this.storage.set(`scroll_${key}`, index);
     }
-
-    /**
-     * If the user is not active, formulate a tooltip accordingly
-     *
-     * @param user
-     * @returns "Inactive" as (untranslated) string if the given user is not active
-     */
-    public getUserTooltip(user: ViewUser): string {
-        return user.is_active ? '' : 'Inactive';
-    }
 }
diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.html b/client/src/app/site/users/components/user-detail/user-detail.component.html
index 083d5f368..1c94f17fd 100644
--- a/client/src/app/site/users/components/user-detail/user-detail.component.html
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.html
@@ -257,7 +257,12 @@
     <!-- User name -->
     <div *ngIf="isAllowed('seeName')">
         <h4 translate>Name</h4>
-        <span>{{ user.short_name }}</span>
+        <span class="state-icons">
+            <span>{{ user.short_name }}</span>
+            <mat-icon *ngIf="user.is_present" matTooltip="{{ 'Is present' | translate }}">check_box</mat-icon>
+            <mat-icon *ngIf="user.is_committee" matTooltip="{{ 'Is committee' | translate }}">stars</mat-icon>
+            <mat-icon *ngIf="!user.is_active" matTooltip="{{ 'Inactive' | translate }}">block</mat-icon>
+        </span>
     </div>
 
     <div *ngIf="isAllowed('seePersonal')">
diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.scss b/client/src/app/site/users/components/user-detail/user-detail.component.scss
index af541a875..b5e2c3895 100644
--- a/client/src/app/site/users/components/user-detail/user-detail.component.scss
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.scss
@@ -33,3 +33,11 @@
 mat-checkbox {
     margin-right: 10px;
 }
+
+.state-icons {
+    display: flex;
+
+    mat-icon {
+        margin-left: 5px;
+    }
+}
diff --git a/client/src/app/site/users/components/user-list/user-list.component.html b/client/src/app/site/users/components/user-list/user-list.component.html
index 0ae2fe2bb..0209a9b32 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/client/src/app/site/users/components/user-list/user-list.component.html
@@ -33,18 +33,11 @@
             (click)="saveScrollIndex('user', rowContext.identity)"
             [routerLink]="user.id"
             *ngIf="!isMultiSelect"
-            matTooltip="{{ getUserTooltip(user) | translate }}"
         ></a>
-        <div>
-            <span *ngIf="user.is_active !== false">
-                {{ name }}
-            </span>
-
-            <span *ngIf="user.is_active === false">
-                <os-icon-container icon="block" swap="true">
-                    {{ name }}
-                </os-icon-container>
-            </span>
+        <div class="nameCell">
+            <span>{{ name }}</span>
+            <mat-icon matTooltip="{{ 'Is committee' | translate }}" *ngIf="user.is_committee">stars</mat-icon>
+            <mat-icon matTooltip="{{ 'Inactive' | translate }}" *ngIf="!user.is_active">block</mat-icon>
         </div>
     </div>
 
@@ -204,10 +197,14 @@
                 </button>
 
                 <button mat-menu-item [disabled]="!selectedRows.length" (click)="resetPasswordsToDefaultSelected()">
-                        <mat-icon>vpn_key</mat-icon>
-                        <span translate>Reset passwords to the default ones</span>
-                    </button>
-                <button mat-menu-item [disabled]="!selectedRows.length" (click)="generateNewPasswordsPasswordsSelected()">
+                    <mat-icon>vpn_key</mat-icon>
+                    <span translate>Reset passwords to the default ones</span>
+                </button>
+                <button
+                    mat-menu-item
+                    [disabled]="!selectedRows.length"
+                    (click)="generateNewPasswordsPasswordsSelected()"
+                >
                     <mat-icon>vpn_key</mat-icon>
                     <span translate>Generate new passwords</span>
                 </button>
diff --git a/client/src/app/site/users/components/user-list/user-list.component.scss b/client/src/app/site/users/components/user-list/user-list.component.scss
index 27eabb620..54249fa90 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.scss
+++ b/client/src/app/site/users/components/user-list/user-list.component.scss
@@ -13,3 +13,13 @@
 .infoCell {
     display: grid;
 }
+
+.nameCell {
+    position: relative;
+    z-index: 2;
+    display: flex;
+
+    span {
+        margin-right: 5px;
+    }
+}