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 }}
-
+
bearbeiten
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;
+ }
+ }
+ }
+
}
-
-