D-Net

<div class="uk-width-1-1 uk-flex uk-flex-middle uk-grid uk-padding-small" uk-grid>

  <div *ngIf="funders?.length > 0"

       class="uk-width-1-2@m uk-width-1-1">

    <div class="uk-grid uk-flex uk-flex-middle uk-flex-wrap uk-flex-center uk-flex-right@m uk-width-1-1">

      <span class="">Filter by: </span>

      <div class="uk-width-expand uk-padding-remove uk-margin-small-left" dashboard-input

           [formInput]="filterForm.get('funder')"

           placeholder="Search by funders"

          type="autocomplete" [options]="allOptions" chipLabel="label">

      </div>

    </div>

  </div>

  <div class="uk-flex uk-flex-wrap uk-flex-center uk-flex-right@m uk-width-1-1 uk-width-expand@m">

    <div class="uk-width-1-1 uk-width-expand@m">

    <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"

         [selected]="openaireSearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"

         [bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate projects"></div>

  </div>

  </div>

</div>

<!--<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>-->

<!--  <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"-->

<!--       placeholder="Search Zenodo Communites"-->

<!--       [selected]="openaireSearchUtils.keyword"-->

<!--       [bordered]="true" colorClass="uk-text-secondary"-->

<!--       class="uk-width-1-2@l uk-width-1-2@m uk-width-1-1"></div>-->

<!--</div>-->

<div id="manage-projects" class="uk-padding-small">

<!--<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">-->

<!--  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>-->

<!--Newly added projects will be linked to your community on the next run of our algorithms.-->

<!--&lt;!&ndash; <div> If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!</div> &ndash;&gt;-->

<!--</div>-->

<!--<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">-->

<!--  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>-->

<!--  If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!-->

<!--</div>-->

<errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE projects'"></errorMessages>

<div *ngIf="openaireSearchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary">

  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>

   If you wish to suggest a new funder to include or report a missing project, please contact us via

   <a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing project' + '&body=' + body" target="_top">feedback@openaire.eu</a>.

</div>

<!--<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">-->

<!--  <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">-->

<!--    <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">-->

<!--      {{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}-->

<!--    </span>-->

<!--    <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">-->

<!--      <paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>-->

<!--    </span>-->

<!--  </div>-->

<!--</div>-->

  <no-load-paging  *ngIf="openaireSearchUtils.totalResults > 0" [type]="'Projects'"

                   [page]="openaireSearchUtils.page" [pageSize]="rowsOnPage" (pageChange)="goTo($event.value)"

                   [totalResults]="openaireSearchUtils.totalResults" >

  </no-load-paging>

<ul class="uk-list search-results uk-margin-medium-top uk-margin-medium-bottom">

  <li *ngFor="let result of openaireProjects" class="uk-animation-fade">

    <div class="uk-card uk-card-default uk-card-hover uk-text-small uk-margin-bottom">

      <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>

        <div class="uk-width-expand@m uk-width-1-1">

          <result-preview [properties]="properties" [showOrganizations]="true"

                          [showSubjects]="true" [result]="getResultPreview(result)" [showImage]="true">

          </result-preview>

<!--        <div class="uk-padding-small uk-padding-remove-horizontal">-->

<!--          <h6>-->

<!--            <a target="_blank" [href]="properties.baseOpenaireLink+'/search/project?projectId='+result.id">-->

<!--               <span *ngIf="result['title'].name || result.acronym">-->

<!--                 <span *ngIf="result.acronym">{{result.acronym}}</span>-->

<!--                 <span *ngIf="result.acronym && result['title'].name">-</span>-->

<!--                 <span [innerHTML]="result['title'].name"></span>-->

<!--                 <span *ngIf="result.code">({{result.code}})</span>-->

<!--               </span>-->

<!--              <span *ngIf="!result['title'].name && !result.acronym">-->

<!--                 [no title available]-->

<!--                 <span *ngIf="result.code">({{result.code}})</span>-->

<!--              </span>-->

<!--              <span class="custom-external custom-icon space"></span>-->

<!--            </a>-->

<!--          </h6>-->

<!--          <span *ngIf="result.title && result.title.accessMode" [class]="'uk-label custom-label  label-'+ result.title.accessMode " title="Access Mode">{{result.title.accessMode}}</span>-->

<!--          <span *ngIf="result.funderShortname" class="uk-label custom-label label-funder " title="Funder">{{result.funderShortname}}</span>-->

<!--          <span *ngIf="result.title  && result.title.sc39" class="uk-label custom-label label-sc39 " title="Special Clause 39">Special Clause 39</span>-->

<!--          <div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>-->

<!--          <div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">-->

<!--            <span> Organization: </span>-->

<!--            <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">-->

<!--               <a *ngIf="organization.id" target="_blank"-->

<!--                  [href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">-->

<!--                    <span>{{organization.name}}</span>-->

<!--                    <span class="custom-external custom-icon space"></span>-->

<!--               </a>-->

<!--             <span-->

<!--               *ngIf="!organization.id">-->

<!--                       {{organization.name}}</span><span-->

<!--              *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>-->

<!--           </span>-->

<!--            <span *ngIf="result['organizations'].length > 10">...</span>-->

<!--          </div>-->

<!--        </div>-->

        </div>

        <div class="uk-width-auto@m uk-width-1-1">

          <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-height-1-1">

            <div class="uk-padding-small uk-padding-remove-horizontal">

  <!--          <span *ngIf="inCommunity(result)" class="uk-label uk-label-success uk-flex uk-flex-middle">Added in my community</span>-->

              <div [class.hide-element]="!getCommunityProjectId(result)">

                <a (click)="removeProject(result)" class="uk-button action uk-flex uk-flex-middle">

                  <icon name="remove_circle_outline" ratio="0.7"></icon>

                  <span class="uk-margin-small-left">Remove project</span>

                </a>

              </div>

              <div [class.hide-element]="getCommunityProjectId(result)">

                <a (click)="addProject(result)" class="uk-button action uk-flex uk-flex-middle"

                   uk-tooltip="title:<div class='uk-padding-small'><div class='uk-margin-bottom uk-text-bold'>Add new project </div><div>Newly added projects will be linked to your community on the next run of our algorithms.</div></div>">

                  <div class="uk-text-success">

                    <icon name="add"></icon>

                  </div>

                  <span class="uk-margin-small-left">Add project</span>

                </a>

              </div>

  <!--          <a *ngIf="undo[result.id]" (click)="removeProject(undo[result.id], result.id)" -->

  <!--             class="uk-button action uk-flex uk-flex-middle">-->

  <!--            <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>-->

  <!--            <span class="uk-margin-small-left">Remove project</span>-->

  <!--          </a>-->

            </div>

          </div>

        </div>

      </div>

    </div>

  </li>

</ul>

<!--<ul *ngIf="(openaireSearchUtils.page <= pagingLimit)" [class]="'uk-list uk-list-divider  uk-margin '+custom_class">-->

<!-- &lt;!&ndash; <errorMessages [status]="[status]" [type]="'results'"></errorMessages> &ndash;&gt;-->

<!--   <li *ngFor="let result of openaireProjects" class="uk-animation-fade">-->

<!--       <h6 class="uk-grid" uk-grid>-->

<!--           <span class="uk-width-5-6">-->

<!--             <a target="_blank" [href]="properties.baseOpenaireLink+'/search/project?projectId='+result.id">-->

<!--               <span *ngIf="result['title'].name || result.acronym">-->

<!--                 <span *ngIf="result.acronym">{{result.acronym}}</span>-->

<!--                 <span *ngIf="result.acronym && result['title'].name">-</span>-->

<!--                 <span [innerHTML]="result['title'].name"></span>-->

<!--                 <span *ngIf="result.code">({{result.code}})</span>-->

<!--               </span>-->

<!--               <span *ngIf="!result['title'].name && !result.acronym">-->

<!--                 [no title available]-->

<!--                 <span *ngIf="result.code">({{result.code}})</span>-->

<!--              </span>-->

<!--               <span class="custom-external custom-icon space"></span>-->

<!--             </a>-->

<!--           </span>-->

<!--           <span class="uk-width-1-6 uk-text-center">-->

<!--             &lt;!&ndash; <a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button"><svg height="20" icon="plus" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> &ndash;&gt;-->

<!--&lt;!&ndash;               green_background_color green_color&ndash;&gt;-->

<!--             <a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>-->

<!--             <span *ngIf="inCommunity(result)" class="uk-label uk-label-success">Added</span>-->

<!--             &lt;!&ndash; <svg *ngIf="inCommunity(result)" class="added" src="assets/imgs/check-icon.png" title="Added" width="20" type="image" height="20"></svg> &ndash;&gt;-->

<!--             &lt;!&ndash; <button *ngIf="undo[result.id]" class="uk-button uk-button-danger uk-button-small" (click)="removeProject(result.id)">Undo</button> &ndash;&gt;-->

<!--             &lt;!&ndash; <input *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove" src="assets/imgs/x-icon.png" title="Undo" width="20" type="image" height="20"> &ndash;&gt;-->

<!--             &lt;!&ndash; <a *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove red_colour"><svg height="20" icon="close" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> &ndash;&gt;-->

<!--&lt;!&ndash;               red_background_color red_color&ndash;&gt;-->

<!--             <a *ngIf="undo[result.id]" (click)="removeProject(undo[result.id], result.id)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>-->

<!--          </span>-->

<!--       </h6>-->

<!--       <span *ngIf="result.title && result.title.accessMode" [class]="'uk-label custom-label  label-'+ result.title.accessMode " title="Access Mode">{{result.title.accessMode}}</span>-->

<!--       <span *ngIf="result.funderShortname" class="uk-label custom-label label-funder " title="Funder">{{result.funderShortname}}</span>-->

<!--       <span *ngIf="result.title  && result.title.sc39" class="uk-label custom-label label-sc39 " title="Special Clause 39">Special Clause 39</span>-->

<!--       <div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>-->

<!--       <div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">-->

<!--           <span> Organization: </span>-->

<!--           <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">-->

<!--               <a *ngIf="organization.id" target="_blank"-->

<!--                  [href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">-->

<!--                    <span>{{organization.name}}</span>-->

<!--                    <span class="custom-external custom-icon space"></span>-->

<!--               </a>-->

<!--             <span-->

<!--                   *ngIf="!organization.id">-->

<!--                       {{organization.name}}</span><span-->

<!--                   *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>-->

<!--           </span>-->

<!--           <span *ngIf="result['organizations'].length > 10">...</span>-->

<!--       </div>-->

<!--   </li>-->

<!--</ul>-->

<div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">

    <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>

</div>

<div *ngIf="openaireSearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

  <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

    <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

      {{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.page | number}} of {{(totalPages()) | number}}

    </span>

    <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

      <paging-no-load [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>

    </span>

  </div>

</div>

</div>

<!--  </div>-->

<!--</div>-->

import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';

import { ActivatedRoute, Router } from "@angular/router";

//import { Subject } from 'rxjs/Subject';

import {SearchResult}     from '../../openaireLibrary/utils/entities/searchResult';

import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';

import {SearchFields, FieldDetails} from '../../openaireLibrary/utils/properties/searchFields';

import {SearchUtilsClass } from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {SearchProjectsService} from '../../openaireLibrary/services/searchProjects.service';

import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';

import {DOI, StringUtils} from '../../openaireLibrary/utils/string-utils.class';

import {ManageCommunityProjectsService} from '../../services/manageProjects.service';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {properties} from "../../../environments/environment";

import {Subscriber} from "rxjs";

import {CommunityService} from "../../openaireLibrary/connect/community/community.service";

import {FormArray, FormBuilder, FormGroup} from "@angular/forms";

import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";

import {debounceTime, distinctUntilChanged} from "rxjs/operators";

import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview";

import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";

declare var UIkit;

@Component({

    selector: 'add-projects',

    templateUrl: './add-projects.component.html',

})

export class AddProjectsComponent implements OnInit {

  private subscriptions: any[] = [];

  @Output() communityProjectsChanged  = new EventEmitter();

  @Input() communityProjects = [];

  //@Output() communityProjectsChanged  = new EventEmitter();

  private community: string = '';

  public openaireProjects = [];

  public undo = {};

  public queryParameters: string = "";

  public funders:string[];

  public selectedFunderId:string = "";

  selectedFunderName:string ="Select funder:";

  public disableForms: boolean = false;

  public warningMessage = "";

  public infoMessage = "";

  public rowsOnPage:number  = 10;

  public routerHelper:RouterHelper = new RouterHelper();

  public errorCodes: ErrorCodes;

  public openaireSearchUtils:SearchUtilsClass = new SearchUtilsClass();

  public properties:EnvProperties = null;

  public pagingLimit:number = 0;

  public resultsPerPage: number = 0;

  public subFunders: any; public subResults: any; subAdd: any; subRemove: any;

  public body:string = "Send from page";

  @Output() toggleView: EventEmitter<any> = new EventEmitter();

  filterForm: FormGroup;

  // public fundersCtrl: FormArray;

  allOptions: Option[] = [];

  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;

  ngOnInit() {

     this.properties = properties;

     this.pagingLimit = properties.pagingLimit;

     this.resultsPerPage = properties.resultsPerPage;

    this.subscriptions.push(this.route.params.subscribe(params => {

       this.openaireSearchUtils.status = this.errorCodes.LOADING;

      // this.route.queryParams.subscribe(params => {

       this.community = params['community'];

       // this.community = params['communityId'];

       this.getFunders();

       this._getOpenaireProjects("", 1, 10);

       var referrer = null;

       if (typeof location !== 'undefined') {

         referrer = location.href;

       }

       this.body = "[Please write your message here]";

       this.body = StringUtils.URIEncode(this.body);

     }, error => {

      // this.openaireSearchUtils.status = this.errorCodes.

     }));

    this.openaireSearchUtils.keyword = "";

    // this.fundersCtrl = this._fb.array([]);

    this.filterForm = this._fb.group({

      keyword: [''],

      funder: []//this.fundersCtrl,

    });

    this.subscriptions.push(this.filterForm.get('keyword').valueChanges

      .pipe(debounceTime(1000), distinctUntilChanged())

      .subscribe(value => {

        this.keywordChanged(value);

      // this.applyFilters();

    }));

    this.subscriptions.push(this.filterForm.get('funder').valueChanges

      .pipe(debounceTime(1000), distinctUntilChanged())

      .subscribe(funderName => {

        console.log("funderName: "+funderName +" - selectedFunderId: "+this.selectedFunderId);

        if(funderName || this.selectedFunderId) {

          console.log("will be called funder changed: name="+funderName+", id="+this.getFunderIdByName(funderName));

          this.funderChanged(this.getFunderIdByName(funderName), funderName);

        }

      // this.page = 1;

      // this.applyFilters();

      //   if(value && value.id != undefined && value.id != this.selectedFunderId) {

      //     // if(value && value.id) {

      //     this.funderChanged(value.id, value.label);

      //     // }

      //   }

    }));

  }

  constructor(private route: ActivatedRoute, private _router: Router, private _searchProjectsService: SearchProjectsService,

              private _manageCommunityProjectsService: ManageCommunityProjectsService,

              private communityService: CommunityService, private _fb: FormBuilder) {

    this.errorCodes = new ErrorCodes();

    this.openaireSearchUtils.status = this.errorCodes.LOADING;

  }

  public ngOnDestroy() {

    this.subscriptions.forEach(sub => {

      if (sub instanceof Subscriber) {

        sub.unsubscribe();

      }

    });

    if(this.subFunders){

      this.subFunders.unsubscribe();

    }

    if(this.subResults){

      this.subResults.unsubscribe();

    }

    if(this.subAdd) {

      this.subAdd.unsubscribe();

    }

    if(this.subRemove) {

      this.subRemove.unsubscribe();

    }

  }

  public addProject(project: SearchResult) {

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.subAdd = this._manageCommunityProjectsService.addProject(this.properties, this.community, project).subscribe(

        data => {

          this.undo[project.id] = data.id;

          this.communityProjects.push(data);

          UIkit.notification('Project successfully added!', {

            status: 'success',

            timeout: 6000,

            pos: 'bottom-right'

          });

          this.communityProjectsChanged.emit({

            value: this.communityProjects,

          });

        },

        err => {

          this.handleError('An error has been occurred. Try again later!');

          console.error(err.status);

        }/*,

        () => {

          console.info("completed ADD");

        }*/

      );

    }

  }

  public removeProject(project: any) {

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      let projectId: string = this.getCommunityProjectId(project);

      this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, projectId).subscribe(

        data => {

          let index = this.communityProjects.indexOf(projectId);

          this.communityProjects.splice(index, 1);

          UIkit.notification('Project successfully removed!', {

            status: 'success',

            timeout: 6000,

            pos: 'bottom-right'

          });

          this.communityProjectsChanged.emit({

            value: this.communityProjects,

          });

        },

        err => {

          this.handleError('An error has been occurred. Try again later!');

          console.error(err);

        },

        () => {

          //this.undo[communityProjectId] = "";

        }

      )

    }

  }

  public getCommunityProjectId(project: any) : string {

    let index: number = 0;

    for(let communityProject of this.communityProjects) {

      if(communityProject.openaireId == project.id ||

          (project.code == communityProject.grantId && project.funderShortname == communityProject.funder)) {

        return communityProject.id;

      }

      index++;

    }

    return "";

  }

  //public inCommunity(project: any): any {

    // for(let communityProject of this.communityProjects) {

    //   if(communityProject.openaireId == project.id) {

    //     return true;

    //   } else if(project.code == communityProject.grantId && project.funderShortname == communityProject.funder) {

    //     return true;

    //   }

    // }

    //

    // // if(this.undo[project.id]) {

    // //   return true;

    // // }

    // return false;

    //return this.getCommunityProjectId(project);

  //}

  getFunderNames(): string[] {

    return this.funders.map(funder => {

      return funder['name'];

    })

  }

  getFunderIdByName(funderName: string): string {

    if(funderName == "") {

      return "";

    }

    for(let funder of this.funders) {

      if(funder['name'] == funderName) {

        return funder['id'];

      }

    }

    return funderName;

  }

  getFunders ()  {

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.subFunders = this._searchProjectsService.getFunders(this.properties).subscribe(

        data => {

          this.funders = data[1];

          console.log("funders: ",this.funders);

          this.allOptions = [];

          let i;

          this.allOptions.push({label: 'Select funder:', value: {id: '', label: 'Select funder:'}});

          for(i=0; i<this.funders.length; i++) {

            let funder = this.funders[i];

            if(funder && funder['id']) {

              this.allOptions.push({label: funder['name'], value: {id:funder['id'], label: funder['name']}});

            }

          }

        },

        err => console.error(err)

      );

    }

  }

  public getResultPreview(result: SearchResult): ResultPreview {

    return ResultPreview.searchResultConvert(result, "project");

  }

  private _getOpenaireProjects(parameters:string, page: number, size: number){

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      if(page > this.pagingLimit) {

        size=0;

      }

      if(this.openaireSearchUtils.status == this.errorCodes.LOADING) {

        this.openaireSearchUtils.status = this.errorCodes.LOADING;

        this.disableForms = true;

        this.openaireProjects = [];

        this.openaireSearchUtils.totalResults = 0;

        this.subResults = this._searchProjectsService.searchProjects(parameters, null, page, size, [], this.properties).subscribe(

          data => {

              this.undo = {};

              this.openaireSearchUtils.totalResults = data[0];

              this.openaireProjects = data[1];

              //this.searchPage.checkSelectedFilters(this.filters);

              this.openaireSearchUtils.status = this.errorCodes.DONE;

              if(this.openaireSearchUtils.totalResults == 0 ){

                this.openaireSearchUtils.status = this.errorCodes.NONE;

              }

              this.disableForms = false;

              if(this.openaireSearchUtils.status == this.errorCodes.DONE) {

                // Page out of limit!!!

                let totalPages:any = this.openaireSearchUtils.totalResults/(this.openaireSearchUtils.size);

                if(!(Number.isInteger(totalPages))) {

                    totalPages = (parseInt(totalPages, 10) + 1);

                }

                if(totalPages < page) {

                  this.openaireSearchUtils.totalResults = 0;

                  this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;

                }

              }

          },

          err => {

              console.error(err);

               //TODO check erros (service not available, bad request)

              if(err.status == '404') {

                this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;

              } else if(err.status == '500') {

                this.openaireSearchUtils.status = this.errorCodes.ERROR;

              } else {

                this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;

              }

              this.disableForms = false;

          }

        );

      }

    }

  }

  totalPages(): number {

    let totalPages:any = this.openaireSearchUtils.totalResults/(this.rowsOnPage);

    if(!(Number.isInteger(totalPages))) {

        totalPages = (parseInt(totalPages, 10) + 1);

    }

    return totalPages;

  }

  keywordChanged(keyword) {

    this.openaireSearchUtils.keyword = keyword;

    this.buildQueryParameters();

    this.goTo(1);

  }

  funderChanged(funderId:string, funderName:string){

    this.selectedFunderId = funderId;

    this.selectedFunderName = funderName;

    this.buildQueryParameters();

    this.goTo(1);

  }

  buildQueryParameters() {

    this.queryParameters = "";

    if(this.openaireSearchUtils.keyword) {

      this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);

    }

    if(this.selectedFunderId) {

      this.queryParameters += this.queryParameters ? "&" : "";

      this.queryParameters += "fq=funder exact " + '"'+StringUtils.URIEncode(this.selectedFunderId)+ '"';

    }

  }

  // buildQueryParameters() {

  //   this.queryParameters = "";

  //

  //   if(this.openaireSearchUtils.keyword) {

  //     this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);

  //   }

  //

  //   if(this.fundersCtrl.getRawValue().length > 0) {

  //     this.queryParameters += this.queryParameters ? "&" : "";

  //   }

  //

  //   for (let funder of this.fundersCtrl.getRawValue()) {

  //     //if(this.selectedFunderId != "0") {

  //     this.queryParameters += "fq=funder exact " + '"'+StringUtils.URIEncode(this.selectedFunderId)+ '"';

  //   }

  // }

  goTo(page:number = 1){

    this.openaireSearchUtils.page=page;

    this.openaireSearchUtils.status = this.errorCodes.LOADING;

    this._getOpenaireProjects(this.queryParameters, page, 10);

  }

  back() {

    this.toggleView.emit(null);

  }

  public onSearchClose() {

    this.openaireSearchUtils.keyword = this.filterForm.get('keyword').value;

  }

  public resetInput() {

    this.openaireSearchUtils.keyword = null;

    this.searchInputComponent.reset()

  }

  handleError(message: string) {

    UIkit.notification(message, {

      status: 'danger',

      timeout: 6000,

      pos: 'bottom-right'

    });

  }

}

import { Component, ViewChild, OnInit, Input, ElementRef } from '@angular/core';

import { ActivatedRoute, Router } from "@angular/router";

import {RemoveProjectsComponent} from './remove-projects.component';

import {AddProjectsComponent} from './add-projects.component';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";

import {Title} from '@angular/platform-browser';

import {CommunityService} from "../../openaireLibrary/connect/community/community.service";

import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";

import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";

import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";

import {properties} from "../../../environments/environment";

@Component({

  selector: 'manage-projects',

  template: `    

      <remove-projects (toggleView)="toggleAction()" [communityProjects]="communityProjects" [showLoading]="showLoadingInRemove"

                       (communityProjectsChanged)="communityProjectsChanged($event)" [toggle]="toggle">

      </remove-projects>

      <fs-modal #fsModal (cancelEmitter)="toggleAction()">

        <div actions class="uk-flex uk-flex-middle uk-height-1-1">

          <div class=" uk-text-secondary">

            <icon class="uk-button" name="info" ratio="1.5"></icon>

          </div>

          <div *ngIf="community" uk-drop="mode: hover">

            <div class="uk-card uk-card-body uk-card-default">

              If you cannot find a funder that is relevant for your community, please contact us 

              (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">{{properties.feedbackmailForMissingEntities}}</a>) 

              and we will try to get the funder on board!

            </div>

          </div>

        </div>

<!--        *ngIf="alreadyToggled"-->

        <add-projects [communityProjects]="communityProjects" (communityProjectsChanged)="communityProjectsChanged($event)"></add-projects>

      </fs-modal>

  `

})

export class ManageProjectsComponent implements OnInit {

  @Input() communityProjects =[];

  @ViewChild (RemoveProjectsComponent) removeProjectsComponent : RemoveProjectsComponent ;

  @ViewChild (AddProjectsComponent) addProjectsComponent : AddProjectsComponent ;

  @ViewChild('fsModal') fullscreen:FullScreenModalComponent;

  public pageTitle: string = "Manage community projects";

  public toggle: boolean = false;

  // public alreadyToggled: boolean = false;

  public updateCommunityProjectsOnToggle: boolean = false;

  private subscriptions: any[] = [];

  public showLoadingInRemove: boolean = true;

  public body:string = "Send from page";

  public properties: EnvProperties = properties;

  public community: string = "";

  ngAfterViewInit() {

    // this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {

    //   if(community) {

    //     this.community = community.communityId;

    //     this.title.setTitle('Administration Dashboard | Projects');

    //     this.body = "[Please write your message here]";

    //     this.body = StringUtils.URIEncode(this.body);

    //

    //     if(this.removeProjectsComponent) {

    //       // this.removeProjectsComponent._getCommunityProjects();

    //     }

    //   }

    // }));

  }

  ngOnInit() {

    this.subscriptions.push(this.route.params.subscribe(params => {

      let communityId = params['community'];

      if(communityId) {

        this.title.setTitle(communityId.toUpperCase() + ' | Projects');

        this.body = "[Please write your message here]";

        this.body = StringUtils.URIEncode(this.body);

      }

    }));

    this.fullscreen.title = "Search and Add Projects";

    this.fullscreen.okButtonText = "Done";

    this.fullscreen.okButton = true;

  }

  constructor(private element: ElementRef,

              private title: Title,

              private route: ActivatedRoute, private _router: Router,

              private communityService: CommunityService) {}

  public ngOnDestroy() {}

  // public updateCommunityProjects() {

  //   if(!Session.isLoggedIn()){

  //     this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

  //   } else {

  //     HelperFunctions.scroll();

  //

  //     this.toggle = !this.toggle;

  //     if(this.toggle) {

  //

  //       //if(this.updateCommunityProjectsOnToggle) {

  //         this.removeProjectsComponent._getCommunityProjects();

  //         this.addProjectsComponent.undo = {};

  //       //}

  //     } else {

  //       this.updateCommunityProjectsOnToggle = false;

  //     }

  //   }

  // }

  public toggleAction() {

    // this.alreadyToggled = true;

    if (!Session.isLoggedIn()) {

      this._router.navigate(['/user-info'], {

        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });

    } else {

      HelperFunctions.scroll();

      this.toggle = !this.toggle;

      if (this.toggle) {

        this.fullscreen.open();

        this.pageTitle = 'Search community projects';

      } else {

        // this.updateCommunityProjectsOnToggle = false;

        this.pageTitle = 'Manage community projects';

      }

    }

  }

  public communityProjectsChanged($event) {

    this.communityProjects = $event.value;

    this.showLoadingInRemove = false;

    if(this.toggle) {

      this.removeProjectsComponent.applyFilters();

      this.removeProjectsComponent.createFunderFilter();

    }

  }

  // public updateCommunityProjects($event) {

  //   this.updateCommunityProjectsOnToggle = true;

  // }

}

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { RouterModule } from '@angular/router';

import { EnvironmentSpecificResolver } from '../../openaireLibrary/utils/properties/environmentSpecificResolver';

import { EnvironmentSpecificService } from '../../openaireLibrary/utils/properties/environment-specific.service';

import { DataTablesModule } from 'angular-datatables';

import { ManageProjectsComponent } from './manage-projects.component';

import { ManageCommunityProjectsService } from '../../services/manageProjects.service';

import { SearchProjectsServiceModule } from '../../openaireLibrary/connect/projects/searchProjectsService.module';

import { RemoveProjectsComponent } from './remove-projects.component';

import { AddProjectsComponent } from './add-projects.component';

import { SearchProjectsService } from '../../openaireLibrary/services/searchProjects.service';

import { PagingModule } from '../../openaireLibrary/utils/paging.module';

import { SearchPagingModule } from '../../openaireLibrary/searchPages/searchUtils/searchPaging.module';

import {ErrorMessagesModule} from '../../openaireLibrary/utils/errorMessages.module';

import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';

import {FABModule} from '../../utils/fabModule.module';

import {CommonModule} from '@angular/common';

import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";

import {CommunityInfoModule} from "../community-info/community-info.module";

import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";

import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";

import {NoLoadPaging} from "../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";

import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";

import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";

import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";

import {add, arrow_left, close, remove_circle_outline, info} from "../../openaireLibrary/utils/icons/icons";

import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";

import {ResultPreviewModule} from "../../openaireLibrary/utils/result-preview/result-preview.module";

@NgModule({

  imports: [

    CommonModule,

    HttpClientModule,

    FormsModule,

    ReactiveFormsModule,

    RouterModule,

    DataTablesModule,

    PagingModule, SearchPagingModule,

    ErrorMessagesModule,

    AlertModalModule,

    SearchProjectsServiceModule,

    FABModule,

    PageContentModule,

    CommunityInfoModule,

    InputModule,

    SearchInputModule,

    RouterModule.forChild([

      {

        path: '', component: ManageProjectsComponent

      }

    ]),

    NoLoadPaging, LoadingModule, IconsModule, FullScreenModalModule, ResultPreviewModule

  ],

    declarations: [

        ManageProjectsComponent,

        RemoveProjectsComponent,

        AddProjectsComponent

    ],

    providers: [

        ManageCommunityProjectsService,

        SearchProjectsService,

        EnvironmentSpecificResolver, EnvironmentSpecificService

    ],

    exports: [ManageProjectsComponent]

})

export class CommunityProjectsModule {

  constructor(private iconsService: IconsService) {

    this.iconsService.registerIcons([remove_circle_outline, add, close, arrow_left, info]);

  }

}

<div page-content>

  <div header>

    <community-info tab="projects"></community-info>

    <div [class.uk-invisible]="showLoading" class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>

      <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"

           [selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"

           [bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate projects"

           class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>

      <div>

        <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="addNew()"

           [attr.uk-tooltip]="(toggle? 'cls: uk-invisible; ' : 'cls: uk-active; ') +

                'title: <div class=\'uk-padding-small\'><div class=\'uk-margin-bottom uk-text-bold\'> Search and add more Projects</div><div>The research results linked to the projects specified here will be automatically linked to your community dashboard.</div></div>'">

          <button class="uk-icon-button large uk-button-secondary">

            <icon name="add"></icon>

          </button>

          <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add new project</button>

        </a>

      </div>

    </div>

  </div>

  <div inner>

    <div *ngIf="showLoading" class="uk-margin-large-top">

      <loading></loading>

    </div>

    <div *ngIf="!showLoading">

      <div>

        <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-bottom" uk-grid>

          <div *ngIf="allOptions.length > 0"

               class="uk-grid uk-flex-middle uk-flex-left@m uk-flex-center uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-first-column">

            <span class="">Filter by: </span>

<!--            uk-width-expand@m uk-width-auto-->

            <div class="uk-width-expand uk-padding-remove uk-margin-small-left" dashboard-input

                 [formInput]="filterForm.get('funder')"

                 placeholder="Search by funders"

                 type="chips" [options]="allOptions"   chipLabel="label">

            </div>

          </div>

          <div *ngIf="previewCommunityProjects.length > 0"

               class="uk-width-expand@m uk-width-1-1">

            <div class="uk-flex-middle uk-flex-right@m uk-flex-center uk-grid">

              <span class="">Sort by: </span>

              <div  class="uk-width-medium uk-padding-remove uk-margin-small-left"  dashboard-input

                    [formInput]="filterForm.get('sort')"

                    type="select"

                    [options]="sortOptions">

              </div>

            </div>

          </div>

        </div>

        <no-load-paging *ngIf="previewCommunityProjects.length > 0" [type]="'projects'"

                        (pageChange)="updatePage($event)"

                        [page]="page" [pageSize]="pageSize"

                        [totalResults]="previewCommunityProjects.length">

        </no-load-paging>

        <div class="uk-margin-medium-top uk-margin-medium-bottom">

          <div *ngIf="previewCommunityProjects.length == 0"

               class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">

            <div>No projects for {{name}}</div>

          </div>

          <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"

               *ngFor="let item of previewCommunityProjects.slice((page - 1)*pageSize, page*pageSize)">

            <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>

              <div class="uk-width-expand@m uk-width-1-1">

                <div class="uk-padding-small uk-padding-remove-horizontal">

                  <h6 *ngIf="item.name || item.acronym || item.openaireId || item.grantId || item.funder"

                       class="uk-margin-small-bottom">

                    <a *ngIf="item.openaireId || item.grantId || item.funder"

                       target="_blank"

                       [href]="communityUrl+'/search/project?' + ((item.openaireId) ? 'projectId='+item.openaireId : 'grantId='+item.grantId+'&funder='+item.funder)">

                      <span *ngIf="item.name">{{item.name}}</span>

                      <span *ngIf="item.name && item.acronym">(</span><span *ngIf="item.acronym">{{item.acronym}}</span><span *ngIf="item.name && item.acronym">)</span>

                      <span *ngIf="!item.name && !item.acronym">[no title available]</span>

                      <span class="custom-external custom-icon space"></span>

                    </a>

                    <span *ngIf="!item.openaireId && !item.grantId && !item.funder">

                      <span *ngIf="item.name">{{item.name}}</span>

                      <span *ngIf="item.name && item.acronym">(</span><span *ngIf="item.acronym">{{item.acronym}}</span><span *ngIf="item.name && item.acronym">)</span>

                      <span *ngIf="!item.name && !item.acronym">[no title available]</span>

                    </span>

                  </h6>

                  <div *ngIf="item.grantId" class="uk-margin-small-bottom">

                    <span class="title">Grant ID: </span>

                    <span>{{item.grantId}}</span>

                  </div>

                  <div *ngIf="item.funder" class="uk-margin-small-bottom">

                    <span class="title">Funder: </span>

                    <span>{{item.funder}}</span>

                  </div>

                </div>

              </div>

              <div class="uk-width-auto@m uk-width-1-1">

                <div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">

                  <a (click)="removeProject(item)" class="uk-button action uk-flex uk-flex-middle">

                    <icon name="remove_circle_outline" ratio="0.7"></icon>

                    <span class="uk-margin-small-left">Remove project</span>

                  </a>

                </div>

              </div>

            </div>

          </div>

        </div>

        <no-load-paging *ngIf="previewCommunityProjects.length > 0" [type]="'projects'"

                        (pageChange)="updatePage($event)"

                        [page]="page" [pageSize]="pageSize"

                        [totalResults]="previewCommunityProjects.length">

        </no-load-paging>

      </div>

    </div>

<!--  <div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>-->

<!--    <div>-->

<!--      <form class=" uk-animation uk-card uk-card-default uk-padding" >-->

<!--        <div>-->

<!--          <select class="uk-select"  [(ngModel)]="selectedFunder" name="select_funder"  >-->

<!--           <option  value="" (click)="goTo(1)">Select funder:</option>-->

<!--           <option *ngFor="let  funder of funders"  [value]="funder" (click)="goTo(1)">{{funder}}</option>-->

<!--          </select>-->

<!--        </div>-->

<!--      </form>-->

<!--    </div>-->

<!--    <div>-->

<!--      <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">-->

<!--        <div>-->

<!--          <input type="text" class="uk-input  uk-width-1-2" placeholder="Search community projects..." aria-describedby="sizing-addon2"  [(ngModel)]="communitySearchUtils.keyword"  name="keyword" >-->

<!--          <button (click)="goTo(1)"  type="submit" class=" uk-button">-->

<!--             <span class="uk-icon">-->

<!--             <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>-->

<!--             </span>Search-->

<!--           </button>-->

<!--        </div>-->

<!--      </form>-->

<!--    </div>-->

<!--  </div>-->

<!--  <errorMessages [status]="[communitySearchUtils.status]" [type]="'community projects'"></errorMessages>-->

<!--  <div *ngIf="communitySearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">-->

<!--    <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>-->

<!--  All the research results linked to the projects specified here will be automatically linked to your community dashboard.  -->

<!--  </div>-->

<!--  <div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">-->

<!--    <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">-->

<!--      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">-->

<!--        {{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}-->

<!--      </span>-->

<!--      <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">-->

<!--        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>-->

<!--      </span>-->

<!--    </div>-->

<!--  </div>-->

<!--  <div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">-->

<!--    <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">-->

<!--      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">-->

<!--        {{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}-->

<!--      </span>-->

<!--      <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">-->

<!--        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>-->

<!--      </span>-->

<!--    </div>-->

<!--  </div>-->

  <modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteProject($event)"></modal-alert>

  <!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteProject($event)">

      Are you sure you want to remove the selected project from your community?

  </delete-confirmation-dialog> -->

<!-- </div> -->

  </div>

</div>

import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';

import { ActivatedRoute, Router } from "@angular/router";

import {Subject, Subscriber} from 'rxjs';

import { DataTableDirective } from 'angular-datatables';

import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';

import {SearchUtilsClass } from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {ManageCommunityProjectsService} from '../../services/manageProjects.service';

import {SearchCommunityProjectsService} from '../../openaireLibrary/connect/projects/searchProjects.service';

import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';

import {DOI, StringUtils} from '../../openaireLibrary/utils/string-utils.class';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";

import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";

import {properties} from "../../../environments/environment";

import {CommunityService} from "../../openaireLibrary/connect/community/community.service";

import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";

import {CheckPortal, Portal} from "../../openaireLibrary/utils/entities/adminTool/portal";

import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";

declare var UIkit;

@Component({

    selector: 'remove-projects',

    templateUrl: './remove-projects.component.html',

    // styles: [`

    //   #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{

    //     display: none;

    //   }

    // `],

    // encapsulation: ViewEncapsulation.None // this used in order styles to work

})

export class RemoveProjectsComponent implements OnInit {

  public routerHelper:RouterHelper = new RouterHelper();

  private community: string = '';

  private communityUrl = "https://beta.explore.openaire.eu";

  public errorCodes: ErrorCodes;

  @Output() communityProjectsChanged  = new EventEmitter();

  @Input() public communityProjects = [];

  public previewCommunityProjects = [];

  public communitySearchUtils:SearchUtilsClass = new SearchUtilsClass();

  public sub: any; public subResults: any; subRemove: any;

  properties:EnvProperties = properties;

  public disableForms: boolean = false;

  dtOptions: DataTables.Settings = {};

  showTable = false; filteringAdded = false;

  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;

  dtTrigger: Subject<any> = new Subject(); //necessary

  public rowsOnPage:number  = 10;

  public queryParameters: string = "";

  public query = '';

  public selectedProjects=[] ;

  public elementRef;

  public funders:Set<string>;

  public selectedFunder:string ="";

  //@Output() projectSelected = new EventEmitter();

  //@Input() public properties:EnvProperties;

  public projects:string[];

  private triggered: boolean = false;

  private selectedCommunityProject: any;

  @ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;

  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;

  @Input() public showLoading: boolean = true;

  private subscriptions: any[] = [];

  /* Paging */

  page: number = 1;

  pageSize: number = 10;

  public portal: string;

  public name: string;

  public isPortalAdministrator = null;

  /* Search */

  filterForm: FormGroup;

  public fundersCtrl: FormArray;

  private searchText: RegExp = new RegExp('');

  public keyword: string = '';

  allOptions: Option[] = [];

  sortOptions: Option[] = [

    //{label:"Title (desc) ", value:{ sort: "title",descending: true }},

    {label:"Title ", value: { sort: "title",descending:false }},

    //{label:"Grant ID (desc) ", value:{ sort: "grant",descending: true }},

    {label:"Grant ID ", value: { sort: "grant",descending:false }},

    //{label:"Funder (desc) ", value:{ sort: "funder",descending: true }},

    {label:"Funder ", value: { sort: "funder",descending:false }}

  ];

  @Output() toggleView: EventEmitter<any> = new EventEmitter();

  @Input() public toggle: boolean = true;

  ngOnInit() {

    this.communitySearchUtils.keyword = "";

    this.fundersCtrl = this._fb.array([]);

    this.filterForm = this._fb.group({

      keyword: [''],

      funder: this.fundersCtrl,

      sort: this._fb.control(this.sortOptions[0].value)

    });

    this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {

      this.searchText = new RegExp(value, 'i');

      this.page = 1;

      this.applyFilters();

    }));

    this.subscriptions.push(this.filterForm.get('funder').valueChanges.subscribe(value => {

      console.log("funder changed: ",value);

      this.page = 1;

      this.applyFilters();

    }));

    this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {

      this.page = 1;

      this.sort();

    }));

    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {

      if(community) {

        this.portal = community.communityId;

        this.name = community.shortTitle;

        this.communityUrl = "https://beta."+this.portal+".openaire.eu";

        this.keyword = '';

        this._getCommunityProjects();

        // this.initPreviewCommunityProjects();

      }

    }));

  }

  constructor(private route: ActivatedRoute, private _router: Router,

              private _fb: FormBuilder,

              private communityService: CommunityService,

              private _manageCommunityProjectsService: ManageCommunityProjectsService,

              private _searchCommunityProjectsService: SearchCommunityProjectsService) {

    this.errorCodes = new ErrorCodes();

    this.communitySearchUtils.status = this.errorCodes.LOADING;

  }

  public ngOnDestroy() {

    this.subscriptions.forEach(sub => {

      if (sub instanceof Subscriber) {

        sub.unsubscribe();

      }

    });

  }

  // changekeyword() {

  //   if (this.filterForm.get("keyword").value.length >= 3 || this.filterForm.get("keyword").value.length == 0) {

  //     this.searchTermStream.next(this.filterForm.get("keyword").value);

  //   }

  // }

  public inCommunity(result: any): any {

    let found = false;

    for(let project of this.communityProjects) {

      if(project.opeaireId == result.id) {

        return true;

      } else if(result['title'].name.search("("+project.grantId+")") != -1 && result.funderShortname == project.funder) {

        return true;

      }

    }

    return found;

  }

  totalPages(): number {

      let totalPages:any = this.communitySearchUtils.totalResults/(this.rowsOnPage);

      if(!(Number.isInteger(totalPages))) {

          totalPages = (parseInt(totalPages, 10) + 1);

      }

      return totalPages;

  }

  public confirmedDeleteProject(data : any) {

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.subscriptions.push(this._manageCommunityProjectsService.removeProject(this.properties, this.portal, this.selectedCommunityProject.id).subscribe(

        data => {

          let index = this.communityProjects.indexOf(this.selectedCommunityProject);

          this.communityProjects.splice(index, 1);

          this.applyFilters();

          // index = this.previewCommunityProjects.indexOf(this.selectedCommunityProject);

          // this.previewCommunityProjects.splice(index, 1);

          //

          // console.log("after previewCommunityProjects: ",this.previewCommunityProjects);

          UIkit.notification('Project successfully removed!', {

            status: 'success',

            timeout: 6000,

            pos: 'bottom-right'

          });

          this.communityProjectsChanged.emit({

            value: this.communityProjects,

          });

          this.communitySearchUtils.totalResults--;

          this.communitySearchUtils.page=1;

          // this.createFunderFilter();

        },

        err => {

          this.handleError('An error has been occurred. Try again later!');

          console.error(err);

        },

        () => {

        }

      ));

    }

  }

  public removeProject(communityProject: any) {

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.selectedCommunityProject = communityProject;

      this.alertModalDeleteCommunity.cancelButton = true;

      this.alertModalDeleteCommunity.okButton = true;

      this.alertModalDeleteCommunity.alertTitle = "Remove project?";

      let title = "";

      if(communityProject.name) {

        title = communityProject.name;

      }

      if(communityProject.name && communityProject.acronym) {

        title += " (";

      }

      if(communityProject.acronym) {

        title += communityProject.acronym;

      }

      if(communityProject.name && communityProject.acronym) {

        title += ")";

      }

      this.alertModalDeleteCommunity.message = "Project";

      if(title) {

        this.alertModalDeleteCommunity.message += " '"+title+"' ";

      }

      this.alertModalDeleteCommunity.message += "will be removed from your community. Are you sure?";

      this.alertModalDeleteCommunity.okButtonText = "Yes";

      this.alertModalDeleteCommunity.open();

    }

  }

  public initPreviewCommunityProjects() {

    this.previewCommunityProjects = this.communityProjects;

    this.sort();

    this.communitySearchUtils.totalResults = this.communityProjects.length;

    this.communitySearchUtils.status = this.errorCodes.DONE;

    this.disableForms = false;

    this.createFunderFilter();

  }

  public _getCommunityProjects(){

    if(!Session.isLoggedIn()){

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.communitySearchUtils.status = this.errorCodes.LOADING;

      this.disableForms = true;

      this.communityProjects = [];

      this.communitySearchUtils.totalResults = 0;

      this.communitySearchUtils.page=1;

      this.communitySearchUtils.keyword = "";

      this.selectedFunder = "";

      this.subscriptions.push(this._searchCommunityProjectsService.searchProjects(this.properties, this.portal).subscribe(

          data => {

            this.communityProjects = data;

            this.previewCommunityProjects = this.communityProjects;

            this.sort();

            this.communitySearchUtils.totalResults = data.length;

            this.communitySearchUtils.status = this.errorCodes.DONE;

            // if(this.communitySearchUtils.totalResults == 0 ){

            //   this.communitySearchUtils.status = this.errorCodes.NONE;

            // }

            this.disableForms = false;

            this.communityProjectsChanged.emit({

                value: this.communityProjects,

            });

            this.createFunderFilter();

            this.showLoading = false;

          },

          err => {

            console.error(err);

             //TODO check erros (service not available, bad request)

            if(err.status == '404') {

              this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;

            } else if(err.status == '500') {

              this.communitySearchUtils.status = this.errorCodes.ERROR;

            } else {

              this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;

            }

            this.disableForms = false;

            this.showLoading = false;

          }

      ));

    }

  }

  public createFunderFilter(): Set<String> {

    this.funders = new Set<string>();

    this.allOptions = [];

    let i;

    for(i=0; i<this.communityProjects.length; i++) {

      let funder = this.communityProjects[i].funder;

      if(funder && !this.funders.has(funder)) {

        this.funders.add(funder);

        this.allOptions.push({label: funder, value: {id:funder, label: funder}});

      }

    }

    return this.funders;

  }

  public updatePage($event) {

    this.page = $event.value;

  }

  addNew() {

    this.toggleView.emit(null);

  }

  public applyFilters() {

    // this.page = 1;

    this.previewCommunityProjects = this.communityProjects.filter(project => {

      let return_value: boolean = (this.filterCommunityProjectByKeyword(project) && this.filterCommunityProjectByFunder(project));

      return return_value;

    });

    // check paging here!!!

    if(this.previewCommunityProjects.slice((this.page - 1)*this.pageSize, this.page*this.pageSize).length == 0) {

      this.page = 1;

    }

    this.sort();

  }

  public filterCommunityProjectByKeyword(project): boolean {

    const textFlag = this.searchText.toString().toLowerCase() === ''

            || (project.name.toLowerCase() || project.acronym || project.grantId || project.funder).match(this.searchText) != null;

    return textFlag;

  }

  public filterCommunityProjectByFunder(project): boolean {

    if(this.fundersCtrl.getRawValue().length == 0) {

      return true;

    }

    for (let funder of this.fundersCtrl.getRawValue()) {

      if (project.funder.toLowerCase().indexOf(funder.label.toLowerCase()) != -1) {

        return true;

      }

    }

    return false;

  }

  private sort() {

    // this.page = 1;

    let sortOption: { sort: string, descending: boolean } = this.filterForm.get('sort').value;

    this.previewCommunityProjects.sort((left, right): number => {

      if (sortOption.sort == "title") {

        if((left.name+left.acronym) > (right.name+right.acronym)) {

          return sortOption.descending ? -1 : 1;

        } else if((left.name+left.acronym) < (right.name+right.acronym)) {

          return sortOption.descending ? 1 : -1;

        }

      } else if (sortOption.sort == "grant") {

        if(left.grantId > right.grantId) {

          return sortOption.descending ? -1 : 1;

        } else if(left.grantId < right.grantId) {

          return sortOption.descending ? 1 : -1;

        }

      } else if (sortOption.sort == "funder") {

        if(left.funder > right.funder) {

          return sortOption.descending ? -1 : 1;

        } else if(left.funder < right.funder) {

          return sortOption.descending ? 1 : -1;

        }

      }

      return 0;

    });

  }

  public onSearchClose() {

    this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;