create methodological-approach page, changes for slider-tabs component

This commit is contained in:
Alex Martzios 2022-10-24 12:57:52 +03:00
parent 0069e499bf
commit a2a71c7334
3 changed files with 161 additions and 8 deletions

View File

@ -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? Its 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);
}
}

View File

@ -2,11 +2,11 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {TerminologyComponent} from "./terminology.component"; import {TerminologyComponent} from "./terminology.component";
import {SeeHowItWorksComponent} from "./see-how-it-works.component"; import {SeeHowItWorksComponent} from "./see-how-it-works.component";
import {MethodolocigalApproachComponent} from "./methodological-approach.component";
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard"; import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
import {HowModule} from "../how/how.module"; import {HowModule} from "../how/how.module";
import {TabsModule} from "../../utils/tabs/tabs.module";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons"; 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"; import {HelperModule} from "../../utils/helper/helper.module";
@NgModule({ @NgModule({
declarations: [TerminologyComponent, SeeHowItWorksComponent], declarations: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent],
imports: [CommonModule, RouterModule.forChild([ imports: [CommonModule, RouterModule.forChild([
{ {
path: '', path: '',
@ -32,8 +32,13 @@ import {HelperModule} from "../../utils/helper/helper.module";
component: SeeHowItWorksComponent, component: SeeHowItWorksComponent,
canDeactivate: [PreviousRouteRecorder] 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 { export class MethodologyModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {

View File

@ -19,16 +19,22 @@ declare var UIkit;
selector: 'slider-tabs', selector: 'slider-tabs',
template: ` template: `
<div #tabsElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'" <div #tabsElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="background"> [ngClass]="customClass">
<div [class.uk-slider-container-tabs]="position === 'horizontal'"> <div [class.uk-slider-container-tabs]="position === 'horizontal'">
<ul class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'" <ul class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
[class.uk-slider-items]="position === 'horizontal'" [class.uk-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'" [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'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active"> <li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
</li> </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> </ng-container>
</ul> </ul>
</div> </div>
@ -62,11 +68,16 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
* */ * */
@Input() @Input()
public position: 'horizontal' | 'left' | 'right' = 'horizontal'; public position: 'horizontal' | 'left' | 'right' = 'horizontal';
/**
* Tabs flex position: Left is the default.
* */
@Input()
public flexPosition: 'center' | 'left' | 'right' = 'left';
/** /**
* Tabs background * Tabs custom class
* */ * */
@Input() @Input()
public background: string; public customClass: string;
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>; @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
@ViewChild('tabsElement') tabsElement: ElementRef; @ViewChild('tabsElement') tabsElement: ElementRef;
/** /**