Adding identify of external shows

src/app/episodes-list/episodes-list.component.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap//scss/functions";
+@import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
-@import "~bootstrap/scss//mixins/breakpoints";
+@import "~bootstrap/scss/mixins/breakpoints";
 
 .root
 {

src/app/metadata-edit/metadata-edit.component.html

@@ -84,15 +84,22 @@
                 <mat-panel-title>Identify show</mat-panel-title>
                 <mat-panel-description>Search on metadata providers</mat-panel-description>
             </mat-expansion-panel-header>
-            <mat-form-field class="w-100 mx-5">
+            <mat-form-field class="w-100 mx-2">
                 <mat-label>Search for</mat-label>
                 <input matInput value="{{show.title}}" (input)="this.reIdentify($event.target.value)">
             </mat-form-field>
-            <app-show-grid #identifyGrid [externalShows]="true"></app-show-grid>
+            <mat-form-field *ngFor="let provider of this.providers" class="provider px-1">
+                <mat-label>{{provider.name}} ID</mat-label>
+                <input matInput [value]="this.getMetadataID(show, provider)?.dataID" (input)="this.setMetadataID(show, provider, $event.target.value)" >
+            </mat-form-field>   
+            <app-show-grid #identifyGrid [externalShows]="true" (clickCallback)="this.identifyID($event)"></app-show-grid>
         </mat-expansion-panel>
     </mat-accordion>
 </div>
 <div mat-dialog-actions align="end">
 	<button mat-button mat-dialog-close>Cancel</button>
-	<button mat-button (click)="apply()">Apply</button>
+	<button mat-button (click)="apply()">
+        <mat-icon *ngIf="this.metadataChanged" style="color: red;" class="mr-2" matTooltip="You changed an external id, the whole show's metadata will be refreshed. Individual changes made won't last." matTooltipPosition="above">warning</mat-icon>
+        Apply
+    </button>
 </div>

src/app/metadata-edit/metadata-edit.component.scss

@@ -0,0 +1,18 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins/breakpoints";
+
+.provider
+{
+	width: 100%;
+	
+	@include media-breakpoint-up(md)
+	{
+		width: 33%;
+	}
+
+	@include media-breakpoint-up(lg)
+	{
+		width: 25%;
+	}
+}

src/app/metadata-edit/metadata-edit.component.ts

@@ -9,22 +9,25 @@ import {Observable, of} from "rxjs";
 import {tap} from "rxjs/operators";
 import {Studio} from "../../models/studio";
 import {ShowGridComponent} from "../show-grid/show-grid.component";
+import {Provider} from "../../models/provider";
 
 @Component({
 	selector: 'app-metadata-edit',
 	templateUrl: './metadata-edit.component.html',
 	styleUrls: ['./metadata-edit.component.scss']
 })
-export class MetadataEditComponent implements OnInit
+export class MetadataEditComponent
 {
-	@ViewChild("genreInput") genreInput: ElementRef<HTMLInputElement>;
+	@ViewChild("genreInput") private genreInput: ElementRef<HTMLInputElement>;
-	
 	private allGenres: Genre[];
 	private allStudios: Studio[];
 	
+	@ViewChild("identifyGrid") private identifyGrid: ShowGridComponent;
 	private identifing: Observable<Show[]>;
 	private identifiedShows: [string, Show[]];
-	@ViewChild("identifyGrid") private identifyGrid: ShowGridComponent;
+	private providers: Provider[];
+
+	public metadataChanged: boolean = false;
 	
 	constructor(public dialogRef: MatDialogRef<MetadataEditComponent>, @Inject(MAT_DIALOG_DATA) public show: Show, private http: HttpClient) 
 	{
@@ -36,13 +39,13 @@ export class MetadataEditComponent implements OnInit
 		{
 			this.allStudios = result;
 		});
+		this.http.get<Provider[]>("/api/providers").subscribe(result =>
+		{
+			this.providers = result;
+		});
 
 		this.reIdentify(this.show.title);
 	}
-
-	ngOnInit(): void 
-	{
-	}
 	
 	apply(): void
 	{
@@ -103,7 +106,28 @@ export class MetadataEditComponent implements OnInit
 	
 	reIdentify(search: string)
 	{
-		console.log("Searching for " + search);
 		this.identityShow(search).subscribe(x => this.identifyGrid.shows = x);
 	}
+
+	getMetadataID(show: Show, provider: Provider)
+	{
+		return show.externalIDs.find(x => x.provider.name == provider.name);
+	}
+	
+	setMetadataID(show: Show, provider: Provider, id: string)
+	{
+		let i = show.externalIDs.findIndex(x => x.provider.name == provider.name);
+		
+		this.metadataChanged = true;
+		if (i != -1)
+			show.externalIDs[i].dataID = id;
+		else
+			show.externalIDs.push({provider: provider, dataID: id, link: undefined});
+	}
+
+	identifyID(show: Show)
+	{
+		for (let id of show.externalIDs)
+			this.setMetadataID(this.show, id.provider, id.dataID);
+	}
 }

src/app/show-grid/show-grid.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
     <div *ngFor="let show of this.shows" class="show-container">
         <mat-card class="show">
-            <a [href]="getLink(show)" [routerLink]="getLink(show)" class="d-flex">
+            <a [href]="getLink(show)" [routerLink]="getLink(show)" class="d-flex" (click)="this.clickCallback.emit(show)">
                 <div class="thumb">
                     <div [style.background-image]="getThumb(show)"> </div>
                 </div>

src/app/show-grid/show-grid.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Show} from "../../models/show";
 import {DomSanitizer} from "@angular/platform-browser";
 
@@ -11,6 +11,7 @@ export class ShowGridComponent
 {
 	@Input() shows: Show[]
 	@Input() externalShows: boolean = false;
+	@Output() clickCallback: EventEmitter<Show> = new EventEmitter();
 	
 	constructor(private sanitizer: DomSanitizer) { }
 

src/models/external-id.ts

@@ -1,6 +1,8 @@
+import {Provider} from "./provider"
+
 export interface ExternalID
 {
-	provider: {name: string, logo: string};
+	provider: Provider;
-	id: string;
+	dataID: string;
 	link: string;
 }

src/models/provider.ts

@@ -0,0 +1,5 @@
+export interface Provider 
+{
+	name: string;
+	logo: string;
+}