finish SDGs component functionallity and styles and start on FOS component

explore/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ const routes: Routes = [
   {path: 'home', redirectTo: '', pathMatch: 'full'},
   {path: 'mail-preferences', loadChildren: () => import('./userEmailPreferences/mailPrefs.module').then(m => m.LibMailPrefsModule)},
 	{path: 'sdg', loadChildren: () => import('./sdg/sdg.module').then(m => m.SdgModule)},
+	{path: 'fos', loadChildren: () => import('./fos/fos.module').then(m => m.FosModule)},
   // ORCID Pages
   {path: 'orcid', loadChildren: () => import('./orcid/orcid.module').then(m => m.LibOrcidModule)},
   {path: 'my-orcid-links', loadChildren: () => import('./orcid/my-orcid-links/myOrcidLinks.module').then(m => m.LibMyOrcidLinksModule)},

explore/src/app/fos/fos-routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {FosComponent} from './fos.component';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+			{ path: '', component: FosComponent, canDeactivate: [PreviousRouteRecorder] }
+    ])
+  ]
+})
+export class FosRoutingModule { }

explore/src/app/fos/fos.component.html

@@ -0,0 +1,60 @@
+<!-- <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> -->
+<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
+	<div class="uk-padding-small">
+		<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+	</div>
+</div>
+<div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
+	<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
+		<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
+			<h1 uk-scrollspy-class>Fields of Science and Technology<span class="uk-text-primary">.</span></h1>
+			<div uk-scrollspy-class>
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+			</div>
+			<div>
+				<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
+						routerLinkActive="router-link-active" routerLink="/">
+					<span class="uk-flex uk-flex-middle">
+						<span>Learn More</span>
+					</span>
+				</a>
+			</div>
+		</div>
+		<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center">
+			<img src="" loading="lazy">
+		</div>
+	</div>
+</div>
+<div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
+	<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
+		<div>
+			<input type="text" class="uk-input" style="width: 500px;">
+		</div>
+	</div>
+	<div class="uk-margin-large-top uk-padding-small">
+		<div class="uk-grid uk-grid-large" uk-grid>
+			<div class="uk-width-1-4">
+				<div *ngFor="let item of fos; index as i" class="uk-margin-bottom">
+					<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
+						{{item.id}}
+					</a>
+				</div>
+			</div>
+			<div *ngIf="fos[index]" class="uk-width-3-4">
+				<div class="uk-text-capitalize">
+					<h2 class="uk-margin-remove-top">{{fos[index].id}}</h2>
+				</div>
+				<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
+					<div *ngFor="let child of fos[index].children">
+						<div class="whole-child uk-text-capitalize">
+							<h3 class="uk-h6">{{child.id}}</h3>
+							<div *ngFor="let subChild of child.children" class="uk-margin-small-bottom">
+								{{subChild.id}}
+							</div>
+						</div>
+					</div>
+				</div>	
+			</div>
+		</div>
+	</div>
+</div>

explore/src/app/fos/fos.component.ts

@@ -0,0 +1,44 @@
+import {HttpClient} from "@angular/common/http";
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Subscription} from "rxjs";
+
+import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {properties} from "src/environments/environment";
+
+@Component({
+	selector: 'fos',
+	templateUrl: 'fos.component.html',
+	styleUrls: ['fos.component.css']
+})
+export class FosComponent implements OnInit, OnDestroy {
+
+	public fos: any = [];
+	public index: number = 0;
+	
+	properties: EnvProperties = properties;
+	public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}];
+
+	subscriptions: Subscription[] = [];
+
+	constructor(
+		private httpClient: HttpClient
+	) {}
+
+	ngOnInit() {
+		this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => {
+		this.fos = data['fos'];
+		});
+	}
+
+	public ngOnDestroy() {
+    for (let sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+  }
+
+	changeDisplayedFos(i) {
+		this.index = i;
+		// console.log(this.fos[this.index]);
+	}
+}

explore/src/app/fos/fos.module.ts

@@ -0,0 +1,28 @@
+import {CommonModule} from "@angular/common";
+import {NgModule} from "@angular/core";
+import {FormsModule} from "@angular/forms";
+import {RouterModule} from "@angular/router";
+import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+
+import {FosRoutingModule} from './fos-routing.module';
+import {FosComponent} from './fos.component';
+
+@NgModule({
+	imports: [
+		CommonModule, FormsModule, RouterModule,
+		FosRoutingModule, BreadcrumbsModule
+	],
+	declarations: [
+		FosComponent
+	],
+	providers: [
+		PreviousRouteRecorder
+	],
+	exports: [
+		FosComponent
+	]
+})
+export class FosModule {
+
+}

explore/src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit d26f56e260a01fdcca40a5fa495c1f67f6b19b9b
+Subproject commit da6f220ae077f8f62cb11a65b33d7091efea486f

explore/src/app/sdg/sdg.component.html

@@ -6,17 +6,19 @@
 </div>
 <div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
 	<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
-		<div class="uk-width-3-5@m uk-width-1-1@s">
+		<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
 			<h1 uk-scrollspy-class>Lorem ipsum dolor sit amet, consetetur<span class="">.</span></h1>
 			<div uk-scrollspy-class>
 				We have implemented the UN Sustainable Development Goals ( SDGs) as a <br> classification scheme covering areas of research associated with one or more SDGs <br> (the majority of the SDGs are interrelated). The scheme uses automated allocation <br> of the 17 SDGs and their associated targets and indicators to all fitting documents in <br> Dimensions thereby addressing research areas aligned to the goals.
 			</div>
-			<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
+			<div>
-					routerLinkActive="router-link-active" routerLink="/">
+				<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
-				<span class="uk-flex uk-flex-middle">
+						routerLinkActive="router-link-active" routerLink="/">
-					<span>Learn More</span>
+					<span class="uk-flex uk-flex-middle">
-				</span>
+						<span>Learn More</span>
-			</a>
+					</span>
+				</a>
+			</div>
 		</div>
 		<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center">
 			<img src="../../assets/explore-assets/sdgs-badge.png" loading="lazy">
@@ -24,27 +26,32 @@
 	</div>
 </div>
 <div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
-	<div *ngIf="sdgs && sdgs.length" class="uk-padding-small uk-grid uk-child-width-1-4@m" uk-grid>
+	<div *ngIf="loading">
-		<div *ngFor="let sdg of sdgs">
+		<loading></loading>
-			<a href="https://beta.explore.openaire.eu/search/advanced/research-outcomes?f0=sdg&fv0={{sdg.id}}" target="_blank">
+	</div>
-				<div class="uk-card uk-card-default uk-card-body" [class]="'sdg-card sdg-' + sdg.code">
+	<div *ngIf="!loading">
-					<div class="uk-text-center uk-margin-bottom">
+		<div *ngIf="displayedSdgs && displayedSdgs.length" class="uk-padding-small uk-grid uk-child-width-1-4@l uk-child-width-1-2@m" uk-grid>
-						<div>
+			<div *ngFor="let sdg of displayedSdgs">
-							<span class="uk-text-large uk-text-bold">50</span>
+				<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'sdg', fv0: sdg.id}" target="_blank">
-							<p class="uk-text-small" style="margin-top: 5px; margin-bottom: 5px;">Research Outcomes</p>
+					<div class="uk-card uk-card-default uk-card-body" [class]="'sdg-card sdg-' + sdg.code">
+						<div class="uk-text-center uk-margin-bottom">
+							<div>
+								<span class="uk-text-large uk-text-bold">{{sdg.number == null ? '0' : sdg.number | number}}</span>
+								<p class="uk-text-small" style="margin-top: 5px; margin-bottom: 10px;">Research Outcomes</p>
+							</div>
+							<div>
+								<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
+							</div>
 						</div>
-						<div>
+						<div class="uk-text-small">
-							<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
+							Goal {{sdg.code}}
+						</div>
+						<div class="uk-text-small uk-text-bold uk-text-uppercase">
+							{{sdg.label}}
 						</div>
 					</div>
-					<div class="uk-text-small">
+				</a>
-						{{sdg.code}}
+			</div>
-					</div>
-					<div class="uk-text-small uk-text-bold uk-text-uppercase">
-						{{sdg.label}}
-					</div>
-				</div>
-			</a>
 		</div>
 	</div>
 </div>

explore/src/app/sdg/sdg.component.ts

@@ -1,28 +1,55 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, OnInit} from "@angular/core";
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Subscription} from "rxjs";
 
 import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {properties} from "src/environments/environment";
+import {RefineFieldResultsService} from "../openaireLibrary/services/refineFieldResults.service";
 
 @Component({
 	selector: 'sdg',
 	templateUrl: 'sdg.component.html',
 	styleUrls: ['sdg.component.css']
 })
-export class SdgComponent implements OnInit {
+export class SdgComponent implements OnInit, OnDestroy {
 	
-	public sdgs: any = [];
+	private sdgs: any = [];
+	private sdgsResearchOutcomes: any = [];
+	public displayedSdgs: any = [];
 
+	public loading: boolean;
+	properties: EnvProperties = properties;
 	public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'SDG'}];
 
+	subscriptions: Subscription[] = [];
+
 	constructor(
-		private httpClient: HttpClient
+		private httpClient: HttpClient, private refineFieldResultsService: RefineFieldResultsService
 	) {}
 
 	ngOnInit() {
+		this.loading = true;
 		this.httpClient.get('/assets/vocabulary/sdg.json').subscribe(data => {
-			// console.log(data['sdg']);
 			this.sdgs = data['sdg'];
-			console.log(this.sdgs);
+		});
-		})
+		this.refineFieldResultsService.getRefineFieldsResultsByEntityName(['sdg'], 'result', this.properties, null).subscribe(data => {
+			this.sdgsResearchOutcomes = data[1][0].values;
+			let merged =[];
+			for(let i=0; i<this.sdgs.length; i++){
+				merged.push({
+					...this.sdgs[i],
+					...(this.sdgsResearchOutcomes.find((innerItem) => innerItem.id === this.sdgs[i].id))
+				});
+			}
+			this.displayedSdgs = merged;
+			this.loading = false;
+		});
 	}
+
+	public ngOnDestroy() {
+    for (let sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+  }
 }

explore/src/app/sdg/sdg.module.ts

@@ -4,6 +4,8 @@ import {FormsModule} from "@angular/forms";
 import {RouterModule} from "@angular/router";
 import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
 import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+import {RefineFieldResultsServiceModule} from "../openaireLibrary/services/refineFieldResultsService.module";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 
 import {SdgRoutingModule} from './sdg-routing.module';
 import {SdgComponent} from './sdg.component';
@@ -11,7 +13,8 @@ import {SdgComponent} from './sdg.component';
 @NgModule({
 	imports: [
 		CommonModule, FormsModule, RouterModule,
-		SdgRoutingModule, BreadcrumbsModule
+		SdgRoutingModule, BreadcrumbsModule, RefineFieldResultsServiceModule,
+		LoadingModule
 	],
 	declarations: [
 		SdgComponent

explore/src/assets/common-assets

@@ -1 +1 @@
-Subproject commit 776ba07197e4cf73e98890bd4213a32183ea19d2
+Subproject commit bbad5016c9a712348c5056c3b2709e4baaf27d69

explore/src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 3b700ea4c14ba05d1f8c2cf3ef3253623eda55f3
+Subproject commit ca92c36bad13d0be11514abf7786f1e476ae7f5e