MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into stats-profile

This commit is contained in:
Konstantinos Triantafyllou 2023-05-16 13:17:56 +03:00
parent 2d01e7f945 99492a2f08
commit 2ca9f0bdd4
11 changed files with 155 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -59,7 +59,7 @@ export class LayoutService {
/**
* Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
*/
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
*/

299
monitor/how/how.component.less
View File

@ -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;
}
}

72
monitor/how/how.component.ts
View File

@ -1,72 +0,0 @@
import {Component} from "@angular/core";
@Component({
selector: 'how',
template: `
<div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 100">
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s first" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div>
<div class="uk-text-center uk-text-large">
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
</div>
</div>
<div class="uk-width-1-3@s second" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
</div>
</div>
<div class="uk-width-1-3@s third" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div>
<div class="uk-text-center uk-text-large">
build an open, global<br>and trusted Research graph
</div>
</div>
</div>
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
</div>
<div class="uk-text-center">
we perform <span class="uk-text-uppercase uk-text-bold">Statistical <br> Analysis</span> and produce <br>
<span class="uk-text-primary">Open Science Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s fifth" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
</div>
<div class="uk-text-center">
furthermore <span class="uk-text-uppercase uk-text-bold">Network<br>Analysis</span> producing <br>
<span class="uk-text-primary">Collaboration Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
</div>
<div class="uk-text-center">
Often combine with external data <br>
(patents, social, company) and
perform <br><span class="uk-text-uppercase uk-text-bold">Impact Analysis</span> to
produce <br><span class="uk-text-primary">Innovation Indicators</span>
</div>
</div>
</div>
<div class="final" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
</div>
</div>
</div>
`,
styleUrls: ['how.component.less']
})
export class HowComponent {
}

12
monitor/how/how.module.ts
View File

@ -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 {
}

4
monitor/indicators/indicator-themes.component.ts
View File

@ -26,7 +26,7 @@ import {Subscriber} from "rxjs";
<div>
<h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
<p>
This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. 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 <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p>
<p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
@ -50,7 +50,7 @@ import {Subscriber} from "rxjs";
<div>
<h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5>
<p>
This is the current set of indicator themes we cover. We’ll keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Research Graph</a>. 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 <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p>
<p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,

12
monitor/methodology/methodological-approach.component.ts
View File

@ -32,7 +32,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</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
multiple data sources are ingested in the OpenAIRE 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
@ -69,7 +69,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
<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 class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire 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">
@ -84,7 +84,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div>
</div>
<div class="uk-position-relative">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Graph" loading="lazy">
</div>
</div>
</div>
@ -105,7 +105,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</li>
<li class="uk-margin-small-bottom"><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
multiple data sources are ingested in the OpenAIRE Graph for coverage to the fullest extent
possible, in order to provide meaningful indicators.
</li>
<li class="uk-margin-small-bottom"><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
@ -131,7 +131,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div>
</div>
<div class="uk-margin-xlarge-top uk-padding-large">
<img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
<img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Graph" loading="lazy">
</div>
<div class="uk-margin-top uk-margin-large-bottom">
<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
@ -139,7 +139,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
<h2 class="uk-margin-remove-top uk-padding uk-padding-remove-vertical uk-padding-remove-left">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 class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire 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">

8
monitor/methodology/methodology.module.ts
View File

@ -5,10 +5,7 @@ import {MethodolocigalApproachComponent} from "./methodological-approach.compone
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 {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {graph} from "../../utils/icons/icons";
import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
import {HelperModule} from "../../utils/helper/helper.module";
@ -32,11 +29,8 @@ import {HelperModule} from "../../utils/helper/helper.module";
component: MethodolocigalApproachComponent,
canDeactivate: [PreviousRouteRecorder]
}
]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
]), PageContentModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
exports: [TerminologyComponent, MethodolocigalApproachComponent]
})
export class MethodologyModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([graph]);
}
}

14
monitor/methodology/terminology.component.ts
View File

@ -42,10 +42,9 @@ declare var ResizeObserver;
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-meta">More information for </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
<span class="uk-text-meta">.</span>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
</a>
</div>
</div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
@ -87,10 +86,9 @@ declare var ResizeObserver;
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall uk-text-right">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-meta">More information for </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
<span class="uk-text-meta">.</span>
<a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
<img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
</a>
</div>
</div>
<div>

162
sharedComponents/input/input.component.ts
View File

@ -15,7 +15,7 @@ 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";
@ -30,7 +30,8 @@ export type InputType =
| 'autocomplete_soft'
| 'textarea'
| 'select'
| 'chips';
| 'chips'
| 'year-range';
export interface Option {
icon?: string,
@ -47,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;
/**
@ -62,11 +73,11 @@ declare var UIkit;
<div *ngIf="formControl" [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
[class.active]="!focused && (formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value) || yearRangeActive)"
[class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
<div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
[class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
<div *ngIf="!placeholderInfo?.static && placeholderInfo.label" class="placeholder">
<div *ngIf="!placeholderInfo?.static && placeholderInfo?.label" class="placeholder">
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
@ -139,6 +150,17 @@ declare var UIkit;
</div>
</div>
</ng-template>
<ng-template [ngIf]="type === 'year-range' && yearRange && formAsGroup">
<div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.from.placeholder"
maxlength="4" (click)="activeIndex = 0;$event.preventDefault()" [formControl]="getFormByName(yearRange.from.control)">
</div>
<div class="uk-width-1-5 uk-text-center">-</div>
<div class="uk-width-2-5">
<input #input class="input uk-text-center uk-text-truncate" [attr.placeholder]="yearRange.to.placeholder"
maxlength="4" (click)="activeIndex = 1;$event.preventDefault()" [formControl]="getFormByName(yearRange.to.control)">
</div>
</ng-template>
<div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
class="uk-margin-small-left icon">
@ -156,6 +178,7 @@ declare var UIkit;
</button>
</ng-template>
</div>
<!-- use action-icon class in order to apply css in your icon button-->
<ng-content select="[action]"></ng-content>
</div>
<div class="tools">
@ -178,7 +201,7 @@ declare var UIkit;
</div>
</div>
<span *ngIf="formControl?.invalid && formControl?.touched" class="uk-text-danger">
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
<span *ngIf="errors?.error">{{errors?.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
</span>
<span class="uk-text-small uk-text-danger">
@ -212,7 +235,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<ElementRef>;
/** Textarea options */
@ViewChild('textArea') textArea: ElementRef;
@Input('rows') rows: number = 3;
@ -235,6 +258,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<boolean> = new EventEmitter<boolean>();
@ -258,7 +285,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)) {
@ -324,9 +353,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowLeft', ['$event'])
arrowLeft(event: KeyboardEvent) {
if (this.focused) {
event.preventDefault();
if (this.type === 'chips' && this.focused) {
if (this.activeElement.getValue()) {
event.preventDefault();
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if (index > 0) {
this.activeElement.next(this.chips.get(index - 1));
@ -338,9 +367,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown.arrowRight', ['$event'])
arrowRight(event: KeyboardEvent) {
if (this.focused) {
event.preventDefault();
if (this.type === 'chips' && this.focused) {
if (this.activeElement.getValue()) {
event.preventDefault();
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if (index < this.chips.length - 1) {
this.activeElement.next(this.chips.get(index + 1));
@ -431,6 +460,22 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.unsubscribe();
}
getFormByName(name: string): UntypedFormControl {
if (this.formControl instanceof UntypedFormGroup) {
return <UntypedFormControl>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;
@ -447,6 +492,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();
@ -454,7 +518,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();
}
@ -474,26 +538,28 @@ 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);
}
this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
if (this.formControl.enabled) {
value = (value === '') ? null : value;
if (this.type === 'logoURL') {
this.secure = (!value || value.includes('https://'));
}
if (this.initValue === value || (this.initValue === '' && value === null)) {
this.formControl.markAsPristine();
} else {
this.formControl.markAsDirty();
}
if (this.type === 'autocomplete_soft') {
this.filteredOptions = this.filter(value);
this.cdr.detectChanges();
if (this.focused) {
this.open(true);
if(this.type !== 'year-range') {
value = (value === '') ? null : value;
if (this.type === 'logoURL') {
this.secure = (!value || value.includes('https://'));
}
if (this.initValue === value || (this.initValue === '' && value === null)) {
this.formControl.markAsPristine();
} else {
this.formControl.markAsDirty();
}
if (this.type === 'autocomplete_soft') {
this.filteredOptions = this.filter(value);
this.cdr.detectChanges();
if (this.focused) {
this.open(true);
}
}
}
if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
@ -501,8 +567,36 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
}
}));
if(this.formAsGroup) {
let fromControl = this.formAsGroup.get(this.yearRange.from.control);
this.subscriptions.push(fromControl.valueChanges.subscribe(value => {
let from = this.initValue[this.yearRange.from.control];
if (from === value || (from === '' && value === null)) {
fromControl.markAsPristine();
} else {
fromControl.markAsDirty();
}
if(fromControl.valid) {
if(this.activeIndex === 0 && value) {
this.activeIndex = 1;
this.input.get(this.activeIndex).nativeElement.focus();
}
}
}));
let toControl = this.formAsGroup.get(this.yearRange.to.control);
this.subscriptions.push(toControl.valueChanges.subscribe(value => {
let to = this.initValue[this.yearRange.to.control];
if (to === value || (to === '' && value === null)) {
toControl.markAsPristine();
} else {
toControl.markAsDirty();
}
}));
}
if (this.input) {
this.input.nativeElement.disabled = this.formControl.disabled;
this.input.forEach(input => {
input.nativeElement.disabled = this.formControl.disabled;
});
}
}
@ -597,14 +691,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) {
@ -617,9 +714,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
sharedComponents/quick-contact/quick-contact.service.ts
View File

@ -5,7 +5,7 @@ import { BehaviorSubject, Observable } from "rxjs";
providedIn: "root"
})
export class QuickContactService {
private display: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
private display: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public get isDisplayed(): Observable<boolean> {
return this.display.asObservable();

10
utils/modal/alert.ts
View File

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