loan-edit 3 form group template skeleton

src/app/loan-edit/basicinfo/basicinfo.component.html

+<ng-container [formGroup]="basicInfo">
+  <fieldset class="k-form-fieldset">
+    <legend class="k-form-legend"></legend>
+    <kendo-formfield>
+      <kendo-label [for]="transID" text="Transaction ID"></kendo-label>
+      <input formControlName="transID" kendoTextBox #transID disabled/>
+
+      <kendo-formhint>Unique transaction
+        ID from SuperCredit (Auto generated when save, cannot be changed) </kendo-formhint>
+      <kendo-formerror>Error: the ID is required</kendo-formerror>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+
+    <kendo-formfield>
+      <kendo-label [for]="status" [text]="'Progress Status'"></kendo-label>
+      <kendo-dropdownlist
+        #status
+        formControlName="status"
+        [data]="listLoanStatus"
+        [defaultItem]="{ text: 'Select Status', value: null }"
+        [textField]="'text'"
+        [valueField]="'value'"
+        required
+      >
+      </kendo-dropdownlist>
+      <kendo-formerror>Error: status is required</kendo-formerror>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+    <kendo-formfield>
+      <kendo-label [for]="lender" text="Lender Organization">
+      </kendo-label>
+      <kendo-textbox formControlName="lender" #lender  [clearButton]="true"></kendo-textbox>
+      <kendo-formhint>E.g. NAB Bank</kendo-formhint>
+      <kendo-formerror>Error: Lender is required</kendo-formerror>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+
+    <kendo-formfield>
+      <kendo-label [for]="amount"  text="Loan Limit"> </kendo-label>
+      <kendo-textbox formControlName="amount" #amount  [clearButton]="true"></kendo-textbox>
+      <kendo-formhint>E.g. 8000</kendo-formhint>
+      <kendo-formerror>Error: Limit should be between 100 ~ 1,000,000,000</kendo-formerror>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+    <kendo-formfield>
+      <kendo-label [for]="settlementDate" [optional]="false" text="Settlement Date"></kendo-label>
+      <kendo-datepicker #settlementDate formControlName="settlementDate"
+                        [min]="minSettlement" [max]="maxSettlement">
+      </kendo-datepicker>
+
+      <kendo-formhint>Date Settled</kendo-formhint>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+
+    <kendo-formfield>
+      <kendo-label [for]="description" [optional]="false"
+                   text="Quick notes: ( < 1000 words ) "></kendo-label>
+      <kendo-editor #description formControlName="description" style="height: 500px;"></kendo-editor>
+    </kendo-formfield>
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+    <div class="vertical-spacer"></div>
+
+    <!-- <div class="k-form-buttons">
+        <button class="k-button k-primary"
+            (click)="submitForm()">Add New </button>
+        <button class="k-button" (click)="clearForm()">Clear</button>
+    </div> -->
+  </fieldset>
+</ng-container>

src/app/loan-edit/basicinfo/basicinfo.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicinfoComponent } from './basicinfo.component';
+
+describe('BasicinfoComponent', () => {
+  let component: BasicinfoComponent;
+  let fixture: ComponentFixture<BasicinfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BasicinfoComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicinfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, Input, OnInit} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-loan-basic-info',
+  templateUrl: './basicinfo.component.html',
+  styleUrls: ['./basicinfo.component.scss']
+})
+export class BasicinfoComponent implements OnInit {
+
+  public minSettlement: Date = new Date(2015, 0, 1);
+  public maxSettlement: Date = new Date(2030, 4, 31);
+
+  public value = `
+       <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> <tr>
+            <td colspan="2">
+                <a href="https://google.com.au"> click for more  details </a>
+            </td>
+        </tr>
+   </table>
+    `;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  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'},
+  ];
+
+  @Input() public basicInfo: FormGroup;
+}

src/app/loan-edit/people-reward/people-reward.component.html

+<p>people-reward works!</p>

src/app/loan-edit/people-reward/people-reward.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PeopleRewardComponent } from './people-reward.component';
+
+describe('PeopleRewardComponent', () => {
+  let component: PeopleRewardComponent;
+  let fixture: ComponentFixture<PeopleRewardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PeopleRewardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeopleRewardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loan-edit/people-reward/people-reward.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-loan-people-reward',
+  templateUrl: './people-reward.component.html',
+  styleUrls: ['./people-reward.component.scss']
+})
+export class PeopleRewardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  @Input() public peopleReward: FormGroup;
+}

src/app/loan-edit/trail-income/trail-income.component.html

+<p>trail-income works!</p>

src/app/loan-edit/trail-income/trail-income.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrailIncomeComponent } from './trail-income.component';
+
+describe('TrailIncomeComponent', () => {
+  let component: TrailIncomeComponent;
+  let fixture: ComponentFixture<TrailIncomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TrailIncomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrailIncomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loan-edit/trail-income/trail-income.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-loan-trail-income',
+  templateUrl: './trail-income.component.html',
+  styleUrls: ['./trail-income.component.scss']
+})
+export class TrailIncomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  @Input() public trailIncome: FormGroup;
+}