update FOS page, change to new uoa-admin-tools duffy port
This commit is contained in:
parent
0bf674b4c0
commit
98effe34a0
|
|
@ -36,107 +36,93 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
|
||||
<div class="uk-margin-large-bottom">
|
||||
<div search-input [searchControl]="keywordControl" [options]="fosOptions" placeholder="Search" (searchEmitter)="onSubmit()"
|
||||
<div *ngIf="fos?.length" class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
|
||||
<div class="uk-flex uk-flex-right uk-margin-small-bottom">
|
||||
<div search-input [searchControl]="keywordControl" [options]="fosOptions" placeholder="Search"
|
||||
class="uk-width-large"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="keyword && keyword.length">
|
||||
<div class="uk-padding-small">
|
||||
<div class="uk-margin-small-bottom">Search results for:</div>
|
||||
<span class="uk-display-inline-block">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{keyword}}</span>
|
||||
<!-- <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon> -->
|
||||
<button class="uk-close uk-icon" [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
<!-- <a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()" class="uk-link-reset">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{keyword}}</span>
|
||||
<button class="uk-close uk-icon">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</a> -->
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!keyword">
|
||||
<ng-container>
|
||||
<div class="uk-margin-top uk-padding-small">
|
||||
<div class="uk-grid uk-grid-large" uk-grid>
|
||||
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
|
||||
<div class="uk-width-1-4">
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li *ngFor="let item of fos; index as i"
|
||||
class="uk-margin-small-bottom uk-text-capitalize"
|
||||
[class]="index == i ? 'uk-active':''"
|
||||
(click)="changeDisplayedFos(i)">
|
||||
<a class="uk-padding-remove">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="fos[index]" class="uk-width-3-4">
|
||||
<div class="uk-text-capitalize">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(fos[index].id)}"
|
||||
class="uk-link-text">
|
||||
{{fos[index].id}}
|
||||
</a>
|
||||
</h2>
|
||||
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 150;">
|
||||
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
|
||||
class="uk-margin-small-bottom uk-text-capitalize">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of viewResults; index as i"
|
||||
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let child of fos[index].children">
|
||||
<div class="whole-child uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<ng-container *ngIf="!keyword">
|
||||
<div [id]="item.id" *ngFor="let item of fos; index as i">
|
||||
<div class="uk-text-capitalize">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text">
|
||||
{{child.id}}
|
||||
{{item.id}}
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
||||
class="uk-link-text">
|
||||
{{subChild.id}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let child of item.children">
|
||||
<div class="whole-child uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||
class="uk-link-text">
|
||||
{{child.id}}
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
||||
class="uk-link-text">
|
||||
{{subChild.id}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="keyword?.length">
|
||||
<div [id]="item.id" *ngFor="let item of viewResults; index as i">
|
||||
<div
|
||||
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
||||
</a>
|
||||
</h2>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let subItem of item.children">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="keyword && keyword.length">
|
||||
<div class="uk-margin-medium-top uk-padding-small">
|
||||
<ng-container *ngFor="let item of viewResults; let i=index">
|
||||
<div
|
||||
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
||||
</a>
|
||||
</h2>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let subItem of item.children">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!viewResults?.length">
|
||||
<div class="uk-padding uk-text-center">
|
||||
<ng-container *ngIf="keyword && viewResults?.length == 0">
|
||||
<div class="uk-padding-large uk-text-center">
|
||||
<h2 class="uk-h3">No results were found.</h2>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {Location} from "@angular/common";
|
|||
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
|
||||
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
|
||||
|
||||
@Component({
|
||||
selector: 'fos',
|
||||
|
|
@ -25,10 +26,10 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
|
||||
public fos: any[] = [];
|
||||
public fosOptions: string[] = [];
|
||||
public index: number = 0;
|
||||
public activeSection: string;
|
||||
|
||||
public keywordControl: FormControl;
|
||||
public keyword: string = null;
|
||||
public keyword: string;
|
||||
|
||||
public viewResults = [];
|
||||
|
||||
|
|
@ -60,17 +61,21 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
this.updateUrl(this.url);
|
||||
this.updateTitle(this.pageTitle);
|
||||
this.updateDescription(this.pageDescription);
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.httpClient.get(properties.domain+'/assets/vocabulary/fos.json').subscribe(data => {
|
||||
this.fos = data['fos'];
|
||||
this.convertFosToOptions();
|
||||
this.subscriptions.push(this.route.queryParams.subscribe(params => {
|
||||
if(params.keyword) {
|
||||
this.keywordControl.setValue(params.keyword);
|
||||
this.keyword = this.keywordControl.value;
|
||||
this.findMatches();
|
||||
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
|
||||
if(fragment) {
|
||||
this.activeSection = fragment;
|
||||
} else {
|
||||
this.activeSection = this.fos[0].id;
|
||||
}
|
||||
}));
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
this.keyword = value;
|
||||
this.findMatches(this.keyword);
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -79,19 +84,6 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
changeDisplayedFos(i) {
|
||||
this.index = i;
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
if(this.keywordControl.value) {
|
||||
this.keyword = this.keywordControl.value;
|
||||
// TODO: router.navigate();
|
||||
this.location.go(window.location.pathname + '?keyword=' + this.keyword);
|
||||
this.findMatches();
|
||||
}
|
||||
}
|
||||
|
||||
convertFosToOptions() {
|
||||
this.fosOptions = [];
|
||||
|
|
@ -110,14 +102,14 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
findMatches() {
|
||||
findMatches(value: string) {
|
||||
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||
let matchLevel1: boolean = false;
|
||||
let matchLevel2: boolean = false;
|
||||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
if(item.id.includes(this.keyword.toLowerCase())) {
|
||||
if(item.id.includes(value?.toLowerCase())) {
|
||||
matchLevel1 = true;
|
||||
} else {
|
||||
matchLevel1 = false;
|
||||
|
|
@ -125,14 +117,14 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
// // 2nd level search
|
||||
if(item.children?.length && !matchLevel1) {
|
||||
item.children = item.children.filter(subItem => {
|
||||
if(subItem.id.includes(this.keyword.toLowerCase())) {
|
||||
if(subItem.id.includes(value?.toLowerCase())) {
|
||||
matchLevel2 = true;
|
||||
} else {
|
||||
matchLevel2 = false;
|
||||
}
|
||||
// 3rd level search
|
||||
if(subItem.children?.length && !matchLevel2) {
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(this.keyword.toLowerCase()));
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||
}
|
||||
return subItem.children?.length > 0 || matchLevel2;
|
||||
});
|
||||
|
|
@ -150,12 +142,6 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
clearKeyword() {
|
||||
this.keyword = null;
|
||||
this.keywordControl.setValue('');
|
||||
this.location.go(window.location.pathname);
|
||||
}
|
||||
|
||||
public urlEncodeAndQuote(str: string): string {
|
||||
return StringUtils.quote(StringUtils.URIEncode(str));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 9ac7ed93d4420cf904609b1fbfbe341cc4ae8836
|
||||
Subproject commit d6c54949df4c0106ad0f290fcc1c245a9324015d
|
||||
|
|
@ -65,7 +65,7 @@ export let properties: EnvProperties = {
|
|||
|
||||
cacheUrl: "http://dl170.madgik.di.uoa.gr:3000/get?url=",
|
||||
|
||||
adminToolsAPIURL: "http://duffy.di.uoa.gr:8080/uoa-admin-tools/",
|
||||
adminToolsAPIURL: "http://duffy.di.uoa.gr:19280/uoa-admin-tools/",
|
||||
|
||||
adminToolsCommunity: "openaire",
|
||||
datasourcesAPI: "https://beta.services.openaire.eu/openaire/ds/api/",
|
||||
|
|
|
|||
Loading…
Reference in New Issue