SFM-Broker/src/app/loan-edit/basicinfo/basicinfo.component.ts

import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {LoanModel} from '../../models/loan.model';
import {LoanSingleService} from '../../service/loan.single.service';
import {HttpErrorResponse} from '@angular/common/http';


@Component({
  selector: 'app-loan-basic-info',
  templateUrl: './basicinfo.component.html',
  styleUrls: ['./basicinfo.component.scss']
})
export class BasicinfoComponent implements OnInit {

  constructor( private service: LoanSingleService) { }

  @Input() Loan: LoanModel;
  @Output() lenderNameChanged = new EventEmitter<string>();
  @Output() NotifyNext = new EventEmitter<boolean>();
  @Output()  errorOccurred = new EventEmitter<string>();

  public minSettlement: Date = new Date(2015, 0, 1);
  public maxSettlement: Date = new Date(2030, 4, 31);

  public basicInfo: FormGroup ;

  public DemoDescription = `
       <h1> Rich Text Editing </h1>
       <table>
       <tr> <td>
              <ol>
                <li>Text formatting</li>
                <li>Bulleted and numbered lists</li>
                <li>Hyperlinks</li>
                <li>Cross-browser support</li>
                <li>Identical HTML output across browsers</li>
              </ol>
          </td> <td width="20%" text-align="right">
                <img src="https://edge.alluremedia.com.au/uploads/businessinsider/2015/05/P2P-to-date.jpg"
                width=300">
            </td>
        </tr>
   </table>
    `;

  public listLoanStatus: Array<{text: string, value: string}> = [
    {text: '1 - Processing:   Just received from Client', value: 'Processing'} ,
    {text: '2 - Valuation :   Valuating From Bank', value: 'Valuation'},
    {text: '3 - Application in Progress:   Application Submitted', value: 'Application in Progress'},
    {text: '4 - Approved :   Approved by lender', value: 'Approved' },
    {text: '5 - Settled :   Settlement date finalized.', value: 'Settled'},
    {text: '6 - Finished :   Fully paid, terminated, or switched)', value: 'Finished'},
  ];

  ngOnInit(): void {
    this.basicInfo = new FormGroup({
      LoanId: new FormControl({value: this.Loan.Id, disabled: true}),
      Status: new FormControl(),
      Item: new FormControl(this.Loan.Item,  Validators.required),
      Lender : new FormControl({value: 'SuperCredit', disabled: false}, Validators.required),
      Amount: new FormControl(100, [Validators.required , Validators.min(100), Validators.max(1000000000)]),
      Settlement: new FormControl(new Date(2020, 0, 9)),
      Description: new FormControl( '', Validators.maxLength(2000)),
      Rating: new FormControl({value: this.Loan.Rating, disabled: false}),
    });
    this.LoadBasic();
  }

  onLenderNameChange(value: string): void {
    console.log('emit lender change');
    this.lenderNameChanged.emit(value);
  }

  public next(): void {
    this.basicInfo.markAllAsTouched();
    // console.log(this.basicInfo, this.Loan);
    this.Loan.Lender = this.basicInfo.value.Lender;
    this.Loan.Status = this.basicInfo.value.Status;
    this.Loan.Item = this.basicInfo.value.Item;
    this.Loan.Amount = this.basicInfo.value.Amount;
    this.Loan.Settlement = this.basicInfo.value.Settlement;
    this.Loan.Description = this.basicInfo.value.Description;
    this.Loan.Rating = this.basicInfo.value.Rating;
    this.service.updateBasicInfo(this.Loan).subscribe(
      resp => {
        // console.log(resp);
        // move to next step
        this.NotifyNext.emit(true);
      },
      err => {
        const msg = err instanceof HttpErrorResponse ? err.statusText : '';
        this.errorOccurred.emit('Network Error Occurred : ' + err.statusText);
        this.NotifyNext.emit(false);
      }
    );
  }

  public loanStatus(value: string): {text: string, value: string} {
      this.listLoanStatus.forEach(( v) => {
          if (v.value = value) {
            return v;
          }
      });
      return null;
  }

  public showDemoDescription($event): void{
    this.basicInfo.get('Description').setValue(this.DemoDescription);
  }
  public LoadBasic(): void  {
    if (this.Loan === undefined) {
      return ;
    }
    this.basicInfo.get('LoanId').setValue(this.Loan.Id);
    this.basicInfo.get('Lender').setValue(this.Loan.Lender);
    this.lenderNameChanged.emit(this.basicInfo.get('Lender').value);
    this.basicInfo.get('Status').setValue(this.Loan.Status);
    this.basicInfo.get('Item').setValue(this.Loan.Item);
    this.basicInfo.get('Amount').setValue(this.Loan.Amount);
    this.basicInfo.get('Settlement').setValue(this.Loan.Settlement);
    this.basicInfo.get('Description').setValue(this.Loan.Description);
    this.basicInfo.get('Rating').setValue(this.Loan.Rating);
    return ;
    if ( this.Loan.Status === 'Settled') {
      this.basicInfo.get('Status').disable({onlySelf: true, emitEvent: false});
      this.basicInfo.get('Item').disable({onlySelf: true, emitEvent: false});
      this.basicInfo.get('Amount').disable({onlySelf: true, emitEvent: false});
    }
  }
}