From 49f9bec70d9c8e6dcdda9151c5fb42d62225d26b Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 9 May 2023 15:38:37 +0300 Subject: [PATCH 1/5] Add year range in types of input component --- sharedComponents/input/input.component.ts | 111 +++++++++++++++++++--- 1 file changed, 97 insertions(+), 14 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 5d83e1fa..9d63eead 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -15,13 +15,12 @@ import { ViewChild, ViewChildren } from "@angular/core"; -import {AbstractControl, UntypedFormArray, UntypedFormControl, ValidatorFn} from "@angular/forms"; +import {AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidatorFn} from "@angular/forms"; import {HelperFunctions} from "../../utils/HelperFunctions.class"; import {BehaviorSubject, Subscription} from "rxjs"; import {EnvProperties} from "../../utils/properties/env-properties"; import {properties} from "../../../../environments/environment"; import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive"; -import {element} from "protractor"; export type InputType = 'text' @@ -31,7 +30,8 @@ export type InputType = | 'autocomplete_soft' | 'textarea' | 'select' - | 'chips'; + | 'chips' + | 'year-range'; export interface Option { icon?: string, @@ -48,6 +48,16 @@ export interface Placeholder { static?: boolean } +export interface YearRange { + from: ControlConfiguration, + to: ControlConfiguration +} + +export interface ControlConfiguration { + control: string, + placeholder: string +} + declare var UIkit; /** @@ -63,11 +73,11 @@ declare var UIkit;
-
+
+ +
+ +
+
-
+
+ +
+
@@ -157,6 +180,7 @@ declare var UIkit;
+
@@ -179,7 +203,7 @@ declare var UIkit;
- {{formControl.errors.error}} + {{errors?.error}} Please provide a valid URL (e.g. https://example.com) @@ -213,7 +237,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() tooltip: boolean = false; @Input() searchable: boolean = false; /** Text */ - @ViewChild('input') input: ElementRef; + @ViewChildren('input') input: QueryList; /** Textarea options */ @ViewChild('textArea') textArea: ElementRef; @Input('rows') rows: number = 3; @@ -236,6 +260,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() visibleChips: number = 1; @Input() separators: string[] = []; @Input() noWrap: boolean = false; + /** Year Range Configuration */ + @Input() yearRange: YearRange; + public activeIndex: 0 | 1 | null = null; + @Input() visibleRows: number = -1; @Input() extendEnter: () => void = null; @Output() focusEmitter: EventEmitter = new EventEmitter(); @@ -259,7 +287,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang @Input() set placeholder(placeholder: string | Placeholder) { - if (typeof placeholder === 'string') { + if(this.type === 'year-range') { + this.placeholderInfo = null; + } else if (typeof placeholder === 'string') { this.placeholderInfo = {label: placeholder, static: false}; } else { if (placeholder.static && (this.type === 'autocomplete' || this.hint)) { @@ -432,6 +462,22 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.unsubscribe(); } + getFormByName(name: string): UntypedFormControl { + if (this.formControl instanceof UntypedFormGroup) { + return this.formControl.get(name); + } else { + return null; + } + } + + get formAsGroup(): UntypedFormGroup { + if (this.formControl instanceof UntypedFormGroup) { + return this.formControl; + } else { + return null; + } + } + get formAsControl(): UntypedFormControl { if (this.formControl instanceof UntypedFormControl) { return this.formControl; @@ -448,6 +494,25 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } + get yearRangeActive(): boolean { + if(this.yearRange) { + return this.formAsGroup && (this.getFormByName(this.yearRange.from.control)?.value || this.getFormByName(this.yearRange.to.control)?.value); + } + return false; + } + + get errors(): any { + if(this.formAsGroup) { + return (this.formAsGroup.errors + ?this.formAsGroup.errors:(this.getFormByName(this.yearRange.from.control).errors + ?this.getFormByName(this.yearRange.from.control).errors:this.getFormByName(this.yearRange.to.control).errors)); + } else if(this.formAsControl) { + return this.formAsControl.errors; + } else { + return this.searchControl.errors; + } + } + reset() { this.secure = true; this.unsubscribe(); @@ -455,7 +520,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang if (this.type === 'logoURL') { this.secure = (!this.initValue || this.initValue.includes('https://')); } - if (this.optionsArray) { + if (this.optionsArray?.length > 0) { this.filteredOptions = this.filter(''); this.cdr.detectChanges(); } @@ -475,7 +540,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } })); } - if (this.formControl.validator) { + if (this.formAsControl?.validator) { let validator = this.formControl.validator({} as AbstractControl); this.required = (validator && validator.required); } @@ -502,8 +567,20 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } } })); + if(this.formAsGroup) { + this.subscriptions.push(this.formAsGroup.get(this.yearRange.from.control).valueChanges.subscribe(value => { + if(this.formAsGroup.get(this.yearRange.from.control).valid) { + if(this.activeIndex === 0 && value.length > 0) { + this.activeIndex = 1; + this.input.get(this.activeIndex).nativeElement.focus(); + } + } + })); + } if (this.input) { - this.input.nativeElement.disabled = this.formControl.disabled; + this.input.forEach(input => { + input.nativeElement.disabled = this.formControl.disabled; + }); } } @@ -598,14 +675,17 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang } focus(value: boolean, event = null) { + if(!this.activeIndex) { + this.activeIndex = 0; + } if (this.focused) { this.formControl.markAsTouched(); } this.focused = value; this.cdr.detectChanges(); if (this.focused) { - if (this.input) { - this.input.nativeElement.focus(); + if (this.input?.length > 0) { + this.input.get(this.activeIndex).nativeElement.focus(); } else if (this.textArea) { this.textArea.nativeElement.focus(); } else if (this.searchInput) { @@ -618,9 +698,12 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.open(true); } } else { + this.activeIndex = null; this.open(false); if (this.input) { - this.input.nativeElement.blur(); + this.input.forEach(input => { + input.nativeElement.blur(); + }) } else if (this.textArea) { this.textArea.nativeElement.blur(); } else if (this.searchInput) { -- 2.17.1 From 6be478cacc13f3c5e6808d4d5dc358eb53be1faf Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 10 May 2023 11:53:49 +0300 Subject: [PATCH 2/5] Add max-length=4 and text-center in inputs of year-range --- sharedComponents/input/input.component.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 9d63eead..c6d7af71 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -152,15 +152,13 @@ declare var UIkit;
- +
-
- +
Date: Thu, 11 May 2023 13:04:09 +0300 Subject: [PATCH 3/5] Modal: Fix UIkit undefined in server --- utils/modal/alert.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts index d43ab3f2..2c79afbb 100644 --- a/utils/modal/alert.ts +++ b/utils/modal/alert.ts @@ -185,14 +185,16 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy { * Opens an alert window creating backdrop. */ open() { - UIkit.modal(this.element.nativeElement).show(); + if(typeof UIkit !== "undefined") { + UIkit.modal(this.element.nativeElement).show(); + } } /** * ok method closes the modal and emits modalOutput. */ ok() { - if (!this.stayOpen) { + if (!this.stayOpen && typeof UIkit !== "undefined") { UIkit.modal(this.element.nativeElement).hide(); } if (!this.choice) { @@ -209,6 +211,8 @@ export class AlertModal implements OnInit, AfterViewInit, OnDestroy { * cancel method closes the modal. */ cancel() { - UIkit.modal(this.element.nativeElement).hide(); + if(typeof UIkit !== "undefined") { + UIkit.modal(this.element.nativeElement).hide(); + } } } -- 2.17.1 From 7cf23698d789f68c2e2c47644f38129babb373c6 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 15 May 2023 16:47:25 +0300 Subject: [PATCH 4/5] Rename OpenAIRE Research Graph into OpenAIRE Graph and add the new logo in powered by sections. --- monitor/how/how.component.less | 299 ------------------ monitor/how/how.component.ts | 72 ----- monitor/how/how.module.ts | 12 - .../indicators/indicator-themes.component.ts | 4 +- .../methodological-approach.component.ts | 12 +- monitor/methodology/methodology.module.ts | 8 +- monitor/methodology/terminology.component.ts | 14 +- 7 files changed, 15 insertions(+), 406 deletions(-) delete mode 100644 monitor/how/how.component.less delete mode 100644 monitor/how/how.component.ts delete mode 100644 monitor/how/how.module.ts diff --git a/monitor/how/how.component.less b/monitor/how/how.component.less deleted file mode 100644 index 04459c51..00000000 --- a/monitor/how/how.component.less +++ /dev/null @@ -1,299 +0,0 @@ -@import "~src/assets/openaire-theme/less/_import-variables"; - -@media only screen and (min-width: @breakpoint-small) { - .how .first > div:first-child { - position: relative; - } - - .how .first > div:first-child:after { - content: "we"; - font-size: 20px; - font-weight: 600; - text-align: center; - padding-bottom: 5%; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/1.svg"); - right: -21%; - top: 33%; - width: 20%; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } - - .how .second > div:first-child { - position: relative; - padding: 0 10% 0 20%; - } - - .how .second > div:first-child:after { - content: "and"; - font-size: 20px; - font-weight: 600; - text-align: center; - padding-bottom: 5%; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg"); - right: -17%; - top: 33%; - width: 30%; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } - - .how .third { - position: relative; - } - - .how .third > div:first-child { - padding: 0 14% 0 13%; - } - - .how .third:after { - content: "on which"; - font-size: 20px; - font-weight: 600; - padding-right: 30%; - padding-top: 5%; - padding-bottom: 5%; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - bottom: -6%; - left: 13%; - transform: translateY(100%); - width: 140px; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .fourth { - padding: 10% 3% 0 3%; - } - - .how .fourth > div:first-child { - position: relative; - padding: 0 16% 0 16%; - } - - .how .fourth> div:first-child:after { - content: "and"; - font-size: 20px; - font-weight: 600; - text-align: center; - padding-bottom: 5%; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg"); - left: -18%; - top: 36%; - width: 30%; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } - - .how .fifth { - padding: 11% 2% 0 2%; - } - - .how .fifth > div:first-child { - position: relative; - } - - .how .fifth > div:first-child:after { - content: "We"; - font-size: 20px; - font-weight: 600; - text-align: center; - padding-bottom: 5%; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/5.svg"); - left: -35%; - top: 36%; - width: 30%; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } - - .how .sixth { - padding: 10% 5% 0 0; - } - - .how .sixth > div:first-child { - padding: 0 15% 0 15%; - } - - .how .final { - padding: 10% 20% 0 20%; - } - - .how .final > div:first-child { - position: relative; - } - - .how .final > div:first-child:before { - content: ""; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); - left: -26%; - top: -20%; - height: 70%; - width: 30%; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } - - .how .final > div:first-child:after { - content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; - font-size: 20px; - position: absolute; - top: 30%; - width: 250px; - padding: 8% 0 5% 0; - background-size: contain; - background-repeat: no-repeat; - background-position: bottom center; - } -} - -@media only screen and (max-width: @breakpoint-xsmall-max) { - .how .first { - position: relative; - padding-bottom: 30%; - } - - .how .first:after { - content: "we"; - text-align: center; - padding: 10% 34% 10% 0; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 26%; - top: 79%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .second { - position: relative; - padding: 0 10% 30% 10%; - } - - .how .second:after { - content: "and"; - text-align: center; - padding: 10% 34% 10% 0; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 25%; - top: 80%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .third { - position: relative; - padding: 0 5% 30% 5%; - } - - .how .third:after { - content: "on which"; - font-weight: bold; - text-align: center; - padding: 10% 41% 10% 0; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 15%; - top: 83%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .fourth { - position: relative; - padding: 0 0 30% 0; - } - - .how .fourth > div:first-child { - padding: 0 10% 0 10%; - } - - .how .fourth:after { - content: "and"; - text-align: center; - padding: 10% 34% 10% 0; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 26%; - top: 79%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .fifth { - position: relative; - padding: 0 2% 30% 2%; - } - - .how .fifth:after { - content: "We"; - text-align: center; - padding: 10% 34% 10% 0; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 27%; - top: 76%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .sixth { - padding: 0 5% 30% 0; - } - - .how .sixth > div:first-child { - padding: 0 15% 0 15%; - } - - .how .final { - padding: 20% 0 20% 0; - } - - .how .final > div:first-child { - position: relative; - } - - .how .final > div:first-child:before { - content: ""; - position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); - left: 34%; - top: -70%; - height: 70%; - width: 30%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } - - .how .final > div:first-child:after { - content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; - text-align: center; - position: absolute; - left: -62%; - top: 85%; - width: 300px; - padding: 12% 0 0 54%; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - } -} diff --git a/monitor/how/how.component.ts b/monitor/how/how.component.ts deleted file mode 100644 index 251d3549..00000000 --- a/monitor/how/how.component.ts +++ /dev/null @@ -1,72 +0,0 @@ -import {Component} from "@angular/core"; - -@Component({ - selector: 'how', - template: ` -
-
-
-
- -
-
- Starting from existing
research-related data sources -
-
-
-
- -
-
-
-
- -
-
- build an open, global
and trusted Research graph -
-
-
-
-
-
- -
-
- we perform Statistical
Analysis and produce
- Open Science Indicators -
-
-
-
- -
-
- furthermore Network
Analysis producing
- Collaboration Indicators -
-
-
-
- -
-
- Often combine with external data
- (patents, social, company) and - perform
Impact Analysis to - produce
Innovation Indicators -
-
-
-
-
- -
-
-
- `, - styleUrls: ['how.component.less'] -}) -export class HowComponent { - -} diff --git a/monitor/how/how.module.ts b/monitor/how/how.module.ts deleted file mode 100644 index 781800fe..00000000 --- a/monitor/how/how.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {NgModule} from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {HowComponent} from "./how.component"; - -@NgModule({ - imports: [CommonModule], - declarations: [HowComponent], - exports: [HowComponent] -}) -export class HowModule { - -} diff --git a/monitor/indicators/indicator-themes.component.ts b/monitor/indicators/indicator-themes.component.ts index 4f48b5e2..fcb11a8e 100644 --- a/monitor/indicators/indicator-themes.component.ts +++ b/monitor/indicators/indicator-themes.component.ts @@ -26,7 +26,7 @@ import {Subscriber} from "rxjs";
Indicator themes that we are covering in the Monitor dashboards.

- This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the OpenAIRE Research Graph. We are at your disposal, should you have any recommendations! + This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the OpenAIRE Graph. We are at your disposal, should you have any recommendations!

Check out the indicator pages (for funders, @@ -50,7 +50,7 @@ import {Subscriber} from "rxjs";

Indicator themes that we are covering in the Monitor dashboards.

- This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the OpenAIRE Research Graph. We are at your disposal, should you have any recommendations! + This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the OpenAIRE Graph. We are at your disposal, should you have any recommendations!

Check out the indicator pages (for funders, diff --git a/monitor/methodology/methodological-approach.component.ts b/monitor/methodology/methodological-approach.component.ts index e4e9bffe..5ddc49c1 100644 --- a/monitor/methodology/methodological-approach.component.ts +++ b/monitor/methodology/methodological-approach.component.ts @@ -32,7 +32,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";

  • Coverage and accuracy: As detailed in graph.openaire.eu - multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent + multiple data sources are ingested in the OpenAIRE Graph for coverage to the fullest extent possible, in order to provide meaningful indicators.
  • Clarity and replicability: We describe our construction methodology in @@ -69,7 +69,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";

    How? It’s about open data and collaboration.

    • - Built on the OpenAire Research Graph + Built on the OpenAire Graph Linked scholarly information from open initiatives around the world. Beyond publications.
    • @@ -84,7 +84,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
    • - OpenAIRE Research Graph + OpenAIRE Graph
    @@ -105,7 +105,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
  • Coverage and accuracy: As detailed in graph.openaire.eu - multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent + multiple data sources are ingested in the OpenAIRE Graph for coverage to the fullest extent possible, in order to provide meaningful indicators.
  • Clarity and replicability: We describe our construction methodology in @@ -131,7 +131,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
    • - OpenAIRE Research Graph + OpenAIRE Graph
    Completeness, inclusion, transparency and replicability @@ -139,7 +139,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";

    It’s about open data and collaboration.