redesign develop page, update submodules

This commit is contained in:
Alex Martzios 2022-11-03 11:11:11 +02:00
parent a36c695d2b
commit 623c5fbc6e
3 changed files with 89 additions and 102 deletions

View File

@ -7,91 +7,82 @@ import {AggregatorInfo, PortalAggregators} from "../utils/aggregators";
import {ConnectHelper} from "../openaireLibrary/connect/connectHelper"; import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
@Component({ @Component({
selector: 'develop', selector: 'develop',
template: ` template: `
<div page-content> <div class="uk-section">
<div inner> <div class="uk-container uk-container-large">
<div *ngIf="aggregator" class="uk-container uk-container-large uk-section-small"> <h1>OpenAIRE APIs<br> for developers<span class="uk-text-primary">.</span></h1>
<h2 class="uk-text-center"> </div>
Develop <div class="uk-section uk-container uk-container-large">
</h2> <div class="uk-grid uk-grid-large uk-child-width-1-2@m" uk-grid>
<div class="uk-margin-medium-top uk-card uk-card-body uk-card-default"> <div class="uk-text-center uk-margin-large-top">
<h3 class="uk-text-center">Help developers with <span <div class="uk-width-2-3@m uk-margin-auto@m">
class="portal-color uk-text-bold">OpenAIRE APIs</span> <div class="uk-icon-bg-shadow uk-icon-bg-shadow-large uk-margin-auto">
</h3> <icon name="description" customClass="uk-text-background" [flex]="true" ratio="2.5" type="outlined" visuallyHidden="For {{openaireEntities.RESULTS}}"></icon>
<div class="uk-margin-large-top uk-margin-medium-bottom"> </div>
Not sure where to start? Let us give you some guides and request examples. <h3>For {{openaireEntities.RESULTS | lowercase}}</h3>
</div> <div class="uk-margin-bottom">
<p> For {{openaireEntities.RESULTS | lowercase}} ({{openaireEntities.PUBLICATIONS | lowercase}}, {{openaireEntities.DATASETS | lowercase}}, {{openaireEntities.SOFTWARE | lowercase}} and {{openaireEntities.OTHER | lowercase}}) you can use the Selective Access APIs by adding the community parameter.
<span class="uk-text-bold">For research outcomes </span> </div>
(publications, datasets, software and other research data) you can use the <a class="uk-display-inline-block uk-button uk-button-text"
<a href="https://graph.openaire.eu/develop/api.html" target="_blank">Selective Access APIs</a> href="https://graph.openaire.eu/develop/api.html" target="_blank">
by adding the <span class="uk-text-lowercase">country</span> parameter. <span class="uk-flex uk-flex-middle">
</p> <span>Selective Access APIs</span>
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid> </span>
<div> </a>
</div>
<p> </div>
Request examples: <div class="uk-margin-large-top">
</p> <div class="uk-margin-top">
<ul class="portal-circle"> <div>Request examples:</div>
<li> <ul class="uk-list uk-list-large uk-list-bullet uk-list-primary">
<span class="uk-text-bold">Access Publications</span><br> <li>
<span class="uk-text-bold">GET</span> <span>Access all </span><span class="uk-text-bolder">{{openaireEntities.RESULTS}}</span> ({{openaireEntities.PUBLICATIONS}}, {{openaireEntities.DATASETS}}, {{openaireEntities.SOFTWARE}}, {{openaireEntities.OTHER}})<br>
<span <span class="uk-text-bold uk-margin-small-right">GET</span>
class="uk-text-break space">https://api.openaire.eu/search/publications?country={{aggregator.valueId}}</span> <span class="">https://api.openaire.eu/search/researchProducts?country={{aggregator.valueId}}</span>
</li> </li>
<li> <li>
<span class="uk-text-bold">Access Open Access Publications</span><br> <span>Access </span><span class="uk-text-bolder">{{openaireEntities.PUBLICATIONS}}</span><br>
<span class="uk-text-bold">GET</span> <span class="uk-text-bold uk-margin-small-right">GET</span>
<span <span class="">https://api.openaire.eu/search/publications?country={{aggregator.valueId}}</span>
class="uk-text-break space">http://api.openaire.eu/search/publications?country={{aggregator.valueId}}&OA=true</span> </li>
</li> <li>
<li> <span>Access </span> <span class="uk-text-bolder">Open Access {{openaireEntities.PUBLICATIONS}}</span><br>
<span class="uk-text-bold">Access Datasets</span><br> <span class="uk-text-bold uk-margin-small-right">GET</span>
<span class="uk-text-bold">GET</span> <span class="uk-text-break">http://api.openaire.eu/search/publications?country={{aggregator.valueId}}&OA=true</span>
<span </li>
class="uk-text-break space">https://api.openaire.eu/search/datasets?country={{aggregator.valueId}}</span> <li>
</li> <span>Access </span><span class="uk-text-bolder">{{openaireEntities.DATASETS}}</span><br>
<li> <span class="uk-text-bold uk-margin-small-right">GET</span>
<span class="uk-text-bold">Access Software</span><br> <span class="uk-text-break">https://api.openaire.eu/search/datasets?country={{aggregator.valueId}}</span>
<span class="uk-text-bold">GET</span> </li>
<span <li>
class="uk-text-break space">https://api.openaire.eu/search/software?country={{aggregator.valueId}}</span> <span>Access </span><span class="uk-text-bolder">{{openaireEntities.SOFTWARE}}</span><br>
</li> <span class="uk-text-bold uk-margin-small-right">GET</span>
<li> <span class="uk-text-break">https://api.openaire.eu/search/software?country={{aggregator.valueId}}</span>
<span class="uk-text-bold">Access Other Research</span><br> </li>
<span class="uk-text-bold">GET</span> <li>
<span <span>Access </span><span class="uk-text-bolder">{{openaireEntities.OTHER}}</span><br>
class="uk-text-break space">https://api.openaire.eu/search/other?country={{aggregator.valueId}}</span> <span class="uk-text-bold uk-margin-small-right">GET</span>
</li> <span class="uk-text-break">https://api.openaire.eu/search/other?country={{aggregator.valueId}}</span>
</ul> </li>
</div> </ul>
<div class="uk-flex uk-flex-middle"> </div>
<div class="uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-top"> </div>
<img width="350" src="assets/develop.png"> </div>
</div> </div>
</div> </div>
</div>
<div class="uk-margin-large-top uk-flex uk-flex-center uk-padding">
<div class="documentation">
For <span
class="uk-text-bold">more information</span> on the full potential of the OpenAIRE APIs please check
the <a href="https://graph.openaire.eu/develop" target="_blank">OpenAIRE API Documentation</a>.
</div>
</div>
</div>
</div>
</div>
</div>
`, `,
styleUrls: ['develop.component.css'] styleUrls: ['develop.component.css']
}) })
export class DevelopComponent implements OnInit { export class DevelopComponent implements OnInit {
public aggregator: AggregatorInfo = null; public aggregator: AggregatorInfo = null;
public openaireEntities = OpenaireEntities;
subs: Subscription[] = []; subs: Subscription[] = [];
constructor(private seoService: SEOService, constructor(private seoService: SEOService,
@ -105,34 +96,29 @@ export class DevelopComponent implements OnInit {
} }
} }
ngOnInit() { ngOnInit() {
let id = ConnectHelper.getCommunityFromDomain(properties.domain);
let id = ConnectHelper.getCommunityFromDomain(properties.domain); this.aggregator = PortalAggregators.getFilterInfoByMenuId(id);
this.aggregator = PortalAggregators.getFilterInfoByMenuId(id); if (this.aggregator) {
if (this.aggregator) { /* Metadata */
const url = properties.domain + properties.baseLink + this._router.url;
/* Metadata */ this.seoService.createLinkForCanonicalURL(url, false);
const url = properties.domain + properties.baseLink + this._router.url; this._meta.updateTag({content: url}, "property='og:url'");
this.seoService.createLinkForCanonicalURL(url, false); const description = "Develop | " + this.aggregator.valueName;
this._meta.updateTag({content: url}, "property='og:url'"); const title = "Develop | " + this.aggregator.valueName;
const description = "Develop | " + this.aggregator.valueName; this._meta.updateTag({content: description}, "name='description'");
const title = "Develop | " + this.aggregator.valueName; this._meta.updateTag({content: description}, "property='og:description'");
this._meta.updateTag({content: description}, "name='description'"); this._meta.updateTag({content: title}, "property='og:title'");
this._meta.updateTag({content: description}, "property='og:description'"); this._title.setTitle(title);
this._meta.updateTag({content: title}, "property='og:title'"); if(properties.enablePiwikTrack && (typeof document !== 'undefined')){
this._title.setTitle(title); this.subs.push(this._piwikService.trackView(properties, "OpenAIRE").subscribe());
if(properties.enablePiwikTrack && (typeof document !== 'undefined')){ }
this.subs.push(this._piwikService.trackView(properties, "OpenAIRE").subscribe()); }else {
} this.navigateToError();
}
}else {
this.navigateToError();
}
} }
private navigateToError() { private navigateToError() {
this._router.navigate([properties.errorLink], {queryParams: {'page': this._router.url}}); this._router.navigate([properties.errorLink], {queryParams: {'page': this._router.url}});
} }
} }

View File

@ -4,16 +4,17 @@ import {DevelopComponent} from "./develop.component";
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard"; import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module"; import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
@NgModule({ @NgModule({
declarations: [DevelopComponent], declarations: [DevelopComponent],
imports: [CommonModule,PiwikServiceModule, RouterModule.forChild([ imports: [CommonModule, PiwikServiceModule, RouterModule.forChild([
{ {
path: '', path: '',
component: DevelopComponent, component: DevelopComponent,
canDeactivate: [PreviousRouteRecorder] canDeactivate: [PreviousRouteRecorder]
}, },
])], ]), IconsModule],
exports: [DevelopComponent] exports: [DevelopComponent]
}) })
export class DevelopModule { export class DevelopModule {

@ -1 +1 @@
Subproject commit 35ab282e53ad5b7790bc431820a4400cfc36c977 Subproject commit c2bf664ce363f49f64ca5b05f3456dd902dcad5b