Making the collection page use the rest api

src/app/app-routing.module.ts

@@ -1,22 +1,31 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {LibraryItemGridComponent} from './components/library-item-grid/library-item-grid.component';
+import {ItemsGridComponent} from './components/items-grid/items-grid.component';
 import {NotFoundComponent} from './not-found/not-found.component';
 import {PageResolver} from './services/resolvers/page-resolver.service';
 import {ShowDetailsComponent} from './pages/show-details/show-details.component';
 import {AuthGuard} from "./auth/misc/authenticated-guard.service";
 import {LibraryItem} from "../models/library-item";
-import {LibraryItemService, LibraryService} from "./services/api.service";
+import {
+	EpisodeService,
+	LibraryItemService,
+	LibraryService,
+	PeopleService,
+	SeasonService,
+	ShowService
+} from "./services/api.service";
 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";
 
 const routes: Routes = [
-	{path: "browse", component: LibraryItemGridComponent, pathMatch: "full",
+	{path: "browse", component: ItemsGridComponent, pathMatch: "full",
 		resolve: { items: PageResolver.forResource<LibraryItem>("items") },
 		canLoad: [AuthGuard.forPermissions("read")],
 		canActivate: [AuthGuard.forPermissions("read")]
 	},
-	{path: "browse/:slug", component: LibraryItemGridComponent,
+	{path: "browse/:slug", component: ItemsGridComponent,
 		resolve: { items: PageResolver.forResource<LibraryItem>("library/:slug/items") },
 		canLoad: [AuthGuard.forPermissions("read")],
 		canActivate: [AuthGuard.forPermissions("read")]
@@ -27,8 +36,12 @@ const routes: Routes = [
 		canLoad: [AuthGuard.forPermissions("read")],
 		canActivate: [AuthGuard.forPermissions("read")]
 	},
-	// {path: "collection/:collection-slug", component: CollectionComponent, resolve: { collection: CollectionResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
+	{path: "collection/:slug", component: CollectionComponent,
-	//
+		resolve: { collection: ItemResolver.forResource<Collection>("collections/:slug") },
+		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")]},
@@ -44,6 +57,10 @@ const routes: Routes = [
 	providers: [
 		LibraryService,
 		LibraryItemService,
+		PeopleService,
+		ShowService,
+		SeasonService,
+		EpisodeService,
 		PageResolver.resolvers,
 		ItemResolver.resolvers,
 	]

src/app/app.module.ts

@@ -14,8 +14,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { LibraryItemGridComponent } from './components/library-item-grid/library-item-grid.component';
+import { ItemsGridComponent } from './components/items-grid/items-grid.component';
-import { CollectionComponent } from './collection/collection.component';
+import { CollectionComponent } from './pages/collection/collection.component';
 import { EpisodesListComponent } from './components/episodes-list/episodes-list.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { PeopleListComponent } from './components/people-list/people-list.component';
@@ -47,7 +47,7 @@ import {InfiniteScrollModule} from "ngx-infinite-scroll";
 	declarations: [
 		AppComponent,
 		NotFoundComponent,
-		LibraryItemGridComponent,
+		ItemsGridComponent,
 		ShowDetailsComponent,
 		EpisodesListComponent,
 		PlayerComponent,

src/app/collection/collection.component.ts

@@ -1,27 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Collection } from "../../models/collection";
-import { ActivatedRoute } from "@angular/router";
-import { DomSanitizer } from "@angular/platform-browser";
-
-@Component({
-	selector: 'app-collection',
-	templateUrl: './collection.component.html',
-	styleUrls: ['./collection.component.scss']
-})
-export class CollectionComponent
-{
-	collection: Collection;
-
-	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer)
-	{
-		this.route.data.subscribe((data) =>
-		{
-			this.collection = data.collection;
-		});
-	}
-
-	getThumb()
-	{
-		return this.sanitizer.bypassSecurityTrustStyle("url(" + this.collection.poster + ")");
-	}
-}

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

@@ -25,7 +25,7 @@
 </mat-menu>
 
 <div class="container-fluid justify-content-center" infinite-scroll (scrolled)="this.page?.loadNext(this.client)">
-	<a class="show" *ngFor="let item of this.page.items" [href]="getLink(item)" [routerLink]="getLink(item)">
+	<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>

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

@@ -3,17 +3,17 @@ import {ActivatedRoute} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
 import {ItemType, LibraryItem} from "../../../models/library-item";
 import {Page} from "../../../models/page";
-import {LibraryItemService} from "../../services/api.service";
 import {HttpClient} from "@angular/common/http";
+import {Show} from "../../../models/show";
 
 @Component({
-	selector: 'app-browse',
+	selector: 'app-items',
-	templateUrl: './library-item-grid.component.html',
+	templateUrl: './items-grid.component.html',
-	styleUrls: ['./library-item-grid.component.scss']
+	styleUrls: ['./items-grid.component.scss']
 })
-export class LibraryItemGridComponent
+export class ItemsGridComponent
 {
-	@Input() page: Page<LibraryItem>;
+	@Input() page: Page<LibraryItem | Show>;
 	@Input() sortEnabled: boolean = true;
 	sortType: string = "title";
 	sortKeys: string[] = ["title", "start year", "end year"]
@@ -21,7 +21,6 @@ export class LibraryItemGridComponent
 
 	constructor(private route: ActivatedRoute,
 	            private sanitizer: DomSanitizer,
-	            private items: LibraryItemService,
 	            public client: HttpClient)
 	{
 		this.route.data.subscribe((data) =>
@@ -35,12 +34,12 @@ export class LibraryItemGridComponent
 		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
 	}
 
-	getLink(show: LibraryItem)
+	getLink(item: LibraryItem | Show)
 	{
-		if (show.type == ItemType.Collection)
+		if ("type" in item && item.type == ItemType.Collection)
-			return "/collection/" + show.slug;
+			return "/collection/" + item.slug;
 		else
-			return "/show/" + show.slug;
+			return "/show/" + item.slug;
 	}
 
 	sort(type: string, order: boolean)
@@ -48,7 +47,9 @@ export class LibraryItemGridComponent
 		this.sortType = type;
 		this.sortUp = order;
 
-		this.items.getAll({sortBy: `${this.sortType.replace(/\s/g, "")}:${this.sortUp ? "asc" : "desc"}`})
+		let url: URL = new URL(this.page.first);
-			.subscribe(x => this.page = x);
+		url.searchParams.set("sortBy", `${this.sortType.replace(/\s/g, "")}:${this.sortUp ? "asc" : "desc"}`);
+		this.client.get<Page<LibraryItem | Show>>(url.toString())
+			.subscribe(x => this.page = Object.assign(new Page<LibraryItem | Show>(), x));
 	}
 }

src/app/pages/collection/collection.component.html

@@ -8,7 +8,7 @@
 			<h5 class="date" *ngIf="collection.endYear; else elseBlock">{{collection.startYear}} - {{collection.endYear}}</h5>
 			<ng-template #elseBlock><h5 class="date">{{collection.startYear}}</h5></ng-template>
 			<hr />
-			<app-browse [shows]="collection.shows"></app-browse>
+			<app-items [page]="shows"></app-items>
 		</div>
 	</div>
 </div>

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

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {Collection} from "../../../models/collection";
+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";
+
+@Component({
+	selector: 'app-collection',
+	templateUrl: './collection.component.html',
+	styleUrls: ['./collection.component.scss']
+})
+export class CollectionComponent
+{
+	collection: Collection;
+	shows: Page<Show>;
+
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private showService: ShowService)
+	{
+		this.route.data.subscribe((data) =>
+		{
+			this.collection = data.collection;
+			this.showService.getForCollection(this.collection.slug).subscribe(x => this.shows = x);
+		});
+	}
+
+	getThumb()
+	{
+		return this.sanitizer.bypassSecurityTrustStyle("url(" + this.collection.poster + ")");
+	}
+}

src/app/services/api.service.ts

@@ -9,6 +9,7 @@ import {map} from "rxjs/operators";
 import {Season} from "../../models/season";
 import {Episode} from "../../models/episode";
 import {People} from "../../models/people";
+import {Show} from "../../models/show";
 
 export interface ApiArgs
 {
@@ -132,7 +133,25 @@ export class PeopleService extends CrudApi<People>
 
 	getFromShow(show: string | number, args?: ApiArgs): Observable<Page<People>>
 	{
-		return this.client.get(`/api/shows/${show}/people${this.ArgsAsQuery(args)}`)
+		return this.client.get<Page<People>>(`/api/shows/${show}/people${this.ArgsAsQuery(args)}`)
 			.pipe(map(x => Object.assign(new Page<People>(), x)));
 	}
 }
+
+@Injectable({
+	providedIn: 'root'
+})
+export class ShowService extends CrudApi<Show>
+{
+	constructor(client: HttpClient)
+	{
+		super(client, "shows");
+	}
+
+	getForCollection(collection: string | number, args?: ApiArgs) : Observable<Page<Show>>
+	{
+		return this.client.get<Page<Show>>(`/api/collections/${collection}/shows${this.ArgsAsQuery(args)}`)
+			.pipe(map(x => Object.assign(new Page<Show>(), x)));
+	}
+}
+

src/models/collection.ts

@@ -1,8 +1,8 @@
 import { Show } from "./show";
+import {IResource} from "./resources/resource";
 
-export interface Collection
+export interface Collection extends IResource
 {
-	slug: string;
 	name: string;
 	poster: string;
 	overview: string;