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

changes for sdg/fos selection and suggest components

This commit is contained in:
Alex Martzios 2023-02-20 16:34:12 +02:00
parent 10ea930d8a
commit 23bfc3af3d
10 changed files with 83 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading">
<div class="uk-visible@m"> <div class="uk-visible@m">
<div class="uk-flex uk-flex-right uk-margin-small-bottom"> <div #searchElement class="uk-flex uk-flex-right uk-margin-small-bottom">
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content" <div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
searchInputClass="border-bottom" class="uk-width-large"></div> searchInputClass="border-bottom" class="uk-width-large"></div>
</div> </div>
@ -12,11 +12,11 @@
<div class="uk-margin-top"> <div class="uk-margin-top">
<div id="parentContainer" class="uk-grid" uk-grid> <div id="parentContainer" class="uk-grid" uk-grid>
<div class="uk-width-1-4@m uk-visible@m"> <div class="uk-width-1-4@m uk-visible@m">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;"> <div>
<ul *ngIf="!keyword" class="uk-tab uk-tab-left"> <ul *ngIf="!keyword" class="uk-tab uk-tab-left">
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id" <li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
class="uk-margin-small-bottom uk-text-capitalize"> class="uk-margin-small-bottom uk-text-capitalize">
<a routerLink="./" [fragment]="item.id">{{item.id}}</a> <a (click)="scrollToId(item.id)">{{item.id}}</a>
</li> </li>
</ul> </ul>
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left"> <ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
@ -53,10 +53,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-width-expand@m"> <div class="uk-width-expand@m uk-overflow-auto" [style]="'height: ' + calculatedHeight + 'px;'">
<ng-container *ngIf="!keyword"> <ng-container *ngIf="!keyword">
<div [id]="item.id" *ngFor="let item of fos; index as i"> <div [id]="item.id" *ngFor="let item of fos; index as i">
<div class="uk-text-capitalize"> <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"> <h2 class="uk-h4 uk-margin-remove">
{{item.id}} {{item.id}}
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}" <!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
@ -75,11 +75,11 @@
{{child.id}} {{child.id}}
</a> --> </a> -->
</h3> </h3>
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom"> <div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
<label> <label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
<input [checked]="subjects.includes(subChild.id)" <input [(ngModel)]="subChild.checked"
type="checkbox" class="uk-checkbox uk-margin-small-right"> type="checkbox" class="uk-checkbox uk-margin-small-right">
<span>{{subChild.id}}</span> <span [title]="subChild.id">{{subChild.id}}</span>
</label> </label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}" <!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
class="uk-link-text"> class="uk-link-text">
@ -109,11 +109,11 @@
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)"> class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
</a> --> </a> -->
</h3> </h3>
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom"> <div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
<label> <label>
<input [checked]="subjects.includes(subSubItem.id)" <input [checked]="subjects.includes(subSubItem.id)"
type="checkbox" class="uk-checkbox uk-margin-small-right"> type="checkbox" class="uk-checkbox uk-margin-small-right">
<span [innerHTML]="highlightKeyword(subSubItem.id)"></span> <span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subChild.id"></span>
</label> </label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}" <!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)"> class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">

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

@ -1,11 +1,13 @@
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core"; import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
import {FormBuilder, FormControl} from "@angular/forms"; import {FormBuilder, FormControl} from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties"; import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class"; import {StringUtils} from "../../utils/string-utils.class";
import {debounceTime, distinctUntilChanged} from "rxjs/operators"; import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import Timeout = NodeJS.Timeout; import Timeout = NodeJS.Timeout;
declare var UIkit; declare var UIkit;
@ -16,12 +18,14 @@ declare var UIkit;
styleUrls: ['fos-selection.component.less'] styleUrls: ['fos-selection.component.less']
}) })
export class FosSelectionComponent { export class FosSelectionComponent {
@Input() properties: EnvProperties; public properties: EnvProperties = properties;
@Input() subjects: string[]; @Input() subjects: string[];
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
public loading: boolean; public loading: boolean;
public fos: any[] = []; public fos: any[] = [];
public fosOptions: string[] = []; public fosOptions: any = [];
public activeSection: string; public activeSection: string;
public keywordControl: FormControl; public keywordControl: FormControl;
@ -131,13 +135,13 @@ export class FosSelectionComponent {
convertFosToOptions() { convertFosToOptions() {
this.fosOptions = []; this.fosOptions = [];
this.fos.forEach(fos => { this.fos.forEach(fos => {
this.fosOptions.push(fos.id); this.fosOptions.push({id: fos.id, checked: false});
if(fos.children) { if(fos.children) {
fos.children.forEach(child => { fos.children.forEach(child => {
this.fosOptions.push(child.id); this.fosOptions.push({id: child.id, checked: false});
if(child.children) { if(child.children) {
child.children.forEach(child2 => { child.children.forEach(child2 => {
this.fosOptions.push(child2.id); this.fosOptions.push({id: child2.id, checked: this.subjects?.includes(child2.id)});
}); });
} }
}); });
@ -180,4 +184,19 @@ export class FosSelectionComponent {
public urlEncodeAndQuote(str: string): string { public urlEncodeAndQuote(str: string): string {
return StringUtils.quote(StringUtils.URIEncode(str)); return StringUtils.quote(StringUtils.URIEncode(str));
} }
public scrollToId(value: string) {
HelperFunctions.scrollToId(value);
this.activeSection = value;
}
public getSelectedSubjects() {
return this.fosOptions.filter(sub => sub.checked == true);
}
get calculatedHeight(): number {
if(this.contentHeight && this.searchElement) {
return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
}
}
} }

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

@ -1,22 +1,23 @@
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core"; import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms"; import {FormsModule} 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"; import {LoadingModule} from "../../utils/loading/loading.module";
import {FosSelectionComponent} from './fos-selection.component';
// import {FosSelectionComponent} from './fos-selection.component';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, LoadingModule CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
], ],
declarations: [ declarations: [
// FosSelectionComponent FosSelectionComponent
], ],
providers: [ providers: [
], ],
exports: [ exports: [
// FosSelectionComponent FosSelectionComponent
] ]
}) })
export class FosSelectionModule { export class FosSelectionModule {

21
landingPages/landing-utils/fos.component.ts
View File

@ -13,14 +13,17 @@ import {StringUtils} from "../../utils/string-utils.class";
<icon class="uk-margin-small-right" name="arrow_back" [flex]="true" [ratio]="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" [flex]="true" [ratio]="1.2"></icon>
<span class="uk-text-nowrap">{{title}}</span> <span class="uk-text-nowrap">{{title}}</span>
</span> </span>
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">{{title}}</span> <span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right">
{{title}}
<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
</span>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> --> <!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate"> (click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
<span class="">View all & suggest</span> View all & suggest
</a> </a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate" <a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
(click)="feedbackClick();">Feedback</a> (click)="suggestClick();">Suggest</a>
</div> </div>
<div class="uk-margin-small-top"> <div class="uk-margin-small-top">
<div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate"> <div *ngFor="let subject of subjects.slice(0, viewAll?subjects.length:threshold); let i=index" class="uk-text-truncate">
@ -53,7 +56,7 @@ export class FosComponent {
@Input() subjects: string[]; @Input() subjects: string[];
@Input() viewAll: boolean = false; @Input() viewAll: boolean = false;
@Output() viewAllClicked = new EventEmitter(); @Output() viewAllClicked = new EventEmitter();
@Output() feedbackClicked = new EventEmitter(); @Output() suggestClicked = new EventEmitter();
public lessBtn: boolean = false; public lessBtn: boolean = false;
public threshold: number = 3; // was 2 public threshold: number = 3; // was 2
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
@ -65,7 +68,7 @@ export class FosComponent {
// this.viewAll = true; // this.viewAll = true;
// this.lessBtn = true; // this.lessBtn = true;
// } else { // } else {
// this.viewAll = true; this.viewAll = true;
this.viewAllClicked.emit('fos'); this.viewAllClicked.emit('fos');
// } // }
} }
@ -75,8 +78,8 @@ export class FosComponent {
this.viewAllClicked.emit(""); this.viewAllClicked.emit("");
} }
public feedbackClick() { public suggestClick() {
this.feedbackClicked.emit(""); this.suggestClicked.emit('fos');
} }
public urlEncodeAndQuote(str: string): string { public urlEncodeAndQuote(str: string): string {

10
landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.component.ts
View File

@ -1,6 +1,7 @@
import {ChangeDetectorRef, Component, Input, ViewChild} from "@angular/core"; import {ChangeDetectorRef, Component, Input, ViewChild} from "@angular/core";
import {FormBuilder, UntypedFormGroup, Validators} from "@angular/forms"; import {FormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
import {SdgSelectionComponent} from "../../../sdg/sdg-selection/sdg-selection.component"; import {SdgSelectionComponent} from "../../../sdg/sdg-selection/sdg-selection.component";
import {FosSelectionComponent} from "../../../fos/fos-selection/fos-selection.component";
import {properties} from "../../../../../environments/environment"; import {properties} from "../../../../../environments/environment";
import {EnvProperties} from "../../../utils/properties/env-properties"; import {EnvProperties} from "../../../utils/properties/env-properties";
import {EmailService} from "../../../utils/email/email.service"; import {EmailService} from "../../../utils/email/email.service";
@ -15,9 +16,9 @@ import {StringUtils} from "../../../utils/string-utils.class";
<modal-alert #selectionModal [large]="true" (alertOutput)="modalOutput()" (cancelOutput)="modalCancel()" <modal-alert #selectionModal [large]="true" (alertOutput)="modalOutput()" (cancelOutput)="modalCancel()"
[okDisabled]="!sent && !selectionStep1 && (form.invalid || sending)"> [okDisabled]="!sent && !selectionStep1 && (form.invalid || sending)">
<sdg-selection *ngIf="subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1" <sdg-selection *ngIf="subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1"
[subjects]="subjects"></sdg-selection> [subjects]="subjects" [entityType]="entityType"></sdg-selection>
<!-- <fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"--> <fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"
<!-- [subjects]="subjects"></fos-selection>--> [subjects]="subjects" [contentHeight]="selectionModal.bodyHeight"></fos-selection>
<div [class.uk-hidden]="selectionStep1"> <div [class.uk-hidden]="selectionStep1">
<div class="uk-flex uk-flex-column uk-flex-middle"> <div class="uk-flex uk-flex-column uk-flex-middle">
<ng-container *ngIf="!sent && !error"> <ng-container *ngIf="!sent && !error">
@ -25,6 +26,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
<div>Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?</div> <div>Before sending us your options, would you like to leave us your e-mail to notify you about the reporting status?</div>
<div input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom" <div input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom"
[formInput]="form.get('email')" placeholder="E-mail"> [formInput]="form.get('email')" placeholder="E-mail">
<span note>(Optional)</span>
</div> </div>
<div> <div>
<re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey"> <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey">
@ -51,7 +53,7 @@ export class SdgFosSuggestComponent {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public selectionStep1: boolean = true; public selectionStep1: boolean = true;
@ViewChild("selectionModal") selectionModal: AlertModal; @ViewChild("selectionModal") selectionModal: AlertModal;
@ViewChild("selection") selection: SdgSelectionComponent;// | FosSelectionComponent; @ViewChild("selection") selection: SdgSelectionComponent | FosSelectionComponent;
public form: UntypedFormGroup; public form: UntypedFormGroup;
public url: string = null; public url: string = null;

5
landingPages/landing-utils/sdg-fos-suggest/sdg-fos-suggest.module.ts
View File

@ -2,7 +2,8 @@ import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core"; import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms"; import {FormsModule} from "@angular/forms";
import {RecaptchaModule} from "ng-recaptcha"; import {RecaptchaModule} from "ng-recaptcha";
import {SdgSelectionModule} from "src/app/openaireLibrary/sdg/sdg-selection/sdg-selection.module"; import {SdgSelectionModule} from "../../../sdg/sdg-selection/sdg-selection.module";
import {FosSelectionModule} from "../../../fos/fos-selection/fos-selection.module";
import {InputModule} from "../../../sharedComponents/input/input.module"; import {InputModule} from "../../../sharedComponents/input/input.module";
import {SdgFosSuggestComponent} from "./sdg-fos-suggest.component"; import {SdgFosSuggestComponent} from "./sdg-fos-suggest.component";
import {AlertModalModule} from "../../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../../utils/modal/alertModal.module";
@ -10,7 +11,7 @@ import {IconsModule} from "../../../utils/icons/icons.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, InputModule, SdgSelectionModule, RecaptchaModule, AlertModalModule, IconsModule CommonModule, FormsModule, InputModule, SdgSelectionModule, FosSelectionModule, RecaptchaModule, AlertModalModule, IconsModule
], ],
declarations: [ declarations: [
SdgFosSuggestComponent SdgFosSuggestComponent

5
landingPages/landing-utils/sdg.component.ts
View File

@ -14,7 +14,10 @@ import {StringUtils} from "../../utils/string-utils.class";
<icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon> <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
<span uk-tooltip="Sustainable Development Goals">{{title}}</span> <span uk-tooltip="Sustainable Development Goals">{{title}}</span>
</span> </span>
<span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">{{title}} ({{subjects.length}})</span> <span *ngIf="!viewAll" class="uk-text-emphasis uk-text-bolder uk-text-nowrap uk-margin-small-right" uk-tooltip="Sustainable Development Goals">
{{title}}
<span *ngIf="subjects && subjects.length > threshold && !viewAll">({{subjects.length}})</span>
</span>
<!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> --> <!-- <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a> -->
<a *ngIf="subjects && subjects.length > threshold && !viewAll" <a *ngIf="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate"> (click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">

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

@ -794,14 +794,15 @@
<sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (suggestClicked)="suggestClicked($event)"></sdg> <sdg [subjects]="resultLandingInfo.sdg" (viewAllClicked)="viewAll=$event" (suggestClicked)="suggestClicked($event)"></sdg>
</div> </div>
<div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')"> <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0 && (!viewAll || viewAll=='fos')">
<fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (feedbackClicked)="suggestClicked('fos')"></fos> <fos [subjects]="resultLandingInfo.fos" (viewAllClicked)="viewAll=$event" (suggestClicked)="suggestClicked($event)"></fos>
</div> </div>
<!-- Funded By --> <!-- Funded By -->
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')"> <div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"></fundedBy> <fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"></fundedBy>
</div> </div>
<!-- Communities --> <!-- Communities -->
<div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"> <div *ngIf="resultLandingInfo.contexts && resultLandingInfo.contexts.length > 0 && !noCommunities && (!viewAll || viewAll=='relatedTo')"
class="uk-margin-bottom">
<relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'" <relatedTo [contexts]="resultLandingInfo.contexts" [viewAll]="viewAll=='relatedTo'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo> (viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</div> </div>

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

@ -2,6 +2,7 @@ import {HttpClient} from "@angular/common/http";
import {Component, Input} from "@angular/core"; import {Component, Input} from "@angular/core";
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
import {EnvProperties} from "../../utils/properties/env-properties"; import {EnvProperties} from "../../utils/properties/env-properties";
import {StringUtils} from "../../utils/string-utils.class";
@Component({ @Component({
selector: 'sdg-selection', selector: 'sdg-selection',
@ -11,6 +12,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
export class SdgSelectionComponent { export class SdgSelectionComponent {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
@Input() subjects: string[]; @Input() subjects: string[];
@Input() entityType: string;
public loading: boolean; public loading: boolean;
public sdgs: any = []; public sdgs: any = [];
@ -25,7 +27,7 @@ export class SdgSelectionComponent {
data['sdg'].forEach(element => { 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({code: '18', id: 'No SDGs are relevant for this publication', 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.loading = false; this.loading = false;
} }
@ -40,5 +42,9 @@ export class SdgSelectionComponent {
public getSelectedSubjects() { public getSelectedSubjects() {
return this.sdgs.filter(sub => sub.checked == true); return this.sdgs.filter(sub => sub.checked == true);
}
private getEntityName (entityType:string) {
return StringUtils.getEntityName(entityType, false);
} }
} }

7
utils/modal/alert.ts
View File

@ -15,7 +15,7 @@ declare var UIkit: any;
<icon name="close" ratio="1.5"></icon> <icon name="close" ratio="1.5"></icon>
</button> </button>
</div> </div>
<div class="uk-modal-body uk-animation-fast uk-text-left" <div #bodyElement class="uk-modal-body uk-animation-fast uk-text-left"
[ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null"> [ngClass]="classBody" [attr.uk-overflow-auto]="overflowBody?'':null">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div> <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content> <ng-content></ng-content>
@ -62,6 +62,7 @@ export class AlertModal {
@Input() classBody: string = ""; @Input() classBody: string = "";
@Input() large: boolean = false; @Input() large: boolean = false;
@Input() overflowBody: boolean = true; @Input() overflowBody: boolean = true;
@ViewChild("bodyElement") bodyElement: ElementRef;
/** /**
* Caption for the title. * Caption for the title.
*/ */
@ -209,4 +210,8 @@ export class AlertModal {
previous() { previous() {
this.cancelOutput.emit(); this.cancelOutput.emit();
} }
get bodyHeight() {
return (this.bodyElement) ? this.bodyElement.nativeElement.offsetHeight : 0;
}
} }