From e789e735fbc23da0621b3f3bd372d3397d4c2818 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 20 Sep 2020 23:06:50 +0200 Subject: [PATCH] Linking the new filter pannel with the back --- .../items-grid/items-grid.component.html | 12 +-- .../items-grid/items-grid.component.ts | 90 ++++++++++++++++--- .../metadata-edit/metadata-edit.component.ts | 2 +- src/models/page.ts | 6 +- src/models/resources/genre.ts | 5 +- src/models/resources/studio.ts | 5 +- 6 files changed, 94 insertions(+), 26 deletions(-) diff --git a/src/app/components/items-grid/items-grid.component.html b/src/app/components/items-grid/items-grid.component.html index 094c19bf..dacd8706 100644 --- a/src/app/components/items-grid/items-grid.component.html +++ b/src/app/components/items-grid/items-grid.component.html @@ -18,9 +18,7 @@ + (click)="this.addFilter('genres', genre)"> {{genre.name}} @@ -30,11 +28,9 @@ - {{studio.name}} + [color]="this.filters.studio == studio ? 'accent' : 'default'" selected + (click)="this.addFilter('studio', studio, false)"> + {{studio.name}} diff --git a/src/app/components/items-grid/items-grid.component.ts b/src/app/components/items-grid/items-grid.component.ts index 8d39fd2c..e8bf1acb 100644 --- a/src/app/components/items-grid/items-grid.component.ts +++ b/src/app/components/items-grid/items-grid.component.ts @@ -1,14 +1,15 @@ -import {Component, Input} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; -import {DomSanitizer} from '@angular/platform-browser'; +import { Component, Input, OnInit } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; +import { DomSanitizer } from '@angular/platform-browser'; import { Genre } from "../../../models/resources/genre"; -import {LibraryItem} from "../../../models/resources/library-item"; -import {Page} from "../../../models/page"; -import {HttpClient} from "@angular/common/http"; -import {Show, ShowRole} from "../../../models/resources/show"; -import {Collection} from "../../../models/resources/collection"; +import { LibraryItem } from "../../../models/resources/library-item"; +import { Page } from "../../../models/page"; +import { HttpClient } from "@angular/common/http"; +import { IResource } from "../../../models/resources/resource"; +import { Show, ShowRole } from "../../../models/resources/show"; +import { Collection } from "../../../models/resources/collection"; import { Studio } from "../../../models/resources/studio"; -import {ItemsUtils} from "../../misc/items-utils"; +import { ItemsUtils } from "../../misc/items-utils"; import { PreLoaderService } from "../../services/pre-loader.service"; @Component({ @@ -16,14 +17,19 @@ import { PreLoaderService } from "../../services/pre-loader.service"; templateUrl: './items-grid.component.html', styleUrls: ['./items-grid.component.scss'] }) -export class ItemsGridComponent +export class ItemsGridComponent implements OnInit { @Input() page: Page; @Input() sortEnabled: boolean = true; + + complexFiltersEnabled: boolean; + defaultType: string; + sortType: string = "title"; sortKeys: string[] = ["title", "start year", "end year"] sortUp: boolean = true; - filters: {genres: Genre[], studios: Studio[]} = {genres: [], studios: []}; + + filters: {genres: Genre[], studio: Studio} = {genres: [], studio: null}; genres: Genre[] = []; studios: Studio[] = []; @@ -46,9 +52,69 @@ export class ItemsGridComponent }); } + ngOnInit() + { + this.defaultType = this.page.this.match(/\/(\w*)($|\?)/)[1]; + this.complexFiltersEnabled = this.defaultType == "shows" || this.defaultType == "items"; + } + getFilterCount() { - return this.filters.genres.length + this.filters.studios.length; + let count: number = this.filters.genres.length; + if (this.filters.studio != null) + count++; + return count; + } + + addFilter(category: string, filter: IResource, isArray: boolean = true, isShowOnly: boolean = true) + { + if (!this.complexFiltersEnabled) + return; + let useShow: boolean; + + if (isArray) + { + if (this.filters[category].includes(filter)) + { + this.filters[category].splice(this.filters[category].indexOf(filter), 1); + useShow = this.getFilterCount() != 0; + } + else + { + this.filters[category].push(filter); + useShow = true; + } + } + else + { + if (this.filters[category] == filter) + { + this.filters[category] = null; + useShow = false; + } + else + { + this.filters[category] = filter; + useShow = filter != null; + } + } + + let url: URL = new URL(this.page.first); + if (isShowOnly) + { + url = useShow + ? new URL(this.page.changeType("shows")) + : new URL(this.page.changeType(this.defaultType)); + } + + if (isArray && this.filters[category].length > 0) + url.searchParams.set(category, `ctn:${this.filters[category].map(x => x.slug).join(',')}`); + else if (!isArray && this.filters[category] != null) + url.searchParams.set(category, filter.slug) + else + url.searchParams.delete(category) + this.client.get>(url.toString()) + .subscribe(x => this.page = Object.assign(new Page(), x)); } getThumb(slug: string) diff --git a/src/app/pages/metadata-edit/metadata-edit.component.ts b/src/app/pages/metadata-edit/metadata-edit.component.ts index 064a01ac..1cc07e07 100644 --- a/src/app/pages/metadata-edit/metadata-edit.component.ts +++ b/src/app/pages/metadata-edit/metadata-edit.component.ts @@ -93,7 +93,7 @@ export class MetadataEditComponent { const input = event.input; const value = event.value; - let genre: Genre = {slug: null, name: value}; + let genre: Genre = {id: 0, slug: null, name: value}; this.show.genres.push(genre); if (input) diff --git a/src/models/page.ts b/src/models/page.ts index 1a19b859..550fc328 100644 --- a/src/models/page.ts +++ b/src/models/page.ts @@ -26,4 +26,8 @@ export class Page this.this = x.this; }); } -} \ No newline at end of file + changeType(type: string) + { + return this.first.replace(/\/\w*($|\?)/, `/${type}$1`) + } +} diff --git a/src/models/resources/genre.ts b/src/models/resources/genre.ts index 88205e9d..77d223cc 100644 --- a/src/models/resources/genre.ts +++ b/src/models/resources/genre.ts @@ -1,5 +1,6 @@ -export interface Genre +import { IResource } from "./resource"; + +export interface Genre extends IResource { - slug: string; name: string; } diff --git a/src/models/resources/studio.ts b/src/models/resources/studio.ts index f939f1df..b23c20e9 100644 --- a/src/models/resources/studio.ts +++ b/src/models/resources/studio.ts @@ -1,5 +1,6 @@ -export interface Studio +import { IResource } from "./resource"; + +export interface Studio extends IResource { - slug: string; name: string; }