benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

list songs

Browse Source
This commit is contained in:
Benjamin Ifland
2019-03-23 15:25:12 +01:00
parent 14a033a56c
commit 3b060ebf55
26 changed files with 294 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
WEB/src/app/components/songs/songs.component.ts
View File

@@ -1,6 +1,6 @@
import { Song } from './../../models/song.model';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SongListModel } from 'src/app/models/song-list.model';
@Component({
selector: 'app-songs',
@@ -8,12 +8,12 @@ import { SongListModel } from 'src/app/models/song-list.model';
styleUrls: ['./songs.component.less']
})
export class SongsComponent implements OnInit {
public songs: SongListModel;
public songs: Song[];
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data.subscribe((data: { songs: SongListModel }) => {
this.route.data.subscribe((data: { songs: Song[] }) => {
this.songs = data.songs;
});
}

64
WEB/src/app/components/songs/table/table.component.html
View File

@@ -1,31 +1,43 @@
<table *ngIf="songs.SongList" mat-table [dataSource]="songs.SongList" class="mat-elevation-z8">
<div class="page-container mat-elevation-z8">
<div class="table-container">
<table
*ngIf="songs"
mat-table
[dataSource]="songs"
class="mat-elevation-z8"
>
<ng-container matColumnDef="Number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{ element.Number }}</td>
</ng-container>
<ng-container matColumnDef="Id">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element">{{element.Id}}</td>
</ng-container>
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>Titel</th>
<td mat-cell *matCellDef="let element">{{ element.Name }}</td>
</ng-container>
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef>Titel</th>
<td mat-cell *matCellDef="let element">{{element.Name}}</td>
</ng-container>
<ng-container matColumnDef="Key">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.Key }}</td>
</ng-container>
<ng-container matColumnDef="Key">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Key}}</td>
</ng-container>
<ng-container matColumnDef="SongType">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.SongType }}</td>
</ng-container>
<ng-container matColumnDef="Type">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Type}}</td>
</ng-container>
<ng-container matColumnDef="Tempo">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{ element.Tempo }}</td>
</ng-container>
<ng-container matColumnDef="Velocity">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">{{element.Velocity}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: columns;" [routerLink]="['/songs', row.Id]" routerLinkActive="router-link-active" ></tr>
</table>
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
<tr
mat-row
*matRowDef="let row; columns: columns"
[routerLink]="['/songs', row.ID]"
routerLinkActive="router-link-active"
></tr>
</table>
</div>
</div>

11
WEB/src/app/components/songs/table/table.component.less
View File

@@ -1,4 +1,15 @@
table {
width: 100%;
border-radius: 8px;
}
.page-container {
height: 400px;
overflow: hidden;
border-radius: 8px;
}
.table-container {
height: 100%;
overflow: auto;
}

10
WEB/src/app/components/songs/table/table.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, Input } from '@angular/core';
import { SongListModel } from 'src/app/models/song-list.model';
import { Song } from 'src/app/models/song.model';
@Component({
selector: 'app-table',
@@ -7,13 +7,13 @@ import { SongListModel } from 'src/app/models/song-list.model';
styleUrls: ['./table.component.less']
})
export class TableComponent implements OnInit {
@Input() public songs: SongListModel;
@Input() public songs: Song[];
public columns = [
'Id',
'Number',
'Name',
'Key',
'Type',
'Velocity',
'SongType',
'Tempo',
];
constructor() { }