From 964d170ac86bcf2e9be9c7fc6b91b0faa20d492e Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 3 Aug 2020 17:33:12 +0200 Subject: [PATCH] Making the collection page use the rest api --- src/app/app-routing.module.ts | 29 +++++++++++++---- src/app/app.module.ts | 6 ++-- src/app/collection/collection.component.ts | 27 ---------------- .../items-grid.component.html} | 2 +- .../items-grid.component.scss} | 0 .../items-grid.component.ts} | 27 ++++++++-------- .../collection/collection.component.html | 2 +- .../collection/collection.component.scss | 0 .../pages/collection/collection.component.ts | 32 +++++++++++++++++++ src/app/services/api.service.ts | 21 +++++++++++- src/models/collection.ts | 4 +-- 11 files changed, 96 insertions(+), 54 deletions(-) delete mode 100644 src/app/collection/collection.component.ts rename src/app/components/{library-item-grid/library-item-grid.component.html => items-grid/items-grid.component.html} (93%) rename src/app/components/{library-item-grid/library-item-grid.component.scss => items-grid/items-grid.component.scss} (100%) rename src/app/components/{library-item-grid/library-item-grid.component.ts => items-grid/items-grid.component.ts} (57%) rename src/app/{ => pages}/collection/collection.component.html (90%) rename src/app/{ => pages}/collection/collection.component.scss (100%) create mode 100644 src/app/pages/collection/collection.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 29fca9c6..8cc729b9 100644 --- a/src/app/app-routing.module.ts +++ b/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("items") }, canLoad: [AuthGuard.forPermissions("read")], canActivate: [AuthGuard.forPermissions("read")] }, - {path: "browse/:slug", component: LibraryItemGridComponent, + {path: "browse/:slug", component: ItemsGridComponent, resolve: { items: PageResolver.forResource("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("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, ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 93ec5100..475addbd 100644 --- a/src/app/app.module.ts +++ b/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 { CollectionComponent } from './collection/collection.component'; +import { ItemsGridComponent } from './components/items-grid/items-grid.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, diff --git a/src/app/collection/collection.component.ts b/src/app/collection/collection.component.ts deleted file mode 100644 index 80356d5e..00000000 --- a/src/app/collection/collection.component.ts +++ /dev/null @@ -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 + ")"); - } -} diff --git a/src/app/components/library-item-grid/library-item-grid.component.html b/src/app/components/items-grid/items-grid.component.html similarity index 93% rename from src/app/components/library-item-grid/library-item-grid.component.html rename to src/app/components/items-grid/items-grid.component.html index 3a1a0df8..7f851f9b 100644 --- a/src/app/components/library-item-grid/library-item-grid.component.html +++ b/src/app/components/items-grid/items-grid.component.html @@ -25,7 +25,7 @@
- +

{{item.title}}

{{item.startYear}} - {{item.endYear}}

diff --git a/src/app/components/library-item-grid/library-item-grid.component.scss b/src/app/components/items-grid/items-grid.component.scss similarity index 100% rename from src/app/components/library-item-grid/library-item-grid.component.scss rename to src/app/components/items-grid/items-grid.component.scss diff --git a/src/app/components/library-item-grid/library-item-grid.component.ts b/src/app/components/items-grid/items-grid.component.ts similarity index 57% rename from src/app/components/library-item-grid/library-item-grid.component.ts rename to src/app/components/items-grid/items-grid.component.ts index 0a13a0c9..83f38cab 100644 --- a/src/app/components/library-item-grid/library-item-grid.component.ts +++ b/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', - templateUrl: './library-item-grid.component.html', - styleUrls: ['./library-item-grid.component.scss'] + selector: 'app-items', + templateUrl: './items-grid.component.html', + styleUrls: ['./items-grid.component.scss'] }) -export class LibraryItemGridComponent +export class ItemsGridComponent { - @Input() page: Page; + @Input() page: Page; @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) - return "/collection/" + show.slug; + if ("type" in item && item.type == ItemType.Collection) + 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"}`}) - .subscribe(x => this.page = x); + let url: URL = new URL(this.page.first); + url.searchParams.set("sortBy", `${this.sortType.replace(/\s/g, "")}:${this.sortUp ? "asc" : "desc"}`); + this.client.get>(url.toString()) + .subscribe(x => this.page = Object.assign(new Page(), x)); } } diff --git a/src/app/collection/collection.component.html b/src/app/pages/collection/collection.component.html similarity index 90% rename from src/app/collection/collection.component.html rename to src/app/pages/collection/collection.component.html index bb00001a..a2231778 100644 --- a/src/app/collection/collection.component.html +++ b/src/app/pages/collection/collection.component.html @@ -8,7 +8,7 @@
{{collection.startYear}} - {{collection.endYear}}
{{collection.startYear}}
- +
diff --git a/src/app/collection/collection.component.scss b/src/app/pages/collection/collection.component.scss similarity index 100% rename from src/app/collection/collection.component.scss rename to src/app/pages/collection/collection.component.scss diff --git a/src/app/pages/collection/collection.component.ts b/src/app/pages/collection/collection.component.ts new file mode 100644 index 00000000..526b220d --- /dev/null +++ b/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; + + 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 + ")"); + } +} diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 821a538e..c75ab8a2 100644 --- a/src/app/services/api.service.ts +++ b/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 getFromShow(show: string | number, args?: ApiArgs): Observable> { - return this.client.get(`/api/shows/${show}/people${this.ArgsAsQuery(args)}`) + return this.client.get>(`/api/shows/${show}/people${this.ArgsAsQuery(args)}`) .pipe(map(x => Object.assign(new Page(), x))); } } + +@Injectable({ + providedIn: 'root' +}) +export class ShowService extends CrudApi +{ + constructor(client: HttpClient) + { + super(client, "shows"); + } + + getForCollection(collection: string | number, args?: ApiArgs) : Observable> + { + return this.client.get>(`/api/collections/${collection}/shows${this.ArgsAsQuery(args)}`) + .pipe(map(x => Object.assign(new Page(), x))); + } +} + diff --git a/src/models/collection.ts b/src/models/collection.ts index bb533373..de44a559 100644 --- a/src/models/collection.ts +++ b/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;