diff --git a/WEB/src/app/app-routing.module.ts b/WEB/src/app/app-routing.module.ts index 69bc162..334302e 100644 --- a/WEB/src/app/app-routing.module.ts +++ b/WEB/src/app/app-routing.module.ts @@ -1,21 +1,21 @@ -import {SongsComponent} from './components/songs/songs.component'; import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; const routes: Routes = [ - { - path: 'songs', - component: SongsComponent - }, + { path: '', - redirectTo: 'songs', - pathMatch: 'full' + pathMatch: 'full', + redirectTo: 'songs' + }, + { + path: 'songs', + loadChildren: () => import('./songs/songs.module').then(_ => _.SongsModule) } ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], + imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], exports: [RouterModule] }) export class AppRoutingModule { diff --git a/WEB/src/app/app.component.less b/WEB/src/app/app.component.less index e69de29..b435c43 100644 --- a/WEB/src/app/app.component.less +++ b/WEB/src/app/app.component.less @@ -0,0 +1,4 @@ +:root { + display: block; + padding: 10px; +} diff --git a/WEB/src/app/app.module.ts b/WEB/src/app/app.module.ts index eb2c90c..94a8bd3 100644 --- a/WEB/src/app/app.module.ts +++ b/WEB/src/app/app.module.ts @@ -18,28 +18,11 @@ import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatProgressBarModule} from '@angular/material/progress-bar'; - -import {TableComponent} from './components/songs/table/table.component'; -import {SongsComponent} from './components/songs/songs.component'; -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'; import {FileUploadModule} from 'ng2-file-upload'; -import {SongFileEditComponent} from './components/songs/song-file-edit/song-file-edit.component'; @NgModule({ declarations: [ - AppComponent, - SongsComponent, - TableComponent, - SongComponent, - SongEditComponent, - SongNewComponent, - SongFormComponent, - SongFilesComponent, - SongFileEditComponent + AppComponent ], imports: [ BrowserModule, 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 deleted file mode 100644 index 4c6aa1b..0000000 --- a/WEB/src/app/components/songs/song-files/song-files.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -import {switchMap} from 'rxjs/operators'; -import {ChangeDetectorRef, Component} 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 {faDownload, faEdit, faFileUpload, faLongArrowAltLeft, faTrash} from '@fortawesome/free-solid-svg-icons'; -import {FileuploadFactory} from 'src/app/services/fileupload.factory'; -import {FileUploader} from 'ng2-file-upload'; - -@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 faTrash = faTrash; - public faArrow = faLongArrowAltLeft; - public faDownload = faDownload; - public faEdit = faEdit; - public columns = ['name', 'action']; - public newFileUploader: FileUploader; - public fileEditId: number; - - public fileOverNew = false; - - constructor( - private downloadService: DownloadService, - private fileuploadFactory: FileuploadFactory, - private songService: SongsService, - change: ChangeDetectorRef - ) { - songService.selectedSong.subscribe(_ => { - if (_) { - this.selectedSongId = _.ID; - this.song = _; - this.newFileUploader = FileuploadFactory.provideForNewFiles(_.ID); - this.newFileUploader.onCompleteItem = () => - songService.selectSong(_.ID).subscribe(); - this.newFileUploader.onProgressItem = () => change.markForCheck; - } else { - this.selectedSongId = 0; - this.song = null; - this.newFileUploader = null; - } - change.markForCheck(); - }); - } - - public onClickDownload(fileId: number, filename): void { - this.downloadService.get(this.selectedSongId, fileId, filename); - } - - public onFileOverNew(hover: boolean): void { - this.fileOverNew = hover; - } - - public onClickEdit(fileId: number): void { - this.fileEditId = fileId; - } - - public onClickDelete(fileId: number): void { - const songId = this.song.ID; - this.songService - .deleteFile$(songId, fileId) - .pipe(switchMap(() => this.songService.selectSong(songId))) - .subscribe(); - } -} diff --git a/WEB/src/app/components/songs/song/song.component.ts b/WEB/src/app/components/songs/song/song.component.ts deleted file mode 100644 index 0a16fcc..0000000 --- a/WEB/src/app/components/songs/song/song.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {SongsService} from 'src/app/data/songs.service'; -import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core'; -import {faEdit, faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons'; -import {Song} from 'src/app/models/song.model'; -import {State} from 'src/app/data/state'; - -@Component({ - selector: 'app-song', - templateUrl: './song.component.html', - styleUrls: ['./song.component.less'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class SongComponent { - public song: Song; - public faArrow = faLongArrowAltLeft; - public faEdit = faEdit; - public selectedSongId = 0; - - constructor( - private songService: SongsService, - change: ChangeDetectorRef - ) { - songService.selectedSong.subscribe(_ => { - if (_) { - this.selectedSongId = _.ID; - this.song = _; - } else { - this.selectedSongId = 0; - this.song = null; - } - change.markForCheck(); - }); - } - - public get text(): string[] { - return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : []; - } - - public get comments(): string[] { - return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : []; - } - - public onBack(): void { - this.songService.resetSelectedSong(); - } - - public onClickEdit(): void { - this.songService.state.next(State.edit); - } - - public renderSongType(songType: string) { - switch (songType) { - case 'Praise': - return {name: 'Lobpreis', color: '#99FFB8'}; - case 'Worship': - return {name: 'Anbetung', color: '#C999FF'}; - default: - return null; - } - } -} diff --git a/WEB/src/app/components/songs/songs.component.html b/WEB/src/app/components/songs/songs.component.html deleted file mode 100644 index e90a351..0000000 --- a/WEB/src/app/components/songs/songs.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
- -
- - - - -
-
diff --git a/WEB/src/app/data/odata.service.ts b/WEB/src/app/data/ODataBaseService.ts similarity index 95% rename from WEB/src/app/data/odata.service.ts rename to WEB/src/app/data/ODataBaseService.ts index 72a8b6f..bc2c8e6 100644 --- a/WEB/src/app/data/odata.service.ts +++ b/WEB/src/app/data/ODataBaseService.ts @@ -3,7 +3,7 @@ import {Observable} from 'rxjs'; import {map, tap} from 'rxjs/operators'; import {base} from './urls'; -export class OdataService { +export class ODataBaseService { private url: string; constructor(private odataService: ODataService, private entity: string) { @@ -21,14 +21,14 @@ export class OdataService { public get$( id: number, - properties: string[], + select: string[], expands: string[] ): Observable { const query = new ODataQuery(this.odataService, this.url) .entitySet(this.entity) .entityKey(id) .expand(expands.map(_ => new Expand(_))) - .select(properties); + .select(select); const get = query.get().pipe(map(_ => _.toEntity())); return get; diff --git a/WEB/src/app/data/edit-song.service.ts b/WEB/src/app/data/edit-song.service.ts index d1a9d0f..0174c89 100644 --- a/WEB/src/app/data/edit-song.service.ts +++ b/WEB/src/app/data/edit-song.service.ts @@ -2,19 +2,21 @@ import {SongsService} from 'src/app/data/songs.service'; import {Injectable} from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; import {switchMap} from 'rxjs/operators'; -import {Song} from '../models/song.model'; +import {Song} from '../songs/models/song.model'; import {Subscription} from 'rxjs'; +import {File} from '../songs/models/file.model'; @Injectable({ providedIn: 'root' }) export class EditSongService { + constructor(private songsService: SongsService) { } - public initSongEditForm(attachSync: boolean): FormGroup { + public initSongEditForm(attachSync: boolean, _song: Song): FormGroup { const song = attachSync - ? this.songsService.selectedSong.value + ? _song : this.defaultValues(); const form = new FormGroup({ Number: new FormControl(song.Number, { @@ -45,10 +47,7 @@ export class EditSongService { return form; } - public initFileEditForm(songId: number, fileId: number): { form: FormGroup, changeSubscription: Subscription } { - const file = this.songsService.selectedSong.value.Files.filter( - _ => _.ID === fileId - )[0]; + public initFileEditForm(songId: number, file: File): { form: FormGroup, changeSubscription: Subscription } { const form = new FormGroup({ Name: new FormControl(file.Name, { updateOn: 'blur', @@ -60,8 +59,7 @@ export class EditSongService { }); const changeSubscription = form.valueChanges.pipe( - switchMap(_ => this.songsService.updateFile$(songId, fileId, _.Name, _.FileType)), - switchMap(() => this.songsService.selectSong(songId)) + switchMap(_ => this.songsService.updateFile$(songId, file.ID, _.Name, _.FileType)), ).subscribe(); return {form: form, changeSubscription: changeSubscription}; @@ -73,7 +71,6 @@ export class EditSongService { form.controls[control].valueChanges .pipe( switchMap(value => this.songsService.patch$(song.ID, control, value)), - switchMap(() => this.songsService.selectSong(song.ID)) ) .subscribe(); }); diff --git a/WEB/src/app/data/songs.service.ts b/WEB/src/app/data/songs.service.ts index 21f1ccf..cdbacdb 100644 --- a/WEB/src/app/data/songs.service.ts +++ b/WEB/src/app/data/songs.service.ts @@ -1,22 +1,21 @@ import {HttpClient} from '@angular/common/http'; -import {FileType} from '../models/files-types.model.ts'; import {Injectable} from '@angular/core'; import {ODataService} from 'odata-v4-ng'; -import {OdataService} from './odata.service'; -import {Song} from '../models/song.model'; +import {ODataBaseService} from './ODataBaseService'; +import {Song} from '../songs/models/song.model'; import {BehaviorSubject, Observable} from 'rxjs'; -import {switchMap, tap} from 'rxjs/operators'; +import {tap} from 'rxjs/operators'; import {State} from './state'; import {base} from './urls'; +import {FileType} from '../songs/models/files-types.model'; @Injectable({ providedIn: 'root' }) -export class SongsService extends OdataService { +export class SongsService extends ODataBaseService { public state = new BehaviorSubject(State.list); public songs: BehaviorSubject = new BehaviorSubject([]); - public selectedSong: BehaviorSubject = new BehaviorSubject(null); constructor(odataService: ODataService, private httpClient: HttpClient) { super(odataService, 'songs'); @@ -30,40 +29,6 @@ export class SongsService extends OdataService { return list; } - public loadSongListAndGoTo$(id: number): Observable { - const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo']; - const list = this.list$(properties).pipe( - tap(_ => { - this.songs.next(_); - }), - switchMap(() => this.selectSong(id)) - ); - - return list; - } - - public selectSong(id: number): Observable { - this.state.next(State.read); - const filter = this.songs.value.filter(_ => _.ID === id); - const song = filter.length === 1 ? filter[0] : null; - if (!song) { - return; - } - - const get = this.get$(id, ['Text', 'Comments'], ['Files']).pipe(tap(_ => { - song.Text = _.Text; - song.Comments = _.Comments; - song.Files = _.Files; - this.selectedSong.next(song); - })); - - return get; - } - - public resetSelectedSong() { - this.state.next(State.list); - this.selectedSong.next(null); - } public patch$(id: number, control: string, value: any): Observable { const patch = super.patch$(id, control, value).pipe( @@ -72,7 +37,6 @@ export class SongsService extends OdataService { const song = songs.filter(_ => _.ID === id)[0]; song[control] = value; this.songs.next(songs); - this.selectedSong.next(song); }) ); @@ -80,9 +44,7 @@ export class SongsService extends OdataService { } public saveNewSong$(values: any): Observable { - const newSong = super - .post$(values) - .pipe(switchMap(_ => this.loadSongListAndGoTo$(_.ID))); + const newSong = super.post$(values); return newSong; } @@ -93,16 +55,7 @@ export class SongsService extends OdataService { name: string, fileType: FileType ): Observable { - const url = - base + - '/api/songs/' + - songId + - '/files/' + - fileId + - '/edit?Name=' + - name + - '&FileType=' + - fileType; + const url = `${base}/api/songs/${songId}/files/${fileId}/edit?Name=${name}&FileType=${fileType}`; const get = this.httpClient.get(url); return get; } @@ -111,13 +64,7 @@ export class SongsService extends OdataService { songId: number, fileId: number ): Observable { - const url = - base + - '/api/songs/' + - songId + - '/files/' + - fileId + - '/delete'; + const url = `${base}/api/songs/${songId}/files/${fileId}/delete`; const get = this.httpClient.get(url); return get; } diff --git a/WEB/src/app/songs/components/songs/songs.component.html b/WEB/src/app/songs/components/songs/songs.component.html new file mode 100644 index 0000000..c5f1577 --- /dev/null +++ b/WEB/src/app/songs/components/songs/songs.component.html @@ -0,0 +1,6 @@ +
+ +
+ +
+
diff --git a/WEB/src/app/components/songs/songs.component.less b/WEB/src/app/songs/components/songs/songs.component.less similarity index 85% rename from WEB/src/app/components/songs/songs.component.less rename to WEB/src/app/songs/components/songs/songs.component.less index 4bc65a9..4d45429 100644 --- a/WEB/src/app/components/songs/songs.component.less +++ b/WEB/src/app/songs/components/songs/songs.component.less @@ -3,6 +3,5 @@ } .song-container { - padding: 10px; flex-flow: column; } diff --git a/WEB/src/app/components/songs/table/table.component.html b/WEB/src/app/songs/components/songs/table/table.component.html similarity index 94% rename from WEB/src/app/components/songs/table/table.component.html rename to WEB/src/app/songs/components/songs/table/table.component.html index a7cedff..22e0849 100644 --- a/WEB/src/app/components/songs/table/table.component.html +++ b/WEB/src/app/songs/components/songs/table/table.component.html @@ -4,11 +4,11 @@ >
@@ -65,10 +65,10 @@
diff --git a/WEB/src/app/components/songs/table/table.component.less b/WEB/src/app/songs/components/songs/table/table.component.less similarity index 57% rename from WEB/src/app/components/songs/table/table.component.less rename to WEB/src/app/songs/components/songs/table/table.component.less index f57a3bc..5b92298 100644 --- a/WEB/src/app/components/songs/table/table.component.less +++ b/WEB/src/app/songs/components/songs/table/table.component.less @@ -1,10 +1,26 @@ table { border-radius: 8px; background: #fffe; + + tr.selected { + background-color: #0002; + } + + tr:hover { + cursor: pointer; + background-color: #0001; + + td { + color: #ff9900; + } + } + + td.mat-cell { + padding: 0 5px; + } } .table-container { - //height: 100%; overflow: auto; position: relative; } @@ -23,3 +39,4 @@ table { } + diff --git a/WEB/src/app/components/songs/table/table.component.ts b/WEB/src/app/songs/components/songs/table/table.component.ts similarity index 68% rename from WEB/src/app/components/songs/table/table.component.ts rename to WEB/src/app/songs/components/songs/table/table.component.ts index 534ea5a..5c4dcbf 100644 --- a/WEB/src/app/components/songs/table/table.component.ts +++ b/WEB/src/app/songs/components/songs/table/table.component.ts @@ -1,4 +1,4 @@ -import {SongsService} from '../../../data/songs.service'; +import {SongsService} from '../../../../data/songs.service'; import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core'; import {State} from 'src/app/data/state'; import {faFileMedical} from '@fortawesome/free-solid-svg-icons'; @@ -12,7 +12,6 @@ import {map} from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush }) export class TableComponent { - public selectedSongId = 0; public State = State; public faNew = faFileMedical; public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo']; @@ -22,11 +21,6 @@ export class TableComponent { public songsService: SongsService, private change: ChangeDetectorRef ) { - songsService.selectedSong.subscribe(_ => { - this.selectedSongId = _ ? _.ID : 0; - this.change.markForCheck(); - } - ); } public get columns(): Observable { @@ -43,16 +37,4 @@ export class TableComponent { return null; } } - - public onClick(id: number): void { - this.songsService.selectSong(id).subscribe(); - this.change.detectChanges(); - } - - public onClickNew(): void { - this.songsService.selectSong(null).subscribe(); - this.songsService.state.next(State.new); - this.change.detectChanges(); - } - } diff --git a/WEB/src/app/models/file.model.ts b/WEB/src/app/songs/models/file.model.ts similarity index 63% rename from WEB/src/app/models/file.model.ts rename to WEB/src/app/songs/models/file.model.ts index 8283ebd..d9c4d8d 100644 --- a/WEB/src/app/models/file.model.ts +++ b/WEB/src/app/songs/models/file.model.ts @@ -1,4 +1,4 @@ -import {FileType} from './files-types.model.ts'; +import {FileType} from './files-types.model'; export interface File { ID: number; diff --git a/WEB/src/app/models/files-types.model.ts.ts b/WEB/src/app/songs/models/files-types.model.ts similarity index 100% rename from WEB/src/app/models/files-types.model.ts.ts rename to WEB/src/app/songs/models/files-types.model.ts diff --git a/WEB/src/app/models/song.model.ts b/WEB/src/app/songs/models/song.model.ts similarity index 100% rename from WEB/src/app/models/song.model.ts rename to WEB/src/app/songs/models/song.model.ts diff --git a/WEB/src/app/components/songs/song-edit/song-edit.component.html b/WEB/src/app/songs/modules/edit/song-edit/song-edit.component.html similarity index 63% rename from WEB/src/app/components/songs/song-edit/song-edit.component.html rename to WEB/src/app/songs/modules/edit/song-edit/song-edit.component.html index d671e4a..41f16d7 100644 --- a/WEB/src/app/components/songs/song-edit/song-edit.component.html +++ b/WEB/src/app/songs/modules/edit/song-edit/song-edit.component.html @@ -2,7 +2,7 @@
-
@@ -14,11 +14,5 @@ -
diff --git a/WEB/src/app/components/songs/song-edit/song-edit.component.less b/WEB/src/app/songs/modules/edit/song-edit/song-edit.component.less similarity index 100% rename from WEB/src/app/components/songs/song-edit/song-edit.component.less rename to WEB/src/app/songs/modules/edit/song-edit/song-edit.component.less diff --git a/WEB/src/app/components/songs/song-edit/song-edit.component.ts b/WEB/src/app/songs/modules/edit/song-edit/song-edit.component.ts similarity index 51% rename from WEB/src/app/components/songs/song-edit/song-edit.component.ts rename to WEB/src/app/songs/modules/edit/song-edit/song-edit.component.ts index a912bb9..b98af4a 100644 --- a/WEB/src/app/components/songs/song-edit/song-edit.component.ts +++ b/WEB/src/app/songs/modules/edit/song-edit/song-edit.component.ts @@ -1,9 +1,9 @@ -import {SongsService} from 'src/app/data/songs.service'; import {FormGroup} from '@angular/forms'; -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; import {EditSongService} from 'src/app/data/edit-song.service'; import {faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons'; -import {State} from 'src/app/data/state'; +import {ActivatedRoute} from '@angular/router'; +import {Song} from '../../../models/song.model'; @Component({ selector: 'app-song-edit', @@ -14,21 +14,16 @@ import {State} from 'src/app/data/state'; export class SongEditComponent implements OnInit { public form: FormGroup = null; public faArrow = faLongArrowAltLeft; - + public songId: number; constructor( - private editSongService: EditSongService, - private songsService: SongsService, - private change: ChangeDetectorRef - ) { + private editSongService: EditSongService, private route: ActivatedRoute) { } ngOnInit() { - this.form = this.editSongService.initSongEditForm(true); - this.change.markForCheck(); - } - - public onBack(): void { - this.songsService.state.next(State.read); + this.route.data.subscribe((data: { song: Song }) => { + this.songId = data.song.ID; + this.form = this.editSongService.initSongEditForm(true, data.song); + }); } } diff --git a/WEB/src/app/components/songs/song-new/song-new.component.html b/WEB/src/app/songs/modules/new/song-new/song-new.component.html similarity index 100% rename from WEB/src/app/components/songs/song-new/song-new.component.html rename to WEB/src/app/songs/modules/new/song-new/song-new.component.html diff --git a/WEB/src/app/components/songs/song-new/song-new.component.less b/WEB/src/app/songs/modules/new/song-new/song-new.component.less similarity index 100% rename from WEB/src/app/components/songs/song-new/song-new.component.less rename to WEB/src/app/songs/modules/new/song-new/song-new.component.less diff --git a/WEB/src/app/components/songs/song-new/song-new.component.ts b/WEB/src/app/songs/modules/new/song-new/song-new.component.ts similarity index 61% rename from WEB/src/app/components/songs/song-new/song-new.component.ts rename to WEB/src/app/songs/modules/new/song-new/song-new.component.ts index e3e9879..b610cf8 100644 --- a/WEB/src/app/components/songs/song-new/song-new.component.ts +++ b/WEB/src/app/songs/modules/new/song-new/song-new.component.ts @@ -1,9 +1,9 @@ -import {EditSongService} from '../../../data/edit-song.service'; +import {EditSongService} from '../../../../data/edit-song.service'; import {FormGroup} from '@angular/forms'; -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; import {faLongArrowAltLeft, faSave} from '@fortawesome/free-solid-svg-icons'; -import {State} from 'src/app/data/state'; import {SongsService} from 'src/app/data/songs.service'; +import {Router} from '@angular/router'; @Component({ selector: 'app-song-new', @@ -19,22 +19,18 @@ export class SongNewComponent implements OnInit { constructor( private editSongService: EditSongService, private songsService: SongsService, - private change: ChangeDetectorRef + private router: Router ) { } ngOnInit() { - this.form = this.editSongService.initSongEditForm(false); - this.change.markForCheck(); - } - - public onBack(): void { - this.songsService.state.next(State.list); - this.songsService.resetSelectedSong(); + this.form = this.editSongService.initSongEditForm(false, null); } public onClickAdd(): void { - this.songsService.saveNewSong$(this.form.value).subscribe(); + this.songsService.saveNewSong$(this.form.value).subscribe(song => { + this.router.navigateByUrl('/songs/' + song.ID + '/read'); + }); } } diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html b/WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.html similarity index 100% rename from WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html rename to WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.html diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less b/WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.less similarity index 100% rename from WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less rename to WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.less diff --git a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts b/WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.ts similarity index 65% rename from WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts rename to WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.ts index ee9ad8d..742e740 100644 --- a/WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts +++ b/WEB/src/app/songs/modules/read/files/edit/song-files-edit.component.ts @@ -1,17 +1,18 @@ -import {SongsService} from '../../../data/songs.service'; -import {FileType} from '../../../models/files-types.model.ts'; import {FormGroup} from '@angular/forms'; import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core'; import {EditSongService} from 'src/app/data/edit-song.service'; import {Subscription} from 'rxjs'; +import {FileType} from '../../../../models/files-types.model'; +import {File} from '../../../../models/file.model'; @Component({ selector: 'app-song-file-edit', - templateUrl: './song-file-edit.component.html', - styleUrls: ['./song-file-edit.component.less'] + templateUrl: './song-files-edit.component.html', + styleUrls: ['./song-files-edit.component.less'] }) -export class SongFileEditComponent implements OnInit, OnDestroy { - @Input() fileId: number; +export class SongFilesEditComponent implements OnInit, OnDestroy { + @Input() file: File; + @Input() songId: number; @Output() back = new EventEmitter(); public form: FormGroup; public subscription: Subscription; @@ -23,15 +24,13 @@ export class SongFileEditComponent implements OnInit, OnDestroy { ]; constructor( - private editSongService: EditSongService, - private songService: SongsService - ) { + private editSongService: EditSongService) { } public ngOnInit(): void { const form = this.editSongService.initFileEditForm( - this.songService.selectedSong.value.ID, - this.fileId + this.songId, + this.file, ); this.form = form.form; this.subscription = form.changeSubscription; diff --git a/WEB/src/app/components/songs/song-files/song-files.component.html b/WEB/src/app/songs/modules/read/files/files.component.html similarity index 96% rename from WEB/src/app/components/songs/song-files/song-files.component.html rename to WEB/src/app/songs/modules/read/files/files.component.html index 747c550..422c8e0 100644 --- a/WEB/src/app/components/songs/song-files/song-files.component.html +++ b/WEB/src/app/songs/modules/read/files/files.component.html @@ -1,4 +1,4 @@ -
+
@@ -11,7 +11,8 @@ diff --git a/WEB/src/app/components/songs/song-files/song-files.component.less b/WEB/src/app/songs/modules/read/files/files.component.less similarity index 100% rename from WEB/src/app/components/songs/song-files/song-files.component.less rename to WEB/src/app/songs/modules/read/files/files.component.less diff --git a/WEB/src/app/songs/modules/read/files/files.component.ts b/WEB/src/app/songs/modules/read/files/files.component.ts new file mode 100644 index 0000000..f5dd74d --- /dev/null +++ b/WEB/src/app/songs/modules/read/files/files.component.ts @@ -0,0 +1,56 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Song} from 'src/app/songs/models/song.model'; +import {SongsService} from 'src/app/data/songs.service'; +import {DownloadService} from 'src/app/data/download.service'; +import {faDownload, faEdit, faFileUpload, faLongArrowAltLeft, faTrash} from '@fortawesome/free-solid-svg-icons'; +import {FileuploadFactory} from 'src/app/songs/services/fileupload.factory'; +import {FileUploader} from 'ng2-file-upload'; + +@Component({ + selector: 'app-song-files', + templateUrl: './files.component.html', + styleUrls: ['./files.component.less'] +}) +export class SongFilesComponent implements OnInit { + @Input() public song: Song; + public faFileUpload = faFileUpload; + public faTrash = faTrash; + public faArrow = faLongArrowAltLeft; + public faDownload = faDownload; + public faEdit = faEdit; + public columns = ['name', 'action']; + public newFileUploader: FileUploader; + public fileEditId: number; + + public fileOverNew = false; + + constructor( + private downloadService: DownloadService, + private fileuploadFactory: FileuploadFactory, + private songService: SongsService + ) { + } + + public ngOnInit(): void { + this.newFileUploader = FileuploadFactory.provideForNewFiles(this.song.ID); + } + + public onClickDownload(fileId: number, filename): void { + this.downloadService.get(this.song.ID, fileId, filename); + } + + public onFileOverNew(hover: boolean): void { + this.fileOverNew = hover; + } + + public onClickEdit(fileId: number): void { + this.fileEditId = fileId; + } + + public onClickDelete(fileId: number): void { + const songId = this.song.ID; + this.songService + .deleteFile$(songId, fileId) + .subscribe(); + } +} diff --git a/WEB/src/app/components/songs/song/song.component.html b/WEB/src/app/songs/modules/read/read/read.component.html similarity index 86% rename from WEB/src/app/components/songs/song/song.component.html rename to WEB/src/app/songs/modules/read/read/read.component.html index a26295f..6c88e97 100644 --- a/WEB/src/app/components/songs/song/song.component.html +++ b/WEB/src/app/songs/modules/read/read/read.component.html @@ -1,8 +1,8 @@ -
+
-
@@ -23,7 +23,7 @@

{{ line }}

- diff --git a/WEB/src/app/components/songs/song/song.component.less b/WEB/src/app/songs/modules/read/read/read.component.less similarity index 100% rename from WEB/src/app/components/songs/song/song.component.less rename to WEB/src/app/songs/modules/read/read/read.component.less diff --git a/WEB/src/app/songs/modules/read/read/read.component.ts b/WEB/src/app/songs/modules/read/read/read.component.ts new file mode 100644 index 0000000..641c7c2 --- /dev/null +++ b/WEB/src/app/songs/modules/read/read/read.component.ts @@ -0,0 +1,34 @@ +import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; +import {faEdit, faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons'; +import {Song} from 'src/app/songs/models/song.model'; + +@Component({ + selector: 'app-song-read', + templateUrl: './read.component.html', + styleUrls: ['./read.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SongReadComponent { + @Input() public song: Song; + public faArrow = faLongArrowAltLeft; + public faEdit = faEdit; + + public get text(): string[] { + return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : []; + } + + public get comments(): string[] { + return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : []; + } + + public renderSongType(songType: string) { + switch (songType) { + case 'Praise': + return {name: 'Lobpreis', color: '#99FFB8'}; + case 'Worship': + return {name: 'Anbetung', color: '#C999FF'}; + default: + return null; + } + } +} diff --git a/WEB/src/app/components/songs/song-form/keys.ts b/WEB/src/app/songs/modules/widget-modules/song-form/keys.ts similarity index 100% rename from WEB/src/app/components/songs/song-form/keys.ts rename to WEB/src/app/songs/modules/widget-modules/song-form/keys.ts diff --git a/WEB/src/app/components/songs/song-form/song-form.component.html b/WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.html similarity index 100% rename from WEB/src/app/components/songs/song-form/song-form.component.html rename to WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.html diff --git a/WEB/src/app/components/songs/song-form/song-form.component.less b/WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.less similarity index 100% rename from WEB/src/app/components/songs/song-form/song-form.component.less rename to WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.less diff --git a/WEB/src/app/components/songs/song-form/song-form.component.ts b/WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.ts similarity index 100% rename from WEB/src/app/components/songs/song-form/song-form.component.ts rename to WEB/src/app/songs/modules/widget-modules/song-form/song-form.component.ts diff --git a/WEB/src/app/services/animation.ts b/WEB/src/app/songs/services/animation.ts similarity index 100% rename from WEB/src/app/services/animation.ts rename to WEB/src/app/songs/services/animation.ts diff --git a/WEB/src/app/services/fileupload.factory.ts b/WEB/src/app/songs/services/fileupload.factory.ts similarity index 80% rename from WEB/src/app/services/fileupload.factory.ts rename to WEB/src/app/songs/services/fileupload.factory.ts index b6f94a5..b573155 100644 --- a/WEB/src/app/services/fileupload.factory.ts +++ b/WEB/src/app/songs/services/fileupload.factory.ts @@ -1,4 +1,4 @@ -import {base} from '../data/urls'; +import {base} from '../../data/urls'; import {Injectable} from '@angular/core'; import {FileUploader} from 'ng2-file-upload'; @@ -8,7 +8,7 @@ import {FileUploader} from 'ng2-file-upload'; export class FileuploadFactory { public static provideForNewFiles(songId: number): FileUploader { const uploader = new FileUploader({ - url: base + '/api/songs/' + songId + '/files', + url: `${base}/api/songs/${songId}/files`, autoUpload: true, isHTML5: true }); diff --git a/WEB/src/styles.less b/WEB/src/styles.less index 40df7d9..114e428 100644 --- a/WEB/src/styles.less +++ b/WEB/src/styles.less @@ -1,122 +1,108 @@ /* You can add global styles to this file, and also import other style files */ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; -body { - margin: 0px; -} - html { background-image: url(https://images.unsplash.com/photo-1476136236990-838240be4859?ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80); } -.page-container { - padding: 20px; - box-sizing: border-box; - overflow: hidden; - border-radius: 8px; +body { + margin: 0; - .mat-table tbody { - background: none; + app-root { + padding: 10px; + display: block; } - th.mat-header-cell:first-of-type { - border-top-left-radius: 8px; - } + .page-container { + padding: 10px; + box-sizing: border-box; + overflow: hidden; + border-radius: 8px; - th.mat-header-cell:last-of-type { - border-top-right-radius: 8px; - } - - .mat-table thead { - border-top-right-radius: 8px; - border-top-left-radius: 8px; - } - - tbody { - tr.selected { - background-color: #0002; + .mat-table tbody { + background: none; } - tr:hover { - cursor: pointer; - background-color: #0001; - - td { - color: #ff9900; - } - } - - td.mat-cell { - padding: 0 5px; - } - } - - &.pinned { - padding: 0; - max-width: 300px; - border-radius: 0; - th.mat-header-cell:first-of-type { - border-top-left-radius: 0px; + border-top-left-radius: 8px; } th.mat-header-cell:last-of-type { - border-top-right-radius: 0px; + border-top-right-radius: 8px; } .mat-table thead { - border-top-right-radius: 0px; - border-top-left-radius: 0px; + border-top-right-radius: 8px; + border-top-left-radius: 8px; } - } -} - -.mat-card { - width: 600px; - border-radius: 8px; - background: #fffd; - margin: 10px; - box-sizing: border-box; -} - -.mat-card-title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 520px; -} - -.mat-card-content { - white-space: pre-wrap; -} - -.song-detail-container { - .mat-form-field-infix { - width: 80px; - } - - .mat-radio-button { - margin: 15px 10px 0 10px; - } - - &.files { - .mat-card { + &.pinned { padding: 0; - } + max-width: 300px; + border-radius: 0; - table { - width: 100%; - background: none; - box-shadow: none; - } + th.mat-header-cell:first-of-type { + border-top-left-radius: 0; + } - td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type, th.mat-header-cell:last-of-type { - padding-right: 8px; - text-align: right; + th.mat-header-cell:last-of-type { + border-top-right-radius: 0; + } + + .mat-table thead { + border-top-right-radius: 0; + border-top-left-radius: 0; + } } } + + .mat-card { + width: 600px; + border-radius: 8px; + background: #fffd; + margin: 10px; + box-sizing: border-box; + } + + .mat-card-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 520px; + } + + .mat-card-content { + white-space: pre-wrap; + } + + .song-detail-container { + + + .mat-form-field-infix { + width: 80px; + } + + .mat-radio-button { + margin: 15px 10px 0 10px; + } + + &.files { + .mat-card { + padding: 0; + } + + table { + width: 100%; + background: none; + box-shadow: none; + } + + td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type, th.mat-header-cell:last-of-type { + padding-right: 8px; + text-align: right; + } + } + } + } - -