MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

update FOS page, change to new uoa-admin-tools duffy port

This commit is contained in:
Alex Martzios 2022-10-10 17:20:51 +03:00
parent 0bf674b4c0
commit 98effe34a0
4 changed files with 92 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
explore/src/app/fos/fos.component.html
View File

@ -36,107 +36,93 @@
</div> </div>
</div> </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 *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 class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid> <div uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
<div class="uk-margin-large-bottom"> <div class="uk-flex uk-flex-right uk-margin-small-bottom">
<div search-input [searchControl]="keywordControl" [options]="fosOptions" placeholder="Search" (searchEmitter)="onSubmit()" <div search-input [searchControl]="keywordControl" [options]="fosOptions" placeholder="Search"
class="uk-width-large"></div> class="uk-width-large"></div>
</div> </div>
</div> </div>
<ng-container *ngIf="keyword && keyword.length"> <ng-container>
<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">
<div class="uk-margin-top uk-padding-small"> <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"> <div class="uk-width-1-4">
<ul class="uk-nav uk-nav-default"> <div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 150;">
<li *ngFor="let item of fos; index as i" <ul *ngIf="!keyword" class="uk-tab uk-tab-left">
class="uk-margin-small-bottom uk-text-capitalize" <li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
[class]="index == i ? 'uk-active':''" class="uk-margin-small-bottom uk-text-capitalize">
(click)="changeDisplayedFos(i)"> <a routerLink="./" [fragment]="item.id">{{item.id}}</a>
<a class="uk-padding-remove">{{item.id}}</a> </li>
</li> </ul>
</ul> <ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
</div> <li *ngFor="let item of viewResults; index as i"
<div *ngIf="fos[index]" class="uk-width-3-4"> class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
<div class="uk-text-capitalize"> <a routerLink="./" [fragment]="item.id">{{item.id}}</a>
<h2 class="uk-h4 uk-margin-remove"> </li>
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(fos[index].id)}" </ul>
class="uk-link-text">
{{fos[index].id}}
</a>
</h2>
</div> </div>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false"> </div>
<div *ngFor="let child of fos[index].children"> <div class="uk-width-expand">
<div class="whole-child uk-text-capitalize"> <ng-container *ngIf="!keyword">
<h3 class="uk-h6 uk-margin-small-bottom"> <div [id]="item.id" *ngFor="let item of fos; index as i">
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}" <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"> class="uk-link-text">
{{child.id}} {{item.id}}
</a> </a>
</h3> </h2>
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;"> </div>
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}" <div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
class="uk-link-text"> <div *ngFor="let child of item.children">
{{subChild.id}} <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> </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>
</div> </div>
</div> </ng-container>
</div> </div>
</div> </div>
</div> <ng-container *ngIf="keyword && viewResults?.length == 0">
</ng-container> <div class="uk-padding-large uk-text-center">
<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">
<h2 class="uk-h3">No results were found.</h2> <h2 class="uk-h3">No results were found.</h2>
</div> </div>
</ng-container> </ng-container>

48
explore/src/app/fos/fos.component.ts
View File

@ -12,6 +12,7 @@ import {Location} from "@angular/common";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class"; import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
@Component({ @Component({
selector: 'fos', selector: 'fos',
@ -25,10 +26,10 @@ export class FosComponent implements OnInit, OnDestroy {
public fos: any[] = []; public fos: any[] = [];
public fosOptions: string[] = []; public fosOptions: string[] = [];
public index: number = 0; public activeSection: string;
public keywordControl: FormControl; public keywordControl: FormControl;
public keyword: string = null; public keyword: string;
public viewResults = []; public viewResults = [];
@ -60,17 +61,21 @@ export class FosComponent implements OnInit, OnDestroy {
this.updateUrl(this.url); this.updateUrl(this.url);
this.updateTitle(this.pageTitle); this.updateTitle(this.pageTitle);
this.updateDescription(this.pageDescription); this.updateDescription(this.pageDescription);
this.keywordControl = this.fb.control('');
this.httpClient.get(properties.domain+'/assets/vocabulary/fos.json').subscribe(data => { this.httpClient.get(properties.domain+'/assets/vocabulary/fos.json').subscribe(data => {
this.fos = data['fos']; this.fos = data['fos'];
this.convertFosToOptions(); this.convertFosToOptions();
this.subscriptions.push(this.route.queryParams.subscribe(params => { this.subscriptions.push(this.route.fragment.subscribe(fragment => {
if(params.keyword) { if(fragment) {
this.keywordControl.setValue(params.keyword); this.activeSection = fragment;
this.keyword = this.keywordControl.value; } else {
this.findMatches(); 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(); 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() { convertFosToOptions() {
this.fosOptions = []; this.fosOptions = [];
@ -110,14 +102,14 @@ export class FosComponent implements OnInit, OnDestroy {
}); });
} }
findMatches() { findMatches(value: string) {
this.viewResults = JSON.parse(JSON.stringify(this.fos)); this.viewResults = JSON.parse(JSON.stringify(this.fos));
let matchLevel1: boolean = false; let matchLevel1: boolean = false;
let matchLevel2: boolean = false; let matchLevel2: boolean = false;
// 1st level search // 1st level search
if(this.viewResults.length) { if(this.viewResults.length) {
this.viewResults = this.viewResults.filter(item => { this.viewResults = this.viewResults.filter(item => {
if(item.id.includes(this.keyword.toLowerCase())) { if(item.id.includes(value?.toLowerCase())) {
matchLevel1 = true; matchLevel1 = true;
} else { } else {
matchLevel1 = false; matchLevel1 = false;
@ -125,14 +117,14 @@ export class FosComponent implements OnInit, OnDestroy {
// // 2nd level search // // 2nd level search
if(item.children?.length && !matchLevel1) { if(item.children?.length && !matchLevel1) {
item.children = item.children.filter(subItem => { item.children = item.children.filter(subItem => {
if(subItem.id.includes(this.keyword.toLowerCase())) { if(subItem.id.includes(value?.toLowerCase())) {
matchLevel2 = true; matchLevel2 = true;
} else { } else {
matchLevel2 = false; matchLevel2 = false;
} }
// 3rd level search // 3rd level search
if(subItem.children?.length && !matchLevel2) { 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; 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 { public urlEncodeAndQuote(str: string): string {
return StringUtils.quote(StringUtils.URIEncode(str)); return StringUtils.quote(StringUtils.URIEncode(str));
} }

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 9ac7ed93d4420cf904609b1fbfbe341cc4ae8836 Subproject commit d6c54949df4c0106ad0f290fcc1c245a9324015d

2
explore/src/environments/environment.ts
View File

@ -65,7 +65,7 @@ export let properties: EnvProperties = {
cacheUrl: "http://dl170.madgik.di.uoa.gr:3000/get?url=", 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", adminToolsCommunity: "openaire",
datasourcesAPI: "https://beta.services.openaire.eu/openaire/ds/api/", datasourcesAPI: "https://beta.services.openaire.eu/openaire/ds/api/",