From d9f2724101bc4bd231f53d8715ef50cec9cbfdb8 Mon Sep 17 00:00:00 2001 From: Benjamin Ifland Date: Thu, 28 Mar 2019 14:14:45 +0100 Subject: [PATCH] file detail edit form --- WEB/src/app/app.module.ts | 4 ++- .../songs/song-edit/song-edit.component.ts | 2 +- .../song-file-edit.component.html | 17 ++++++++++ .../song-file-edit.component.less | 6 ++++ .../song-file-edit.component.ts | 34 +++++++++++++++++++ .../song-files/song-files.component.html | 28 ++++++++++++++- .../songs/song-files/song-files.component.ts | 9 ++++- .../songs/song-new/song-new.component.ts | 2 +- 8 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html create mode 100644 WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less create mode 100644 WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts diff --git a/WEB/src/app/app.module.ts b/WEB/src/app/app.module.ts index 5ff2877..3a2e677 100644 --- a/WEB/src/app/app.module.ts +++ b/WEB/src/app/app.module.ts @@ -27,6 +27,7 @@ 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'; import { FileUploadModule } from 'ng2-file-upload'; +import { SongFileEditComponent } from './components/songs/song-file-edit/song-file-edit.component'; @NgModule({ declarations: [ @@ -37,7 +38,8 @@ import { FileUploadModule } from 'ng2-file-upload'; SongEditComponent, SongNewComponent, SongFormComponent, - SongFilesComponent + SongFilesComponent, + SongFileEditComponent ], imports: [ BrowserModule, diff --git a/WEB/src/app/components/songs/song-edit/song-edit.component.ts b/WEB/src/app/components/songs/song-edit/song-edit.component.ts index 8c82cbe..925a8d6 100644 --- a/WEB/src/app/components/songs/song-edit/song-edit.component.ts +++ b/WEB/src/app/components/songs/song-edit/song-edit.component.ts @@ -28,7 +28,7 @@ export class SongEditComponent implements OnInit { ) {} ngOnInit() { - this.form = this.editSongService.initEditForm(true); + this.form = this.editSongService.initSongEditForm(true); this.change.markForCheck(); } diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html new file mode 100644 index 0000000..87b48e4 --- /dev/null +++ b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html @@ -0,0 +1,17 @@ +
+ + + + + Art + + + {{ type.text }} + + + +
diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less new file mode 100644 index 0000000..63ccc69 --- /dev/null +++ b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less @@ -0,0 +1,6 @@ +form { + display: grid; + grid-template-columns: 2fr 1fr; + grid-column-gap: 10px; + padding-top: 10px; +} \ No newline at end of file diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts new file mode 100644 index 0000000..9cc4110 --- /dev/null +++ b/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts @@ -0,0 +1,34 @@ +import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons'; +import { FileType } from './../../../models/files-types.model.ts'; +import { FormGroup } from '@angular/forms'; +import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; +import { EditSongService } from 'src/app/data/edit-song.service'; + +@Component({ + selector: 'app-song-file-edit', + templateUrl: './song-file-edit.component.html', + styleUrls: ['./song-file-edit.component.less'] +}) +export class SongFileEditComponent implements OnInit, OnDestroy { + @Input() fileId: number; + @Output() back = new EventEmitter(); + public form: FormGroup; + public fileTypes = [ + {value: FileType.None, text: null}, + {value: FileType.Sheet, text: 'Text'}, + {value: FileType.Chords, text: 'Text + Akkorde'}, + {value: FileType.MuseScore, text: 'MuseScore'}, + ]; + + constructor(private editSongService: EditSongService) { } + + public ngOnInit(): void { + this.form = this.editSongService.initFileEditForm(this.fileId); + } + + public ngOnDestroy(): void { + this.form = null; + + } + +} 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 index f944ec1..ba4cc15 100644 --- a/WEB/src/app/components/songs/song-files/song-files.component.html +++ b/WEB/src/app/components/songs/song-files/song-files.component.html @@ -6,7 +6,14 @@ Angehängte Dateien - {{ element.Name }} + + {{ element.Name }} + + @@ -34,9 +41,28 @@ (click)="onClickDownload(element.ID, element.Name)" matTooltip="Datei herunterladen" matTooltipPosition="left" + *ngIf="fileEditId !== element.ID" > + + 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 index 7c0e377..9077b3d 100644 --- a/WEB/src/app/components/songs/song-files/song-files.component.ts +++ b/WEB/src/app/components/songs/song-files/song-files.component.ts @@ -2,7 +2,7 @@ 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'; +import { faFileUpload, faDownload, faEdit, faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons'; import { FileuploadFactory } from 'src/app/services/fileupload.factory'; import { FileUploader } from 'ng2-file-upload'; @@ -15,9 +15,12 @@ export class SongFilesComponent { public song: Song; public selectedSongId = 0; public faFileUpload = faFileUpload; + public faArrow = faLongArrowAltLeft; public faDownload = faDownload; + public faEdit = faEdit; public columns = ['name', 'action']; public newFileUploader: FileUploader; + public fileEditId: number; public fileOverNew = false; @@ -49,4 +52,8 @@ export class SongFilesComponent { public onFileOverNew(hover: boolean) { this.fileOverNew = hover; } + public onClickEdit(fileId: number) { + this.fileEditId = fileId; + } + } 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 15d163b..c19dee2 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 @@ -23,7 +23,7 @@ export class SongNewComponent implements OnInit { ) { } ngOnInit() { - this.form = this.editSongService.initEditForm(false); + this.form = this.editSongService.initSongEditForm(false); this.change.markForCheck(); }