PolyNotFound/src/app/advertiser/adList/page-ad-list-advertiser/page-ad-list-advertiser.component.html

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


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





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

            <!-- filtre -->
            <div class="col-10" 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="filtre...">
                    </div>

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


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


                        <!-- sujets -->
                        <div class="col-4">
                            <mat-form-field appearance="fill">
                                <mat-label>Sujets</mat-label>
                                <mat-select [formControl]="formControlInterests" multiple>
                                    <mat-select-trigger>
                                        {{formControlInterests.value ? formControlInterests.value[0] : ''}}
                                        <span *ngIf="formControlInterests.value?.length > 1">
                                    (+{{formControlInterests.value.length - 1}} {{formControlInterests.value?.length === 2 ? 'autre' : 'autres'}})
                                </span>
                                    </mat-select-trigger>
                                    <mat-option *ngFor="let topping of allInterests" [value]="topping">{{topping}}</mat-option>
                                </mat-select>
                            </mat-form-field>
                            <button mat-icon-button (click)="onFilter()">
                                <mat-icon>keyboard_tab</mat-icon>
                            </button>
                        </div>


                        <!-- période -->
                        <div class="col-6" style="text-align: right;">
                            Période de création: &nbsp;
                            <mat-form-field appearance="fill" style="width: 140px;">
                                <mat-label>Date de début</mat-label>
                                <input matInput type="date"
                                       style="font-size: small; width: 140px;"
                                       [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"
                                       style="font-size: small; width: 140px;"
                                       [ngModel] ="endDate | date:'yyyy-MM-dd'"
                                       (ngModelChange)="onNewEndDate($event); onFilter();">
                            </mat-form-field>
                        </div>

                    </div>

                </div>
            </div>

            <!-- btnAdd -->
            <div class="col-2" style="text-align: right; position: relative;">
                <button mat-button class="btnAjouter" (click)="onAdd()" style="position: absolute; bottom: 0; right: 0;">
                    <mat-icon>add_circle</mat-icon> Ajouter une annonce
                </button>
            </div>

        </div>




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

            <!-- IsActive Column -->
            <ng-container matColumnDef="isVisible">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <mat-icon>power_settings_new</mat-icon>
                </th>
                <td mat-cell *matCellDef="let advert">
                    <mat-slide-toggle [(ngModel)]="advert.isVisible" (click)="onSliderIsVisible(advert)"></mat-slide-toggle>
                </td>
            </ng-container>

            <!-- Title Column -->
            <ng-container matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Titre </th>
                <td mat-cell *matCellDef="let advert">
                    {{advert.title}}
                </td>
            </ng-container>

            <!-- Subject Column -->
            <ng-container matColumnDef="interests">
                <th mat-header-cell *matHeaderCellDef> Sujets </th>
                <td mat-cell *matCellDef="let advert">
                    <span *ngFor="let interest of advert.interests; let isLast = last;">
                        <span *ngIf="!isLast"> {{interest}}, </span>
                        <span *ngIf="isLast"> {{interest}} </span>
                    </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 advert">
                    {{ advert.createdAt | date:'dd/LL/YYYY à HH:mm:ss' }}
                </td>
            </ng-container>

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

            <!-- Views Column -->
            <ng-container matColumnDef="views">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Vues </th>
                <td mat-cell *matCellDef="let advert">
                    {{advert.views}}
                </td>
            </ng-container>

            <!-- Actions Column -->
            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef> Actions </th>
                <td mat-cell *matCellDef="let advert">
                    <button mat-icon-button (click)="onVisualizeImages(advert)">
                        <mat-icon> insert_photo</mat-icon>
                    </button>
                    <button mat-icon-button (click)="onUpdate(advert)">
                        <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-icon-button (click)="onDelete(advert)">
                        <mat-icon>delete</mat-icon>
                    </button>
                </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>