Merge pull request #4784 from tsiegleauq/user-list-toggle

Add more user list options

client/src/app/shared/components/icon-container/icon-container.component.html

@@ -1,4 +1,5 @@
-<mat-icon>{{ icon }}</mat-icon>
+<mat-icon *ngIf="!swap">{{ icon }}</mat-icon>
 <span class="content-node">
     <ng-content></ng-content>
 </span>
+<mat-icon *ngIf="swap">{{ icon }}</mat-icon>

client/src/app/shared/components/icon-container/icon-container.component.ts

@@ -30,4 +30,11 @@ export class IconContainerComponent {
      */
     @Input()
     public size: 'medium' | 'large' = 'medium';
+
+    /**
+     * Reverse text and icon.
+     * Show the icon behind the text
+     */
+    @Input()
+    public swap = false;
 }

client/src/app/site/base/list-view-base.ts

@@ -8,6 +8,7 @@ import { PblDataSource, PblColumnDefinition } from '@pebula/ngrid';
 import { BaseViewComponent } from './base-view';
 import { BaseViewModel } from './base-view-model';
 import { StorageService } from 'app/core/core-services/storage.service';
+import { ViewUser } from '../users/models/view-user';
 
 export abstract class ListViewBaseComponent<V extends BaseViewModel> extends BaseViewComponent implements OnDestroy {
     /**
@@ -111,4 +112,14 @@ export abstract class ListViewBaseComponent<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-list/user-list.component.html

@@ -32,9 +32,18 @@
             (click)="saveScrollIndex('user', rowContext.identity)"
             [routerLink]="user.id"
             *ngIf="!isMultiSelect"
+            matTooltip="{{ getUserTooltip(user) | translate }}"
         ></a>
         <div>
+            <span *ngIf="user.is_active">
                 {{ name }}
+            </span>
+
+            <span *ngIf="!user.is_active">
+                <os-icon-container icon="block" swap="true">
+                    {{ name }}
+                </os-icon-container>
+            </span>
         </div>
     </div>
 
@@ -65,6 +74,7 @@
     <!-- Info column -->
     <div *pblNgridCellDef="'infos'; row as user" class="cell-slot fill">
         <div class="infoCell">
+            <!-- Email-sent indicator -->
             <mat-icon
                 inline
                 *ngIf="user.is_last_email_send"
@@ -72,17 +82,25 @@
             >
                 mail
             </mat-icon>
+
+            <!-- Has comment indicator -->
+            <mat-icon inline *ngIf="!!user.comment" matTooltip="{{ user.comment }}">
+                comment
+            </mat-icon>
         </div>
     </div>
 
     <!-- Presence column -->
     <div *pblNgridCellDef="'presence'; row as user" class="cell-slot fill">
-        <div *ngIf="user.is_active">
-            <mat-checkbox (change)="setPresent(user)" [checked]="user.is_present" [disabled]="isMultiSelect">
+        <mat-checkbox
+            class="checkbox-ripple-padding"
+            (change)="setPresent(user)"
+            [checked]="user.is_present"
+            [disabled]="isMultiSelect"
+        >
             <span translate>Present</span>
         </mat-checkbox>
     </div>
-    </div>
 </os-list-view-table>
 
 <mat-menu #userMenu="matMenu">

client/src/app/site/users/components/user-list/user-list.component.scss

@@ -9,3 +9,7 @@
         font-size: 80%;
     }
 }
+
+.infoCell {
+    display: grid;
+}

client/src/styles.scss

@@ -170,6 +170,10 @@
         }
     }
 
+    .checkbox-ripple-padding {
+        padding-left: 12px;
+    }
+
     .clickable {
         cursor: pointer;
     }
@@ -342,6 +346,7 @@ mat-card {
 }
 
 // Shared table definitions
+// TODO: Might be deprecated since we now have Virtual Scrolling Tables
 %os-table {
     width: 100%;