diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 13b9a07b..c5e5f058 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -35,6 +35,9 @@ import {AuthModule} from "./auth/auth.module"; import {AuthRoutingModule} from "./auth/auth-routing.module"; import { TrailerDialogComponent } from './trailer-dialog/trailer-dialog.component'; import {CollectionsListComponent} from "./collection-list/collections-list.component"; +import { MetadataEditComponent } from './metadata-edit/metadata-edit.component'; +import {MatChipsModule} from "@angular/material/chips"; +import {MatAutocompleteModule} from "@angular/material/autocomplete"; @NgModule({ @@ -52,7 +55,8 @@ import {CollectionsListComponent} from "./collection-list/collections-list.compo PasswordValidator, FallbackDirective, TrailerDialogComponent, - CollectionsListComponent + CollectionsListComponent, + MetadataEditComponent ], imports: [ BrowserModule, @@ -77,7 +81,9 @@ import {CollectionsListComponent} from "./collection-list/collections-list.compo FormsModule, MatTabsModule, MatCheckboxModule, - AuthModule + AuthModule, + MatChipsModule, + MatAutocompleteModule ], bootstrap: [AppComponent] }) diff --git a/src/app/metadata-edit/metadata-edit.component.html b/src/app/metadata-edit/metadata-edit.component.html new file mode 100644 index 00000000..9eecc1a0 --- /dev/null +++ b/src/app/metadata-edit/metadata-edit.component.html @@ -0,0 +1,68 @@ +

Editing metadata of {{this.show.title}}

+
+
+ + Title + + + + + Overview + + + + + Start Year + + + + End Year + + + + Status + + Finished + Airing + Planned + + + + + Genres + + + {{genre.name}} + cancel + + + + + {{genre.name}} + + + + + + + Trailer + + + + + Studio + + + + {{studio.name}} + + + +
+
+
+ + +
diff --git a/src/app/metadata-edit/metadata-edit.component.scss b/src/app/metadata-edit/metadata-edit.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/metadata-edit/metadata-edit.component.ts b/src/app/metadata-edit/metadata-edit.component.ts new file mode 100644 index 00000000..a585648e --- /dev/null +++ b/src/app/metadata-edit/metadata-edit.component.ts @@ -0,0 +1,71 @@ +import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; +import {HttpClient} from "@angular/common/http"; +import {Show} from "../../models/show"; +import {Genre} from "../../models/genre"; +import {MatChipInputEvent} from "@angular/material/chips"; +import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete"; +import {FormControl} from "@angular/forms"; +import {Studio} from "../../models/studio"; + +@Component({ + selector: 'app-metadata-edit', + templateUrl: './metadata-edit.component.html', + styleUrls: ['./metadata-edit.component.scss'] +}) +export class MetadataEditComponent implements OnInit +{ + @ViewChild("genreInput") genreInput: ElementRef; + + private allGenres: Genre[]; + private allStudios: Studio[]; + + constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public show: Show, private http: HttpClient) + { + this.http.get("/api/genres").subscribe(result => + { + this.allGenres = result; + }); + this.http.get("/api/studios").subscribe(result => + { + this.allStudios = result; + }); + } + + ngOnInit(): void + { + } + + apply(): void + { + this.http.post("/api/show/edit/" + this.show.slug, this.show).subscribe(() => + { + this.dialogRef.close(this.show); + }); + } + + addGenre(event: MatChipInputEvent) + { + const input = event.input; + const value = event.value; + let genre: Genre = {slug: null, name: value}; + + this.show.genres.push(genre); + if (input) + input.value = ""; + } + + removeGenre(genre: Genre): void + { + console.log("Removing a genre"); + console.log(genre); + const i = this.show.genres.indexOf(genre); + this.show.genres.splice(i, 1); + } + + autocompleteGenre(event: MatAutocompleteSelectedEvent): void + { + this.show.genres.push(event.option.value); + this.genreInput.nativeElement.value = ''; + } +} diff --git a/src/app/show-details/show-details.component.html b/src/app/show-details/show-details.component.html index 9d7561b3..375fc3bb 100644 --- a/src/app/show-details/show-details.component.html +++ b/src/app/show-details/show-details.component.html @@ -26,7 +26,7 @@ - @@ -39,12 +39,16 @@ + + + +

Studio: {{this.show.studio?.name}}

-

Genres: {{genre.name}}{{isLast ? "" : ", "}}

+

Genres: {{genre.name}}{{isLast ? "" : ", "}}

diff --git a/src/app/show-details/show-details.component.ts b/src/app/show-details/show-details.component.ts index 81b665be..86c1ec43 100644 --- a/src/app/show-details/show-details.component.ts +++ b/src/app/show-details/show-details.component.ts @@ -7,6 +7,8 @@ import { Episode } from "../../models/episode"; import { Show } from "../../models/show"; import {MatDialog} from "@angular/material/dialog"; import {TrailerDialogComponent} from "../trailer-dialog/trailer-dialog.component"; +import {MetadataEditComponent} from "../metadata-edit/metadata-edit.component"; +import {Account} from "../../models/account"; @Component({ selector: 'app-show-details', @@ -92,6 +94,15 @@ export class ShowDetailsComponent implements OnInit openTrailer() { - this.dialog.open(TrailerDialogComponent, {width: "80%", height: "45vw", data: this.show.trailerUrl}); + this.dialog.open(TrailerDialogComponent, {width: "80%", height: "45vw", data: this.show.trailerUrl, panelClass: "panel"}); + } + + editMetadata() + { + this.dialog.open(MetadataEditComponent, {width: "80%", data: this.show}).afterClosed().subscribe((result: Show) => + { + if (result) + this.show = result; + }); } } diff --git a/src/app/trailer-dialog/trailer-dialog.component.scss b/src/app/trailer-dialog/trailer-dialog.component.scss index e69de29b..798dafb5 100644 --- a/src/app/trailer-dialog/trailer-dialog.component.scss +++ b/src/app/trailer-dialog/trailer-dialog.component.scss @@ -0,0 +1,4 @@ +.panel .mat-dialog-container +{ + overflow-y: hidden; +} \ No newline at end of file diff --git a/src/models/show.ts b/src/models/show.ts index 9850a30a..b0998e5e 100644 --- a/src/models/show.ts +++ b/src/models/show.ts @@ -7,7 +7,7 @@ export interface Show { slug: string; title: string; - Aliases: string[]; + aliases: string[]; overview: string; genres: Genre[]; status: string;