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

import {Component, Input, 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 {Session} from '../../login/utils/helper.class';
import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
import {properties} from '../../../../environments/environment';
import {from, Observable, Subscriber, Subscription} from 'rxjs';
import {HelperFunctions} from '../../utils/HelperFunctions.class';
import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';

@Component({
    selector: 'page-content-form',
    templateUrl: './page-help-content-form.component.html',
})

export class PageContentFormComponent implements OnInit{

    myForm: FormGroup;
    communityPid: string;
    pageId: string;
    pageContentId: string;
    page: Page;
    placementsOptions = [];
    orderOptions = [];

    private availablePages : Page[] = [];
    //private errorMessage: string;

    private ckeditorContent : string;
    public properties:EnvProperties = null;

    public showLoading: boolean = true;
    public errorMessage: string = '';
    @Input() updateErrorMessage: string = '';
    private subs: Subscription[] = [];
    private pageHelpContent: PageHelpContent;
    constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}

    ngOnInit() {

        this.properties = properties;
        this.subs.push(this.route.params.subscribe(params => {
            this.communityPid = params['community'];
            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.getPage(this.pageId);
                if (this.pageContentId) {
                    this.getPageHelpContent(this.pageContentId);
                }else{
                    this.myForm = this.form;

                }*/
               this.getInfo(this.pageId);

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

            }));
        }));
    }
    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.communityPid), this._helpContentService.getCommunityPageHelpContents(this.communityPid, 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) {
        if(!Session.isLoggedIn()){
            this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
        } else {
            this.showLoading = true;
            this.errorMessage = "";
            this.updateErrorMessage = "";

            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.communityPid,
            placement : ['', Validators.required],
            content : ['', Validators.required],
            order : [1, Validators.required],
            isActive : true,
            //isPriorTo : false,
            _id : '',
        });
    }

    public reset() {
        this.myForm.patchValue({
            page : '',
            portal : this.communityPid,
            placement : '',
            content : [''],
            order : 1,
            isActive : true,
            //isPriorTo : false,
            _id : ''
        });
        this.myForm.markAsPristine();
    }

    handleError(message: string, error) {
        this.errorMessage = message;
        console.error('Server responded: ' + error);

        this.showLoading = false;
    }

    public saveCustom() {
        if(!Session.isLoggedIn()){
            this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl": this._router.url} });
        } else {
            //this.errorMessage = null;

            if(this.myForm.valid) {
                this.showLoading = true;
                this.updateErrorMessage = "";
                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.communityPid).subscribe(
                  _ => {
                       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;
                this.errorMessage = "Please fill all required fields";
            }
        }
    }

    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) {

        this.updateErrorMessage = message;
        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()
        }
    }
}