From a83852cffdd79cc5b9ac803fa0e2f0d4215b06e4 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 9 Mar 2023 16:30:13 +0200
Subject: [PATCH] WIP - add sdg/fos as subjects for community admin dashboards

---
 src/app/openaireLibrary                       |   2 +-
 .../subjects-edit-form.component.html         | 326 ++++++++++++++++--
 .../subjects-edit-form.component.ts           | 247 ++++++++++---
 .../subjects-edit-form.module.ts              |   4 +-
 4 files changed, 491 insertions(+), 88 deletions(-)

diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index 1d2a0ef..efc2d6c 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit 1d2a0effa840836cbb26334eabd9e1ea3752b455
+Subproject commit efc2d6c47b1c8e81150274589550b26c25b6eb8f
diff --git a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.html b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.html
index 7170888..5b9bf10 100644
--- a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.html
+++ b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.html
@@ -1,5 +1,5 @@
 <div page-content>
-	<div header>
+	<!-- <div header>
     <div class="uk-flex uk-flex-middle uk-margin-medium-top info">
       <div>
         <div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Subjects
@@ -7,8 +7,8 @@
         <h1 class="uk-h6 uk-margin-remove">{{community.shortTitle}}</h1>
       </div>
     </div>
-  </div>
-	<div actions>
+  </div> -->
+	<div actions class="uk-margin-top">
 		<div class="uk-section-xsmall">
 			<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-middle uk-grid uk-margin-top" uk-grid>
 				<div [disabled]="showLoading" search-input class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"
@@ -22,10 +22,9 @@
 				<div>
 					<button class="uk-button uk-button-default uk-flex uk-flex-middle"
 									[disabled]="showLoading" [class.uk-disabled]="showLoading"
-									(click)="newSubject()"
-									uk-tooltip="title:<div><div class='uk-margin-small-bottom uk-text-bold'>Add new subjects</div> All the research results associated to the subjects specified here will be automatically linked to the community dashboard in the next run of OpenAIRE workflows.</div>">
-						<icon name="add" [flex]="true"></icon>
-						<span class="uk-margin-small-left">New Subject</span>
+									(click)="editAllSubjects()"
+									uk-tooltip="title:<div><div class='uk-margin-small-bottom uk-text-bold'>Add or edit subjects</div> All the research results associated to the subjects specified here will be automatically linked to the community dashboard in the next run of OpenAIRE workflows.</div>">
+						<span>Add/Edit Subjects</span>
 					</button>
 				</div>
 			</div>
@@ -37,6 +36,7 @@
         <loading></loading>
       </div>
 			<div *ngIf="!showLoading">
+				<!-- TODO: Alter following if statement to match new functionality -->
 				<div *ngIf="community.subjects.length == 0"
 					class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
 					<div>No subjects
@@ -45,6 +45,228 @@
           </div>
 				</div>
 				<div *ngIf="community.subjects.length > 0">
+					<ul uk-tab class="uk-tab uk-margin-bottom uk-flex uk-flex-center uk-flex-left@m">
+						<li class="uk-active" *ngIf="displayedAllSubjects?.length">
+							<a>All ({{displayedAllSubjects.length}})</a>
+						</li>
+						<li *ngIf="displayedSubjects?.length" (click)="groupSubjects(displayedSubjects, 'freeText')">
+							<a>Free Text ({{displayedSubjects.length}})</a>
+						</li>
+						<li *ngIf="displayedSdg?.length" (click)="groupSubjects(displayedSdg, 'sdg')">
+							<a>SDGs ({{displayedSdg.length}})</a>
+						</li>
+						<li *ngIf="displayedFos?.length" (click)="groupSubjects(displayedFos, 'fos')">
+							<a>Fields of Science ({{displayedFos.length}})</a>
+						</li>
+					</ul>
+					<ul class="uk-switcher">
+						<li>
+							<ng-container *ngIf="groupedAllSubjects?.length">
+								<div>
+									<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
+										<li *ngFor="let item of groupedAllSubjects; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
+											[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
+											<a class="uk-padding-remove">{{item.group}}</a>
+										</li>
+									</ul>
+								</div>
+								<!-- View for 'All' -->
+								<div *ngIf="index == 0 && groupedAllSubjects.length > 1" class="uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid>
+									<div *ngFor="let item of groupedAllSubjects.slice(1); let i = index;">
+										<div>
+											<h6>{{item.group}}</h6>
+											<div *ngFor="let subItem of item.data.slice(0, subjectsLimit)" class="uk-margin-small-bottom">
+												<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+											</div>
+											<div *ngIf="item.data.length > subjectsLimit">
+												<a (click)="changeDisplayedSubjects(i+1, item)" class="view-more-less-link">
+													View all
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- View for a single group -->
+								<div *ngIf="index != 0 || groupedAllSubjects.length == 1" class="uk-margin-large-top">
+									<div>
+										<div>
+											<h6>{{groupedAllSubjects[index].group}}</h6>
+											<ng-container *ngIf="subjectsColumns?.length == 0; else elseBlock">
+												<div *ngFor="let subItem of groupedAllSubjects[index].data" class="uk-margin-small-bottom">
+													<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+												</div>
+											</ng-container>
+											<ng-template #elseBlock>
+												<div class="uk-grid uk-child-width-1-4@m" uk-grid>
+													<div *ngFor="let group of subjectsColumns">
+														<div *ngFor="let subItem of group" class="uk-margin-small-bottom">
+															<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+														</div>
+													</div>
+												</div>
+											</ng-template>
+										</div>
+									</div>
+								</div>
+							</ng-container>
+						</li>
+						<li>
+							<ng-container *ngIf="groupedSubjects?.length">
+								<div>
+									<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
+										<li *ngFor="let item of groupedSubjects; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
+											[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
+											<a class="uk-padding-remove">{{item.group}}</a>
+										</li>
+									</ul>
+								</div>
+								<!-- View for 'All' -->
+								<div *ngIf="index == 0 && groupedSubjects.length > 1" class="uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid>
+									<div *ngFor="let item of groupedSubjects.slice(1); let i = index;">
+										<div>
+											<h6>{{item.group}}</h6>
+											<div *ngFor="let subItem of item.data.slice(0, subjectsLimit)" class="uk-margin-small-bottom">
+												<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+											</div>
+											<div *ngIf="item.data.length > subjectsLimit">
+												<a (click)="changeDisplayedSubjects(i+1, item)" class="view-more-less-link">
+													View all
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- View for a single group -->
+								<div *ngIf="index != 0 || groupedSubjects.length == 1" class="uk-margin-large-top">
+									<div>
+										<div>
+											<h6>{{groupedSubjects[index].group}}</h6>
+											<ng-container *ngIf="subjectsColumns?.length == 0; else elseBlock">
+												<div *ngFor="let subItem of groupedSubjects[index].data" class="uk-margin-small-bottom">
+													<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+												</div>
+											</ng-container>
+											<ng-template #elseBlock>
+												<div class="uk-grid uk-child-width-1-4@m" uk-grid>
+													<div *ngFor="let group of subjectsColumns">
+														<div *ngFor="let subItem of group" class="uk-margin-small-bottom">
+															<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+														</div>
+													</div>
+												</div>
+											</ng-template>
+										</div>
+									</div>
+								</div>
+							</ng-container>
+						</li>
+						<li>
+							<ng-container *ngIf="groupedSdg?.length">
+								<div>
+									<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
+										<li *ngFor="let item of groupedSdg; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
+											[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
+											<a class="uk-padding-remove">{{item.group}}</a>
+										</li>
+									</ul>
+								</div>
+								<!-- View for 'All' -->
+								<div *ngIf="index == 0 && groupedSdg.length > 1" class="uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid>
+									<div *ngFor="let item of groupedSdg.slice(1); let i = index;">
+										<div>
+											<h6>{{item.group}}</h6>
+											<div *ngFor="let subItem of item.data.slice(0, subjectsLimit)" class="uk-margin-small-bottom">
+												<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+											</div>
+											<div *ngIf="item.data.length > subjectsLimit">
+												<a (click)="changeDisplayedSubjects(i+1, item)" class="view-more-less-link">
+													View all
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- View for a single group -->
+								<div *ngIf="index != 0 || groupedSdg.length == 1" class="uk-margin-large-top">
+									<div>
+										<div>
+											<h6>{{groupedSdg[index].group}}</h6>
+											<ng-container *ngIf="subjectsColumns?.length == 0; else elseBlock">
+												<div *ngFor="let subItem of groupedSdg[index].data" class="uk-margin-small-bottom">
+													<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+												</div>
+											</ng-container>
+											<ng-template #elseBlock>
+												<div class="uk-grid uk-child-width-1-4@m" uk-grid>
+													<div *ngFor="let group of subjectsColumns">
+														<div *ngFor="let subItem of group" class="uk-margin-small-bottom">
+															<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+														</div>
+													</div>
+												</div>
+											</ng-template>
+										</div>
+									</div>
+								</div>
+							</ng-container>
+						</li>
+						<li>
+							<ng-container *ngIf="groupedFos?.length">
+								<div>
+									<ul class="uk-nav uk-nav-default uk-flex uk-flex-wrap">
+										<li *ngFor="let item of groupedFos; let i = index;" class="uk-margin-right" [class.uk-margin-left]="i != 0"
+											[class]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
+											<a class="uk-padding-remove">{{item.group}}</a>
+										</li>
+									</ul>
+								</div>
+								<!-- View for 'All' -->
+								<div *ngIf="index == 0 && groupedFos.length > 1" class="uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid>
+									<div *ngFor="let item of groupedFos.slice(1); let i = index;">
+										<div>
+											<h6>{{item.group}}</h6>
+											<div *ngFor="let subItem of item.data.slice(0, subjectsLimit)" class="uk-margin-small-bottom">
+												<span [attr.uk-tooltip]="subItem.length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
+													{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
+												</span>
+											</div>
+											<div *ngIf="item.data.length > subjectsLimit">
+												<a (click)="changeDisplayedSubjects(i+1, item)" class="view-more-less-link">
+													View all
+												</a>
+											</div>
+										</div>
+									</div>
+								</div>
+								<!-- View for a single group -->
+								<div *ngIf="index != 0 || groupedFos.length == 1" class="uk-margin-large-top">
+									<div>
+										<div>
+											<h6>{{groupedFos[index].group}}</h6>
+											<ng-container *ngIf="subjectsColumns?.length == 0; else elseBlock">
+												<div *ngFor="let subItem of groupedFos[index].data" class="uk-margin-small-bottom">
+													<span>{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}</span>
+												</div>
+											</ng-container>
+											<ng-template #elseBlock>
+												<div class="uk-grid uk-child-width-1-4@m" uk-grid>
+													<div *ngFor="let group of subjectsColumns">
+														<div *ngFor="let subItem of group" class="uk-margin-small-bottom">
+															<span [attr.uk-tooltip]="subItem.length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
+																{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
+															</span>
+														</div>
+													</div>
+												</div>
+											</ng-template>
+										</div>
+									</div>
+								</div>
+							</ng-container>
+						</li>
+					</ul>
+				</div>
+				<!-- <div *ngIf="community.subjects.length > 0">
 					<no-load-paging *ngIf="community.subjects.length > 0" [type]="'Subjects'"
 													[page]="page" [pageSize]="size" (pageChange)="updatePage($event)"
 													[totalResults]="community.subjects.length">
@@ -85,38 +307,78 @@
 					</div>
 					<div class="uk-margin-small-top">
 						<paging-no-load  [currentPage]="page" [totalResults]="community.subjects.length" [size]="size"
-														 (pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
+														(pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
 						</paging-no-load>
 					</div>
-				</div>
+				</div> -->
 			</div>
 		</div>
   </div>
 </div>
-<modal-alert #deleteModal (alertOutput)="saveSubjects()" [overflowBody]="false" classTitle="uk-background-primary uk-light"></modal-alert>
-<fs-modal #fsModal classBody="uk-container-small" (okEmitter)="saveSubjects()" [okButtonDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
-	<form *ngIf="myForm">
-		<div class="uk-margin-top uk-flex-center uk-flex uk-margin-medium-bottom">
-			<a *ngIf="!isEditModal" (click)="addSubjectInForm()">
-				<button class="uk-button uk-button-primary uk-flex uk-flex-middle">
-					<icon name="add" [flex]="true"></icon>
-					<span class="uk-margin-xsmall-left">Add Subject</span>
-				</button>
-			</a>
-		</div>
-		<div class="uk-grid uk-child-width-1-1" uk-grid>
-			<div *ngFor=" let control of myForm.controls; index as i" class="uk-flex uk-flex-middle">
-				<div input [formInput]="myForm.controls[i]" type="text"
-						placeholder="Type subjects as free text keywords" class="uk-width-expand"></div>
-				<div *ngIf="!isEditModal" class="uk-width-auto uk-flex uk-flex-center uk-margin-left">
-					<button class="uk-close uk-icon" [class.uk-invisible]="myForm.length === 1"
-						(click)="removeSubjectInForm(i)">
-						<icon name="close" [flex]="true" [ratio]="1.5"></icon>
-					</button>
+<modal-alert #deleteModal (alertOutput)="saveAllSubjects()" [overflowBody]="false" classTitle="uk-background-primary uk-light"></modal-alert>
+<fs-modal #fsModal classBody="uk-container-large" (okEmitter)="saveAllSubjects()">
+	<!-- TODO: add disabled button functionality again! -->
+	<!-- [okButtonDisabled]="myForm && (myForm.invalid || !myForm.dirty)" -->
+	<div>
+		<ul uk-tab class="uk-tab uk-margin-top uk-margin-large-bottom uk-flex uk-flex-center uk-flex-left@m">
+			<li class="uk-active">
+				<a>Free Text ({{displayedSubjects.length}})</a>
+			</li>
+			<li>
+				<a>SDGs ({{displayedSdg.length}})</a>
+			</li>
+			<li>
+				<a>Fields of Science ({{displayedFos.length}})</a>
+			</li>
+		</ul>
+		<ul class="uk-switcher">
+			<li *ngIf="subjectsForm">
+				<div input [type]="'chips'" [formInput]="subjectsForm" [inputClass]="'flat'" 
+					[separators]="[',']" [visibleChips]="3" class="uk-width-large@m"
+					[placeholder]="{static: true, label: 'Type subjects as free text keywords'}">
+					<button action (click)="addSubjectsIntoList()" class="uk-button uk-button-link uk-margin-xsmall-left uk-margin-right">add</button>
+					<div note class="uk-text-xsmall">Separate subjects with commas</div>
 				</div>
-			</div>
-		</div>
-	</form>
+				<!-- <form *ngIf="myForm">
+					<div class="uk-margin-top uk-flex-center uk-flex uk-margin-medium-bottom">
+						<a *ngIf="!isEditModal" (click)="addSubjectInForm()">
+							<button class="uk-button uk-button-primary uk-flex uk-flex-middle">
+								<icon name="add" [flex]="true"></icon>
+								<span class="uk-margin-xsmall-left">Add Subject</span>
+							</button>
+						</a>
+					</div>
+					<div class="uk-grid uk-child-width-1-1" uk-grid>
+						<div *ngFor=" let control of myForm.controls; index as i" class="uk-flex uk-flex-middle">
+							<div input [formInput]="myForm.controls[i]" type="text"
+									placeholder="Type subjects as free text keywords" class="uk-width-expand"></div>
+							<div *ngIf="!isEditModal" class="uk-width-auto uk-flex uk-flex-center uk-margin-left">
+								<button class="uk-close uk-icon" [class.uk-invisible]="myForm.length === 1"
+									(click)="removeSubjectInForm(i)">
+									<icon name="close" [flex]="true" [ratio]="1.5"></icon>
+								</button>
+							</div>
+						</div>
+					</div>
+				</form> -->
+				<div class="uk-margin-large-top">
+					<span *ngFor="let subject of displayedSubjects; let i = index;"
+						class="uk-label uk-label-primary uk-flex-inline uk-flex-middle uk-margin-right uk-margin-bottom">
+						<span class="uk-margin-small-right uk-text-truncate">{{subject}}</span>
+						<button (click)="removeSubjectFromList(i)" class="uk-close uk-icon">
+							<icon name="close" flex="true" ratio="0.7"></icon>
+						</button>
+					</span>
+				</div>
+			</li>
+			<li>
+				<sdg-selection #sdgSelection [subjects]="displayedSdg" [isFeedback]="false"></sdg-selection>
+			</li>
+			<li>
+				<fos-selection #fosSelection [subjects]="displayedFos"></fos-selection>
+			</li>
+		</ul>
+	</div>
 </fs-modal>
 <!--<modal-alert #enablePageModal (alertOutput)="enablePage()">
   <div class="uk-padding uk-padding-remove-horizontal">
diff --git a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.ts b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.ts
index 2ae5b22..8cde9bf 100644
--- a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.ts
+++ b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.ts
@@ -1,5 +1,5 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {UntypedFormArray, UntypedFormBuilder, UntypedFormControl} from '@angular/forms';
+import {FormArray, UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
 import {SubjectsService} from '../subjects.service';
@@ -8,19 +8,34 @@ import {Title} from '@angular/platform-browser';
 import {properties} from '../../../../environments/environment';
 import {AlertModal} from '../../../openaireLibrary/utils/modal/alert';
 import {SearchInputComponent} from '../../../openaireLibrary/sharedComponents/search-input/search-input.component';
-import {Subscription} from 'rxjs';
+import {forkJoin, Subscription} from 'rxjs';
 import {CommunityInfo} from '../../../openaireLibrary/connect/community/communityInfo';
 import {FullScreenModalComponent} from 'src/app/openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component';
 import {HelperFunctions} from 'src/app/openaireLibrary/utils/HelperFunctions.class';
 import {NotificationHandler} from "../../../openaireLibrary/utils/notification-handler";
 import {ClearCacheService} from "../../../openaireLibrary/services/clear-cache.service";
+import {SdgSelectionComponent} from '../../../openaireLibrary/sdg/sdg-selection/sdg-selection.component';
 
 @Component({
   selector: 'subjects-edit-form',
   templateUrl: './subjects-edit-form.component.html',
 })
 export class SubjectsEditFormComponent implements OnInit {
-  myForm = new UntypedFormArray([new UntypedFormControl({subject: ''})]);
+	subjectsForm = new UntypedFormArray([]);
+	groupedAllSubjects = [];
+	groupedSubjects = [];
+	groupedSdg = [];
+	groupedFos = [];
+	subjectsColumns = [];
+	index: number = 0;
+	subjectsLimit: number = 6;
+	public maxCharacters: number = 25;
+	displayedAllSubjects = [];
+	displayedSubjects = [];
+	displayedSdg = [];
+	displayedFos = [];
+
+  myForm = new UntypedFormArray([]);
   public showLoading = true;
   public res = [];
   params: any;
@@ -40,6 +55,9 @@ export class SubjectsEditFormComponent implements OnInit {
   @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   public filterForm: UntypedFormControl;
   private subscriptions: any[] = [];
+
+	@ViewChild('sdgSelection') sdgSelection: SdgSelectionComponent;
+	@ViewChild('fosSelection') fosSelection: SdgSelectionComponent;
   /*//Check again functionality to enable page
   subjectsPage;
   @ViewChild('enablePageModal') enablePageModal: AlertModal;*/
@@ -85,6 +103,13 @@ export class SubjectsEditFormComponent implements OnInit {
               }
               return 0;
             });
+						// assigning values
+						this.displayedSubjects = this.community.subjects;
+						this.displayedSdg = this.community.sdg;
+						this.displayedFos = this.community.fos;
+						this.displayedAllSubjects = [...this.displayedSubjects, ...this.displayedSdg, ...this.displayedFos];
+						// grouping eveything for 'All' view
+						this.groupSubjects(this.displayedAllSubjects, 'all');
 
             this.originalSubjects = [];
             for (let i = 0; i < this.community.subjects.length; i++) {
@@ -97,7 +122,6 @@ export class SubjectsEditFormComponent implements OnInit {
           },
           error => this.handleUpdateError('System error retrieving community profile', error)
         ));
-        // this.getSubjectsPageStatus();
       }));
     
   }
@@ -109,6 +133,94 @@ export class SubjectsEditFormComponent implements OnInit {
       }
     });
   }
+
+	public groupSubjects(subjects: string[], type: string) {
+		if(subjects.length === 0) {
+			return [];
+		}
+		subjects.sort((a, b) => a.localeCompare(b));
+		if(type === 'all') {
+			this.groupedAllSubjects = Object.values(
+				subjects.reduce((acc, subject) => {
+					let firstLetter = subject[0].toLocaleUpperCase();
+					if(!acc[firstLetter]) {
+						acc[firstLetter] = {group: firstLetter, data: [subject]};
+					} else {
+						acc[firstLetter].data.push(subject);
+					}
+					return acc;
+				},{})
+			)
+			if(subjects.length > 1) {
+				this.groupedAllSubjects.unshift({group: 'All', data: subjects});
+			}
+		}
+		if(type === 'freeText') {
+			this.groupedSubjects = Object.values(
+				subjects.reduce((acc, subject) => {
+					let firstLetter = subject[0].toLocaleUpperCase();
+					if(!acc[firstLetter]) {
+						acc[firstLetter] = {group: firstLetter, data: [subject]};
+					} else {
+						acc[firstLetter].data.push(subject);
+					}
+					return acc;
+				},{})
+			)
+			if(subjects.length > 1) {
+				this.groupedSubjects.unshift({group: 'All', data: subjects});
+			}
+		}
+		if(type === 'sdg') {
+			this.groupedSdg = Object.values(
+				subjects.reduce((acc, subject) => {
+					let firstLetter = subject[0].toLocaleUpperCase();
+					if(!acc[firstLetter]) {
+						acc[firstLetter] = {group: firstLetter, data: [subject]};
+					} else {
+						acc[firstLetter].data.push(subject);
+					}
+					return acc;
+				},{})
+			)
+			if(subjects.length > 1) {
+				this.groupedSdg.unshift({group: 'All', data: subjects});
+			}
+		}
+		if(type === 'fos') {
+			// TODO: check second letter as well to group them in 01,02,03 etc.
+			this.groupedFos = Object.values(
+				subjects.reduce((acc, subject) => {
+					let firstLetter = subject[0].toLocaleUpperCase();
+					if(!acc[firstLetter]) {
+						acc[firstLetter] = {group: firstLetter, data: [subject]};
+					} else {
+						acc[firstLetter].data.push(subject);
+					}
+					return acc;
+				},{})
+			)
+			if(subjects.length > 1) {
+				this.groupedFos.unshift({group: 'All', data: subjects});
+			}
+		}
+	}
+
+	public changeDisplayedSubjects(i, group) {
+		this.subjectsColumns = [];
+		this.index = i;
+		if(group.data.length > this.subjectsLimit && group.group != 'All') {
+			this.divideSubjects(group);
+		}
+	}
+
+	public divideSubjects(group) {
+		let columns = [];
+		for(let i = 0; i < (group.data.length / this.subjectsLimit); i++) {
+			columns.push(group.data.slice(i * this.subjectsLimit, ((i + 1) * this.subjectsLimit)));
+		}
+		this.subjectsColumns = columns;
+	}
   
   private removeModalOpen(subject: string, i: any) {
 		this.selectedSubjects = [subject];
@@ -129,41 +241,60 @@ export class SubjectsEditFormComponent implements OnInit {
       if (secondArray.indexOf(firstArray[i]) === -1) {
         difference.push(firstArray[i]);
       }
-      
     }
     return difference;
   }
+
+	public editAllSubjects() {
+		this.fullscreen.title = "Add/Edit Subjects";
+    this.fullscreen.okButtonText = "Save";
+    this.fullscreen.back = true;
+    this.fullscreen.okButton = true;
+    this.fullscreen.open();
+	}
+
+	public addSubjectsIntoList() {
+		const subjectsFromUserInput = this.subjectsForm.getRawValue();
+		subjectsFromUserInput.forEach(element => {
+			this.displayedSubjects.unshift(element);
+		});
+		this.subjectsForm.clear();
+	}
+
+	public removeSubjectFromList(i) {
+		this.displayedSubjects.splice(i, 1);
+	}
+
+	public saveAllSubjects() {
+		let selectedSdg = this.sdgSelection.getSelectedSubjects().map(a => a.id);
+		let selectedFos = this.fosSelection.getSelectedSubjects().map(a => a.id);
+		let requests = [
+			...this.saveSubjects(this.community.subjects, this.displayedSubjects, 'subjects'),
+			...this.saveSubjects(this.community.sdg, selectedSdg, 'sdg'),
+			...this.saveSubjects(this.community.fos, selectedFos, 'fos')
+		];
+		this.subscriptions.push(forkJoin(requests).subscribe(res => {
+			this.afterUpdateActions(res, "updated");
+		}));
+	}
   
-  public saveSubjects() {
+  public saveSubjects(subjects, displayedSubjects, type: string) {
 		if (this.communityId != null && this.communityId !== '') {
 			this.showLoading = true;
-			const subjectsToDeleteAr = this.getSubjectsExistOnlyInFirst(this.selectedSubjects, this.myForm.getRawValue());
-			const subjectsToAddAr = this.getSubjectsExistOnlyInFirst(this.myForm.getRawValue(), this.selectedSubjects);
+			const subjectsToDeleteAr = this.getSubjectsExistOnlyInFirst(subjects, displayedSubjects);
+			const subjectsToAddAr = this.getSubjectsExistOnlyInFirst(displayedSubjects, subjects);
 			const subjectsToDelete = this.getNonEmptyItems(subjectsToDeleteAr);
 			const subjectsToAdd = this.getNonEmptyItems(subjectsToAddAr);
-			if (subjectsToAdd.length > 0 && subjectsToDelete.length > 0) {
-				this.subscriptions.push(this._subjectsService.removeSubjects(
-						this.properties.communityAPI + this.communityId + '/subjects', subjectsToDelete).subscribe(res =>{
-						this.subscriptions.push(this._subjectsService.addSubjects(
-							this.properties.communityAPI + this.communityId + '/subjects', subjectsToAdd).subscribe(res => {
-								this.afterUpdateActions(res, "added");
-						}));
-				}));
-			} else if (subjectsToAdd.length > 0) {
-				this.subscriptions.push(this._subjectsService.addSubjects(
-					this.properties.communityAPI + this.communityId + '/subjects', subjectsToAdd).subscribe(res => {
-						this.afterUpdateActions(res, "added");
-					},
-					error => this.handleUpdateError('System error updating subjects', error)
-				));
-			} else if (subjectsToDelete.length > 0) {
-				this.subscriptions.push(this._subjectsService.removeSubjects(
-					this.properties.communityAPI + this.communityId + '/subjects', subjectsToDelete).subscribe(res => {
-						this.afterUpdateActions(res, "deleted");
-					},
-					error => this.handleUpdateError('System error updating subjects', error)
-				));
+			let requests = [];
+			if (subjectsToDelete.length > 0) {
+				requests.push(this._subjectsService.removeSubjects(
+					this.properties.communityAPI + this.communityId + '/' + type, subjectsToDelete))
 			}
+			if (subjectsToAdd.length > 0) {
+				requests.push(this._subjectsService.addSubjects(
+					this.properties.communityAPI + this.communityId + '/' + type, subjectsToAdd))
+			}
+			return requests; 
 		}
   }
   
@@ -175,28 +306,36 @@ export class SubjectsEditFormComponent implements OnInit {
     this.showLoading = false;
   }
   
-  afterUpdateActions(res, message: string) {
-    this._communityService.setCommunity(this._communityService.parseCommunity(res));
-    this.community.subjects = res['subjects'];
-    this.originalSubjects = [];
-    for (let i = 0; i < this.community.subjects.length; i++) {
-      this.originalSubjects.push(this.community.subjects[i]);
-    }
-    this.originalSubjects.sort((n1,n2)=> {
-      if (n1.toLowerCase() > n2.toLowerCase()) {
-        return 1;
-      }
-      if (n1.toLowerCase() < n2.toLowerCase()) {
-        return -1;
-      }
-      return 0;
-    });
-    this.page = 1;
-    this.community.subjects = this.originalSubjects.filter(subject => {
-      return !this.filterForm.value || subject.toLowerCase().indexOf(this.filterForm.value.toLowerCase()) != -1
-    }).sort();
-    this._clearCacheService.purgeBrowserCache("Subject "+message, this.communityId);
-    NotificationHandler.rise('Subject successfully ' + message + '!')
+  afterUpdateActions(response, message: string) {
+		response.forEach(res => {
+			if (res.subjects) {
+				this.community.subjects = res.subjects;
+			} else if (res.sdg) {
+				this.community.sdg = res.sdg;
+			} else if (res.fos) {
+				this.community.fos = res.fos;
+			}
+		});
+		this._communityService.updateSubjects(this.community.subjects, this.community.fos, this.community.sdg);
+    
+    // this.originalSubjects = [];
+    // for (let i = 0; i < this.community.subjects.length; i++) {
+    //   this.originalSubjects.push(this.community.subjects[i]);
+    // }
+    // this.originalSubjects.sort((n1,n2)=> {
+    //   if (n1.toLowerCase() > n2.toLowerCase()) {
+    //     return 1;
+    //   }
+    //   if (n1.toLowerCase() < n2.toLowerCase()) {
+    //     return -1;
+    //   }
+    //   return 0;
+    // });
+    // this.community.subjects = this.originalSubjects.filter(subject => {
+    //   return !this.filterForm.value || subject.toLowerCase().indexOf(this.filterForm.value.toLowerCase()) != -1
+    // }).sort();
+    // this._clearCacheService.purgeBrowserCache("Subjects "+message, this.communityId);
+    NotificationHandler.rise('Subjects successfully ' + message + '!')
     this.showLoading = false;
   }
   
@@ -251,8 +390,8 @@ export class SubjectsEditFormComponent implements OnInit {
   newSubject() {
     this.isEditModal = false;
     this.selectedSubjects = [];
-    this.reset([""]);
-		this.fullscreen.title = "Add Subject";
+    this.reset([]);
+		this.fullscreen.title = "Add/Edit Subjects";
     this.fullscreen.okButtonText = "Save";
     this.fullscreen.back = true;
     this.fullscreen.okButton = true;
diff --git a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.module.ts b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.module.ts
index f778ab0..088a3d2 100644
--- a/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.module.ts
+++ b/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.module.ts
@@ -16,12 +16,14 @@ import {InputModule} from '../../../openaireLibrary/sharedComponents/input/input
 import {SearchInputModule} from '../../../openaireLibrary/sharedComponents/search-input/search-input.module';
 import {FullScreenModalModule} from 'src/app/openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module';
 import {PagingModule} from "../../../openaireLibrary/utils/paging.module";
+import {SdgSelectionModule} from '../../../openaireLibrary/sdg/sdg-selection/sdg-selection.module';
+import {FosSelectionModule} from '../../../openaireLibrary/fos/fos-selection/fos-selection.module';
 
 @NgModule({
   imports: [
     SubjectsEditFormRoutingModule, CommonModule, FormsModule, RouterModule,
     PageContentModule, IconsModule, AlertModalModule, NoLoadPaging, LoadingModule, InputModule,
-    SearchInputModule, FullScreenModalModule, PagingModule
+    SearchInputModule, FullScreenModalModule, PagingModule, SdgSelectionModule, FosSelectionModule
   ],
   declarations: [
     SubjectsEditFormComponent