From 166291ce486cdd4ada99d4dec4532245b3294f92 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 11 Jan 2021 15:42:01 +0000 Subject: [PATCH] [Usage Counts | Trunk]: Add search-input on analytics --- src/app/analytics/analytics.component.css | 38 ------------------- src/app/analytics/analytics.component.html | 43 ++-------------------- src/app/analytics/analytics.component.ts | 37 +++++-------------- src/app/analytics/analytics.module.ts | 17 ++++----- 4 files changed, 22 insertions(+), 113 deletions(-) diff --git a/src/app/analytics/analytics.component.css b/src/app/analytics/analytics.component.css index fd5f439..00d3722 100644 --- a/src/app/analytics/analytics.component.css +++ b/src/app/analytics/analytics.component.css @@ -36,44 +36,6 @@ color: var(--portal-dark-color); } -.countries input, .countries input:focus { - background: transparent 0 0 no-repeat padding-box; - border-radius: 4px; - padding: 15px; - border: none; - outline: none; -} - -.countries input::placeholder { - color: #a3a3a3; - font-weight: 600; -} - -@media only screen and (max-width: 980px) { - .countries input { - font-size: 14px; - } - - .countries .search-mobile { - padding-bottom: 5px; - border-bottom: 2px solid var(--portal-main-color); - } -} - -button.search, button.search:hover { - color: #333333; - font-weight: 700; - border: none; - outline: none; - background-color: transparent; - font-family: "Roboto", sans-serif; - font-size: 16px; -} - -button.search:hover { - color: var(--portal-main-color); -} - .card { background: #FFFFFF 0 0 no-repeat padding-box; box-shadow: 0 3px 6px #00000029; diff --git a/src/app/analytics/analytics.component.html b/src/app/analytics/analytics.component.html index 396d2e4..3a95955 100644 --- a/src/app/analytics/analytics.component.html +++ b/src/app/analytics/analytics.component.html @@ -12,46 +12,11 @@

Track Countries Usage Activity

-
-
-
- - - - {{option}} - - -
-
- - {{country}} - - - - - - -
+
+
- -
{{(country) ? country : 'worldwide'}}
diff --git a/src/app/analytics/analytics.component.ts b/src/app/analytics/analytics.component.ts index 562dd22..6143cc7 100644 --- a/src/app/analytics/analytics.component.ts +++ b/src/app/analytics/analytics.component.ts @@ -1,6 +1,6 @@ -import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {CountryUsageStat, UsageStat} from '../entities/usage-stat'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl} from '@angular/forms'; import {Observable, Subscriber, Subscription} from 'rxjs'; import {UsageStatsService} from '../services/usage-stats.service'; import {map, startWith} from 'rxjs/operators'; @@ -13,6 +13,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties' import {properties} from '../../environments/environment'; import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service'; +import {SearchInputComponent} from '../openaireLibrary/sharedComponents/search-input/search-input.component'; @Component({ selector: 'analytics', @@ -20,7 +21,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service'; styleUrls: ['analytics.component.css'], }) export class AnalyticsComponent implements OnInit, OnDestroy { - public countryFb: FormGroup; + public countryFb: FormControl; public countries: Observable; public country: string; public loading: boolean = true; @@ -31,12 +32,12 @@ export class AnalyticsComponent implements OnInit, OnDestroy { private timeouts: any[] = []; public years = 0; public charts: SafeUrl[]; - @ViewChild('input') input: ElementRef; properties: EnvProperties = properties; description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads."; title = "OpenAIRE - UsageCounts | Analytics"; subs: Subscription[] = []; searchSub: Subscription = null; + @ViewChild('searchInput') searchInput: SearchInputComponent; constructor(private usageStatsService: UsageStatsService, private route: ActivatedRoute, @@ -84,10 +85,8 @@ export class AnalyticsComponent implements OnInit, OnDestroy { } private init() { - this.countryFb = new FormGroup({ - country: new FormControl(null) - }); - this.countries = this.countryFb.get('country').valueChanges + this.countryFb = new FormControl(null); + this.countries = this.countryFb.valueChanges .pipe( startWith(''), map(value => this._filter(value)) @@ -124,7 +123,7 @@ export class AnalyticsComponent implements OnInit, OnDestroy { } public search(show: boolean = false) { - this.country = this.countryFb.value.country; + this.country = this.countryFb.value; this.showSearch = show; this.loading = true; this.clearTimeouts(); @@ -170,19 +169,6 @@ export class AnalyticsComponent implements OnInit, OnDestroy { return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue)); } - toggle() { - this.showSearch = !this.showSearch; - if (this.showSearch) { - setTimeout(() => { // this will make the execution after the above boolean has changed - this.input.nativeElement.focus(); - }, 0); - } - } - - closeSearch() { - this.showSearch = false; - } - clearTimeouts() { this.timeouts.forEach(timeout => { clearTimeout(timeout); @@ -197,11 +183,8 @@ export class AnalyticsComponent implements OnInit, OnDestroy { this.clearTimeouts(); if (this.state == 0) { this.init(); - this.showSearch = true; - setTimeout(() => { // this will make the execution after the above boolean has changed - this.input.nativeElement.focus(); - }, 0); - this.search(); + this.searchInput.reset(); + this.search(true); } } diff --git a/src/app/analytics/analytics.module.ts b/src/app/analytics/analytics.module.ts index a587666..17de314 100644 --- a/src/app/analytics/analytics.module.ts +++ b/src/app/analytics/analytics.module.ts @@ -1,8 +1,8 @@ -import {NgModule} from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {RouterModule} from "@angular/router"; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {RouterModule} from '@angular/router'; -import {AnalyticsComponent} from "./analytics.component"; +import {AnalyticsComponent} from './analytics.component'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {ReactiveFormsModule} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -10,22 +10,21 @@ import {MatInputModule} from '@angular/material/input'; import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module'; import {IconsModule} from '../openaireLibrary/utils/icons/icons.module'; import {IconsService} from '../openaireLibrary/utils/icons/icons.service'; -import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons'; +import {arrow_down} from '../openaireLibrary/utils/icons/icons'; import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module'; +import {SearchInputModule} from '../openaireLibrary/sharedComponents/search-input/search-input.module'; @NgModule({ imports: [ CommonModule, - MatAutocompleteModule, ReactiveFormsModule, - MatFormFieldModule, - MatInputModule, RouterModule.forChild([{ path: '', component: AnalyticsComponent }]), Schema2jsonldModule, IconsModule, - LoadingModule + LoadingModule, + SearchInputModule ], declarations: [AnalyticsComponent], exports: [AnalyticsComponent]