Add more user list options

- Adds an icon with tooltip if a user is inactive to the user list
- always show the 'present'-column, even though the user is not active
- add a info icon if the user has a "comment". The content of the content
  is displayed in the tooltip
This commit is contained in:
Sean Engelhardt 2019-06-17 12:50:53 +02:00
parent a5e1646f3c
commit bb443fd4af
6 changed files with 53 additions and 7 deletions

View File

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

View File

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

View File

@ -8,6 +8,7 @@ import { PblDataSource, PblColumnDefinition } from '@pebula/ngrid';
import { BaseViewComponent } from './base-view'; import { BaseViewComponent } from './base-view';
import { BaseViewModel } from './base-view-model'; import { BaseViewModel } from './base-view-model';
import { StorageService } from 'app/core/core-services/storage.service'; 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 { 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 { public saveScrollIndex(key: string, index: number): void {
this.storage.set(`scroll_${key}`, index); 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';
}
} }

View File

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

View File

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

View File

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