create methodological-approach page, changes for slider-tabs component
This commit is contained in:
parent
0069e499bf
commit
a2a71c7334
|
|
@ -0,0 +1,137 @@
|
|||
import {Component, OnDestroy, OnInit} from "@angular/core";
|
||||
import {Subscription} from "rxjs";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {Stakeholder} from "../entities/stakeholder";
|
||||
import {OpenaireEntities} from "../../utils/properties/searchFields";
|
||||
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
|
||||
|
||||
@Component({
|
||||
selector: 'methodological-approach',
|
||||
template: `
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
|
||||
<div class="uk-padding-small uk-padding-remove-horizontal">
|
||||
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
|
||||
<div id="how" class="uk-container uk-container-large">
|
||||
<h2 class="uk-h1" uk-scrollspy-class>
|
||||
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
|
||||
</h2>
|
||||
<div class="uk-padding uk-padding-remove-vertical">
|
||||
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class>
|
||||
<p class="uk-margin-top">Our methodological approach is based on the following operational quality
|
||||
criteria:</p>
|
||||
<ul>
|
||||
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
|
||||
clearly presented.
|
||||
</li>
|
||||
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
|
||||
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
|
||||
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent
|
||||
possible, in order to provide meaningful indicators.
|
||||
</li>
|
||||
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
|
||||
detail, so that
|
||||
it can be verified and used by the scholarly communication community to create ongoing updates to our
|
||||
proposed statistics and indicators.
|
||||
</li>
|
||||
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around
|
||||
well-established open databases
|
||||
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning
|
||||
(ML) - using operational
|
||||
workflows in OpenAIRE to warrant timely results.
|
||||
</li>
|
||||
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable,
|
||||
robust, and aligned
|
||||
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other
|
||||
assessment methods.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a
|
||||
href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
|
||||
target="_blank">this report</a> (DOI: 10.2777/268348).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-background-muted uk-margin-large-top">
|
||||
<div class="uk-section uk-section-large uk-container uk-container-large">
|
||||
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
|
||||
<div>
|
||||
<div style="max-width: 575px;">
|
||||
<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
|
||||
<h2 class="uk-margin-small-top">How? It’s about open data and collaboration<span class="text-graph">.</span></h2>
|
||||
<ul class="uk-list uk-list-bullet uk-margin-large-top">
|
||||
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
|
||||
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span>
|
||||
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
|
||||
</li>
|
||||
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
|
||||
<span class="uk-text-large uk-margin-small-bottom">Based on <span class="uk-text-bold">Open Science principles</span></span>
|
||||
<span>Open data sources, Open APIs, well documented metrics and indicators.</span>
|
||||
</li>
|
||||
<li class="uk-flex uk-flex-column">
|
||||
<span class="uk-text-large uk-margin-small-bottom">Relevance for the <span class="uk-text-bold">Community</span></span>
|
||||
<span>Indicators development and visualizations to meet community requirements.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-position-relative">
|
||||
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/monitor-assets/graph.svg" alt="OpenAIRE Research Graph" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="uk-section uk-section-large uk-container uk-container-large">
|
||||
TODO: Graph scheme
|
||||
</div> -->
|
||||
`
|
||||
})
|
||||
export class MethodolocigalApproachComponent implements OnInit, OnDestroy {
|
||||
public stakeholder: Stakeholder;
|
||||
public tab: 'entities' | 'attributes' = 'entities';
|
||||
private subscriptions: any[] = [];
|
||||
public openaireEntities = OpenaireEntities;
|
||||
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - Methodological approach', keepFormat: true}];
|
||||
|
||||
constructor(private seoService: SEOService,
|
||||
private meta: Meta,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private title: Title) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.subscriptions.push(this.route.params.subscribe(params => {
|
||||
const description = "Monitor | Methodological approach";
|
||||
const title = "Monitor | Methodological approach";
|
||||
this.metaTags(title, description);
|
||||
this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
|
||||
this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof Subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
metaTags(title, description) {
|
||||
const url = properties.domain + properties.baseLink + this.router.url;
|
||||
this.seoService.createLinkForCanonicalURL(url, false);
|
||||
this.meta.updateTag({content: url}, "property='og:url'");
|
||||
this.meta.updateTag({content: description}, "name='description'");
|
||||
this.meta.updateTag({content: description}, "property='og:description'");
|
||||
this.meta.updateTag({content: title}, "property='og:title'");
|
||||
this.title.setTitle(title);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,11 +2,11 @@ import {NgModule} from "@angular/core";
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {TerminologyComponent} from "./terminology.component";
|
||||
import {SeeHowItWorksComponent} from "./see-how-it-works.component";
|
||||
import {MethodolocigalApproachComponent} from "./methodological-approach.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
|
||||
import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
|
||||
import {HowModule} from "../how/how.module";
|
||||
import {TabsModule} from "../../utils/tabs/tabs.module";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {IconsService} from "../../utils/icons/icons.service";
|
||||
import {graph} from "../../utils/icons/icons";
|
||||
|
|
@ -15,7 +15,7 @@ import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
|
|||
import {HelperModule} from "../../utils/helper/helper.module";
|
||||
|
||||
@NgModule({
|
||||
declarations: [TerminologyComponent, SeeHowItWorksComponent],
|
||||
declarations: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent],
|
||||
imports: [CommonModule, RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
|
|
@ -32,8 +32,13 @@ import {HelperModule} from "../../utils/helper/helper.module";
|
|||
component: SeeHowItWorksComponent,
|
||||
canDeactivate: [PreviousRouteRecorder]
|
||||
},
|
||||
]), PageContentModule, HowModule, SliderTabsModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
|
||||
exports: [TerminologyComponent, SeeHowItWorksComponent]
|
||||
{
|
||||
path: 'methodological-approach',
|
||||
component: MethodolocigalApproachComponent,
|
||||
canDeactivate: [PreviousRouteRecorder]
|
||||
}
|
||||
]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
|
||||
exports: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent]
|
||||
})
|
||||
export class MethodologyModule {
|
||||
constructor(private iconsService: IconsService) {
|
||||
|
|
|
|||
|
|
@ -19,16 +19,22 @@ declare var UIkit;
|
|||
selector: 'slider-tabs',
|
||||
template: `
|
||||
<div #tabsElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
|
||||
[ngClass]="background">
|
||||
[ngClass]="customClass">
|
||||
<div [class.uk-slider-container-tabs]="position === 'horizontal'">
|
||||
<ul class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
|
||||
[class.uk-slider-items]="position === 'horizontal'"
|
||||
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
|
||||
[attr.uk-tab]="type === 'static'?('connect: .' + connect):null">
|
||||
[attr.uk-tab]="type === 'static'?('connect: .' + connect):null"
|
||||
[ngClass]="'uk-flex-' + flexPosition">
|
||||
<ng-container *ngIf="type === 'scrollable'">
|
||||
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
|
||||
<a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="type === 'static'">
|
||||
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize">
|
||||
<a>{{tab.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -63,10 +69,15 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
|
|||
@Input()
|
||||
public position: 'horizontal' | 'left' | 'right' = 'horizontal';
|
||||
/**
|
||||
* Tabs background
|
||||
* Tabs flex position: Left is the default.
|
||||
* */
|
||||
@Input()
|
||||
public background: string;
|
||||
public flexPosition: 'center' | 'left' | 'right' = 'left';
|
||||
/**
|
||||
* Tabs custom class
|
||||
* */
|
||||
@Input()
|
||||
public customClass: string;
|
||||
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
|
||||
@ViewChild('tabsElement') tabsElement: ElementRef;
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue