mirror of https://github.com/Ombi-app/Ombi
parent
4118f0de41
commit
6ee9606f7c
@ -0,0 +1,24 @@
|
|||||||
|
<mat-form-field class="example-chip-list" appearance="fill">
|
||||||
|
<mat-label>Watch Providers</mat-label>
|
||||||
|
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||||
|
<mat-chip
|
||||||
|
*ngFor="let word of form.controls.watchProviders.value"
|
||||||
|
[removable]="true"
|
||||||
|
(removed)="remove(word)">
|
||||||
|
{{word.provider_name}}
|
||||||
|
<mat-icon matChipRemove>cancel</mat-icon>
|
||||||
|
</mat-chip>
|
||||||
|
<input
|
||||||
|
placeholder="Search Keyword"
|
||||||
|
#keywordInput
|
||||||
|
[formControl]="control"
|
||||||
|
[matAutocomplete]="auto"
|
||||||
|
[matChipInputFor]="chipList"/>
|
||||||
|
</mat-chip-list>
|
||||||
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||||
|
<mat-option *ngFor="let word of filteredList | async" [value]="word">
|
||||||
|
{{word.provider_name}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-autocomplete>
|
||||||
|
</mat-form-field>
|
||||||
|
|
@ -0,0 +1,77 @@
|
|||||||
|
import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
|
||||||
|
import { FormControl, FormGroup } from "@angular/forms";
|
||||||
|
import { IMovieDbKeyword, IWatchProvidersResults } from "../../../interfaces";
|
||||||
|
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from "rxjs/operators";
|
||||||
|
|
||||||
|
import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
|
||||||
|
import { Observable } from "rxjs";
|
||||||
|
import { TheMovieDbService } from "../../../services";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "watch-providers-select",
|
||||||
|
templateUrl: "watch-providers-select.component.html"
|
||||||
|
})
|
||||||
|
export class WatchProvidersSelectComponent {
|
||||||
|
constructor(
|
||||||
|
private tmdbService: TheMovieDbService
|
||||||
|
) {}
|
||||||
|
|
||||||
|
private _mediaType: string;
|
||||||
|
@Input() set mediaType(type: string) {
|
||||||
|
this._mediaType = type;
|
||||||
|
this.tmdbService.getWatchProviders(this._mediaType).subscribe((res) => {
|
||||||
|
this.watchProviders = res;
|
||||||
|
this.filteredList = this.control.valueChanges.pipe(
|
||||||
|
startWith(''),
|
||||||
|
map((genre: string | null) => genre ? this._filter(genre) : this.watchProviders.slice()));
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
get mediaType(): string {
|
||||||
|
return this._mediaType;
|
||||||
|
}
|
||||||
|
@Input() public form: FormGroup;
|
||||||
|
|
||||||
|
public watchProviders: IWatchProvidersResults[] = [];
|
||||||
|
public control = new FormControl();
|
||||||
|
public filteredTags: IWatchProvidersResults[];
|
||||||
|
public filteredList: Observable<IWatchProvidersResults[]>;
|
||||||
|
|
||||||
|
@ViewChild('keywordInput') input: ElementRef<HTMLInputElement>;
|
||||||
|
|
||||||
|
|
||||||
|
remove(word: IWatchProvidersResults): void {
|
||||||
|
const exisiting = this.form.controls.watchProviders.value;
|
||||||
|
const index = exisiting.indexOf(word);
|
||||||
|
|
||||||
|
if (index >= 0) {
|
||||||
|
exisiting.splice(index, 1);
|
||||||
|
this.form.controls.watchProviders.setValue(exisiting);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
selected(event: MatAutocompleteSelectedEvent): void {
|
||||||
|
const val = event.option.value;
|
||||||
|
const exisiting = this.form.controls.watchProviders.value;
|
||||||
|
if (exisiting.indexOf(val) < 0) {
|
||||||
|
exisiting.push(val);
|
||||||
|
}
|
||||||
|
this.form.controls.watchProviders.setValue(exisiting);
|
||||||
|
this.input.nativeElement.value = '';
|
||||||
|
this.control.setValue(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
private _filter(value: string|IWatchProvidersResults): IWatchProvidersResults[] {
|
||||||
|
if (typeof value === 'object') {
|
||||||
|
const filterValue = value.provider_name.toLowerCase();
|
||||||
|
return this.watchProviders.filter(g => g.provider_name.toLowerCase().includes(filterValue));
|
||||||
|
} else if (typeof value === 'string') {
|
||||||
|
const filterValue = value.toLowerCase();
|
||||||
|
return this.watchProviders.filter(g => g.provider_name.toLowerCase().includes(filterValue));
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.watchProviders;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in new issue