D-Net

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

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

import {DivHelpContent} from '../../utils/entities/adminTool/div-help-content';

declare var UIkit;

@Component({

  selector: 'class-content-form',

  templateUrl: './class-help-content-form.component.html',

})

export class ClassContentFormComponent implements OnInit {

  myForm: FormGroup;

  portal: string;

  pageId: string;

  pageContentId: string;

  page: Page;

  classOptions = [];

  public properties: EnvProperties = properties;

  public showLoading: boolean = true;

  public errorMessage: string = '';

  @Input() updateErrorMessage: string = '';

  private subs: Subscription[] = [];

  public pageHelpContent: DivHelpContent;

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

        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.getDivIdsFullByPortal(pageId, this.properties.adminToolsAPIURL, this.portal));

    this.subs.push(obs.subscribe(

      results => {

        this.page = results[0];

        if (this.properties.adminToolsPortalType != this.page.portalType) {

          this._router.navigate(['../'], {relativeTo: this.route});

        }

        this.setOptions(results[1]);

        if (!this.pageContentId) {

         this.updateForm(null);

          this.showLoading = false;

        } else {

          this.subs.push(this._helpContentService.getDivHelpContent( this.pageContentId, this.properties.adminToolsAPIURL, this.portal).subscribe(pageHelpContent=>{

            this.pageHelpContent = pageHelpContent;

            if (this.properties.adminToolsPortalType != this.page.portalType) {

              this._router.navigate(['../'], {relativeTo: this.route});

            }

            this.updateForm(this.pageHelpContent);

            this.showLoading = false;

          },

            error => {

            this.handleError('System error retrieving content by id '+ this.pageContentId, error)

          }));

        }

      }));

  }

  private updateForm(pageHelpContent: DivHelpContent) {

    this.pageHelpContent = pageHelpContent;

    this.myForm = this.form;

    if (this.pageHelpContent) {

      this.myForm.patchValue((pageHelpContent));

      this.myForm.get('divId').disable();

    }

    this.myForm.markAsPristine();

  }

  public setOptions(divIds) {

    this.classOptions = [];

    for(let divid of divIds){

      this.classOptions.push({label:divid.name, value:divid._id});

    }

  }

  public get form() {

    return this._fb.group({

      divId: ['', Validators.required],

      content: ['', Validators.required],

      isActive: true,

      portal: this.portal,

      _id : '',

    });

  }

  public reset() {

    this.myForm.patchValue({

      divId: ['', Validators.required],

      content: ['', Validators.required],

      isActive: true,

      portal: '',

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

      if (this.myForm.valid) {

        this.showLoading = true;

        this.updateErrorMessage = "";

        this.myForm.get('divId').enable();

        let pageHelpContent: DivHelpContent = this.myForm.value;

        this.subs.push(this._helpContentService.insertOrUpdateDivHelpContent(pageHelpContent, this.properties.adminToolsAPIURL, this.portal).subscribe(

          _ => {

            this._router.navigate(['../'], {queryParams: {"pageId": this.pageId}, relativeTo: this.route});

            UIkit.notification('Page content has been <b>successfully updated</b>', {

              status: 'success',

              timeout: 6000,

              pos: 'bottom-right'

            });

            this.showLoading = false;

          },

          err => this.handleUpdateError('System error saving page content', err)

        ));

      } else {

        this.showLoading = false;

        this.errorMessage = "Please fill all required fields";

      }

    }

  }

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

    }

  }

}