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

data-transfer-v2 #6

Merged
konstantina.galouni merged 26 commits from data-transfer-v2 into develop 2023-06-13 16:20:04 +02:00
Conversation 0 Commits 26 Files Changed 6 +377 -227
16 changed files with 377 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 217a3969db - Show all commits

2
claims/claim-utils/displayClaims/displayClaims.component.html
View File

@ -86,7 +86,7 @@
</div>
<div class="uk-visible@m">
<div class="claim-divider">
<icon class="uk-position-center uk-background-default" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
<icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">

27
fos/fos-selection/fos-selection.component.html
View File

@ -22,7 +22,7 @@
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
<li *ngFor="let item of viewResults; index as i"
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
<a (click)="scrollToId(item.id)">{{item.id}}</a>
</li>
</ul>
</div>
@ -59,10 +59,6 @@
<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
<h2 class="uk-h4 uk-margin-remove">
{{item.id}}
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
class="uk-link-text">
{{item.id}}
</a> -->
</h2>
</div>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
@ -70,21 +66,13 @@
<div class="uk-text-capitalize">
<h3 class="uk-h6 uk-margin-small-bottom">
{{child.id}}
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
class="uk-link-text">
{{child.id}}
</a> -->
</h3>
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
<input [ngModel]="fosOptions.get(subChild.id)" (ngModelChange)="fosOptions.set(subChild.id, $event)"
<input [formControl]="getControl(subChild.id).get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span [title]="subChild.id">{{subChild.id}}</span>
</label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
class="uk-link-text">
{{subChild.id}}
</a> -->
</div>
</div>
</div>
@ -97,27 +85,18 @@
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
<h2 class="uk-h4 uk-margin-remove"
[innerHTML]="highlightKeyword(item.id)">
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
</a> -->
</h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<div *ngFor="let subItem of item.children">
<h3 class="uk-h6 uk-margin-small-bottom"
[innerHTML]="highlightKeyword(subItem.id)">
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
</a> -->
</h3>
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
<label [class.uk-text-bolder]="subjects?.includes(subSubItem.id)">
<input [ngModel]="fosOptions.get(subSubItem.id)" (ngModelChange)="fosOptions.set(subSubItem.id, $event)"
<input [formControl]="getControl(subSubItem.id).get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subSubItem.id"></span>
</label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
</a> -->
</div>
</div>
</div>

346
fos/fos-selection/fos-selection.component.ts
View File

@ -1,6 +1,6 @@
import {HttpClient} from "@angular/common/http";
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
import {FormBuilder, FormControl} from "@angular/forms";
import {FormBuilder, FormControl, UntypedFormArray} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
@ -13,116 +13,116 @@ import Timeout = NodeJS.Timeout;
declare var UIkit;
@Component({
selector: 'fos-selection',
templateUrl: 'fos-selection.component.html',
styleUrls: ['fos-selection.component.less']
selector: 'fos-selection',
templateUrl: 'fos-selection.component.html',
styleUrls: ['fos-selection.component.less']
})
export class FosSelectionComponent {
public properties: EnvProperties = properties;
@Input() subjects: string[];
public properties: EnvProperties = properties;
@Input() subjects: string[];
@Input() inModal: boolean = false;
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
public loading: boolean;
public fos: any[] = [];
public fosOptions: Map<string, boolean>;
public activeSection: string;
public loading: boolean;
public fos: any[] = [];
// public fosOptions: Map<string, boolean>;
public fosOptions: UntypedFormArray;
public activeSection: string;
public keywordControl: FormControl;
public keyword: string;
public keywordControl: FormControl;
public keyword: string;
public viewResults = [];
public viewResults = [];
public result = [];
public result = [];
private subscriptions: Subscription[] = [];
private observer: IntersectionObserver;
private timeout: Timeout;
@ViewChild('tabs') tabs: ElementRef;
public sliderInit: boolean = false;
private subscriptions: Subscription[] = [];
private observer: IntersectionObserver;
private timeout: Timeout;
@ViewChild('tabs') tabs: ElementRef;
public sliderInit: boolean = false;
constructor(
private httpClient: HttpClient,
private fb: FormBuilder,
private cdr: ChangeDetectorRef,
private route: ActivatedRoute,
private _router: Router
) {}
constructor(
private httpClient: HttpClient,
private fb: FormBuilder,
private cdr: ChangeDetectorRef,
private route: ActivatedRoute,
private _router: Router
) {}
ngOnInit() {
this.loading = true;
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
this.fos = data['fos'];
this.convertFosToOptions();
this.convertFosToOptions();
if (typeof document !== 'undefined') {
setTimeout(()=> {
let slider = UIkit.slider(this.tabs.nativeElement);
slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses();
this.sliderInit = true;
slider.slides.forEach(item => {
item.classList.remove('uk-active');
});
if (this.route.snapshot.fragment) {
this.activeSection = this.route.snapshot.fragment;
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
slider.show(i);
} else {
this.activeSection = this.fos[0].id;
}
ngOnInit() {
this.loading = true;
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
this.fos = data['fos'];
this.convertFosToOptions();
if (typeof document !== 'undefined') {
setTimeout(()=> {
let slider = UIkit.slider(this.tabs.nativeElement);
slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses();
this.sliderInit = true;
slider.slides.forEach(item => {
item.classList.remove('uk-active');
});
if (this.route.snapshot.fragment) {
this.activeSection = this.route.snapshot.fragment;
let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
slider.show(i);
} else {
this.activeSection = this.fos[0].id;
}
this.setObserver();
this.cdr.detectChanges();
});
}
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
if(fragment) {
this.activeSection = fragment;
if(this.tabs) {
let slider = UIkit.slider(this.tabs.nativeElement);
let i = this.fos.findIndex(item => item.id == fragment);
slider.show(i);
}
} else {
this.activeSection = this.fos[0].id;
}
}));
this.keywordControl = this.fb.control('');
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
this.keyword = value;
this.findMatches(this.keyword);
if (typeof document !== 'undefined') {
setTimeout(() => {
this.setObserver();
});
}
}));
});
}
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
if(fragment) {
this.activeSection = fragment;
if(this.tabs) {
let slider = UIkit.slider(this.tabs.nativeElement);
let i = this.fos.findIndex(item => item.id == fragment);
slider.show(i);
}
} else {
this.activeSection = this.fos[0].id;
}
}));
this.keywordControl = this.fb.control('');
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
this.keyword = value;
this.findMatches(this.keyword);
if (typeof document !== 'undefined') {
setTimeout(() => {
this.setObserver();
});
}
}));
this.loading = false;
});
}
}
ngOnDestroy() {
ngOnDestroy() {
for (let sub of this.subscriptions) {
sub.unsubscribe();
}
if(this.observer) {
this.observer.disconnect();
}
if(this.observer) {
this.observer.disconnect();
}
}
private setObserver() {
if(this.observer) {
this.observer.disconnect();
}
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
if(this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
private setObserver() {
if(this.observer) {
this.observer.disconnect();
}
this.observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
if(this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
if(!this.inModal) {
this._router.navigate(['./'], {
fragment: entry.target.id,
@ -132,86 +132,112 @@ export class FosSelectionComponent {
} else {
this.activeSection = entry.target.id;
}
}, 200);
}
});
}, {threshold: 0.1, rootMargin: '-100px'});
this.fos.forEach(fos => {
let element = document.getElementById(fos.id);
if(element) {
this.observer.observe(element);
}
});
}
}, 200);
}
});
}, {threshold: 0.1, rootMargin: '-100px'});
this.fos.forEach(fos => {
let element = document.getElementById(fos.id);
if(element) {
this.observer.observe(element);
}
});
}
convertFosToOptions() {
this.fosOptions = new Map<string, boolean>();
this.fos.forEach(fos => {
this.fosOptions.set(fos.id, false);
if(fos.children) {
fos.children.forEach(child => {
this.fosOptions.set(child.id, false);
convertFosToOptions() {
this.fosOptions = this.fb.array([]);
this.fos.forEach(fos => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(fos.id),
checked: this.fb.control(false)
}));
if(fos.children) {
fos.children.forEach(child => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(fos.id),
checked: this.fb.control(false)
}));
if(child.children) {
child.children.forEach(child2 => {
this.fosOptions.set(child2.id, this.subjects?.includes(child2.id));
});
}
});
}
child.children.forEach(child2 => {
this.fosOptions.push(this.fb.group({
id: this.fb.control(child2.id),
checked: this.fb.control(this.subjects?.includes(child2.id))
}));
});
}
});
}
});
}
findMatches(value: string) {
this.viewResults = JSON.parse(JSON.stringify(this.fos));
let matchLevel1: boolean = false;
let matchLevel2: boolean = false;
// 1st level search
if(this.viewResults.length) {
this.viewResults = this.viewResults.filter(item => {
matchLevel1 = !!item.id.includes(value?.toLowerCase());
// // 2nd level search
if(item.children?.length && !matchLevel1) {
item.children = item.children.filter(subItem => {
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
// 3rd level search
if(subItem.children?.length && !matchLevel2) {
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
}
return subItem.children?.length > 0 || matchLevel2;
});
}
return item.children?.length > 0;
});
}
}
highlightKeyword(name) {
if(name.includes(this.keyword.toLowerCase())) {
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
} else {
return name;
}
}
public reset() {
this.fosOptions.controls.forEach(control => {
control.get('checked').setValue(this.subjects?.includes(control.value.id));
});
}
findMatches(value: string) {
this.viewResults = JSON.parse(JSON.stringify(this.fos));
let matchLevel1: boolean = false;
let matchLevel2: boolean = false;
// 1st level search
if(this.viewResults.length) {
this.viewResults = this.viewResults.filter(item => {
matchLevel1 = !!item.id.includes(value?.toLowerCase());
// // 2nd level search
if(item.children?.length && !matchLevel1) {
item.children = item.children.filter(subItem => {
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
// 3rd level search
if(subItem.children?.length && !matchLevel2) {
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
}
return subItem.children?.length > 0 || matchLevel2;
});
}
return item.children?.length > 0;
});
}
}
highlightKeyword(name) {
if(name.includes(this.keyword.toLowerCase())) {
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
} else {
return name;
}
}
public urlEncodeAndQuote(str: string): string {
return StringUtils.quote(StringUtils.URIEncode(str));
}
public scrollToId(value: string) {
HelperFunctions.scrollToId(value);
this.activeSection = value;
}
public getSelectedSubjects() {
let checked = Array.from(this.fosOptions, function (entry) {
return {id: entry[0], checked: entry[1]};
});
return checked.filter(sub => sub.checked == true);
public scrollToId(value: string) {
HelperFunctions.scrollToId(value);
this.activeSection = value;
}
get calculatedHeight(): number {
if(this.contentHeight && this.searchElement) {
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
}
public getSelectedSubjects() {
if(this.fosOptions) {
return this.fosOptions.value.filter(sub => sub.checked == true);
}
return [];
}
public getControl(id: string) {
if(this.fosOptions?.controls) {
return this.fosOptions.controls.find(control => control.value.id === id);
}
return null;
}
public get hasChanges() {
return !!this.fosOptions && this.fosOptions.dirty;
}
get calculatedHeight(): number {
if(this.contentHeight && this.searchElement) {
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
}
}
}

4
fos/fos-selection/fos-selection.module.ts
View File

@ -1,6 +1,6 @@
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {InputModule} from "../../sharedComponents/input/input.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@ -8,7 +8,7 @@ import {FosSelectionComponent} from './fos-selection.component';
@NgModule({
imports: [
CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
CommonModule, ReactiveFormsModule, LoadingModule, InputModule, SearchInputModule
],
declarations: [
FosSelectionComponent

10
landingPages/dataProvider/dataProvider.component.html
View File

@ -1,6 +1,16 @@
<div class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main">
<div class="dataprovider">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->

6
landingPages/dataProvider/dataProvider.component.ts
View File

@ -215,7 +215,11 @@ export class DataProviderComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

10
landingPages/organization/organization.component.html
View File

@ -1,6 +1,16 @@
<div id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main">
<div class="organization">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left column -->
<div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">

6
landingPages/organization/organization.component.ts
View File

@ -190,7 +190,11 @@ export class OrganizationComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

10
landingPages/project/project.component.html
View File

@ -1,6 +1,16 @@
<div class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main">
<div class="project">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box - actions -->

6
landingPages/project/project.component.ts
View File

@ -235,7 +235,11 @@ export class ProjectComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

10
landingPages/result/resultLanding.component.html
View File

@ -1,6 +1,16 @@
<div id="tm-main" class="landing uk-section uk-padding-remove tm-middle">
<div class="tm-main">
<div class="publication">
<div *ngIf="properties.adminToolsPortalType == 'eosc'" class="eosc-explore-back-search-bar">
<div class="uk-light uk-container uk-container-large uk-padding-small uk-height-1-1">
<div class="uk-flex uk-flex-inline uk-flex-middle uk-height-1-1">
<a href="https://search.marketplace.eosc-portal.eu/" target="_self" class="uk-link-reset uk-flex uk-flex-middle uk-text-light uk-text-small">
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="0.7" customClass="uk-text-light"></icon>
<span class="uk-margin-small-left">Go to Search</span>
</a>
</div>
</div>
</div>
<div *ngIf="!showFeedback" class="uk-grid uk-margin-remove-left" uk-grid>
<!-- left box/sidebar - actions -->

7
landingPages/result/resultLanding.component.ts
View File

@ -231,7 +231,12 @@ export class ResultLandingComponent {
ngAfterViewInit() {
if (typeof document !== 'undefined') {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
// if(properties.adminToolsPortalType !== 'eosc') {
if(document.getElementById("main-menu")) {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
} else {
this.offset = 0;
}
// let bottom = document.getElementById('bottom');
// if(bottom) {
// let observer = new IntersectionObserver(entries => {

16
sdg/sdg-selection/sdg-selection.component.html
View File

@ -4,25 +4,25 @@
<div *ngIf="!loading">
<div class="uk-flex uk-flex-around">
<div>
<div *ngFor="let item of firstColumn; let i = index"
<div *ngFor="let control of firstColumn; let i = index"
class="uk-margin-bottom">
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
<input [(ngModel)]="item.checked"
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
<input [formControl]="control.get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span *ngIf="isFeedback" class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
<span>{{item.id}}</span>
<span>{{control.value.id}}</span>
</label>
</div>
</div>
<div>
<div *ngFor="let item of secondColumn; let i = index"
<div *ngFor="let control of secondColumn; let i = index"
class="uk-margin-bottom">
<label [class.uk-text-bolder]="subjects?.includes(item.id)">
<input [(ngModel)]="item.checked"
<label [class.uk-text-bolder]="subjects?.includes(control.value.id)">
<input [formControl]="control.get('checked')"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span *ngIf="i !== secondColumn.length - 1 && isFeedback"
class="uk-text-uppercase uk-margin-xsmall-right">Goal</span>
<span>{{item.id}}</span>
<span>{{control.value.id}}</span>
</label>
</div>
</div>

44
sdg/sdg-selection/sdg-selection.component.ts
View File

@ -1,5 +1,6 @@
import {HttpClient} from "@angular/common/http";
import {Component, Input} from "@angular/core";
import {UntypedFormArray, UntypedFormBuilder} from "@angular/forms";
import {properties} from "../../../../environments/environment";
import {EnvProperties} from "../../utils/properties/env-properties";
import {StringUtils} from "../../utils/string-utils.class";
@ -16,37 +17,66 @@ export class SdgSelectionComponent {
@Input() isFeedback: boolean = true;
public loading: boolean;
public sdgs: any = [];
public sdgs: UntypedFormArray;
constructor(
private httpClient: HttpClient
private httpClient: HttpClient,
private fb: UntypedFormBuilder
) {}
ngOnInit() {
this.loading = true;
this.sdgs = this.fb.array([]);
this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/sdg.json').subscribe(data => {
data['sdg'].forEach(element => {
this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
// this.sdgs.push({code: element.code, id: element.id, label: element.label, html: element.html, checked: this.subjects?.includes(element.id)});
this.sdgs.push(this.fb.group({
code: this.fb.control(element.code),
id: this.fb.control(element.id),
label: this.fb.control(element.label),
html: this.fb.control(element.html),
checked: this.fb.control(this.subjects?.includes(element.id))
}));
});
if(this.isFeedback) {
this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
// // this.sdgs.push({code: '18', id: 'No SDGs are relevant for this ' + this.getEntityName(this.entityType), label: 'Not relevant', html: 'Not relevant', checked: false});
this.sdgs.push(this.fb.group({
code: this.fb.control('18'),
id: this.fb.control('No SDGs are relevant for this ' + this.getEntityName(this.entityType)),
label: this.fb.control('Not relevant'),
html: this.fb.control('Not relevant'),
checked: this.fb.control(false)
}));
}
this.loading = false;
});
}
public reset() {
this.sdgs.controls.forEach(control => {
control.get('checked').setValue(this.subjects?.includes(control.value.id));
});
}
public get firstColumn() {
return this.sdgs.slice(0, Math.ceil(this.sdgs.length/2));
return this.sdgs.controls.slice(0, Math.ceil(this.sdgs.length/2));
}
public get secondColumn() {
return this.sdgs.slice(Math.ceil(this.sdgs.length/2), this.sdgs.length);
return this.sdgs.controls.slice(Math.ceil(this.sdgs.length/2), this.sdgs.length);
}
public getSelectedSubjects() {
return this.sdgs.filter(sub => sub.checked == true);
if(this.sdgs) {
return this.sdgs.value.filter(sub => sub.checked == true);
}
return [];
}
public get hasChanges() {
return !!this.sdgs && this.sdgs.dirty;
}
private getEntityName (entityType:string) {
return StringUtils.getEntityName(entityType, false);
}

4
sdg/sdg-selection/sdg-selection.module.ts
View File

@ -1,13 +1,13 @@
import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {ReactiveFormsModule} from "@angular/forms";
import {InputModule} from "../../sharedComponents/input/input.module";
import {LoadingModule} from "../../utils/loading/loading.module";
import {SdgSelectionComponent} from "./sdg-selection.component";
@NgModule({
imports: [
CommonModule, FormsModule, LoadingModule, InputModule
CommonModule, ReactiveFormsModule, LoadingModule, InputModule
],
declarations: [
SdgSelectionComponent

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

@ -10,15 +10,18 @@ import {
OnDestroy,
OnInit,
Output,
QueryList,
SimpleChanges,
ViewChild
ViewChild,
ViewChildren
} from "@angular/core";
import {AbstractControl, UntypedFormArray, UntypedFormControl, ValidatorFn} from "@angular/forms";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import {Subscription} from "rxjs";
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' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
@ -63,7 +66,8 @@ declare var UIkit;
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea' && (formControl.value || hint || placeholderInfo?.label))?('title: ' + (formControl.value ?getTooltip(formControl.value):(hint?hint:placeholderInfo?.label)) + '; delay: 500; pos: bottom-left'):null">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[type]="password?'password':'text'" [formControl]="formAsControl" [class.uk-text-truncate]="!focused">
[type]="password?'password':'text'" [formControl]="formAsControl"
[class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
@ -77,7 +81,8 @@ declare var UIkit;
class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
<ng-container *ngIf="!placeholderInfo?.static">
<div *ngIf="!getLabel(formControl.value)" class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="!getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-width-expand uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
@ -86,12 +91,15 @@ declare var UIkit;
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
<ng-container *ngIf="!focused && !selectable">
<div *ngIf="!getLabel(formControl.value)" class="input placeholder uk-text-truncate">{{placeholderInfo?.static?placeholderInfo.label:getLabel(formAsControl.value)}}</div>
<div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
<div *ngIf="!getLabel(formControl.value)"
class="input placeholder uk-text-truncate">{{placeholderInfo?.static ? placeholderInfo.label : getLabel(formAsControl.value)}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate">{{getLabel(formAsControl.value)}}</div>
</ng-container>
<ng-container *ngIf="!focused && selectable" >
<ng-container *ngIf="!focused && selectable">
<div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">{{noValueSelected}}</div>
<div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="getLabel(formControl.value)"
class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete_soft'">
@ -99,18 +107,21 @@ declare var UIkit;
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'chips'">
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
<div *ngFor="let chip of formAsArray.controls; let i=index" [class.uk-hidden]="!focused && i > visibleChips - 1"
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-overflow-auto uk-width-expand"
[class.uk-flex-nowrap]="noWrap" [class.uk-overflow-auto]="noWrap" uk-grid>
<div *ngFor="let chip of formAsArray.controls; let i=index" #chip
[class.uk-hidden]="!focused && i > visibleChips - 1"
class="chip">
<div class="uk-label uk-label-small uk-flex uk-flex-middle"
[attr.uk-tooltip]="(tooltip)?('title: ' + getLabel(chip.value) + '; delay: 500; pos: bottom-left'):null">
<span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
<icon *ngIf="focused" (click)="remove(i, $event)" class="uk-link-text uk-margin-small-left clickable" [flex]="true"
<icon *ngIf="focused" (click)="remove(i, $event)"
class="uk-link-text uk-margin-small-left clickable" [flex]="true"
name="close" ratio="0.7"></icon>
</div>
</div>
<div *ngIf="searchControl && (focused || formAsArray.length === 0)"
class="uk-width-small uk-flex uk-flex-column uk-flex-center">
<div *ngIf="searchControl && (focused || formAsArray.length === 0)" #chip
class="uk-width-expand search-input uk-flex uk-flex-column uk-flex-center">
<input #searchInput class="input" [class.search]="searchControl.value"
[attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="searchControl" [class.uk-text-truncate]="!focused">
@ -121,7 +132,8 @@ declare var UIkit;
</div>
</div>
</ng-template>
<div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
<div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
class="uk-margin-small-left icon">
<icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
<ng-template [ngIf]="formControl.enabled">
@ -131,7 +143,8 @@ declare var UIkit;
(click)="resetSearch($event)">
<icon [flex]="true" name="close"></icon>
</button>
<button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)" class="uk-close uk-icon" (click)="resetValue($event)">
<button *ngIf="!searchControl?.value && !!formControl?.value && (searchable || !selectable)"
class="uk-close uk-icon" (click)="resetValue($event)">
<icon [flex]="true" name="close"></icon>
</button>
</ng-template>
@ -146,10 +159,12 @@ declare var UIkit;
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
[class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
<a (click)="selectOption(option, $event)"
[class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
<span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
<span
[attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
</a>
</li>
</ul>
@ -202,6 +217,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** Chips && Autocomplete*/
public filteredOptions: Option[] = [];
public searchControl: UntypedFormControl;
public activeElement: BehaviorSubject<ElementRef> = new BehaviorSubject<ElementRef>(null);
/** Use modifier's class(es) to change view of your Input */
@Input() inputClass: string = 'inner';
/** Icon on the input */
@ -211,6 +227,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@Input() showOptionsOnEmpty: boolean = true;
@Input() visibleChips: number = 1;
@Input() separators: string[] = [];
@Input() noWrap: boolean = false;
@Input() visibleRows: number = -1;
@Input() extendEnter: () => void = null;
@Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
/** LogoUrl information */
public secure: boolean = true;
@ -228,13 +247,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@ViewChild('inputBox') inputBox: ElementRef;
@ViewChild('optionBox') optionBox: ElementRef;
@ViewChild('searchInput') searchInput: ElementRef;
@ViewChildren('chip') chips: QueryList<ElementRef>;
@Input()
set placeholder(placeholder: string | Placeholder) {
if (typeof placeholder === 'string') {
this.placeholderInfo = {label: placeholder, static: false};
} else {
if (placeholder.static && (this.type === 'autocomplete' || this.type === 'chips' || this.hint)) {
if (placeholder.static && (this.type === 'autocomplete' || this.hint)) {
placeholder.static = false;
console.debug('Static placeholder is not available in this type of input and if hint is available.');
}
@ -295,6 +315,34 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
}
@HostListener('window:keydown.arrowLeft', ['$event'])
arrowLeft(event: KeyboardEvent) {
if(this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index > 0) {
this.activeElement.next(this.chips.get(index - 1));
return;
}
}
}
}
@HostListener('window:keydown.arrowRight', ['$event'])
arrowRight(event: KeyboardEvent) {
if(this.focused) {
event.preventDefault();
if(this.activeElement.getValue()) {
let index = this.chips.toArray().indexOf(this.activeElement.getValue());
if(index < this.chips.length - 1) {
this.activeElement.next(this.chips.get(index + 1));
return;
}
}
}
}
@HostListener('window:keydown.enter', ['$event'])
enter(event: KeyboardEvent) {
if (this.opened && this.optionBox) {
@ -307,11 +355,14 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.focus(false, event);
}
if(this.extendEnter) {
this.extendEnter();
}
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (this.separators.includes(event.key)) {
if (this.separators.includes(event.key) || this.separators.includes(event.key.toLowerCase())) {
event.preventDefault();
this.add(event, true);
}
@ -337,6 +388,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formControl.disable();
}
}
this.activeElement.subscribe(element => {
if(element) {
element.nativeElement.scrollIntoView({behavior: 'smooth'});
}
})
}
ngAfterViewInit() {
@ -499,6 +555,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formAsArray.push(new UntypedFormControl(this.searchControl.value, this.validators));
this.formAsArray.markAsDirty();
this.searchControl.setValue('');
this.activeElement.next(this.chips.last);
} else if(!this.focused) {
this.searchControl.setValue('');
}
@ -527,6 +584,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.textArea.nativeElement.focus();
} else if (this.searchInput) {
this.searchInput.nativeElement.focus();
this.activeElement.next(this.chips.last);
}
if (this.selectArrow) {
this.open(!this.opened);