adding transaction dialog first half worked hooray

src/app/app.module.ts

@@ -34,6 +34,10 @@ import 'hammerjs';
 import { BkpDividerComponent } from './bkp-divider/bkp-divider.component';
 import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component';
 import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.component';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+
+
 
 
 
@@ -72,7 +76,9 @@ import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.com
     IndicatorsModule,
     LabelModule,
     NotificationModule,
-    ChartsModule
+    ChartsModule,
+    DateInputsModule,
+    DropDownsModule
   ],
   providers: [MenuService, AuthGuard, AuthService],
   bootstrap: [AppComponent]

src/app/loan-edit/dist/loan-edit.component.js

@@ -8,13 +8,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 exports.__esModule = true;
 exports.LoanEditComponent = void 0;
 var core_1 = require("@angular/core");
+var forms_1 = require("@angular/forms");
 var LoanEditComponent = /** @class */ (function () {
+    //form access
+    //@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent;
     function LoanEditComponent() {
         //popup 
         this.dialogOpened = false;
         this.windowOpened = false;
         //test
         this.somedata = "opened";
+        this.min = new Date(2015, 0, 1);
+        this.max = new Date(2030, 4, 31);
+        this.registerForm = new forms_1.FormGroup({
+            transID: new forms_1.FormControl(),
+            submissionDate: new forms_1.FormControl(new Date(2020, 0, 10)),
+            clientNames: new forms_1.FormControl([1]),
+            brokers: new forms_1.FormControl([2]),
+            referals: new forms_1.FormControl([3]),
+            status: new forms_1.FormControl(),
+            lender: new forms_1.FormControl(),
+            limit: new forms_1.FormControl(),
+            settlementDate: new forms_1.FormControl(new Date(2020, 0, 9))
+        });
+        this.listClientNames = [
+            { text: 'John', value: 1 },
+            { text: 'Steven', value: 2 },
+            { text: 'William', value: 3 }
+        ];
+        this.statis = { text: 'Female', value: 2 };
     }
     LoanEditComponent.prototype.ngOnInit = function () {
     };
@@ -30,6 +52,12 @@ var LoanEditComponent = /** @class */ (function () {
         console.log("Dialog result: " + status);
         this.dialogOpened = false;
     };
+    LoanEditComponent.prototype.submitForm = function () {
+        this.registerForm.markAllAsTouched();
+    };
+    LoanEditComponent.prototype.clearForm = function () {
+        this.registerForm.reset();
+    };
     LoanEditComponent = __decorate([
         core_1.Component({
             selector: 'app-loan-edit',

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

@@ -1,15 +1,155 @@
 <div class="example-wrapper" style="opacity:1;">
-    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
-
+    <kendo-dialog title="Transaction" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="500" [width]="850"
+        [minHeight]="600" [height]="800">
         <div class="example-wrapper">
             <div class="row">
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorGradient</p>
-                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+                <div class="col-xs-12 col-sm-12 ">
+                    <kendo-splitter orientation="vertical" style="height: 675px;">
+
+                        <kendo-splitter-pane>
+                            <kendo-splitter>
+
+                                <kendo-splitter-pane [collapsible]="true" size="50%">
+                                    <div class="pane-content">
+                                        <form class="k-form" [formGroup]="registerForm">
+                                            <fieldset class="k-form-fieldset">
+                                                <legend class="k-form-legend">Bank Transaction Details</legend>
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="transID" text="Transaction ID"></kendo-label>
+                                                    <input formControlName="transID" kendoTextBox #transID required />
+
+                                                    <kendo-formhint>Unique transaction
+                                                        ID from bank </kendo-formhint>
+                                                    <kendo-formerror>Error: the ID is required</kendo-formerror>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="submissionDate" [optional]="false"
+                                                        text="Submission Date"></kendo-label>
+                                                    <kendo-datepicker #submissionDate formControlName="submissionDate"
+                                                        [min]="min" [max]="max">
+                                                    </kendo-datepicker>
+
+                                                    <kendo-formhint>Date in bank</kendo-formhint>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="clientNames" [optional]="false"
+                                                    text="Client Names"></kendo-label>
+                                                    <kendo-multiselect 
+                                                    #clientNames
+                                                    formControlName="clientNames"
+                                                    [textField]="'text'"
+                                                    [valueField]="'value'"
+                                                    [valuePrimitive]="true"
+                                                    [data]="listClientNames" 
+                                                    >
+                                                    </kendo-multiselect>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="brokers" [optional]="false"
+                                                    text="Brokers Names"></kendo-label>
+                                                    <kendo-multiselect 
+                                                    #brokers
+                                                    formControlName="brokers"
+                                                    [textField]="'text'"
+                                                    [valueField]="'value'"
+                                                    [valuePrimitive]="true"
+                                                    [data]="listClientNames" 
+                                                    >
+                                                    </kendo-multiselect>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="referals" [optional]="false"
+                                                    text="Referals/BDM"></kendo-label>
+                                                    <kendo-multiselect 
+                                                    #referals
+                                                    formControlName="referals"
+                                                    [textField]="'text'"
+                                                    [valueField]="'value'"
+                                                    [valuePrimitive]="true"
+                                                    [data]="listClientNames" 
+                                                    >
+                                                    </kendo-multiselect>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="status" [text]="'Progress Status'"></kendo-label>
+                                                    <kendo-dropdownlist
+                                                        #status
+                                                        formControlName="status"
+                                                        [data]="listClientNames"
+                                                        [defaultItem]="{ text: 'Select Status', value: null }"
+                                                        [textField]="'text'"
+                                                        [valueField]="'value'"
+                                                        required
+                                                    >
+                                                    </kendo-dropdownlist>
+                                                    <kendo-formerror>Error: status is required</kendo-formerror>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="lender" text="Lender Organization">
+                                                    </kendo-label>
+                                                    <input formControlName="lender" kendoTextBox #lender required />
+
+                                                    <kendo-formhint>E.g. NAB Bank</kendo-formhint>
+                                                    <kendo-formerror>Error: Lender is required</kendo-formerror>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="limit"  text="Loan Limit">
+                                                    </kendo-label>
+                                                    <input formControlName="limit" kendoTextBox #limit required />
+
+                                                    <kendo-formhint>E.g. 8000</kendo-formhint>
+                                                    <kendo-formerror>Error: Limit is required</kendo-formerror>
+                                                </kendo-formfield>
+
+                                                <kendo-formfield>
+                                                    <kendo-label [for]="settlementDate" [optional]="false"
+                                                        text="Settlement Date"></kendo-label>
+                                                    <kendo-datepicker #settlementDate formControlName="settlementDate"
+                                                        [min]="min" [max]="max">
+                                                    </kendo-datepicker>
+
+                                                    <kendo-formhint>Date Settled</kendo-formhint>
+                                                </kendo-formfield>                                                
+
+                                                <div class="k-form-buttons">
+                                                    <button class="k-button k-primary"
+                                                        (click)="submitForm()">Submit</button>
+                                                    <button class="k-button" (click)="clearForm()">Clear</button>
+                                                </div>
+                                            </fieldset>
+                                        </form>
+                                    </div>
+                                </kendo-splitter-pane>
+
+                                <kendo-splitter-pane [collapsible]="true">
+                                    <div class="pane-content">
+                                        <h3>Commission Splits</h3>
+                                        <p>Resizable and collapsible.</p>
+                                    </div>
+                                </kendo-splitter-pane>
+
+                            </kendo-splitter>
+                        </kendo-splitter-pane>
+
+                        <kendo-splitter-pane [collapsible]="true" size="100px">
+                            <div class="pane-content">
+                                <h3>Revelant Parties</h3>
+                                <p> a table for revelant parties editable grid</p>
+                            </div>
+                        </kendo-splitter-pane>
+
+                    </kendo-splitter>
                 </div>
             </div>
-         </div>
- 
+        </div>
+
         <kendo-dialog-actions>
             <button kendoButton (click)="action('no')">No</button>
             <button kendoButton (click)="action('yes')" primary="true">Yes</button>
@@ -17,6 +157,6 @@
     </kendo-dialog>
 
     <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
-      <p style="text-align: center;">Additional info</p>
-     </kendo-window>
-  </div>
+        <p style="text-align: center;">Additional info</p>
+    </kendo-window>
+</div>

src/app/loan-edit/loan-edit.component.scss

@@ -0,0 +1 @@
+.pane-content { padding: 0 10px; }

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

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-loan-edit',
@@ -12,6 +13,12 @@ export class LoanEditComponent implements OnInit {
 
   //test
   public somedata : string = "opened";
+
+
+  //form access
+  
+  //@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent;
+
   constructor() { }
 
   ngOnInit(): void {
@@ -31,4 +38,37 @@ export class LoanEditComponent implements OnInit {
     console.log(`Dialog result: ${status}`);
     this.dialogOpened = false;
   }
+
+
+
+  public min: Date = new Date(2015, 0, 1);
+  public max: Date = new Date(2030, 4, 31);
+
+  public registerForm: FormGroup = new FormGroup({
+      transID: new FormControl(),
+      submissionDate: new FormControl(new Date(2020, 0, 10)),
+      clientNames : new FormControl([1]),
+      brokers : new FormControl([2]),
+      referals : new FormControl([3]),
+      status: new FormControl(),
+      lender: new FormControl(),
+      limit: new FormControl(),
+      settlementDate: new FormControl(new Date(2020, 0, 9)),
+  });
+
+  public submitForm(): void {
+      this.registerForm.markAllAsTouched();
+  }
+
+  public clearForm(): void {
+      this.registerForm.reset();
+  }
+    
+  public listClientNames: Array<{ text: string, value: number }> = [
+    { text: 'John', value: 1 },
+    { text: 'Steven', value: 2 },
+    { text: 'William', value: 3 }
+  ];
+
+  public statis: { text: string, value: number } = { text: 'Female', value: 2 };
 }