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`
This commit is contained in:
GabrielMeyer 2019-07-30 13:27:22 +02:00
parent 60098af22d
commit e487b8fec8
5 changed files with 36 additions and 27 deletions

View File

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

@ -257,7 +257,12 @@
<!-- User name --> <!-- User name -->
<div *ngIf="isAllowed('seeName')"> <div *ngIf="isAllowed('seeName')">
<h4 translate>Name</h4> <h4 translate>Name</h4>
<span class="state-icons">
<span>{{ user.short_name }}</span> <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>
<div *ngIf="isAllowed('seePersonal')"> <div *ngIf="isAllowed('seePersonal')">

View File

@ -33,3 +33,11 @@
mat-checkbox { mat-checkbox {
margin-right: 10px; margin-right: 10px;
} }
.state-icons {
display: flex;
mat-icon {
margin-left: 5px;
}
}

View File

@ -33,18 +33,11 @@
(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 class="nameCell">
<span *ngIf="user.is_active !== false"> <span>{{ name }}</span>
{{ name }} <mat-icon matTooltip="{{ 'Is committee' | translate }}" *ngIf="user.is_committee">stars</mat-icon>
</span> <mat-icon matTooltip="{{ 'Inactive' | translate }}" *ngIf="!user.is_active">block</mat-icon>
<span *ngIf="user.is_active === false">
<os-icon-container icon="block" swap="true">
{{ name }}
</os-icon-container>
</span>
</div> </div>
</div> </div>
@ -207,7 +200,11 @@
<mat-icon>vpn_key</mat-icon> <mat-icon>vpn_key</mat-icon>
<span translate>Reset passwords to the default ones</span> <span translate>Reset passwords to the default ones</span>
</button> </button>
<button mat-menu-item [disabled]="!selectedRows.length" (click)="generateNewPasswordsPasswordsSelected()"> <button
mat-menu-item
[disabled]="!selectedRows.length"
(click)="generateNewPasswordsPasswordsSelected()"
>
<mat-icon>vpn_key</mat-icon> <mat-icon>vpn_key</mat-icon>
<span translate>Generate new passwords</span> <span translate>Generate new passwords</span>
</button> </button>

View File

@ -13,3 +13,13 @@
.infoCell { .infoCell {
display: grid; display: grid;
} }
.nameCell {
position: relative;
z-index: 2;
display: flex;
span {
margin-right: 5px;
}
}