connect-admin/src/app/pages/subjects/subjects-edit-form/subjects-edit-form.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FormArray, FormBuilder, FormControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
import {SubjectsService} from '../subjects.service';
import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
import {Session} from '../../../openaireLibrary/login/utils/helper.class';
import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
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, zip} from 'rxjs';
import {CommunityInfo} from '../../../openaireLibrary/connect/community/communityInfo';
import {concat} from 'rxjs/operators';

declare var UIkit;

@Component({
  selector: 'subjects-edit-form',
  templateUrl: './subjects-edit-form.component.html',
})

export class SubjectsEditFormComponent implements OnInit {
  myForm = new FormArray([new FormControl({subject: ''})]);
  public showLoading = true;
  public res = [];
  params: any;
  public communityId: string = null;
  public community: CommunityInfo = null;
  public properties: EnvProperties = properties;
  public edit = null;
  public originalSubjects = [];
  @ViewChild('editModal') editModal: AlertModal;
  @ViewChild('deleteModal') deleteModal: AlertModal;
  page = 1;
  size = 10;
  selectedSubjects = [];
  isEditModal: boolean = false;
  public selectedKeyword: string;
  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
  public filterForm: FormControl;
  private subscriptions: any[] = [];
  /*//Check again functionality to enable page
  subjectsPage;
  @ViewChild('enablePageModal') enablePageModal: AlertModal;*/
  constructor(private element: ElementRef,
              private route: ActivatedRoute,
              private _router: Router,
              public _fb: FormBuilder,
              private title: Title,
              // private _helpContentService: HelpContentService,
              private _communityService: CommunityService,
              private _subjectsService: SubjectsService,
  ) {
  }
  
  
  ngOnInit() {
    this.filterForm = this._fb.control('');
    this.subscriptions.push(this.filterForm.valueChanges.subscribe(value => {
      this.page = 1;
      this.community.subjects = this.originalSubjects.filter(subject => {
        return subject.toLowerCase().indexOf(value.toLowerCase()) != -1
      });
    }));
    this.subscriptions.push(this.route.params.subscribe(
      params => {
        this.communityId = params['community'];
        this.title.setTitle(this.communityId.toUpperCase() + ' | Subjects');
        this.showLoading = true;
        this.subscriptions.push(this._communityService.getCommunityAsObservable().subscribe(
          community => {
            this.community = community;
            this.params = {
              community: encodeURIComponent(
                '"' + community.queryId + '"')
            };
            this.community.subjects.sort((n1,n2)=> {
              if (n1.toLowerCase() > n2.toLowerCase()) {
                return 1;
              }
              if (n1.toLowerCase() < n2.toLowerCase()) {
                return -1;
              }
              return 0;
            });

            this.originalSubjects = [];
            for (let i = 0; i < this.community.subjects.length; i++) {
              this.originalSubjects.push(this.community.subjects[i]);
            }
            if (this.community.subjects.length === 0) {
              this.community.subjects.push('');
            }
            this.showLoading = false;
          },
          error => this.handleUpdateError('System error retrieving community profile', error)
        ));
        // this.getSubjectsPageStatus();
      }));
    
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  
  private removeModalOpen(subject: string, i: any) {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {
          "errorCode": LoginErrorCodes.NOT_VALID,
          "redirectUrl": this._router.url
        }
      });
    } else {
      this.selectedSubjects = [subject];
      this.reset(['']);
      this.deleteModal.cancelButton = true;
      this.deleteModal.okButton = true;
      this.deleteModal.alertTitle = 'Delete Confirmation';
      this.deleteModal.message = 'Are you sure you want to delete this subject?';
      this.deleteModal.okButtonText = 'Yes';
      this.deleteModal.cancelButtonText = 'No';
      this.deleteModal.open();
    }
  }
  
  
  public getSubjectsExistOnlyInFirst(firstArray: string[], secondArray: string[]): string[] {
    const difference = [];
    for (let i = 0; i < firstArray.length; i++) {
      if (secondArray.indexOf(firstArray[i]) === -1) {
        difference.push(firstArray[i]);
      }
      
    }
    return difference;
  }
  
  public saveSubjects() {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'],
        {queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}});
    } else {
      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 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)
          ));
        }
/*        if(!this.subjectsEnabled) {
          this.curatorsEnabledOpen();
        }*/
      }
    }
  }
  
  handleUpdateError(message: string, error) {
    UIkit.notification(message, {
      status: 'danger',
      timeout: 6000,
      pos: 'bottom-right'
    });
    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 subject.toLowerCase().indexOf(this.filterForm.value.toLowerCase()) != -1
    }).sort();
    UIkit.notification('Subjects successfully ' + message + '!', {
      status: 'success',
      timeout: 6000,
      pos: 'bottom-right'
    });
    this.showLoading = false;
  }
  
  
  private getNonEmptyItems(data: string[]): string[] {
    const length = data.length;
    const arrayNonEmpty = new Array<string>();
    let j = 0;
    for (let i = 0; i < length; i++) {
      if (this.isEmpty(data[i])) {
      } else if (this.isNonEmpty(data[i])) {
        arrayNonEmpty[j] = data[i];
        j++;
      }
    }
    return arrayNonEmpty;
  }
  
  
  private isEmpty(data: string): boolean {
    if (data !== undefined && !data.replace(/\s/g, '').length) {
      return true;
    } else {
      return false;
    }
  }
  
  private isNonEmpty(data: string): boolean {
    if (data !== undefined && data != null) {
      return true;
    } else {
      return false;
    }
  }
  
  public addSubjectInForm() {
    this.myForm.push(new FormControl(''));
  }
  
  public removeSubjectInForm(i: number) {
    this.myForm.removeAt(i);
  }
  
  public reset(subjects: string[]) {
    this.myForm = new FormArray([]);
    for (let subject in subjects) {
      this.myForm.push(new FormControl(''));
    }
    this.myForm.patchValue(subjects);
  }
  
  newSubject() {
    this.isEditModal = false;
    this.selectedSubjects = [];
    this.reset([""]);
    this.formModalOpen('Add Subject', 'Save');
  }
  
  public editSubject(subject: string) {
    this.isEditModal = true;
    this.selectedSubjects = [subject];
    this.reset([subject]);
    this.formModalOpen('Edit Subject', 'Save');
  }
  
  
  private formModalOpen(title: string, yesBtn: string) {
    if (!Session.isLoggedIn()) {
      this._router.navigate(['/user-info'], {
        queryParams: {
          "errorCode": LoginErrorCodes.NOT_VALID,
          "redirectUrl": this._router.url
        }
      });
    } else {
      this.editModal.okButtonLeft = false;
      this.editModal.cancelButton = true;
      this.editModal.okButton = true;
      this.editModal.alertTitle = title;
      this.editModal.okButtonText = yesBtn;
      this.editModal.open();
    }
  }
  
  public onSearchClose() {
    this.selectedKeyword = this.filterForm.value;
  }
  
  public resetInput() {
    this.selectedKeyword = null;
    this.searchInputComponent.reset()
  }
 /*
 //Check again functionality to enable page
  private getSubjectsPageStatus() {
    this._helpContentService.getCommunityPagesByRoute(this.communityId, '/subjects', this.properties.adminToolsAPIURL).subscribe((page) => {
      this.subjectsPage = page;
    });
  }

  public get subjectsEnabled(): boolean {
    return !this.subjectsPage || this.subjectsPage.isEnabled;
  }
  enablePage() {
    this._helpContentService.togglePages(this.communityId, [this.subjectsPage._id], true, this.properties.adminToolsAPIURL).subscribe(() => {
      this.subjectsPage.isEnabled = true;
      UIkit.notification('Curators Page has been <b>enabled successfully</b>', {
        status: 'success',
        timeout: 6000,
        pos: 'bottom-right'
      });
    },error => {
      this.subjectsPage.isEnabled = false;
      UIkit.notification('An error occured', {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    });
  }

  private curatorsEnabledOpen() {
    this.enablePageModal.okButtonLeft = false;
    this.enablePageModal.alertTitle = 'Enable Subjects Page';
    this.enablePageModal.okButtonText = 'Yes';
    this.enablePageModal.cancelButtonText = 'No';
    this.enablePageModal.open();
  }*/

}