company-detail-edit.component.ts

import { Component, OnDestroy, OnInit, Input, OnChanges } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

import { fromEvent, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

import { IPictureEvent } from '@app/shared/components';
import { updateFormValidation } from '@app/shared/helpers';
import { ICompany, ISchool, IRegion } from '@lib/models';

import { CompanyProfileService } from '../company-profile.service';


@Component({
  selector: 'app-company-detail-edit',
  templateUrl: './company-detail-edit.component.html',
  styleUrls: ['./../../../styles/company-detail.scss'],
})
export class CompanyDetailEditComponent implements OnInit, OnDestroy, OnChanges {
  
  @Input()
  public schools: ISchool[];
  @Input()
  public regions: IRegion[];
  @Input()
  public tryToSend: Boolean;
  @Input()
  public company: ICompany;

  public companyDetailForm: FormGroup;

  public imageLogo: string;
  public previewPicture: string;

  public previewPlaceholder = '/assets/images/placeholders/product.png';

  public logoReader = new FileReader();

  private _destroy$ = new Subject();

  public get isEditable() {
    return (
      this._companyProfileService && this._companyProfileService.isEditable()
    );
  }

  public get highlightLogoText(): string {
    return this.imageLogo ? 'replace' : 'add';
  }

  constructor(
    protected _companyProfileService: CompanyProfileService,
    private _formBuilder: FormBuilder,
  ) {}

  public ngOnInit(): void {
    this.initForm(this.company || <ICompany>{});
    this._fileLogoSubscribe();
    this._initCompanySubscriber();
    this._initCompanyPhotoSubscriber();
  }

  public ngOnChanges(): void {
    if (this.tryToSend && this.companyDetailForm) {
      updateFormValidation(this.companyDetailForm);
    }
  }

  public ngOnDestroy(): void {
    this._destroy$.next();
    this._destroy$.complete();
  }

  public initForm({
    name,
    school,
    description,
    logo,
    region,
    coverImage,
    googleAnalyticsId,
  }: ICompany): void {
    const schoolCtrl = new FormControl(school && school.id ? school : null);

    const regionCtrl = new FormControl(region && region.id ? region : null);

    this.companyDetailForm = this._formBuilder.group({
      name: [name || '', Validators.required],
      school: schoolCtrl,
      region: regionCtrl,
      description: [description || ''],
      logo: [logo || ''],
      coverImage: [coverImage || ''],
      googleAnalyticsId: [googleAnalyticsId || null],
    });
  }

  /**
   * Check errors in CompanyDetailForm for validate them.
   *
   * @param{string} name - Name of field.
   * @returns{object} - object with errors.
   */
  public checkErrorsInControl(name: string) {
    const control = this.companyDetailForm.get(name);

    return control.errors && control.touched;
  }

  public selectLogo(event): void {
    const file1 = event.srcElement.files[0];
    this.logoReader.readAsDataURL(file1);
  }

  public selectPreview({ picture }: IPictureEvent): void {
    this.previewPicture = picture;
    this._updateDraftCompany();
  }

  public removePreview(): void {
    this.previewPicture = null;
    this._updateDraftCompany();
  }

  /**
   * Initialize of company from Observable object.
   *
   * @returns {ICompany} - Object of company.
   */
  private _initCompanySubscriber() {
    this._companyProfileService.draftCompany$
      .pipe(takeUntil(this._destroy$))
      .pipe(
        switchMap(company => {
          this.company = company;

          return this.companyDetailForm.valueChanges;
        }),
      )
      .subscribe(value => {
        this.company = <ICompany>{ ...this.company, ...value };
        this._updateDraftCompany();
      });
  }

  /**
   * Initialize of company's photo from Observable object.
   */
  private _initCompanyPhotoSubscriber() {
    this._companyProfileService.draftCompany$
      .pipe(takeUntil(this._destroy$))
      .subscribe(company => {
        this.company = company;
        this.imageLogo = this.company.logo;
        this.previewPicture = this.company.coverImage;
      });
  }

  /**
   * This function writes company's data after edit by user.
   */
  private _updateDraftCompany() {
    this._companyProfileService.setDraftCompany({
      ...this.company,
      logo: this.imageLogo,
      coverImage: this.previewPicture,
    });
  }

  /**
   * Initialize of company's logo from Observable object.
   */
  private _fileLogoSubscribe() {
    fromEvent(this.logoReader, 'load')
      .pipe(takeUntil(this._destroy$))
      .subscribe(({ target }: any) => {
        this.company.logo = target.result;
        this.imageLogo = target.result;
        this._updateDraftCompany();
      });
  }
}