group.component.html

<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>{{title}}</ion-title>
    </ion-toolbar>
</ion-header>
<form style="display: contents;" id="adminForm" (ngSubmit)="onSubmit()" #adminForm="ngForm">
    <ion-content>
        <ion-item>
            <ion-label color="secondary" position="floating">{{'lang.label' | translate}} *</ion-label>
            <ion-input name="label" [(ngModel)]="group.label" required>
            </ion-input>
        </ion-item>
        <ion-item lines="none" *ngIf="!creationMode">
            <ion-label color="secondary">{{'lang.privileges' | translate}} :</ion-label>
        </ion-item>
        <ion-grid *ngIf="!creationMode">
            <ion-row>
                <ion-col size="4" *ngFor="let privilege of group.privileges">
                    <ion-item  style="cursor: pointer">
                        <ion-toggle slot="start" [name]="privilege.id" color="primary" [checked]="privilege.checked"
                            [(ngModel)]="privilege.checked" (click)="togglePrivilege(privilege, true)"></ion-toggle>
                        <ion-label (click)="togglePrivilege(privilege, false)">{{'lang.' + privilege.id + 'Admin' | translate}}</ion-label>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-item lines="none" *ngIf="!creationMode">
            <ion-label color="secondary">{{'lang.linkedUsers' | translate}} :</ion-label>
        </ion-item>
        <ion-card *ngIf="!creationMode" style="height: 400px;">
            <ion-list>
                <ion-item style="display: flex;">
                    <!--<ion-checkbox slot="start"></ion-checkbox>-->
                    <ion-label color="primary" matSort [matSortActive]="displayedColumns[1]" matSortDirection='asc'
                        style="display: flex;font-size: 12px;align-items: center;" (matSortChange)="sortData($event)">
                        <ng-container *ngFor="let col of displayedColumns">
                            <div [mat-sort-header]="col" disableClear style="flex: 1" *ngIf="col!=='actions'">
                                {{'lang.' + col | translate}}
                            </div>
                        </ng-container>
                        <div style="flex: 1;text-align: right;" *ngIf="displayedColumns.indexOf('actions') > -1">
                            <ion-button slot="end" color="primary" fille="outline" shape="round" (click)="openUserList()">
                                Ajouter
                            </ion-button>
                        </div>
                    </ion-label>
                    <ion-button slot="end" fill="clear" shape="round" disabled>
                        <ion-icon></ion-icon>
                    </ion-button>
                </ion-item>
                <ion-virtual-scroll [items]="sortedData" approxItemHeight="50px">
                    <ion-item *virtualItem="let element" style="display: flex;">
                        <!--<ion-checkbox slot="start"></ion-checkbox>-->
                        <ion-label style="display: flex;cursor: pointer;"
                            routerLink="/administration/users/{{element.id}}">
                            <div style="flex: 1" *ngFor="let col of displayedColumns">
                                {{element[col]}}
                            </div>
                        </ion-label>
                        <ion-button slot="end" fill="clear" shape="round"
                            (click)="$event.stopPropagation();unlinkUser(element)"
                            title="{{'lang.unlinkUser' | translate}}">
                            <ion-icon color="danger" slot="icon-only" name="close-outline"></ion-icon>
                        </ion-button>
                    </ion-item>
                </ion-virtual-scroll>
            </ion-list>
        </ion-card>
        <ion-item text-center lines="none" style="position: sticky;bottom:0px;z-index:1;">
            <div style="display: flex;align-items: center;justify-content: center;width: 100%;background: white;">
                <ion-button type="submit" shape="round" size="large" fill="outline" color="primary"
                    [disabled]="!adminForm.form.valid || !canValidate()">
                    <ion-label style="font-size: 13px;">{{'lang.validate' | translate}}</ion-label>
                </ion-button>
                <ion-button *ngIf="!creationMode" type="button" shape="round" size="large" fill="outline" color="danger"
                    (click)="deleteGroup()">
                    <ion-label style="font-size: 13px;">{{'lang.delete' | translate}}</ion-label>
                </ion-button>
            </div>
        </ion-item>
    </ion-content>
</form>