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}}
+
+
+
+
+
+
+
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 @@
-