diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts
index bffeac8f5..11e0d5e60 100644
--- a/src/Ombi/ClientApp/src/app/app.module.ts
+++ b/src/Ombi/ClientApp/src/app/app.module.ts
@@ -18,7 +18,8 @@ import {
} from "primeng/primeng";
import {
- MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule, MatSnackBarModule
+ MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule, MatSnackBarModule,
+ MatProgressSpinnerModule
} from '@angular/material';
import { MatCardModule, MatInputModule, MatTabsModule, MatSlideToggleModule } from "@angular/material";
@@ -129,6 +130,7 @@ export function JwtTokenGetter() {
CardsFreeModule,
OverlayModule,
MatCheckboxModule,
+ MatProgressSpinnerModule,
MDBBootstrapModule.forRoot(),
JwtModule.forRoot({
config: {
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index 26604b3ec..e4bf0cfe8 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -1,62 +1,59 @@
-
- {{applicationName}}
-
-
+
+ {{applicationName}}
+
+
{{nav.icon}}
{{nav.name | translate}}
-
- exit_to_app
- {{ 'NavigationBar.Logout' | translate }}
-
+
+ exit_to_app
+ {{ 'NavigationBar.Logout' | translate }}
+
-
-
-
-
-
+
+
+
+
-
+
+
-
-
+
+
-
+
-
+
-
+
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
index 12bf0002c..839007d4a 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html
@@ -1,30 +1,42 @@
-
+
+
+
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
index 31d3114d6..2c71503d1 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.scss
@@ -1,49 +1,32 @@
$ombi-primary:#3f3f3f;
$ombi-primary-darker:#2b2b2b;
$ombi-accent: #258a6d;
-
@media (max-width: 767px) {
- .quater-width {
- width: 15em !important;
- }
+ .quater-width {
+ width: 15em !important;
+ }
}
.quater-width {
- width: 25em;
+ width: 25em;
}
.autocomplete-img {
- vertical-align: middle;
- height: 63px;
+ vertical-align: middle;
+ height: 63px;
}
.mat-option {
- height: 50px;
- line-height: 50px;
- padding: 0px 5px;
-}
-
-::ng-deep ngb-typeahead-window.dropdown-menu {
- background-color: $ombi-primary;
- overflow: auto;
- height: 33em;
-}
-
-::ng-deep ngb-typeahead-window button.dropdown-item {
- color: white;
-}
-
-::ng-deep ngb-typeahead-window .dropdown-item.active,
-.dropdown-item:active {
- text-decoration: none;
- background-color: $ombi-accent;
+ height: 50px;
+ line-height: 50px;
+ padding: 0px 5px;
}
.search-bar {
- background-color: $ombi-primary-darker;
- border: solid 1px $ombi-primary-darker;
+ background-color: $ombi-primary-darker;
+ border: solid 1px $ombi-primary-darker;
}
.search-bar:focus {
- background-color: white;
-}
+ background-color: white;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
index ed90f8dd1..78045ec57 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts
@@ -1,56 +1,78 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import {
+ debounceTime,
+ distinctUntilChanged,
+ switchMap,
+ tap,
+ finalize,
+} from "rxjs/operators";
-import { SearchV2Service } from '../services/searchV2.service';
-import { IMultiSearchResult } from '../interfaces';
-import { Router } from '@angular/router';
-import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
+import { empty, of } from "rxjs";
+import { SearchV2Service } from "../services/searchV2.service";
+import { IMultiSearchResult } from "../interfaces";
+import { Router } from "@angular/router";
+import { NgbTypeaheadSelectItemEvent } from "@ng-bootstrap/ng-bootstrap";
+import { FormGroup, FormBuilder } from "@angular/forms";
+import { MatAutocompleteSelectedEvent } from "@angular/material";
@Component({
- selector: 'app-nav-search',
- templateUrl: './nav-search.component.html',
- styleUrls: ['./nav-search.component.scss']
+ selector: "app-nav-search",
+ templateUrl: "./nav-search.component.html",
+ styleUrls: ["./nav-search.component.scss"],
})
-export class NavSearchComponent {
+export class NavSearchComponent implements OnInit {
+ public selectedItem: string;
+ public results: IMultiSearchResult[];
+ public searching = false;
- public selectedItem: string;
-
- public searching = false;
- public searchFailed = false;
-
- public formatter = (result: IMultiSearchResult) => {
- return result.title;
- }
-
- public searchModel = (text$: Observable) =>
- text$.pipe(
- debounceTime(600),
- distinctUntilChanged(),
- switchMap(term => term.length < 2 ? []
- : this.searchService.multiSearch(term)
- )
- )
+ public searchForm: FormGroup;
- constructor(private searchService: SearchV2Service, private router: Router) {
+ constructor(
+ private searchService: SearchV2Service,
+ private router: Router,
+ private fb: FormBuilder
+ ) {}
- }
+ public async ngOnInit() {
+ this.searchForm = this.fb.group({
+ input: null,
+ });
-
+ this.searchForm
+ .get("input")
+ .valueChanges.pipe(
+ debounceTime(600),
+ tap(() => (this.searching = true)),
+ switchMap((value: string) => {
+ if (value) {
+ return this.searchService
+ .multiSearch(value)
+ .pipe(finalize(() => (this.searching = false)));
+ }
+ return empty().pipe(finalize(() => (this.searching = false)));
+ })
+ )
+ .subscribe((r) => (this.results = r));
+ }
- public selected(event: NgbTypeaheadSelectItemEvent) {
- if (event.item.mediaType == "movie") {
- this.router.navigate([`details/movie/${event.item.id}`]);
- return;
- } else if (event.item.mediaType == "tv") {
- this.router.navigate([`details/tv/${event.item.id}/true`]);
- return;
- } else if (event.item.mediaType == "person") {
- this.router.navigate([`discover/actor/${event.item.id}`]);
- return;
- } else if (event.item.mediaType == "Artist") {
- this.router.navigate([`details/artist/${event.item.id}`]);
- return;
- }
+ public selected(event: MatAutocompleteSelectedEvent) {
+ const val = event.option.value as IMultiSearchResult;
+ if (val.mediaType == "movie") {
+ this.router.navigate([`details/movie/${val.id}`]);
+ return;
+ } else if (val.mediaType == "tv") {
+ this.router.navigate([`details/tv/${val.id}/true`]);
+ return;
+ } else if (val.mediaType == "person") {
+ this.router.navigate([`discover/actor/${val.id}`]);
+ return;
+ } else if (val.mediaType == "Artist") {
+ this.router.navigate([`details/artist/${val.id}`]);
+ return;
}
+ }
+ displayFn(result: IMultiSearchResult) {
+ if (result) { return result.title; }
+ }
}