Implementing the browse all page with custom sorts

src/app/app-routing.module.ts

@@ -6,17 +6,23 @@ import {NotFoundComponent} from './not-found/not-found.component';
 import {PlayerComponent} from "./pages/player/player.component";
 import {SearchComponent} from "./pages/search/search.component";
 import {CollectionResolverService} from "./services/resolvers/collection-resolver.service";
-import {LibraryResolverService} from './services/resolvers/library-resolver.service';
+import {PageResolver} from './services/resolvers/library-resolver.service';
 import {PeopleResolverService} from "./services/resolvers/people-resolver.service";
 import {SearchResolverService} from "./services/resolvers/search-resolver.service";
 import {ShowResolverService} from './services/resolvers/show-resolver.service';
 import {StreamResolverService} from "./services/resolvers/stream-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 {CrudApi, LibraryItemService, LibraryService} from "./services/api.service";
 
 const routes: Routes = [
-	{path: "browse", component: LibraryItemGridComponent, pathMatch: "full", resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
-	{path: "browse/:library-slug", component: LibraryItemGridComponent, resolve: { shows: LibraryResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
+	{path: "browse", component: LibraryItemGridComponent, pathMatch: "full",
+		resolve: { items: PageResolver.forResource<LibraryItem>("items") },
+		canLoad: [AuthGuard.forPermissions("read")],
+		canActivate: [AuthGuard.forPermissions("read")]
+	},
+	{path: "browse/:library-slug", component: LibraryItemGridComponent, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
 	{path: "show/:show-slug", component: ShowDetailsComponent, resolve: { show: ShowResolverService }, 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: "people/:people-slug", component: CollectionComponent, resolve: { collection: PeopleResolverService }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")]},
@@ -32,7 +38,9 @@ const routes: Routes = [
 		})],
 	exports: [RouterModule],
 	providers: [
-		LibraryResolverService,
+		LibraryService,
+		LibraryItemService,
+		PageResolver.resolvers,
 		ShowResolverService,
 		CollectionResolverService,
 		PeopleResolverService,

src/app/app.component.ts

@@ -1,14 +1,13 @@
-import { Component } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Event, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
-import * as $ from "jquery";
-import { Location } from "@angular/common";
+import {Component} from '@angular/core';
+import {Event, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from '@angular/router';
+import {Location} from "@angular/common";
 import {MatDialog} from "@angular/material/dialog";
 import {Account} from "../models/account";
 import {AccountComponent} from "./auth/account/account.component";
 import {AuthService} from "./auth/auth.service";
 import {Library} from "../models/library";
-import {Page} from "../models/page";
+import {LibraryService} from "./services/api.service";
+import * as $ from "jquery";
 
 @Component({
 	selector: 'app-root',
@@ -20,13 +19,13 @@ export class AppComponent
 	libraries: Library[];
 	isLoading: boolean = false;
 
-	constructor(private http: HttpClient,
+	constructor(private libraryService: LibraryService,
 	            private router: Router,
 	            private location: Location,
 	            public authManager: AuthService,
 	            public dialog: MatDialog)
 	{
-		http.get<Page<Library>>("api/libraries").subscribe(result =>
+		libraryService.getAll().subscribe(result =>
 		{
 			this.libraries = result.items;
 		}, error => console.error(error));

src/app/components/library-item-grid/library-item-grid.component.html

@@ -3,28 +3,32 @@
 		<mat-icon>filter_list</mat-icon>
 	</button>
 	<button mat-button matTooltipPosition="below" matTooltip="Sort" [matMenuTriggerFor]="sortMenu">
-		<mat-icon>sort</mat-icon> Sort by {{this.sortType}} <i *ngIf="this.sortUp" class="material-icons arrow">arrow_upward</i><i *ngIf="!this.sortUp" class="material-icons arrow">arrow_downward</i>
+		<mat-icon>sort</mat-icon> Sort by {{this.sortType}}
+		<i *ngIf="this.sortUp" class="material-icons arrow">arrow_upward</i>
+		<i *ngIf="!this.sortUp" class="material-icons arrow">arrow_downward</i>
 	</button>
 </div>
 
 <mat-menu #sortMenu="matMenu">
-	<div *ngFor="let type of this.sortTypes">
+	<div *ngFor="let type of this.sortKeys">
 		<button *ngIf="type != this.sortType; else elseBlock;" mat-menu-item (click)="sort(type, true)">
 			Sort by {{type}}
 		</button>
 		<ng-template #elseBlock>
 			<button mat-menu-item (click)="sort(type, !this.sortUp)">
-				Sort by {{type}} <i *ngIf="!this.sortUp" class="material-icons arrow">arrow_upward</i><i *ngIf="this.sortUp" class="material-icons arrow">arrow_downward</i>
+				Sort by {{type}}
+				<i *ngIf="!this.sortUp" class="material-icons arrow">arrow_upward</i>
+				<i *ngIf="this.sortUp" class="material-icons arrow">arrow_downward</i>
 			</button>
 		</ng-template>
 	</div>
 </mat-menu>
 
 <div class="container-fluid justify-content-center">
-	<a class="show" *ngFor="let show of this.shows" [href]="getLink(show)" [routerLink]="getLink(show)">
-		<div matRipple [style.background-image]="getThumb(show.slug)" > </div>
-		<p class="title">{{show.title}}</p>
-		<p class="date" *ngIf="show.endYear && show.startYear != show.endYear; else elseBlock">{{show.startYear}} - {{show.endYear}}</p>
-		<ng-template #elseBlock><p class="date">{{show.startYear}}</p></ng-template>
+	<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>
 	</a>
 </div>

src/app/components/library-item-grid/library-item-grid.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Show } from "../../../models/show";
+import {Component, Input} from '@angular/core';
+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";
 
 @Component({
 	selector: 'app-browse',
@@ -10,18 +12,17 @@ import { Show } from "../../../models/show";
 })
 export class LibraryItemGridComponent
 {
-	@Input() shows: Show[];
+	@Input() page: Page<LibraryItem>;
 	@Input() sortEnabled: boolean = true;
 	sortType: string = "title";
+	sortKeys: string[] = ["title", "start year", "end year", "status", "type"]
 	sortUp: boolean = true;
 
-	sortTypes: string[] = ["title", "release date"];
-
-	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer)
+	constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer, private items: LibraryItemService)
 	{
 		this.route.data.subscribe((data) =>
 		{
-			this.shows = data.shows;
+			this.page = data.items;
 		});
 	}
 
@@ -30,9 +31,9 @@ export class LibraryItemGridComponent
 		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
 	}
 
-	getLink(show: Show)
+	getLink(show: LibraryItem)
 	{
-		if (show.isCollection)
+		if (show.type == ItemType.Collection)
 			return "/collection/" + show.slug;
 		else
 			return "/show/" + show.slug;
@@ -43,19 +44,7 @@ export class LibraryItemGridComponent
 		this.sortType = type;
 		this.sortUp = order;
 
-		if (type == this.sortTypes[0])
-		{
-			if (order)
-				this.shows.sort((a, b) => { if (a.title < b.title) return -1; else if (a.title > b.title) return 1; return 0; });
-			else
-				this.shows.sort((a, b) => { if (a.title < b.title) return 1; else if (a.title > b.title) return -1; return 0; });
-		}
-		else if (type == this.sortTypes[1])
-		{
-			if (order)
-				this.shows.sort((a, b) => a.startYear - b.startYear);
-			else
-				this.shows.sort((a, b) => b.startYear - a.startYear);
-		}
+		this.items.getAll({sort: `${this.sortType.replace(/\s/g, "")}:${this.sortUp ? "asc" : "desc"}`})
+			.subscribe(x => this.page = x);
 	}
 }

src/app/services/api.service.ts

@@ -0,0 +1,77 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs"
+import {map} from "rxjs/operators"
+import {Page} from "../../models/page";
+import {IResource} from "../../models/resources/resource";
+import {Library} from "../../models/library";
+import {LibraryItem} from "../../models/library-item";
+
+class CrudApi<T extends IResource>
+{
+	constructor(private client: HttpClient, private route: string) {}
+
+	get(id: number | string): Observable<T>
+	{
+		return this.client.get<T>(`/api/${this.route}/${id}`);
+	}
+
+	getAll(args: {sort: string} = null): Observable<Page<T>>
+	{
+		let params: string = "?";
+		if (args && args.sort)
+			params += "sortBy=" + args.sort;
+		if (params == "?")
+			params = "";
+		return this.client.get<Page<T>>(`/api/${this.route}${params}`);
+	}
+
+	loadNext(page: Page<T>): Observable<Page<T>>
+    {
+	    if (page.next == null)
+	    	return;
+		return this.client.get<Page<T>>(page.next).pipe(map(x =>
+		{
+			x.items = page.items.concat(x.items);
+			x.count += page.count;
+			return x;
+		}));
+    }
+
+	create(item: T): Observable<T>
+	{
+		return this.client.post<T>(`/api/${this.route}`, item);
+	}
+
+	edit(item: T): Observable<T>
+	{
+		return this.client.put<T>(`/api/${this.route}`, item);
+	}
+
+	delete(item: T): Observable<T>
+	{
+		return this.client.delete<T>(`/api/${this.route}/${item.slug}`);
+	}
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LibraryService extends CrudApi<Library>
+{
+	constructor(client: HttpClient)
+	{
+		super(client, "libraries");
+	}
+}
+
+@Injectable({
+	providedIn: 'root'
+})
+export class LibraryItemService extends CrudApi<LibraryItem>
+{
+	constructor(client: HttpClient)
+	{
+		super(client, "items");
+	}
+}

src/app/services/library.service.ts

@@ -1,48 +0,0 @@
-import {Injectable} from "@angular/core";
-import {HttpClient} from "@angular/common/http";
-import {Observable} from "rxjs"
-import {Page} from "../../models/page";
-import {IResource} from "../../models/resources/resource";
-
-class CrudApi<T extends IResource>
-{
-  constructor(private client: HttpClient, private route: string) {}
-
-  get(id: number | string): Observable<T>
-  {
-    return this.client.get<T>(`/api/${this.route}/${id}`);
-  }
-
-  getAll(id: number | string): Observable<Page<T>>
-  {
-    return this.client.get<Page<T>>(`/api/${this.route}`);
-  }
-
-  create(item: T): Observable<T>
-  {
-    return this.client.post<T>(`/api/${this.route}`, item);
-  }
-
-  edit(item: T): Observable<T>
-  {
-    return this.client.put<T>(`/api/${this.route}`, item);
-  }
-
-  delete(item: T): Observable<T>
-  {
-    return this.client.delete<T>(`/api/${this.route}/${item.slug}`);
-  }
-}
-
-@Injectable({
-	providedIn: 'root'
-})
-export class LibraryService
-{
-	constructor() { }
-
-	get()
-	{
-
-	}
-}

src/app/services/resolvers/library-resolver.service.ts

@@ -4,42 +4,36 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { EMPTY, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-import { Show } from "../../../models/show";
-
+import {Page} from "../../../models/page";
+import {IResource} from "../../../models/resources/resource";
 
 @Injectable()
-export class LibraryResolverService implements Resolve<Show[]>
+export class PageResolver
 {
-	constructor(private http: HttpClient, private snackBar: MatSnackBar) { }
+	public static resolvers: any[] = [];
 
-	resolve(route: ActivatedRouteSnapshot): Show[] | Observable<Show[]> | Promise<Show[]>
+	static forResource<T extends IResource>(resource: string)
 	{
-		let slug: string = route.paramMap.get("library-slug");
+		@Injectable()
+		class Resolver<T> implements Resolve<Page<T>>
+		{
+			constructor(private http: HttpClient, private snackBar: MatSnackBar) { }
 
-		if (slug == null)
-		{
-			return this.http.get<Show[]>("api/shows").pipe(catchError((error: HttpErrorResponse) =>
+			resolve(route: ActivatedRouteSnapshot): Page<T> | Observable<Page<T>> | Promise<Page<T>>
 			{
-				console.log(error.status + " - " + error.message);
-				this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-				return EMPTY;
-			}));
-		}
-		else
-		{
-			return this.http.get<Show[]>("api/libraries/" + slug).pipe(catchError((error: HttpErrorResponse) =>
-			{
-				console.log(error.status + " - " + error.message);
-				if (error.status == 404)
+				return this.http.get<Page<T>>(`api/${resource}`).pipe(catchError((error: HttpErrorResponse) =>
 				{
-					this.snackBar.open("Library \"" + slug + "\" not found.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-				}
-				else
-				{
-					this.snackBar.open("An unknow error occured.", null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
-				}
-				return EMPTY;
-			}));
+					console.log(error.status + " - " + error.message);
+					this.snackBar.open(`An unknown error occurred: ${error.message}.`, null, {
+						horizontalPosition: "left",
+						panelClass: ['snackError'],
+						duration: 2500 }
+					);
+					return EMPTY;
+				}));
+			}
 		}
+		PageResolver.resolvers.push(Resolver);
+		return Resolver;
 	}
 }

src/models/library-item.ts

@@ -1,20 +1,20 @@
-enum ItemType
+import {IResource} from "./resources/resource";
+
+export enum ItemType
 {
 	Show,
 	Movie,
 	Collection
 }
 
-export interface LibraryItem
+export interface LibraryItem extends IResource
 {
-	ID: number
-	Slug: string
-	Title: string
-	Overview: string
-	Status: string
-	TrailerUrl: string
-	StartYear: number
-	EndYear: number
-	Poster: string
-	Type: ItemType
+	title: string
+	overview: string
+	status: string
+	trailerUrl: string
+	startYear: number
+	endYear: number
+	poster: string
+	type: ItemType
 }

src/models/library.ts

@@ -1,4 +1,6 @@
-export interface Library
+import {IResource} from "./resources/resource";
+
+export interface Library extends IResource
 {
 	id: number;
 	slug: string;