diff --git a/WEB/src/app/app.module.ts b/WEB/src/app/app.module.ts index f570c18..f387e6a 100644 --- a/WEB/src/app/app.module.ts +++ b/WEB/src/app/app.module.ts @@ -16,6 +16,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatChipsModule } from '@angular/material/chips'; import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TableComponent } from './components/songs/table/table.component'; import { SongsComponent } from './components/songs/songs.component'; @@ -23,9 +24,19 @@ import { SongComponent } from './components/songs/song/song.component'; import { SongEditComponent } from './components/songs/song-edit/song-edit.component'; import { SongNewComponent } from './components/songs/song-new/song-new.component'; import { SongFormComponent } from './components/songs/song-form/song-form.component'; +import { SongFilesComponent } from './components/songs/song-files/song-files.component'; @NgModule({ - declarations: [AppComponent, SongsComponent, TableComponent, SongComponent, SongEditComponent, SongNewComponent, SongFormComponent], + declarations: [ + AppComponent, + SongsComponent, + TableComponent, + SongComponent, + SongEditComponent, + SongNewComponent, + SongFormComponent, + SongFilesComponent + ], imports: [ BrowserModule, BrowserAnimationsModule, @@ -42,6 +53,7 @@ import { SongFormComponent } from './components/songs/song-form/song-form.compon MatChipsModule, MatRadioModule, MatSelectModule, + MatTooltipModule, FontAwesomeModule ], diff --git a/WEB/src/app/components/songs/song-files/song-files.component.html b/WEB/src/app/components/songs/song-files/song-files.component.html new file mode 100644 index 0000000..efff678 --- /dev/null +++ b/WEB/src/app/components/songs/song-files/song-files.component.html @@ -0,0 +1,38 @@ +
+ + + + + + + + + + + + + + + +
AngehÃĪngte Dateien{{ element.Name }} + + + +
+ + +
diff --git a/WEB/src/app/components/songs/song-files/song-files.component.less b/WEB/src/app/components/songs/song-files/song-files.component.less new file mode 100644 index 0000000..608c4f2 --- /dev/null +++ b/WEB/src/app/components/songs/song-files/song-files.component.less @@ -0,0 +1,11 @@ +:host { + display: block; +} + +button { + font-size: 24px; + color: #aaa; + &:hover { + color: #000; + } +} diff --git a/WEB/src/app/components/songs/song-files/song-files.component.ts b/WEB/src/app/components/songs/song-files/song-files.component.ts new file mode 100644 index 0000000..82ef45f --- /dev/null +++ b/WEB/src/app/components/songs/song-files/song-files.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { Song } from 'src/app/models/song.model'; +import { SongsService } from 'src/app/data/songs.service'; +import { DownloadService } from 'src/app/data/download.service'; +import { faFileUpload, faDownload } from '@fortawesome/free-solid-svg-icons'; + +@Component({ + selector: 'app-song-files', + templateUrl: './song-files.component.html', + styleUrls: ['./song-files.component.less'] +}) +export class SongFilesComponent { + public song: Song; + public selectedSongId = 0; + public faFileUpload = faFileUpload; + public faDownload = faDownload; + public columns = ['name', 'action']; + + constructor( + private downloadService: DownloadService, + songService: SongsService, + change: ChangeDetectorRef + ) { + songService.selectedSong.subscribe(_ => { + if (_) { + this.selectedSongId = _.ID; + this.song = _; + } else { + this.selectedSongId = 0; + this.song = null; + } + change.markForCheck(); + }); + } + + public onClickNew(): void {} + public onClickDownload(id: number): void {} +} diff --git a/WEB/src/app/components/songs/song-new/song-new.component.less b/WEB/src/app/components/songs/song-new/song-new.component.less index 9ea5fbf..5d4e87f 100644 --- a/WEB/src/app/components/songs/song-new/song-new.component.less +++ b/WEB/src/app/components/songs/song-new/song-new.component.less @@ -1,3 +1,3 @@ :host { - display: block; - } \ No newline at end of file + display: block; +} diff --git a/WEB/src/app/components/songs/song-new/song-new.component.ts b/WEB/src/app/components/songs/song-new/song-new.component.ts index 925b9fb..15d163b 100644 --- a/WEB/src/app/components/songs/song-new/song-new.component.ts +++ b/WEB/src/app/components/songs/song-new/song-new.component.ts @@ -29,6 +29,7 @@ export class SongNewComponent implements OnInit { public onBack(): void { this.songsService.state = State.list; + this.songsService.resetSelectedSong(); } public onClickAdd(): void { diff --git a/WEB/src/app/components/songs/song/song.component.ts b/WEB/src/app/components/songs/song/song.component.ts index 2a6e524..f153a55 100644 --- a/WEB/src/app/components/songs/song/song.component.ts +++ b/WEB/src/app/components/songs/song/song.component.ts @@ -23,7 +23,6 @@ export class SongComponent { constructor( private songService: SongsService, - private downloadService: DownloadService, change: ChangeDetectorRef ) { songService.selectedSong.subscribe(_ => { @@ -41,11 +40,6 @@ export class SongComponent { this.songService.resetSelectedSong(); } - public onClickDownload(): void { - const id = this.song.ID; - this.downloadService.get(id, false); - } - public onClickEdit(): void { this.songService.state = State.edit; } diff --git a/WEB/src/app/components/songs/songs.component.html b/WEB/src/app/components/songs/songs.component.html index 7094d91..31ee981 100644 --- a/WEB/src/app/components/songs/songs.component.html +++ b/WEB/src/app/components/songs/songs.component.html @@ -1,4 +1,5 @@ + diff --git a/WEB/src/app/components/songs/table/table.component.html b/WEB/src/app/components/songs/table/table.component.html index 5a94336..e81849e 100644 --- a/WEB/src/app/components/songs/table/table.component.html +++ b/WEB/src/app/components/songs/table/table.component.html @@ -3,7 +3,13 @@ [class.pinned]="songsService.state !== State.list" >
-