commencement de la partie admin
This commit is contained in:
MiharyR
parent
11472d0045
commit
de939b47f1
67 changed files with 1233 additions and 554 deletions
|
|
@ -0,0 +1,112 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
|
||||
|
||||
<app-navbar-admin></app-navbar-admin><br><br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<div style="text-align: center">
|
||||
<input (keyup)="applyFilter($event)" placeholder="Filtre...">
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------- -->
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Advertiser Column -->
|
||||
<ng-container matColumnDef="advertiser">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Annonceur </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
{{advert.advertiser}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Tags Column -->
|
||||
<ng-container matColumnDef="tags">
|
||||
<th mat-header-cell *matHeaderCellDef> Tags </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<span *ngFor="let tag of advert.tags; let isLast = last;">
|
||||
<span *ngIf="!isLast"> {{tag}}, </span>
|
||||
<span *ngIf="isLast"> {{tag}} </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>
|
||||
|
||||
<!-- UpdatedAt 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>
|
||||
|
||||
<!-- IsVisible Column -->
|
||||
<ng-container matColumnDef="isVisible">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Visible </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<span *ngIf="advert.isVisible"> <mat-icon>check</mat-icon> </span>
|
||||
<span *ngIf="!advert.isVisible"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Delete Column -->
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef> Supprimer </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onDelete(advert)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Visualisation Column -->
|
||||
<ng-container matColumnDef="visualisation">
|
||||
<th mat-header-cell *matHeaderCellDef> Visualisation </th>
|
||||
<td mat-cell *matCellDef="let advert">
|
||||
<button mat-icon-button (click)="onVisualize(advert)">
|
||||
<mat-icon>aspect_ratio</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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.myContainer {
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
width: 94%;
|
||||
font-size: small;
|
||||
}
|
||||
.darkTheme table { border: solid 2px white; }
|
||||
|
||||
th.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 30%;
|
||||
font-size: large;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PageAdListAdminComponent } from './page-ad-list-admin.component';
|
||||
|
||||
describe('PageAdListAdminComponent', () => {
|
||||
let component: PageAdListAdminComponent;
|
||||
let fixture: ComponentFixture<PageAdListAdminComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PageAdListAdminComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PageAdListAdminComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
||||
import {MatSort} from "@angular/material/sort";
|
||||
import {MatPaginator} from "@angular/material/paginator";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {Advert} from "../../../utils/interfaces/advert";
|
||||
import {PopupVisualizeAdAdminComponent} from "../popup-visualize-ad-admin/popup-visualize-ad-admin.component";
|
||||
import {PopupDeleteAdAdminComponent} from "../popup-delete-ad-admin/popup-delete-ad-admin.component";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-ad-list-admin',
|
||||
templateUrl: './page-ad-list-admin.component.html',
|
||||
styleUrls: ['./page-ad-list-admin.component.scss']
|
||||
})
|
||||
export class PageAdListAdminComponent implements AfterViewInit
|
||||
{
|
||||
displayedColumns: string[] = [ 'title', 'advertiser', 'tags', 'createdAt', 'updatedAt', 'views', 'isVisible', 'delete', 'visualisation' ];
|
||||
dataSource ;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
private fictitiousDatasService: FictitiousDatasService,
|
||||
public dialog: MatDialog,
|
||||
private snackBar: MatSnackBar ) { }
|
||||
|
||||
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
// --- FAUX CODE ---
|
||||
const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
|
||||
this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource = this.dataSource;
|
||||
}
|
||||
|
||||
|
||||
applyFilter(event: Event): void
|
||||
{
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
onVisualize(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
width: '50%',
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupVisualizeAdAdminComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {});
|
||||
}
|
||||
|
||||
|
||||
onDelete(advert: Advert): void
|
||||
{
|
||||
const config = {
|
||||
data: { advert: advert }
|
||||
};
|
||||
this.dialog
|
||||
.open(PopupDeleteAdAdminComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe( retour => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
let message = "" ;
|
||||
if((retour === undefined) || (retour === null)) {
|
||||
message = "Opération annulée" ;
|
||||
}
|
||||
else {
|
||||
const index = this.dataSource.data.findIndex( elt => (elt._id === advert._id));
|
||||
this.dataSource.data.splice(index, 1);
|
||||
this.dataSource.data = this.dataSource.data;
|
||||
this.dataSource = this.dataSource;
|
||||
message = "L'annonce a bien été supprimée ✔" ;
|
||||
}
|
||||
this.snackBar.open( message, "", config);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue