swedishchamber-granprize-admin/src/app/awardee-editor/awardee-editor.component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Title } from "@angular/platform-browser";
import { ActivatedRoute, Router } from "@angular/router";

import { Awardee } from "../shared/awardee";
import { AwardeeService } from "../shared/awardee.service";
import { environment } from "../../environments/environment";
import { merge } from "rxjs";

@Component({
  selector: 'app-awardee-editor',
  templateUrl: './awardee-editor.component.html',
  styleUrls: ['./awardee-editor.component.css']
})
export class AwardeeEditorComponent implements OnInit {

  private imageMatcher = /\.(jpe?g|png|gif)$/i;

  public years: Array<number> = [];
  public awardee: Awardee;
  public rawProfileImage: string = null;
  public rawAwardImage: string = null;

  @ViewChild('profileImageUpload') profileImageUpload: ElementRef<HTMLInputElement>;
  @ViewChild('awardImageUpload') awardImageUpload: ElementRef<HTMLInputElement>;

  constructor(
    private titleService: Title,
    private route: ActivatedRoute,
    private router: Router,
    private awardeeService: AwardeeService,
  ) {}

  ngOnInit() {
    this.titleService.setTitle('Edit awardee');
    this.route.data.subscribe((data: {
      years: Array<number>,
      awardee: Awardee,
    }) => {
      this.years = data.years ? data.years : [];
      this.awardee = data.awardee ? data.awardee : new Awardee();
    });
  }

  public profileImageSelectionChange() {
    if (this.profileImageUpload.nativeElement.files.length === 0) {
      this.rawProfileImage = null;
      return;
    }
    if (!this.imageMatcher.test(this.profileImageUpload.nativeElement.files[0].name)) {
      return;
    }
    let reader = new FileReader();
    reader.addEventListener("load", () => this.rawProfileImage = reader.result);
    reader.readAsDataURL(this.profileImageUpload.nativeElement.files[0]);
  }

  public awardImageSelectionChange() {
    if (this.awardImageUpload.nativeElement.files.length === 0) {
      this.rawAwardImage = null;
      return;
    }
    if (!this.imageMatcher.test(this.awardImageUpload.nativeElement.files[0].name)) {
      return;
    }
    let reader = new FileReader();
    reader.addEventListener("load", () => this.rawAwardImage = reader.result);
    reader.readAsDataURL(this.awardImageUpload.nativeElement.files[0]);
  }

  public undoImageSelect(field: HTMLInputElement) {
    field.value = null;
    field.dispatchEvent(new Event('change'));
  }

  public saveAwardee() {
    if (this.canSave) {
      this.awardeeService.persist(
        this.awardee
      ).subscribe(savedAwardee => {
        let observables = [];
        if (this.rawProfileImage) {
          observables.push(
            this.awardeeService.saveImage(
              savedAwardee.slug,
              this.profileImageUpload.nativeElement.files[0],
              'profile'
            )
          );
        }
        if (this.rawAwardImage) {
          observables.push(
            this.awardeeService.saveImage(
              savedAwardee.slug,
              this.awardImageUpload.nativeElement.files[0],
              'award'
            )
          );
        }

        observables.length
          ? merge(...observables).subscribe(() => this.router.navigate(['/awardees']))
          : this.router.navigate(['/awardees']);
      });
    }
  }

  get canSave(): boolean {
    return [
        this.awardee.name,
        this.awardee.text,
        this.awardee.imageLabel].every(textField => textField.length > 0)
      && this.awardee.year !== null;
  }

  get profileImage(): string {
    return `${environment.apiUrl}/awardee-image/profile/${this.awardee.slug}`
  }

  get awardImage(): string {
    return `${environment.apiUrl}/awardee-image/award/${this.awardee.slug}`
  }

  get existingProfileTooltip(): string {
    return this.rawProfileImage ? 'Image will be replaced' : '';
  }

  get existingAwardTooltip(): string {
    return this.rawAwardImage ? 'Image will be replaced' : '';
  }
}