D-Net

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 {Subscriber, Subscription, zip} from 'rxjs';

import {HelperFunctions} from '../../utils/HelperFunctions.class';

import {PageHelpContent} from '../../utils/entities/adminTool/page-help-content';

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];

      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 = 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()

    }

  }

}