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 *ngIf="!loading">
<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"
searchInputClass="border-bottom" class="uk-width-large"></div>
</div>
@ -12,11 +12,11 @@
<div class="uk-margin-top">
<div id="parentContainer" class="uk-grid" uk-grid>
<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">
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
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>
</ul>
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
@ -53,10 +53,10 @@
</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">
<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">
{{item.id}}
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
@ -75,11 +75,11 @@
{{child.id}}
</a> -->
</h3>
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom">
<label>
<input [checked]="subjects.includes(subChild.id)"
<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)]="subChild.checked"
type="checkbox" class="uk-checkbox uk-margin-small-right">
<span>{{subChild.id}}</span>
<span [title]="subChild.id">{{subChild.id}}</span>
</label>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
class="uk-link-text">
@ -109,11 +109,11 @@
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
</a> -->
</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>
<input [checked]="subjects.includes(subSubItem.id)"
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>
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">

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

@ -4,8 +4,10 @@ import {FormBuilder, FormControl} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import Timeout = NodeJS.Timeout;
declare var UIkit;
@ -16,12 +18,14 @@ declare var UIkit;
styleUrls: ['fos-selection.component.less']
})
export class FosSelectionComponent {
@Input() properties: EnvProperties;
public properties: EnvProperties = properties;
@Input() subjects: string[];
@Input() contentHeight: number = 0;
@ViewChild("searchElement") searchElement: ElementRef;
public loading: boolean;
public fos: any[] = [];
public fosOptions: string[] = [];
public fosOptions: any = [];
public activeSection: string;
public keywordControl: FormControl;
@ -131,13 +135,13 @@ export class FosSelectionComponent {
convertFosToOptions() {
this.fosOptions = [];
this.fos.forEach(fos => {
this.fosOptions.push(fos.id);
this.fosOptions.push({id: fos.id, checked: false});
if(fos.children) {
fos.children.forEach(child => {
this.fosOptions.push(child.id);
this.fosOptions.push({id: child.id, checked: false});
if(child.children) {
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 {
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 {NgModule} from "@angular/core";
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 {FosSelectionComponent} from './fos-selection.component';
import {FosSelectionComponent} from './fos-selection.component';
@NgModule({
imports: [
CommonModule, FormsModule, LoadingModule
CommonModule, FormsModule, LoadingModule, InputModule, SearchInputModule
],
declarations: [
// FosSelectionComponent
FosSelectionComponent
],
providers: [
],
exports: [
// FosSelectionComponent
FosSelectionComponent
]
})
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>
<span class="uk-text-nowrap">{{title}}</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="subjects && subjects.length > threshold && !viewAll"
(click)="viewAllClick();" class="view-more-less-link uk-text-truncate">
<span class="">View all & suggest</span>
(click)="viewAllClick();" class="view-more-less-link uk-link uk-link-text uk-text-truncate">
View all & suggest
</a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-text-truncate"
(click)="feedbackClick();">Feedback</a>
<a *ngIf="(subjects && subjects.length <= threshold || viewAll)" class="uk-link uk-link-text uk-text-truncate"
(click)="suggestClick();">Suggest</a>
</div>
<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">
@ -53,7 +56,7 @@ export class FosComponent {
@Input() subjects: string[];
@Input() viewAll: boolean = false;
@Output() viewAllClicked = new EventEmitter();
@Output() feedbackClicked = new EventEmitter();
@Output() suggestClicked = new EventEmitter();
public lessBtn: boolean = false;
public threshold: number = 3; // was 2
public routerHelper: RouterHelper = new RouterHelper();
@ -65,7 +68,7 @@ export class FosComponent {
// this.viewAll = true;
// this.lessBtn = true;
// } else {
// this.viewAll = true;
this.viewAll = true;
this.viewAllClicked.emit('fos');
// }
}
@ -75,8 +78,8 @@ export class FosComponent {
this.viewAllClicked.emit("");
}
public feedbackClick() {
this.feedbackClicked.emit("");
public suggestClick() {
this.suggestClicked.emit('fos');
}
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 {FormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
import {SdgSelectionComponent} from "../../../sdg/sdg-selection/sdg-selection.component";
import {FosSelectionComponent} from "../../../fos/fos-selection/fos-selection.component";
import {properties} from "../../../../../environments/environment";
import {EnvProperties} from "../../../utils/properties/env-properties";
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()"
[okDisabled]="!sent && !selectionStep1 && (form.invalid || sending)">
<sdg-selection *ngIf="subjectType == 'sdg'" #selection [class.uk-hidden]="!selectionStep1"
[subjects]="subjects"></sdg-selection>
<!-- <fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"-->
<!-- [subjects]="subjects"></fos-selection>-->
[subjects]="subjects" [entityType]="entityType"></sdg-selection>
<fos-selection *ngIf="subjectType == 'fos'" #selection [class.uk-hidden]="!selectionStep1"
[subjects]="subjects" [contentHeight]="selectionModal.bodyHeight"></fos-selection>
<div [class.uk-hidden]="selectionStep1">
<div class="uk-flex uk-flex-column uk-flex-middle">
<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 input class="uk-width-1-2 uk-margin-medium-top uk-margin-medium-bottom"
[formInput]="form.get('email')" placeholder="E-mail">
<span note>(Optional)</span>
</div>
<div>
<re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey">
@ -51,7 +53,7 @@ export class SdgFosSuggestComponent {
public properties: EnvProperties = properties;
public selectionStep1: boolean = true;
@ViewChild("selectionModal") selectionModal: AlertModal;
@ViewChild("selection") selection: SdgSelectionComponent;// | FosSelectionComponent;
@ViewChild("selection") selection: SdgSelectionComponent | FosSelectionComponent;
public form: UntypedFormGroup;
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 {FormsModule} from "@angular/forms";
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 {SdgFosSuggestComponent} from "./sdg-fos-suggest.component";
import {AlertModalModule} from "../../../utils/modal/alertModal.module";
@ -10,7 +11,7 @@ import {IconsModule} from "../../../utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, FormsModule, InputModule, SdgSelectionModule, RecaptchaModule, AlertModalModule, IconsModule
CommonModule, FormsModule, InputModule, SdgSelectionModule, FosSelectionModule, RecaptchaModule, AlertModalModule, IconsModule
],
declarations: [
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>
<span uk-tooltip="Sustainable Development Goals">{{title}}</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="subjects && subjects.length > threshold && !viewAll"
(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>
</div>
<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>
<!-- Funded By -->
<div *ngIf="resultLandingInfo.fundedByProjects && resultLandingInfo.fundedByProjects.length > 0 && (!viewAll || viewAll=='fundedBy')">
<fundedBy [fundedByProjects]="resultLandingInfo.fundedByProjects" [provenanceActionVocabulary]="provenanceActionVocabulary" (viewAllClicked)="viewAll=$event"></fundedBy>
</div>
<!-- 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'"
(viewAllClicked)="viewAll=$event" (noCommunities)="noCommunities = true"></relatedTo>
</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 {properties} from "../../../../environments/environment";
import {EnvProperties} from "../../utils/properties/env-properties";
import {StringUtils} from "../../utils/string-utils.class";
@Component({
selector: 'sdg-selection',
@ -11,6 +12,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
export class SdgSelectionComponent {
public properties: EnvProperties = properties;
@Input() subjects: string[];
@Input() entityType: string;
public loading: boolean;
public sdgs: any = [];
@ -25,7 +27,7 @@ export class SdgSelectionComponent {
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: '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;
}
@ -40,5 +42,9 @@ export class SdgSelectionComponent {
public getSelectedSubjects() {
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>
</button>
</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">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content>
@ -62,6 +62,7 @@ export class AlertModal {
@Input() classBody: string = "";
@Input() large: boolean = false;
@Input() overflowBody: boolean = true;
@ViewChild("bodyElement") bodyElement: ElementRef;
/**
* Caption for the title.
*/
@ -209,4 +210,8 @@ export class AlertModal {
previous() {
this.cancelOutput.emit();
}
get bodyHeight() {
return (this.bodyElement) ? this.bodyElement.nativeElement.offsetHeight : 0;
}
}