benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

edit song

Browse Source
This commit is contained in:
Benjamin Ifland
2019-03-25 12:19:33 +01:00
parent a46dae93db
commit 38268c3fc3
10 changed files with 107 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
WEB/src/app/components/songs/song-edit/song-edit.component.html
View File

@@ -7,7 +7,7 @@
</button>
</div>
<mat-card-title>Titel bearbeiten</mat-card-title>
<!-- <mat-card-subtitle>{{ song.Key }} - {{ song.Tempo }}</mat-card-subtitle> -->
<mat-card-subtitle>Daten werden nach der Eingabe automatisch gespeichert</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<form>
@@ -47,6 +47,14 @@
[matTextareaAutosize]="true"
></textarea>
</mat-form-field>
<mat-form-field>
<textarea
matInput
placeholder="Kommentare"
[formControl]="form.controls.Comments"
[matTextareaAutosize]="true"
></textarea>
</mat-form-field>
</form>
</mat-card-content>
<!-- <mat-card-actions>

2
WEB/src/app/components/songs/song/song.component.html
View File

@@ -11,6 +11,8 @@
</mat-card-header>
<mat-card-content>
<p *ngFor="let line of text">{{ line }}</p>
<br />
<p *ngFor="let line of comments">{{ line }}</p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="onClickDownload()">Herunterladen</button>

26
WEB/src/app/components/songs/song/song.component.less
View File

@@ -1,22 +1,4 @@
.mat-card {
width: 500px;
border-radius: 8px;
background: #fffe;
margin: 20px;
box-sizing: border-box;
}
.mat-card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 420px;
}
.mat-card-content {
white-space: pre-wrap;
}
.song-detail-container {
margin-left: 30vw;
}
p {
margin: 0;
min-height: 10px;
}

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

@@ -52,6 +52,10 @@ export class SongComponent {
}
public get text(): string[] {
return this.song.Text.split(/\r?\n/).filter(_ => _ !== ' ');
return this.song.Text ? this.song.Text.split(/\r?\n/) : [];
}
public get comments(): string[] {
return this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
}
}

43
WEB/src/app/data/edit-song.service.ts
View File

@@ -1,27 +1,40 @@
import { Song } from 'src/app/models/song.model';
import { SongsService } from 'src/app/data/songs.service';
import { Injectable } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { switchMap, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EditSongService {
constructor(private songsService: SongsService) {}
constructor(private songsService: SongsService) { }
public initEditForm(): FormGroup {
const song = this.songsService.selectedSong.value;
const form = new FormGroup({
ID: new FormControl(song.ID, { updateOn: 'blur' }),
Number: new FormControl(song.Number, { updateOn: 'blur' }),
Name: new FormControl(song.Name, {
updateOn: 'blur',
validators: Validators.required
}),
Text: new FormControl(song.Text, { updateOn: 'blur' }),
SongType: new FormControl(song.SongType, {
updateOn: 'blur',
validators: Validators.required
}),
Key: new FormControl(song.Key, { updateOn: 'blur' }),
Tempo: new FormControl(song.Tempo, { updateOn: 'blur' }),
Comments: new FormControl(song.Comments, { updateOn: 'blur' }),
});
public initEditForm(): FormGroup {
const song = this.songsService.selectedSong.value;
const form = new FormGroup({
ID: new FormControl(song.ID),
Number: new FormControl(song.Number),
Name: new FormControl(song.Name, Validators.required),
Text: new FormControl(song.Text),
SongType: new FormControl(song.SongType, Validators.required),
Key: new FormControl(song.Key),
Tempo: new FormControl(song.Tempo)
});
const controls = Object.keys(form.controls);
controls.forEach(control => {
form.controls[control].valueChanges.pipe(
switchMap(value => this.songsService.patch(song.ID, control, value))
).subscribe();
});
return form;
}
return form;
}
}

38
WEB/src/app/data/odata.service.ts
View File

@@ -1,29 +1,45 @@
import { ODataService, ODataQuery } from 'odata-v4-ng';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { base } from './urls';
import { ODataService, ODataQuery } from "odata-v4-ng";
import { Observable } from "rxjs";
import { map, tap } from "rxjs/operators";
import { base } from "./urls";
export class OdataService {
private url: string;
constructor(private odataService: ODataService, private entity: string) {
this.url = base + '/odata/';
this.url = base + "/odata/";
}
public list<TResponse>(): Observable<TResponse[]> {
const query = new ODataQuery(this.odataService, this.url).entitySet(
this.entity
);
public list<TResponse>(properties: string[]): Observable<TResponse[]> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.select(properties);
const get = query.get().pipe(map(_ => _.toPropertyValue<TResponse[]>()));
return get;
}
public get<TResponse>(id: number): Observable<TResponse> {
public get<TResponse>(
id: number,
properties: string[]
): Observable<TResponse> {
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id);
.entityKey(id)
.select(properties);
const get = query.get().pipe(map(_ => _.toEntity<TResponse>()));
return get;
}
public patch(id: number, control: string, value: any): Observable<boolean> {
const valueSet = { [control]: value };
const query = new ODataQuery(this.odataService, this.url)
.entitySet(this.entity)
.entityKey(id);
const get = query.patch(valueSet).pipe(
map(() => true)
);
return get;
}
}

29
WEB/src/app/data/songs.service.ts
View File

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core';
import { ODataService } from 'odata-v4-ng';
import { OdataService } from './odata.service';
import { Song } from '../models/song.model';
import { BehaviorSubject } from 'rxjs';
import { BehaviorSubject, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
@@ -18,17 +19,39 @@ export class SongsService extends OdataService {
}
public loadSongList(): void {
this.list<Song>().subscribe(_ => this.songs.next(_));
const properties = ['ID', 'Name', 'Number', 'SongType', 'Key', 'Tempo'];
this.list<Song>(properties).subscribe(_ => this.songs.next(_));
}
public selectSong(id: number): void {
this.edit = false;
const filter = this.songs.value.filter(_ => _.ID === id);
const song = filter.length === 1 ? filter[0] : null;
this.selectedSong.next(song);
if (!song) {
return;
}
this.get<Song>(id, ['Text', 'Comments']).subscribe(_ => {
song.Text = _.Text;
song.Comments = _.Comments;
this.selectedSong.next(song);
});
}
public resetSelectedSong() {
this.selectedSong.next(null);
}
public patch(id: number, control: string, value: any): Observable<boolean> {
const patch = super.patch(id, control, value).pipe(
tap(() => {
const songs = this.songs.value;
const song = songs.filter(_ => _.ID === id)[0];
song[control] = value;
this.songs.next(songs);
this.selectedSong.next(song);
})
);
return patch;
}
}

3
WEB/src/app/data/urls.ts
View File

@@ -1 +1,2 @@
export const base = 'http://test.benjamin-ifland.de/';
// export const base = 'http://192.168.178.20/API';
export const base = 'http://test.benjamin-ifland.de';

4
WEB/src/app/services/animation.ts
View File

@@ -3,11 +3,11 @@ import { trigger, transition, style, animate } from '@angular/animations';
export const blend = trigger('blend', [
transition(':enter', [
style({ opacity: 0 }),
animate('700ms', style({ opacity: 0 })),
animate('200ms', style({ opacity: 0 })),
animate('300ms', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }),
animate('300ms', style({ opacity: 0 }))
])
]);
]);

4
WEB/src/styles.less
View File

@@ -73,7 +73,7 @@ html {
}
.mat-card {
width: 500px;
width: 600px;
border-radius: 8px;
background: #fffd;
margin: 20px;
@@ -84,7 +84,7 @@ html {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 420px;
width: 520px;
}
.mat-card-content {