Ajout d'une option pour étendre les lignes de la table et présenter l…

…es données optionnelles d'une chanson (#72)

src/app/components/table-viewer/table-viewer.component.html

@@ -20,8 +20,8 @@ <h1 class="font title">
         <mat-icon>settings</mat-icon> Aide & Options
 </button> <br>
 <div class="mat-elevation-z8">
-        <table mat-table class="font" [dataSource]="dataSource" matSort cdkDropList cdkDropListOrientation="horizontal"
-                (cdkDropListDropped)="drop($any($event))">
+        <table mat-table class="font" [dataSource]="dataSource" matSort multiTemplateDataRows cdkDropList
+                cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($any($event))">
 
                 <ng-container matColumnDef="isWinner">
                         <th mat-header-cell cdkDrag [cdkDragDisabled]="!canDrag()" *matHeaderCellDef mat-sort-header>
@@ -50,12 +50,6 @@ <h1 class="font title">
                         <td mat-cell *matCellDef="let row"> {{row.author}} </td>
                 </ng-container>
 
-                <ng-container matColumnDef="platform">
-                        <th mat-header-cell [ngClass]="!canDrag() ? '': 'clickable'" cdkDrag
-                                [cdkDragDisabled]="!canDrag()" *matHeaderCellDef> Plateforme </th>
-                        <td mat-cell *matCellDef="let row"> {{platformToString(row.platform)}} </td>
-                </ng-container>
-
                 <ng-container matColumnDef="cstName">
                         <th mat-header-cell cdkDrag [cdkDragDisabled]="!canDrag()" *matHeaderCellDef mat-sort-header>
                                 Constitution </th>
@@ -85,8 +79,34 @@ <h1 class="font title">
                         <td mat-cell *matCellDef="let row"> {{row.date}} </td>
                 </ng-container>
 
+                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+                <ng-container matColumnDef="expandedDetail">
+                        <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
+                                <div class="expanded-element-detail"
+                                        [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
+                                        <div class="expanded-element-description">
+                                                <b> ID </b> : {{element.id}} <br>
+                                                <b> Titre </b> : {{element.title}} <br>
+                                                <b> Titre Alternatifs </b> : {{parseSongProperty(element.altTitles)}} <br>
+                                                <b> Auteur </b> : {{element.author}} <br>
+                                                <b> Album </b> : {{parseSongProperty(element.album)}} <br>
+                                                <b> Genres </b> : {{parseSongProperty(element.genres)}} <br>
+                                                <b> Langues </b> : {{parseSongProperty(element.languages)}} <br>
+                                                <b> Année de sortie </b> : {{parseSongProperty(element.releaseYear)}} <br>
+                                                <b> Date d'ajout </b> : {{parseSongProperty(generateDate(element.addedDate))}} <br>
+                                                <b> Plateforme </b> : {{platformToString(element.platform)}} <br>
+                                                <b> URL </b> : <a href="{{element.url}}" target="_blank"> {{element.url}} </a>
+                                        </div>
+                                </div>
+                        </td>
+                </ng-container>
+
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+                        [class.expanded-expanded-row]="expandedElement === row"
+                        (click)="expandedElement = expandedElement === row ? null : row"
+                ></tr>
+                <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="expanded-detail-row"></tr>
 
                 <!-- Row shown when there is no matching data. -->
                 <tr class="mat-row" *matNoDataRow>

src/app/components/table-viewer/table-viewer.component.scss

@@ -148,6 +148,12 @@ tr {
     background-color: black;
 }
 
+tr:hover {
+    background-color: #222222;
+    cursor: pointer;
+}
+
+
 .url-icon {
     color: $old-mauve;
 }
@@ -156,6 +162,19 @@ tr {
     color: $old-mauve;
 }
 
+tr.expanded-detail-row {
+    height: 0;
+}
+
+.expanded-element-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+.expanded-element-description {
+    padding: 16px;
+}
+
 // End
 
 .end-text {

src/app/components/table-viewer/table-viewer.component.ts

@@ -11,17 +11,27 @@ import { DataManagerService, DataSong } from 'src/app/services/data-manager.serv
 import { LocalStorageService } from 'src/app/services/local-storage.service';
 import { MatDialog } from '@angular/material/dialog';
 import { HelpWindowComponent } from '../help-window/help-window.component';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'app-table-viewer',
   templateUrl: './table-viewer.component.html',
-  styleUrls: ['./table-viewer.component.scss']
+  styleUrls: ['./table-viewer.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class TableViewerComponent implements AfterViewInit {
 
   displayedColumns: string[];
   dataSource: MatTableDataSource<DataSong>;
 
+  expandedElement?: DataSong;
+
   selectedColumns: FormControl;
   selectedColumnsList: string[];
 
@@ -110,4 +120,16 @@ export class TableViewerComponent implements AfterViewInit {
     this.dialog.open(HelpWindowComponent);
   }
 
+  parseSongProperty(property: any): any | string {
+    if (property === undefined) return "/";
+    if (Array.isArray(property)) return property.join(", ");
+    if (typeof property === "string" && length) return property.substring(0, length);
+    if (property instanceof Date) return property.toLocaleDateString() + ' ' + property.toLocaleTimeString();
+    return property;
+  }
+
+  generateDate(date: string): Date {
+    return new Date(date);
+  }
+
 }

src/app/constants/local-storage.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_COLUMNS_ORDER } from "./table"
 
-export const LOCAL_STORAGE_VERSION = "v3";
+export const LOCAL_STORAGE_VERSION = "v4";
 
 export enum LocalStorageKey {
   TABLE_COLUMN_ORDER = "mellotron.setting.tableColumnOrder",

src/app/constants/table.ts

@@ -8,13 +8,12 @@ export const COLUMN_NAMES_MAP: Record<string, string> = {
   user: 'Utilisateur',
   cstName: 'Constitution',
   date: 'Date',
-  platform: 'Plateforme',
   url: 'URL',
 };
 
 export const DEFAULT_COLUMNS_ORDER = Object.keys(COLUMN_NAMES_MAP);
 
-export const NON_FILTER_KEYS = ['isWinner', 'platform', 'url'];
+export const NON_FILTER_KEYS = ['isWinner', 'url'];
 
 export function filterPredicateFunction(currentKeys: string[]) {
   return (data: DataSong, filter: string): boolean => {

src/app/services/data-manager.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { EMPTY_SONG, Song, SongPlatform } from 'chelys';
+import { EMPTY_SONG, Song } from 'chelys';
 import { ALL_CONSTITUTIONS_DATA, DataConstitution } from '../constants/constitutions';
 import names from '../../assets/names.json'
 

src/assets/names.json

@@ -1 +1 @@
-{"0xlRv92l2uV5RPBOaehCi08r9fQ2":"Nicky Mammouth","3OvnjaJEQfhz9FfizrSKE9vH23p2":"Le frère de Galadriel","E47Et0CSruO4x705pmp5tldzbK23":"Skully","EzKZMQbdAGYxyNbdLG7clcc8fcP2":"Touillette man","MFyRF6jk8kNxWf9shdHTlkpMmRt1":"Mr Lucky Goes Latin","O2HvFnVl9fVem27XZpSTSbSWsOL2":"I am very Bidon","UbbtyL9L1DfTDRDULtNYb8OvVrg2":"alex","bVuUaytBfDZXxfKFjg5hAzxlmbK2":"Noé Archiviste","gvb2XFss0fQgKOXEuq1eIne4sdI2":"Soda Stream","iImCc2DtcOSmUCEDkpZThfmTTko2":"Skaven Lord","jafbSws5qOMtuM7jj6NWQ2QTEsl2":"MICOLA","k0p39UgcBWQcAA6bV59eWNVRa3U2":"TableauBits","qnQiMpOFk9Y8iA1f5qRt0hIEVe13":"Busa (à la retraite)","v6Zc3x12BsVNJTyk5U00vvqhsmx2":"Poussin","zFJuPem5jXU4eZSvo1de82LlF1W2":"pamplemousse","JvVTL2HLvTcIDlekbIVs0sShzW33":"ilona"}
+{"0xlRv92l2uV5RPBOaehCi08r9fQ2":"Nicky","3OvnjaJEQfhz9FfizrSKE9vH23p2":"Le frère de Galadriel","E47Et0CSruO4x705pmp5tldzbK23":"Skully","EzKZMQbdAGYxyNbdLG7clcc8fcP2":"Touillette man","JvVTL2HLvTcIDlekbIVs0sShzW33":"ilona","MFyRF6jk8kNxWf9shdHTlkpMmRt1":"Mr Lucky Goes Latin","O2HvFnVl9fVem27XZpSTSbSWsOL2":"I am very Bidon","UbbtyL9L1DfTDRDULtNYb8OvVrg2":"alex","bVuUaytBfDZXxfKFjg5hAzxlmbK2":"Noé Archiviste","gvb2XFss0fQgKOXEuq1eIne4sdI2":"Soda Stream","iImCc2DtcOSmUCEDkpZThfmTTko2":"Skaven Lord","jafbSws5qOMtuM7jj6NWQ2QTEsl2":"MICOLA","k0p39UgcBWQcAA6bV59eWNVRa3U2":"TableauBits","qnQiMpOFk9Y8iA1f5qRt0hIEVe13":"Busa (à la retraite)","v6Zc3x12BsVNJTyk5U00vvqhsmx2":"Poussin","zFJuPem5jXU4eZSvo1de82LlF1W2":"pamplemousse"}