Skip to content
GitLab
Select Git revision
  • master default
Find file BlameHistoryPermalink
articles.component.html 5.48 KiB
1 
<body>
2
3 
  <!-- Search bar -->
4 
  <form class="form">
5 
    <mat-form-field >
6 
      <mat-label >Rechercher</mat-label>
7 
      <input matInput (keyup)="applyFilter($event)" name="input-article" id="input-article" #input>
8 
    </mat-form-field>
9
10 
    <!-- Select table to display (default: both) -->
11 
    <mat-form-field title="Selectionner la table à afficher" class="filter-tables">
12 
      <mat-label>Tables</mat-label>
13 
      <mat-select [(value)]="displayTable">
14 
        <mat-option value="">Toutes</mat-option>
15 
        <mat-option value="articles">Communiqués</mat-option>
16 
        <mat-option value="implications">Retombées</mat-option>
17 
      </mat-select>
18 
    </mat-form-field>
19 
  </form>
20
21 
  <button mat-button *ngIf="!allTables" class="button-return" (click)="backAllArticles()"><strong>Retour</strong></button>
22
23
24 
      <!-- Display articles -->
25
26 
  <h1 *ngIf="displayTable == 'articles' || displayTable == ''" ><i><strong>{{ titleArticles }}</strong></i></h1>
27 
  <div class="div-table" *ngIf="displayTable == 'articles' || displayTable == ''">
28 
    <table mat-table [dataSource]="dataSourceArticles" class="table-articles">
29
30 
      <!-- Date -->
31 
      <ng-container matColumnDef="date" >
32 
        <th mat-header-cell *matHeaderCellDef>Date de parution</th>
33 
        <td mat-cell *matCellDef="let article" style="width:250px;">{{ article.date }}</td>
34 
      </ng-container>
35
36 
      <!-- Title -->
37 
      <ng-container matColumnDef="title">
38 
        <th mat-header-cell *matHeaderCellDef>Titre</th>
39 
        <td mat-cell *matCellDef="let article" class="cell-title" title="Cliquez pour voir les retombées associées" (click)="clickedOnArticle(article)"><strong>{{ article.title }}</strong></td>
40 
      </ng-container>
41
42 
        <!-- Type -->
43 
      <ng-container matColumnDef="type">
44 
        <th mat-header-cell *matHeaderCellDef>Type</th>
45 
        <td mat-cell *matCellDef="let article">{{ article.type }}</td>
46 
      </ng-container>
47
48 
      <!-- Department -->
49 
      <ng-container matColumnDef="department">
50 
        <th mat-header-cell *matHeaderCellDef>Département</th>
51 
        <td mat-cell *matCellDef="let article">{{ article.department }}</td>
52 
      </ng-container>
53
54 
      <!-- Theme -->
55 
      <ng-container matColumnDef="theme">
56 
        <th mat-header-cell *matHeaderCellDef>Thème</th>
57 
        <td mat-cell *matCellDef="let article">{{ article.theme }}</td>
58 
      </ng-container>
59
60 
      <!-- Link -->
61 
      <ng-container matColumnDef="link">
62 
        <th mat-header-cell *matHeaderCellDef>Lien</th>
63 
        <td mat-cell *matCellDef="let article"><a href="{{ article.link }}">{{ article.link }}</a></td>
64 
      </ng-container>
65
66 
      <tr mat-header-row *matHeaderRowDef="displayedColArticles"></tr>
67 
      <tr mat-row *matRowDef="let row; columns: displayedColArticles;"></tr>
68
69 
       <!-- Row shown when there is no matching data. -->
70 
      <tr class="mat-row" *matNoDataRow>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<td class="mat-cell" colspan="6">Pas de résultat pour "{{input.value}}"</td> </tr> </table> </div> <!-- Display implications--> <h1 *ngIf="displayTable == 'implications' || displayTable == ''"><i><strong>{{ titleImplications }}</strong></i></h1> <div class="div-table" style="margin-bottom: 80px;" *ngIf="displayTable == 'implications' || displayTable == ''"> <table mat-table [dataSource]="dataSourceImplications" class="table-implications"> <!-- Date --> <ng-container matColumnDef="date"> <th mat-header-cell *matHeaderCellDef>Date de parution</th> <td mat-cell *matCellDef="let article" style="width:250px;">{{ article.date }}</td> </ng-container> <!-- Title --> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef>Titre</th> <td mat-cell *matCellDef="let article">{{ article.title }}</td> </ng-container> <!-- Type --> <ng-container matColumnDef="type"> <th mat-header-cell *matHeaderCellDef>Type</th> <td mat-cell *matCellDef="let article">{{ article.type }}</td> </ng-container> <!-- Department --> <ng-container matColumnDef="department"> <th mat-header-cell *matHeaderCellDef>Département</th> <td mat-cell *matCellDef="let article">{{ article.department }}</td> </ng-container> <!-- Paper --> <ng-container matColumnDef="paper"> <th mat-header-cell *matHeaderCellDef>Journal</th> <td mat-cell *matCellDef="let article">{{ article.paper }}</td> </ng-container> <!-- Theme --> <ng-container matColumnDef="theme"> <th mat-header-cell *matHeaderCellDef>Thème</th> <td mat-cell *matCellDef="let article">{{ article.theme }}</td> </ng-container> <!-- Tonality --> <ng-container matColumnDef="tonality"> <th mat-header-cell *matHeaderCellDef>Tonalité</th> <td mat-cell *matCellDef="let article" [style.background]="article.color">{{ article.tonality }}</td> </ng-container> <!-- Link --> <ng-container matColumnDef="link"> <th mat-header-cell *matHeaderCellDef>Lien</th> <td mat-cell *matCellDef="let article" style="padding-left: 5px;"><a href="{{ article.link }}">{{ article.link }}</a> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColImplications"></tr> <tr mat-row *matRowDef="let row; columns: displayedColImplications;"></tr> <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="8">Pas de résultat pour "{{input.value}}"</td> </tr>
141142143144145146
</table> </div> </body>