From f0fb7ed4f81e64b53288c7942591634b48a37b1a Mon Sep 17 00:00:00 2001 From: smuddyx Date: Thu, 10 Nov 2022 22:05:01 +0100 Subject: [PATCH] user can change show type and date --- .../modules/shows/edit/edit.component.html | 31 +++++++++ .../modules/shows/edit/edit.component.less | 9 +++ src/app/modules/shows/edit/edit.component.ts | 65 +++++++++++++++++++ .../modules/shows/show/show.component.html | 49 ++++++-------- src/app/modules/shows/show/show.component.ts | 25 ++++++- src/app/modules/shows/shows-routing.module.ts | 5 ++ src/app/modules/shows/shows.module.ts | 3 +- 7 files changed, 153 insertions(+), 34 deletions(-) create mode 100644 src/app/modules/shows/edit/edit.component.html create mode 100644 src/app/modules/shows/edit/edit.component.less create mode 100644 src/app/modules/shows/edit/edit.component.ts diff --git a/src/app/modules/shows/edit/edit.component.html b/src/app/modules/shows/edit/edit.component.html new file mode 100644 index 0000000..b354d23 --- /dev/null +++ b/src/app/modules/shows/edit/edit.component.html @@ -0,0 +1,31 @@ +
+ +
+ + Art der Veranstaltung + + + {{ + key | showType + }} + + + {{ + key | showType + }} + + + + + Datum + + + + +
+ + + Speichern + + +
diff --git a/src/app/modules/shows/edit/edit.component.less b/src/app/modules/shows/edit/edit.component.less new file mode 100644 index 0000000..0c0391c --- /dev/null +++ b/src/app/modules/shows/edit/edit.component.less @@ -0,0 +1,9 @@ +.split { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 20px; +} + +.inline { + width: 100%; +} diff --git a/src/app/modules/shows/edit/edit.component.ts b/src/app/modules/shows/edit/edit.component.ts new file mode 100644 index 0000000..c613854 --- /dev/null +++ b/src/app/modules/shows/edit/edit.component.ts @@ -0,0 +1,65 @@ +import {Component, OnInit} from '@angular/core'; +import {ShowDataService} from '../services/show-data.service'; +import {Observable, take} from 'rxjs'; +import {Show} from '../services/show'; +import {ShowService} from '../services/show.service'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; +import {ActivatedRoute, Router} from '@angular/router'; +import {faSave} from '@fortawesome/free-solid-svg-icons'; +import {map, switchMap} from 'rxjs/operators'; + +@Component({ + selector: 'app-edit', + templateUrl: './edit.component.html', + styleUrls: ['./edit.component.less'], +}) +export class EditComponent implements OnInit { + public shows$: Observable; + public showTypePublic = ShowService.SHOW_TYPE_PUBLIC; + public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE; + public form = new FormGroup({ + id: new FormControl(null), + date: new FormControl(null, Validators.required), + showType: new FormControl(null, Validators.required), + }); + public faSave = faSave; + + public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) { + this.shows$ = showDataService.list$; + } + + public ngOnInit(): void { + this.form.reset(); + + this.activatedRoute.params + .pipe( + map(param => param as {showId: string}), + map(param => param.showId), + switchMap((showId: string) => this.showService.read$(showId)), + take(1) + ) + .subscribe(show => { + this.form.setValue({ + id: show?.id || null, + date: show?.date.toDate() || null, + showType: show?.showType || null, + }); + }); + } + + public async onSave(): Promise { + this.form.markAllAsTouched(); + if (!this.form.valid) { + return; + } + + await this.showService.update$( + this.form.value.id as string, + { + date: this.form.value.date, + showType: this.form.value.showType, + } as Partial + ); + await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`); + } +} diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html index f0509af..44949b7 100644 --- a/src/app/modules/shows/show/show.component.html +++ b/src/app/modules/shows/show/show.component.html @@ -5,14 +5,16 @@ show.date.toDate() | date: 'dd.MM.yyyy' }} - {{ getStatus(show) }}" > - {{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von +

{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von - +

Text anzeigen
- - + +
- + Archivieren - + Wiederherstellen - + Veröffentlichen - + Veröffentlichung zurückziehen + + Ändern + - Herunterladen + + Herunterladen - Ablauf für Lobpreisgruppe + + Ablauf für Lobpreisgruppe - Handout mit Copyright Infos + + Handout mit Copyright Infos diff --git a/src/app/modules/shows/show/show.component.ts b/src/app/modules/shows/show/show.component.ts index a957bd2..90c6cfa 100644 --- a/src/app/modules/shows/show/show.component.ts +++ b/src/app/modules/shows/show/show.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {filter, map, switchMap, tap} from 'rxjs/operators'; -import {ActivatedRoute} from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; import {ShowService} from '../services/show.service'; import {Observable} from 'rxjs'; import {Show} from '../services/show'; @@ -9,7 +9,18 @@ import {Song} from '../../songs/services/song'; import {ShowSongService} from '../services/show-song.service'; import {ShowSong} from '../services/show-song'; import {DocxService} from '../services/docx.service'; -import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faMagnifyingGlassMinus, faMagnifyingGlassPlus, faUser, faUsers} from '@fortawesome/free-solid-svg-icons'; +import { + faBox, + faBoxOpen, + faExternalLinkAlt, + faFileDownload, + faLock, + faMagnifyingGlassMinus, + faMagnifyingGlassPlus, + faSliders, + faUser, + faUsers, +} from '@fortawesome/free-solid-svg-icons'; import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; import {fade} from '../../../animations'; @@ -31,6 +42,7 @@ export class ShowComponent implements OnInit { public faPublish = faExternalLinkAlt; public faUnpublish = faLock; public faDownload = faFileDownload; + public faSliders = faSliders; public faUser = faUser; public faUsers = faUsers; public faZoomIn = faMagnifyingGlassPlus; @@ -41,7 +53,8 @@ export class ShowComponent implements OnInit { private showService: ShowService, private songService: SongService, private showSongService: ShowSongService, - private docxService: DocxService + private docxService: DocxService, + private router: Router ) {} public ngOnInit(): void { @@ -67,9 +80,11 @@ export class ShowComponent implements OnInit { } public textSize = 1; + public onZoomIn() { this.textSize += 0.1; } + public onZoomOut() { this.textSize -= 0.1; } @@ -123,4 +138,8 @@ export class ShowComponent implements OnInit { } public trackBy = (index: number, show: ShowSong) => show.id; + + public async onChange(showId: string) { + await this.router.navigateByUrl('/shows/' + showId + '/edit'); + } } diff --git a/src/app/modules/shows/shows-routing.module.ts b/src/app/modules/shows/shows-routing.module.ts index 661ad86..000e20b 100644 --- a/src/app/modules/shows/shows-routing.module.ts +++ b/src/app/modules/shows/shows-routing.module.ts @@ -3,6 +3,7 @@ import {RouterModule, Routes} from '@angular/router'; import {NewComponent} from './new/new.component'; import {ListComponent} from './list/list.component'; import {ShowComponent} from './show/show.component'; +import {EditComponent} from './edit/edit.component'; const routes: Routes = [ { @@ -14,6 +15,10 @@ const routes: Routes = [ path: 'new', component: NewComponent, }, + { + path: ':showId/edit', + component: EditComponent, + }, { path: ':showId', component: ShowComponent, diff --git a/src/app/modules/shows/shows.module.ts b/src/app/modules/shows/shows.module.ts index aad5f83..d8a0849 100644 --- a/src/app/modules/shows/shows.module.ts +++ b/src/app/modules/shows/shows.module.ts @@ -33,9 +33,10 @@ import {RoleModule} from '../../services/user/role.module'; import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module'; import {MatTooltipModule} from '@angular/material/tooltip'; import {FilterComponent} from './list/filter/filter.component'; +import {EditComponent} from './edit/edit.component'; @NgModule({ - declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent], + declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent], imports: [ CommonModule, ShowsRoutingModule,