Adding the people page

src/app/app-routing.module.ts

@@ -18,6 +18,7 @@ import {Show} from "../models/show";
 import {ItemResolver} from "./services/resolvers/item-resolver.service";
 import {CollectionComponent} from "./pages/collection/collection.component";
 import {Collection} from "../models/collection";
+import {People} from "../models/people";
 
 const routes: Routes = [
 	{path: "browse", component: ItemsGridComponent, pathMatch: "full",
@@ -37,14 +38,26 @@ const routes: Routes = [
 		canActivate: [AuthGuard.forPermissions("read")]
 	},
 	{path: "collection/:slug", component: CollectionComponent,
-		resolve: { collection: ItemResolver.forResource<Collection>("collections/:slug") },
+		resolve:
+		{
+			collection: ItemResolver.forResource<Collection>("collections/:slug"),
+			shows: PageResolver.forResource<Show>("collections/:slug/shows")
+		},
+		canLoad: [AuthGuard.forPermissions("read")],
+		canActivate: [AuthGuard.forPermissions("read")]
+	},
+	{path: "people/:slug", component: CollectionComponent,
+		resolve:
+		{
+			collection: ItemResolver.forResource<Collection>("people/:slug"),
+			shows: PageResolver.forResource<Show>("people/:slug/roles")
+		},
 		canLoad: [AuthGuard.forPermissions("read")],
 		canActivate: [AuthGuard.forPermissions("read")]
 	},
-
-	// {path: "people/:people-slug", component: CollectionComponent, resolve: { collection: PeopleResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
 	// {path: "watch/:item", component: PlayerComponent, resolve: { item: StreamResolverService }, canLoad: [AuthGuard.forPermissions("play")], canActivate: [AuthGuard.forPermissions("play")]},
 	// {path: "search/:query", component: SearchComponent, resolve: { items: SearchResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
+	// TODO implement missing pages: /genre, /studio & an home page.
 	{path: "**", component: NotFoundComponent}
 ];
 

src/app/components/items-grid/items-grid.component.html

@@ -28,7 +28,6 @@
 	<a class="show" *ngFor="let item of this.page?.items" [href]="getLink(item)" [routerLink]="getLink(item)">
 		<div matRipple [style.background-image]="getThumb(item.slug)" > </div>
 		<p class="title">{{item.title}}</p>
-		<p class="date" *ngIf="item.endYear && item.startYear != item.endYear; else elseBlock">{{item.startYear}} - {{item.endYear}}</p>
-		<ng-template #elseBlock><p class="date">{{item.startYear}}</p></ng-template>
+		<p class="date">{{getDate(item)}}</p>
 	</a>
 </div>

src/app/components/items-grid/items-grid.component.ts

@@ -4,7 +4,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 import {ItemType, LibraryItem} from "../../../models/library-item";
 import {Page} from "../../../models/page";
 import {HttpClient} from "@angular/common/http";
-import {Show} from "../../../models/show";
+import {Show, ShowRole} from "../../../models/show";
 
 @Component({
 	selector: 'app-items',
@@ -13,7 +13,7 @@ import {Show} from "../../../models/show";
 })
 export class ItemsGridComponent
 {
-	@Input() page: Page<LibraryItem | Show>;
+	@Input() page: Page<LibraryItem | Show | ShowRole>;
 	@Input() sortEnabled: boolean = true;
 	sortType: string = "title";
 	sortKeys: string[] = ["title", "start year", "end year"]
@@ -34,7 +34,7 @@ export class ItemsGridComponent
 		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
 	}
 
-	getLink(item: LibraryItem | Show)
+	getLink(item: LibraryItem | Show | ShowRole)
 	{
 		if ("type" in item && item.type == ItemType.Collection)
 			return "/collection/" + item.slug;
@@ -52,4 +52,20 @@ export class ItemsGridComponent
 		this.client.get<Page<LibraryItem | Show>>(url.toString())
 			.subscribe(x => this.page = Object.assign(new Page<LibraryItem | Show>(), x));
 	}
+
+	getDate(item: LibraryItem | Show | ShowRole): string
+	{
+		if ("role" in item && item.role)
+		{
+			if ("type" in item && item.type)
+				return `as ${item.role} (${item.type})`;
+			return `as ${item.role}`;
+		}
+		if ("type" in item && item.type && typeof item.type == "string")
+			return item.type;
+
+		if (item.endYear && item.startYear != item.endYear)
+			return `${item.startYear} - ${item.endYear}`
+		return item.startYear?.toString();
+	}
 }

src/app/pages/collection/collection.component.ts

@@ -4,7 +4,7 @@ import {ActivatedRoute} from "@angular/router";
 import {DomSanitizer} from "@angular/platform-browser";
 import {Show} from "../../../models/show";
 import {Page} from "../../../models/page";
-import {ShowService} from "../../services/api.service";
+import {People} from "../../../models/people";
 
 @Component({
 	selector: 'app-collection',
@@ -13,15 +13,15 @@ import {ShowService} from "../../services/api.service";
 })
 export class CollectionComponent
 {
-	collection: Collection;
+	collection: Collection | People;
 	shows: Page<Show>;
 
-	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private showService: ShowService)
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer)
 	{
 		this.route.data.subscribe((data) =>
 		{
 			this.collection = data.collection;
-			this.showService.getForCollection(this.collection.slug).subscribe(x => this.shows = x);
+			this.shows = data.shows;
 		});
 	}
 

src/models/people.ts

@@ -1,11 +1,14 @@
 import {ExternalID} from "./external-id";
 import {IResource} from "./resources/resource";
+import {Show} from "./show";
 
 export interface People extends IResource
 {
 	name: string;
 	role: string; 
-	type: string; 
+	type: string;
+	poster: string;
 
+	shows: Show;
 	externalIDs: ExternalID[];
-}
+}

src/models/show.ts

@@ -25,3 +25,21 @@ export interface Show extends IResource
 
 	externalIDs: ExternalID[];
 }
+
+export interface ShowRole extends IResource
+{
+	role: string;
+	type: string;
+
+	title: string;
+	aliases: string[];
+	overview: string;
+	status: string;
+	trailerUrl: string;
+	isMovie: boolean;
+	startYear: number;
+	endYear : number;
+	poster: string;
+	logo: string;
+	backdrop: string;
+}