PolyNotFound/src/app/admin/userList/page-user-list/page-user-list.component.html

<div [class]="themeService.getClassTheme()">
    <div class="myContainer">


        <!-- Navbar -->
        <app-navbar-admin></app-navbar-admin><br><br>



        <!-- filtre + btnAddUser -->
        <div class="row" style="margin: 20px 3% 20px 3%">

            <!-- filtre -->
            <div class="col-9" style="padding: 0px 0px 0px 0px;">
                <div class="filtersContainer mat-elevation-z8">

                    <!-- titre -->
                    <div style="font-weight: bold; margin-bottom: 10px;">
                        Filtre
                    </div>

                    <mat-divider></mat-divider>

                    <!-- filtre textuelle-->
                    <div style="margin: 10px 0px 20px 2%;">
                        <input class="textFilter" (keyup)="applyFilter($event)" placeholder="Rechercher par mots-clés...">
                    </div>

                    <!-- role + actif + période -->
                    <div class="row myRow">

                        <!-- choix role -->
                        <div class="col-2">
                            <mat-radio-group [(ngModel)]="roleName">
                                <mat-radio-button value="user" (click)="this.roleName = 'user'; onFilter()">
                                    Utilisateur
                                </mat-radio-button><br>
                                <mat-radio-button value="advertiser" (click)="this.roleName = 'advertiser'; onFilter()">
                                    Annonceur
                                </mat-radio-button><br>
                                <mat-radio-button value="admin" (click)="this.roleName = 'admin'; onFilter()">
                                    Admin
                                </mat-radio-button>
                            </mat-radio-group>
                        </div>

                        <!-- actif -->
                        <div class="col-2">
                            <mat-checkbox [(ngModel)]="active" (change)="onFilter()">actif</mat-checkbox><br>
                            <mat-checkbox [(ngModel)]="noActive" (change)="onFilter()">non actif</mat-checkbox>
                        </div>

                        <!-- période -->
                        <div class="col-8" style="text-align: right;">
                            Période de dernière connexion: &nbsp;
                            <mat-form-field appearance="fill" style="width: 140px;">
                                <mat-label>Date de début</mat-label>
                                <input matInput type="date"
                                       [ngModel] ="startDate | date:'yyyy-MM-dd'"
                                       (ngModelChange)="onNewStartDate($event); onFilter();">
                            </mat-form-field>
                            &nbsp; - &nbsp;
                            <mat-form-field appearance="fill" style="width: 140px;">
                                <mat-label>Date de fin</mat-label>
                                <input matInput type="date"
                                       [ngModel] ="endDate | date:'yyyy-MM-dd'"
                                       (ngModelChange)="onNewEndDate($event); onFilter();">
                            </mat-form-field>
                        </div>

                    </div>

                </div>
            </div>

            <!-- btnAddUser -->
            <div class="col-3" style="text-align: right; position: relative;">
                <button mat-button class="btnAjouter" (click)="onCreateUser()" style="position: absolute; bottom: 0; right: 0;">
                    <mat-icon>add_circle</mat-icon> Ajouter un utilisateur
                </button>
            </div>

        </div>



        <!-- Table -->
        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

            <!-- IsActive Column -->
            <ng-container matColumnDef="isActive">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <mat-icon>power_settings_new</mat-icon>
                </th>
                <td mat-cell *matCellDef="let user">
                    <mat-slide-toggle *ngIf="user.role.name !== 'superAdmin'" [(ngModel)]="user.isActive" (click)="onSliderIsActive(user)"></mat-slide-toggle>
                    <mat-slide-toggle *ngIf="user.role.name === 'superAdmin'" [(ngModel)]="user.isActive" disabled></mat-slide-toggle>
                </td>
            </ng-container>

            <!-- Login Column -->
            <ng-container matColumnDef="login">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Pseudo </th>
                <td mat-cell *matCellDef="let user">
                    {{user.login}}
                </td>
            </ng-container>

            <!-- Mail Column -->
            <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
                <td mat-cell *matCellDef="let user">
                    {{user.email}}
                </td>
            </ng-container>

            <!-- DateOfBirth Column -->
            <ng-container matColumnDef="dateOfBirth">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Date de naissance </th>
                <td mat-cell *matCellDef="let user">
                    <span *ngIf="((user.dateOfBirth === null) || (user.dateOfBirth === undefined)); else elseDateOfBirth"></span>
                    <ng-template #elseDateOfBirth> {{ user.dateOfBirth | date:'dd/LL/YYYY' }} </ng-template>
                </td>
            </ng-container>

            <!-- Age Column -->
            <ng-container matColumnDef="age">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Âge </th>
                <td mat-cell *matCellDef="let user">
                    <span *ngIf="(user.age < 0) ; else elseAge"></span>
                    <ng-template #elseAge> {{user.age}} </ng-template>
                </td>
            </ng-container>

            <!-- Sexe Column -->
            <ng-container matColumnDef="sexe">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Sexe </th>
                <td mat-cell *matCellDef="let user">
                    <span *ngIf="(user.gender === 'man') ; else elseSexe"> H </span>
                    <ng-template #elseSexe> F </ng-template>
                </td>
            </ng-container>

            <!-- Interests Column -->
            <ng-container matColumnDef="interests">
                <th mat-header-cell *matHeaderCellDef> Centres d'intérêt </th>
                <td mat-cell *matCellDef="let user">
                    <span *ngFor="let interest of user.interests; let isLast = last;">
                        <span *ngIf="!isLast ; else elseInterests"> {{interest}}, </span>
                        <ng-template #elseInterests> {{interest}} </ng-template>
                    </span>
                </td>
            </ng-container>

            <!-- CreatedAt Column -->
            <ng-container matColumnDef="createdAt">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Date de création </th>
                <td mat-cell *matCellDef="let user">
                    {{ user.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
                </td>
            </ng-container>

            <!-- LastConnexion Column -->
            <ng-container matColumnDef="lastConnexion">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Dernière connexion </th>
                <td mat-cell *matCellDef="let user">
                    {{ user.lastConnexion | date:'dd/LL/YYYY à HH:mm:ss' }}
                </td>
            </ng-container>

            <!-- IsAccepted Column -->
            <ng-container matColumnDef="isAccepted">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Accepté </th>
                <td mat-cell *matCellDef="let user">
                    <mat-slide-toggle [(ngModel)]="user.role.isAccepted" (click)="onSlideIsAccepted(user)"></mat-slide-toggle>
                </td>
            </ng-container>

            <!-- Directives -->
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell" colspan="4"> Aucune vidéo ne correspond au filtre: "{{input.value}}" </td>
            </tr>

        </table>
        <div style="width: 94%; margin: auto auto">
            <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
        </div>
        <br><br>

    </div>
</div>