Просмотр исходного кода

load edit only cares about add new, editing is another function totally.

tags/2.037
Patrick Sun 5 лет назад
Родитель
Сommit
67d59e76c2
10 измененных файлов: 409 добавлений и 146 удалений
  1. +3
    -1
      src/app/app-routing.module.ts
  2. +3
    -1
      src/app/app.module.ts
  3. +2
    -0
      src/app/loan-edit/dist/loan-edit.component.js
  4. +117
    -143
      src/app/loan-edit/loan-edit.component.html
  5. +4
    -0
      src/app/loan-edit/loan-edit.component.ts
  6. +2
    -1
      src/app/main-menu-items.ts
  7. +182
    -0
      src/app/transaction/transaction.component.html
  8. +20
    -0
      src/app/transaction/transaction.component.scss
  9. +25
    -0
      src/app/transaction/transaction.component.spec.ts
  10. +51
    -0
      src/app/transaction/transaction.component.ts

+ 3
- 1
src/app/app-routing.module.ts Просмотреть файл

import { CanvasComponent } from './canvas/canvas.component'; import { CanvasComponent } from './canvas/canvas.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './service/auth-guard.service'; import { AuthGuard } from './service/auth-guard.service';
import { TransactionComponent } from './transaction/transaction.component';




const routes: Routes = [ const routes: Routes = [
{path : '', component: DashboardComponent, canActivate: [AuthGuard]}, {path : '', component: DashboardComponent, canActivate: [AuthGuard]},
{path : 'canvas', component: CanvasComponent}, {path : 'canvas', component: CanvasComponent},
{path : 'dashboard', component: DashboardComponent, canActivate: [AuthGuard],}, {path : 'dashboard', component: DashboardComponent, canActivate: [AuthGuard],},
{path : 'login', component: AuthComponent}
{path : 'login', component: AuthComponent},
{path : 'transaction', component: TransactionComponent, canActivate: [AuthGuard],},
]; ];


@NgModule({ @NgModule({

+ 3
- 1
src/app/app.module.ts Просмотреть файл

import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.component'; import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.component';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs'; import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { TransactionComponent } from './transaction/transaction.component';






LoanEditComponent, LoanEditComponent,
BkpDividerComponent, BkpDividerComponent,
BkpDividerShadowBottomComponent, BkpDividerShadowBottomComponent,
BkpDividerTextComponent
BkpDividerTextComponent,
TransactionComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

+ 2
- 0
src/app/loan-edit/dist/loan-edit.component.js Просмотреть файл

exports.LoanEditComponent = void 0; exports.LoanEditComponent = void 0;
var core_1 = require("@angular/core"); var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms"); var forms_1 = require("@angular/forms");
var sample_product_1 = require("../models/sample_product");
var LoanEditComponent = /** @class */ (function () { var LoanEditComponent = /** @class */ (function () {
//form access //form access
//@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent; //@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent;
{ text: 'William', value: 3 } { text: 'William', value: 3 }
]; ];
this.statis = { text: 'Female', value: 2 }; this.statis = { text: 'Female', value: 2 };
this.gridData = sample_product_1.sampleProducts;
} }
LoanEditComponent.prototype.ngOnInit = function () { LoanEditComponent.prototype.ngOnInit = function () {
}; };

+ 117
- 143
src/app/loan-edit/loan-edit.component.html Просмотреть файл

<div class="example-wrapper" style="opacity:1;"> <div class="example-wrapper" style="opacity:1;">
<kendo-dialog title="Transaction" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="500" [width]="850" <kendo-dialog title="Transaction" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="500" [width]="850"
[minHeight]="600" [height]="800">
[minHeight]="600">
<div class="example-wrapper"> <div class="example-wrapper">
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 "> <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 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()">Add New </button>
<button class="k-button" (click)="clearForm()">Clear</button>
</div>
</fieldset>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

+ 4
- 0
src/app/loan-edit/loan-edit.component.ts Просмотреть файл

import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { sampleProducts } from '../models/sample_product';


@Component({ @Component({
selector: 'app-loan-edit', selector: 'app-loan-edit',
]; ];


public statis: { text: string, value: number } = { text: 'Female', value: 2 }; public statis: { text: string, value: number } = { text: 'Female', value: 2 };


public gridData: any[] = sampleProducts;
} }

+ 2
- 1
src/app/main-menu-items.ts Просмотреть файл

text: 'Loans', text: 'Loans',
icon: 'dollar', icon: 'dollar',
items: [ items: [
{ text: 'Add', icon: 'plus', popup: "loanEdit" },
{ text: 'Add+', icon: 'plus', popup: "loanEdit" },
{ text: 'Edit', icon: 'plus', url: "./#transaction" },
{ text: 'List All', icon: 'table' ,url: '#' }, { text: 'List All', icon: 'table' ,url: '#' },
{ text: '--', separator: "true" }, { text: '--', separator: "true" },
{ text: 'Export All Loans' , icon: "excel"}, { text: 'Export All Loans' , icon: "excel"},

+ 182
- 0
src/app/transaction/transaction.component.html Просмотреть файл

<div class="container outer">
<div class="container inner">
<div class="row">
<div class="col-xs-12 col-sm-12 ">
<kendo-splitter orientation="vertical" class="transSplit">

<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>
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price" width="80">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock" width="80">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>
</div>
</kendo-splitter-pane>

</kendo-splitter>
</kendo-splitter-pane>

<kendo-splitter-pane [collapsible]="true" size="400px">
<div class="pane-content">
<h3>Revelant Parties</h3>
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price" width="80">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock" width="80">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>
</div>
</kendo-splitter-pane>

</kendo-splitter>
</div>
</div>
</div>
</div>

+ 20
- 0
src/app/transaction/transaction.component.scss Просмотреть файл

.container.outer{
width:100%;
background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity:0.98;
}
.container.inner {
width: 99%;
min-height: calc(100vh - 48px);
/* background-color:chartreuse; */
}

.pane-content { padding: 0 10px; }

.transSplit{
min-height: calc(100vh - 48px);
}

+ 25
- 0
src/app/transaction/transaction.component.spec.ts Просмотреть файл

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { TransactionComponent } from './transaction.component';

describe('TransactionComponent', () => {
let component: TransactionComponent;
let fixture: ComponentFixture<TransactionComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TransactionComponent ]
})
.compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(TransactionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

+ 51
- 0
src/app/transaction/transaction.component.ts Просмотреть файл

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { sampleProducts } from '../models/sample_product';

@Component({
selector: 'app-transaction',
templateUrl: './transaction.component.html',
styleUrls: ['./transaction.component.scss']
})
export class TransactionComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}


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 };


public gridData: any[] = sampleProducts;
}

Загрузка…
Отмена
Сохранить