Merge pull request #4886 from GabrielInTheWorld/saveTheMemberWithStars

Adds icons to display status 'inactive', 'is present' and 'is committee'

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';
-    }
 }

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')">

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;
+    }
+}

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>
 

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;
+    }
+}