SFM-Broker/src/app/client-profile/client-profile.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {PeopleModel} from '../models/people.model';
import {NgForm} from '@angular/forms';
import {AuthService} from '../service/auth.service';
import {PeopleService} from '../service/people.service';
import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
import {BrokerModel} from '../models/broker.model';
import {AppConfig} from '../app.config';
import {SessionService} from '../service/session.service';

@Component({
  selector: 'app-client-profile',
  templateUrl: './client-profile.component.html',
  styleUrls: ['./client-profile.component.scss']
})
export class ClientProfileComponent implements OnInit {
  @Input() User: PeopleModel = PeopleModel.EmptyNew();
  @ViewChild('fileSelect', {static: true}) fs: FileSelectComponent;
  public avatarUrl = '' ;
  public myRestrictions: FileRestrictions = {
    allowedExtensions: ['.jpg', '.png', '.jpeg'],
    maxFileSize: 2194304
  };

  public opened = false; // dialog box
  public Message = '';   // dialog message

  constructor(private ss: SessionService, private config: AppConfig, private ps: PeopleService) {
    this.avatarUrl = 'url("' + location.origin  + './assets/img/avatar.png' + '")';
  }


  ngOnInit(): void {
    this.User = this.ss.loggedIn.User;
    this.avatarUrl = 'url(' + this.config.getUrl('avatar/' + this.User.Id) + ')';
  }


  public save(brokerForm: NgForm): void{
    if (! brokerForm.touched || brokerForm.form.pristine) {
      return;
    }
    this.ps.savePeople(this.User).subscribe( () => {
      this.showDialog('updated successfully ');
      brokerForm.form.markAsPristine();
    }, err => {
      this.showDialog('Failed to Update: ' + err.toString());
    });
  }

  public onSelect(ev: SelectEvent): void {
    if (ev.files) {
      ev.files.every((file: FileInfo) => {
        if (file.rawFile && !file.validationErrors) {
          const reader  = new FileReader();

          reader.onloadend = () => {
            const str = reader.result as string;
            this.ps.updateAvatar(str, this.User.Id).subscribe( resp => {
              this.avatarUrl = 'url(' + str + ' )';
            }, err => {
              this.showDialog('Failed to Update Avatar: ' + err.toString());
            });
            this.fs.clearFiles();
          };
          reader.readAsDataURL(file.rawFile);
        }else{
          this.showDialog('Only jpg, and png are supported (max 2MB)');
          setTimeout(() => { this.fs.clearFiles(); }, 10);
        }
        return false; // we only take first file
      });
    }
  }

  public showDialog(msg: string): void {
    this.Message = msg;
    this.opened = true; // open dialog
  }

  public close(status): void {
    this.opened = false;
  }
}