openaire-library/dashboard/helpTexts/page-help-content-form.component.ts

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Page} from '../../utils/entities/adminTool/page';
import {HelpContentService} from '../../services/help-content.service';
import {EnvProperties} from '../../utils/properties/env-properties';
import {properties} from '../../../../environments/environment';
import {Observable, Subscriber, Subscription} from 'rxjs';
import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';
import {ConnectHelper} from "../../connect/connectHelper";

declare var UIkit;

@Component({
  selector: 'page-content-form',
  templateUrl: './page-help-content-form.component.html',
})
export class PageContentFormComponent implements OnInit {
  
  myForm: FormGroup;
  portal: string;
  pageId: string;
  pageContentId: string;
  page: Page;
  placementsOptions = [];
  orderOptions = [];
  public properties: EnvProperties = properties;
  public showLoading: boolean = true;
  private subs: Subscription[] = [];
  public pageHelpContent: PageHelpContent;
  
  constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService) {
  }
  
  ngOnInit() {
    this.subs.push(this.route.params.subscribe(params => {
      this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
      ConnectHelper.setPortalTypeFromPid(this.portal);
      this.subs.push(this.route.queryParams.subscribe(params => {
        HelperFunctions.scroll();
        this.pageId = params['pageId'];
        this.myForm = this.form;
        this.pageContentId = params['pageContentId'];
        if (!this.pageId) {
          this._router.navigate(['../'], {relativeTo: this.route});
        }
        this.getInfo(this.pageId);
      }));
    }));
  }
  
  ngOnDestroy() {
    this.subs.forEach(value => {
      if (value instanceof Subscriber) {
        value.unsubscribe();
      }
    });
  }
  
  getInfo(pageId: string) {
    this.showLoading = true;
    let obs = Observable.zip(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal), this._helpContentService.getCommunityPageHelpContents(this.portal, this.properties.adminToolsAPIURL, pageId));
    this.subs.push(obs.subscribe(
      results => {
        this.page = results[0];
        if (this.properties.adminToolsPortalType != this.page.portalType) {
          this._router.navigate(['../'], {relativeTo: this.route});
        }
        let countPageContents = results[1] ? results[1].length : 0;
        console.log(results[1]);
        for (let content of (results[1] as Array<PageHelpContent>)) {
          // if(content.page['_id'] == pageId){
          //     countPageContents++;
          if (this.pageContentId && this.pageContentId == content._id) {
            this.pageHelpContent = content;
            // this.pageHelpContent.page = pageId;
            // this.pageHelpContent.portal = this.communityPid;
          }
          // }
        }
        this.setOptions(this.page, countPageContents + (this.pageHelpContent ? 0 : 1));
        if (!this.pageContentId) {
          this.myForm = this.form;
          this.initFormWithSelectOptions();
        } else {
          this.updateForm(this.pageHelpContent);
        }
        this.showLoading = false;
      },
      error => this.handleError('System error retrieving page with id: ' + pageId, error)
    ));
    
  }
  
  /*private getPage(pageId: string) {
      this.subs.push(this._helpContentService.getPageByPortal(pageId,this.properties.adminToolsAPIURL, this.communityPid).subscribe(
        page => {
            if(this.properties.adminToolsPortalType != page.portalType) {
                this._router.navigate(['../'], {relativeTo: this.route});
            } else {
                this.page = page;
                this.getPageContents(pageId);
            }
        },
        error => this.handleError('System error retrieving page with id: '+pageId, error)
      ));
  }
  private getPageContents(pageId: string) {
      this.subs.push(this._helpContentService.getCommunityPageHelpContents(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
        pageHelpContents => {
            let countPageContents = 1;
            for (let content of (pageHelpContents as Array<PageHelpContent>)) {
                if(content.page['_id'] == pageId){
                    countPageContents++;
                }
            }
            this.setOptions(this.page, countPageContents);
            if(!this.pageContentId) {
                this.showLoading = false;
                this.initFormWithSelectOptions();
            }
        },
        error => this.handleError('System error retrieving page contents with id: ', error)
      ));
  }
  private getPageHelpContent(pageContentId: string) {
      this.showLoading = true;

      this.subs.push(this._helpContentService.getPageHelpContent(pageContentId as string, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
        pageHelpContent => {
            this.updateForm(pageHelpContent);
            this.showLoading = false;
        },
        error => this.handleError('System error retrieving page help content', error)));
  }*/
  private updateForm(pageHelpContent: PageHelpContent) {
    this.pageHelpContent = pageHelpContent;
    this.myForm = this.form;
    if (this.pageHelpContent) {
      this.myForm.patchValue((pageHelpContent));
    } else {
      this.initFormWithSelectOptions();
    }
    if (this.orderOptions.length == 1) {
      this.myForm.get('order').disable()
    }
    if (this.placementsOptions.length == 1) {
      this.myForm.get('placement').disable()
    }
    this.myForm.markAsPristine();
    
  }
  
  initFormWithSelectOptions() {
    if (this.placementsOptions.length == 1) {
      this.myForm.get("placement").setValue(this.placementsOptions[0].value);
    }
    this.myForm.get("order").setValue(this.orderOptions[this.orderOptions.length - 1].value);
    if (this.orderOptions.length == 1) {
      this.myForm.get('order').disable()
    }
    if (this.placementsOptions.length == 1) {
      this.myForm.get('placement').disable()
    }
  }
  
  public setOptions(page: Page, countContents: number) {
    this.placementsOptions = [];
    if (page.top) {
      this.placementsOptions.push({label: "top", value: "top"});
    }
    if (page.bottom) {
      this.placementsOptions.push({label: "bottom", value: "bottom"});
    }
    if (page.left) {
      this.placementsOptions.push({label: "left", value: "left"});
    }
    this.orderOptions = [];
    for (let i = 1; i < countContents + 1; i++) {
      this.orderOptions.push({label: "" + i, value: i});
    }
  }
  
  public get form() {
    return this._fb.group({
      page: [this.pageId, Validators.required],
      portal: this.portal,
      placement: ['', Validators.required],
      content: ['', Validators.required],
      order: [1, Validators.required],
      isActive: true,
      //isPriorTo : false,
      _id: '',
    });
  }
  
  public reset() {
    this.myForm.patchValue({
      page: '',
      portal: this.portal,
      placement: '',
      content: [''],
      order: 1,
      isActive: true,
      //isPriorTo : false,
      _id: ''
    });
    this.myForm.markAsPristine();
  }
  
  handleError(message: string, error) {
    UIkit.notification(message, {
      status: 'danger',
      timeout: 6000,
      pos: 'bottom-right'
    });
    console.error('Server responded: ' + error);
    
    this.showLoading = false;
  }
  
  public saveCustom() {
    if (this.myForm.valid) {
      this.showLoading = true;
      this.myForm.get('order').enable();
      this.myForm.get('placement').enable();
      let pageHelpContent: PageHelpContent = this.myForm.value;
      this.subs.push(this._helpContentService.savePageHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe(
        _ => {
          UIkit.notification('Page content has been <b>successfully ' + (this.pageContentId ? 'updated' : 'created') + '</b>', {
            status: 'success',
            timeout: 6000,
            pos: 'bottom-right'
          });
          this._router.navigate(['../'], {queryParams: {"pageId": this.pageId}, relativeTo: this.route});
          this.showLoading = false;
        },
        err => this.handleUpdateError('System error saving page content', err)
      ));
    } else {
      this.showLoading = false;
    }
  }
  
  public cancelCustom() {
    this._router.navigate(['../'], {queryParams: {"pageId": this.pageId}, relativeTo: this.route});
  }
  
  public resetCustom() {
    this.showLoading = true;
    this.updateForm(this.pageHelpContent);
    this.showLoading = false;
  }
  
  handleUpdateError(message: string, error) {
    UIkit.notification(message, {
      status: 'danger',
      timeout: 6000,
      pos: 'bottom-right'
    });
    console.error('Server responded: ' + error);
    
    this.showLoading = false;
  }
  
  changeStatus() {
    this.myForm.get('isActive').setValue(!this.myForm.get('isActive').value);
    if (this.pageHelpContent && this.myForm.get('isActive').value != this.pageHelpContent.isActive || !this.pageHelpContent && !this.myForm.get('isActive').value) {
      this.myForm.get('isActive').markAsDirty();
    } else {
      this.myForm.get('isActive').markAsPristine()
    }
  }
  
  contentChanged() {
    if (this.pageHelpContent && this.myForm.get('content').value != this.pageHelpContent.content || !this.pageHelpContent && this.myForm.get('content').value != '') {
      this.myForm.get('content').markAsDirty();
    } else {
      this.myForm.get('content').markAsPristine()
    }
  }
}