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

View File

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

View File

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

View File

@ -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>

View File

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