Merge pull request #4886 from GabrielInTheWorld/saveTheMemberWithStars

Adds icons to display status 'inactive', 'is present' and 'is committee'
This commit is contained in:
Sean 2019-07-31 15:08:14 +02:00 committed by GitHub
commit 36833c6206
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 23 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>

View File

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