[Usage Counts | Trunk]: Add search-input on analytics
This commit is contained in:
parent
7687746c77
commit
166291ce48
|
@ -36,44 +36,6 @@
|
||||||
color: var(--portal-dark-color);
|
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 {
|
.card {
|
||||||
background: #FFFFFF 0 0 no-repeat padding-box;
|
background: #FFFFFF 0 0 no-repeat padding-box;
|
||||||
box-shadow: 0 3px 6px #00000029;
|
box-shadow: 0 3px 6px #00000029;
|
||||||
|
|
|
@ -12,46 +12,11 @@
|
||||||
<div class="uk-padding-small uk-padding-remove-vertical">
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
||||||
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
||||||
<div class="uk-container uk-text-bold">
|
<div class="uk-container uk-text-bold">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile">
|
<div class="uk-width-4-5@m uk-align-center">
|
||||||
<div class="uk-width-3-5">
|
<div search-input #searchInput [control]="countryFb" [showSearch]="showSearch"
|
||||||
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
placeholder="SEARCH FOR A COUNTRY"
|
||||||
<input #input type="text" class="uk-width-1-1"
|
[selected]="country" [loading]="loading" [list]="countries" (searchEmitter)="search($event)" (resetEmitter)="reset()">
|
||||||
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
|
|
||||||
[class.uk-hidden@m]="!showSearch"
|
|
||||||
[class.uk-hidden]="country"
|
|
||||||
placeholder="SEARCH FOR A COUNTRY"
|
|
||||||
(blur)="closeSearch()"
|
|
||||||
aria-label="Number"
|
|
||||||
formControlName="country"
|
|
||||||
[matAutocomplete]="auto">
|
|
||||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
|
|
||||||
<mat-option *ngFor="let option of countries | async" [value]="option">
|
|
||||||
{{option}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-autocomplete>
|
|
||||||
</form>
|
|
||||||
<div *ngIf="country && !showSearch" class="uk-flex uk-flex-left">
|
|
||||||
<span class="uk-flex uk-flex-middle">
|
|
||||||
<span>{{country}}</span>
|
|
||||||
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
|
||||||
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
|
|
||||||
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<button [disabled]="loading" class="search uk-margin-medium-left uk-visible@m"
|
|
||||||
(mousedown)="$event.preventDefault()" (click)="toggle()">
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
|
||||||
<span class="uk-text-uppercase space">search</span>
|
|
||||||
</button>
|
|
||||||
<button [disabled]="loading" class="search uk-hidden@m"
|
|
||||||
(mousedown)="$event.preventDefault()" (click)="search(false)">
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
|
||||||
<span class="uk-text-uppercase space">search</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-margin-medium-bottom">
|
<div class="uk-margin-medium-bottom">
|
||||||
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
||||||
|
|
|
@ -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 {CountryUsageStat, UsageStat} from '../entities/usage-stat';
|
||||||
import {FormControl, FormGroup} from '@angular/forms';
|
import {FormControl} from '@angular/forms';
|
||||||
import {Observable, Subscriber, Subscription} from 'rxjs';
|
import {Observable, Subscriber, Subscription} from 'rxjs';
|
||||||
import {UsageStatsService} from '../services/usage-stats.service';
|
import {UsageStatsService} from '../services/usage-stats.service';
|
||||||
import {map, startWith} from 'rxjs/operators';
|
import {map, startWith} from 'rxjs/operators';
|
||||||
|
@ -13,6 +13,7 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'
|
||||||
import {properties} from '../../environments/environment';
|
import {properties} from '../../environments/environment';
|
||||||
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
||||||
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
|
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
|
||||||
|
import {SearchInputComponent} from '../openaireLibrary/sharedComponents/search-input/search-input.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'analytics',
|
selector: 'analytics',
|
||||||
|
@ -20,7 +21,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
|
||||||
styleUrls: ['analytics.component.css'],
|
styleUrls: ['analytics.component.css'],
|
||||||
})
|
})
|
||||||
export class AnalyticsComponent implements OnInit, OnDestroy {
|
export class AnalyticsComponent implements OnInit, OnDestroy {
|
||||||
public countryFb: FormGroup;
|
public countryFb: FormControl;
|
||||||
public countries: Observable<string[]>;
|
public countries: Observable<string[]>;
|
||||||
public country: string;
|
public country: string;
|
||||||
public loading: boolean = true;
|
public loading: boolean = true;
|
||||||
|
@ -31,12 +32,12 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
|
||||||
private timeouts: any[] = [];
|
private timeouts: any[] = [];
|
||||||
public years = 0;
|
public years = 0;
|
||||||
public charts: SafeUrl[];
|
public charts: SafeUrl[];
|
||||||
@ViewChild('input') input: ElementRef;
|
|
||||||
properties: EnvProperties = properties;
|
properties: EnvProperties = properties;
|
||||||
description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
|
description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
|
||||||
title = "OpenAIRE - UsageCounts | Analytics";
|
title = "OpenAIRE - UsageCounts | Analytics";
|
||||||
subs: Subscription[] = [];
|
subs: Subscription[] = [];
|
||||||
searchSub: Subscription = null;
|
searchSub: Subscription = null;
|
||||||
|
@ViewChild('searchInput') searchInput: SearchInputComponent;
|
||||||
|
|
||||||
constructor(private usageStatsService: UsageStatsService,
|
constructor(private usageStatsService: UsageStatsService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -84,10 +85,8 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
private init() {
|
private init() {
|
||||||
this.countryFb = new FormGroup({
|
this.countryFb = new FormControl(null);
|
||||||
country: new FormControl(null)
|
this.countries = this.countryFb.valueChanges
|
||||||
});
|
|
||||||
this.countries = this.countryFb.get('country').valueChanges
|
|
||||||
.pipe(
|
.pipe(
|
||||||
startWith(''),
|
startWith(''),
|
||||||
map(value => this._filter(value))
|
map(value => this._filter(value))
|
||||||
|
@ -124,7 +123,7 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
public search(show: boolean = false) {
|
public search(show: boolean = false) {
|
||||||
this.country = this.countryFb.value.country;
|
this.country = this.countryFb.value;
|
||||||
this.showSearch = show;
|
this.showSearch = show;
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.clearTimeouts();
|
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));
|
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() {
|
clearTimeouts() {
|
||||||
this.timeouts.forEach(timeout => {
|
this.timeouts.forEach(timeout => {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
|
@ -197,11 +183,8 @@ export class AnalyticsComponent implements OnInit, OnDestroy {
|
||||||
this.clearTimeouts();
|
this.clearTimeouts();
|
||||||
if (this.state == 0) {
|
if (this.state == 0) {
|
||||||
this.init();
|
this.init();
|
||||||
this.showSearch = true;
|
this.searchInput.reset();
|
||||||
setTimeout(() => { // this will make the execution after the above boolean has changed
|
this.search(true);
|
||||||
this.input.nativeElement.focus();
|
|
||||||
}, 0);
|
|
||||||
this.search();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import {NgModule} from "@angular/core";
|
import {NgModule} from '@angular/core';
|
||||||
import {CommonModule} from "@angular/common";
|
import {CommonModule} from '@angular/common';
|
||||||
import {RouterModule} from "@angular/router";
|
import {RouterModule} from '@angular/router';
|
||||||
|
|
||||||
import {AnalyticsComponent} from "./analytics.component";
|
import {AnalyticsComponent} from './analytics.component';
|
||||||
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
import {MatAutocompleteModule} from '@angular/material/autocomplete';
|
||||||
import {ReactiveFormsModule} from '@angular/forms';
|
import {ReactiveFormsModule} from '@angular/forms';
|
||||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
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 {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module';
|
||||||
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
|
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
|
||||||
import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
|
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 {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
|
||||||
|
import {SearchInputModule} from '../openaireLibrary/sharedComponents/search-input/search-input.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
MatAutocompleteModule,
|
|
||||||
ReactiveFormsModule,
|
ReactiveFormsModule,
|
||||||
MatFormFieldModule,
|
|
||||||
MatInputModule,
|
|
||||||
RouterModule.forChild([{
|
RouterModule.forChild([{
|
||||||
path: '', component: AnalyticsComponent
|
path: '', component: AnalyticsComponent
|
||||||
}]),
|
}]),
|
||||||
Schema2jsonldModule,
|
Schema2jsonldModule,
|
||||||
IconsModule,
|
IconsModule,
|
||||||
LoadingModule
|
LoadingModule,
|
||||||
|
SearchInputModule
|
||||||
],
|
],
|
||||||
declarations: [AnalyticsComponent],
|
declarations: [AnalyticsComponent],
|
||||||
exports: [AnalyticsComponent]
|
exports: [AnalyticsComponent]
|
||||||
|
|
Loading…
Reference in New Issue