From 3ee5bde3610dd60f62ae401df0c78f5931fa531d Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Fri, 6 Nov 2020 23:51:57 +1100 Subject: [PATCH] loanEdit component resides in app-component and it popup as needed. --- src/app/app.component.html | 1 + src/app/app.component.ts | 15 ++++- src/app/app.module.ts | 4 +- src/app/canvas/canvas.component.html | 65 +------------------ src/app/canvas/canvas.component.ts | 22 ++----- src/app/canvas/dist/canvas.component.js | 16 +---- src/app/loan-edit/dist/loan-edit.component.js | 45 +++++++++++++ src/app/loan-edit/loan-edit.component.html | 22 +++++++ src/app/loan-edit/loan-edit.component.scss | 0 src/app/loan-edit/loan-edit.component.spec.ts | 25 +++++++ src/app/loan-edit/loan-edit.component.ts | 37 +++++++++++ src/app/main-menu-items.ts | 10 +-- 12 files changed, 163 insertions(+), 99 deletions(-) create mode 100644 src/app/loan-edit/dist/loan-edit.component.js create mode 100644 src/app/loan-edit/loan-edit.component.html create mode 100644 src/app/loan-edit/loan-edit.component.scss create mode 100644 src/app/loan-edit/loan-edit.component.spec.ts create mode 100644 src/app/loan-edit/loan-edit.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 3b0b670..340363a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -8,5 +8,6 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 879eff2..dc7e6dc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { LoanEditComponent } from './loan-edit/loan-edit.component'; import { mainMenuItems } from './main-menu-items'; import { MenuService } from './service/menu.service'; @@ -12,18 +13,30 @@ export class AppComponent { title = 'broker'; public items: any[] = mainMenuItems; + @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent; + constructor(private menuService: MenuService){ } + //check menuItem has fontawesome public menuItemHasFontawesome (item: any) : boolean { return item.hasOwnProperty('fa'); } + //menuItem clicked public onSelect({ item }): void { if (!item.items) { this.menuService.itemClicked.emit(item); //console.log("emit on select : " + item.text); + console.log(this.loanEdit); + if ( item.popup == "loanEdit"){ + this.loanEdit.somedata = "changed"; + this.loanEdit.open('dialog'); + } } } + + + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4719707..1f18269 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,7 @@ import { AuthComponent } from './auth/auth.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { CanvasComponent } from './canvas/canvas.component'; import { MenuService } from './service/menu.service'; +import { LoanEditComponent } from './loan-edit/loan-edit.component'; @@ -28,7 +29,8 @@ import { MenuService } from './service/menu.service'; AppComponent, DashboardComponent, AuthComponent, - CanvasComponent + CanvasComponent, + LoanEditComponent ], imports: [ BrowserModule, diff --git a/src/app/canvas/canvas.component.html b/src/app/canvas/canvas.component.html index 057d1a1..e6a35f4 100644 --- a/src/app/canvas/canvas.component.html +++ b/src/app/canvas/canvas.component.html @@ -44,67 +44,6 @@
-
- - - - -

Are you sure you want to - continue?

- -
-
-
-

ColorGradient

- -
-
-

ColorPalette

- -
-
-

ColorPicker

- -
-
-

MaskedTextBox

- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Additional info

- -
\ No newline at end of file +
+
some text
some other text
\ No newline at end of file diff --git a/src/app/canvas/canvas.component.ts b/src/app/canvas/canvas.component.ts index d28cd8a..2c5b155 100644 --- a/src/app/canvas/canvas.component.ts +++ b/src/app/canvas/canvas.component.ts @@ -1,4 +1,5 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs'; import { sampleProducts } from '../models/sample_product'; import { MenuService } from '../service/menu.service'; @@ -10,32 +11,23 @@ import { MenuService } from '../service/menu.service'; export class CanvasComponent implements OnInit, OnDestroy { public gridData: any[] = sampleProducts; - public dialogOpened = false; - public windowOpened = false; + + private menutItemSub: Subscription; + + constructor(private menuService: MenuService) { } ngOnInit(): void { - this.menuService.itemClicked.subscribe( + this.menutItemSub = this.menuService.itemClicked.subscribe( (item:any) =>{ console.log(item); } ); } ngOnDestroy(): void{ - this.menuService.itemClicked.unsubscribe(); - } - - public close(component) { - this[component + 'Opened'] = false; + this.menutItemSub.unsubscribe(); } - public open(component) { - this[component + 'Opened'] = true; - } - public action(status) { - console.log(`Dialog result: ${status}`); - this.dialogOpened = false; - } } diff --git a/src/app/canvas/dist/canvas.component.js b/src/app/canvas/dist/canvas.component.js index 4d3bc59..ad7a85a 100644 --- a/src/app/canvas/dist/canvas.component.js +++ b/src/app/canvas/dist/canvas.component.js @@ -13,26 +13,14 @@ var CanvasComponent = /** @class */ (function () { function CanvasComponent(menuService) { this.menuService = menuService; this.gridData = sample_product_1.sampleProducts; - this.dialogOpened = false; - this.windowOpened = false; } CanvasComponent.prototype.ngOnInit = function () { - this.menuService.itemClicked.subscribe(function (item) { + this.menutItemSub = this.menuService.itemClicked.subscribe(function (item) { console.log(item); }); }; CanvasComponent.prototype.ngOnDestroy = function () { - this.menuService.itemClicked.unsubscribe(); - }; - CanvasComponent.prototype.close = function (component) { - this[component + 'Opened'] = false; - }; - CanvasComponent.prototype.open = function (component) { - this[component + 'Opened'] = true; - }; - CanvasComponent.prototype.action = function (status) { - console.log("Dialog result: " + status); - this.dialogOpened = false; + this.menutItemSub.unsubscribe(); }; CanvasComponent = __decorate([ core_1.Component({ diff --git a/src/app/loan-edit/dist/loan-edit.component.js b/src/app/loan-edit/dist/loan-edit.component.js new file mode 100644 index 0000000..df5e499 --- /dev/null +++ b/src/app/loan-edit/dist/loan-edit.component.js @@ -0,0 +1,45 @@ +"use strict"; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +exports.__esModule = true; +exports.LoanEditComponent = void 0; +var core_1 = require("@angular/core"); +var LoanEditComponent = /** @class */ (function () { + function LoanEditComponent() { + //popup + this.dialogOpened = false; + this.windowOpened = false; + //test + this.somedata = "opened"; + } + LoanEditComponent.prototype.ngOnInit = function () { + }; + LoanEditComponent.prototype.close = function (component) { + this.somedata = "" + Math.random(); + this[component + 'Opened'] = false; + }; + LoanEditComponent.prototype.open = function (component) { + //this.somedata = "" + Math.random(); + this[component + 'Opened'] = true; + }; + LoanEditComponent.prototype.action = function (status) { + var _this = this; + console.log("Dialog result: " + status); + setTimeout(function () { + _this.dialogOpened = false; + }, 2000); + }; + LoanEditComponent = __decorate([ + core_1.Component({ + selector: 'app-loan-edit', + templateUrl: './loan-edit.component.html', + styleUrls: ['./loan-edit.component.scss'] + }) + ], LoanEditComponent); + return LoanEditComponent; +}()); +exports.LoanEditComponent = LoanEditComponent; diff --git a/src/app/loan-edit/loan-edit.component.html b/src/app/loan-edit/loan-edit.component.html new file mode 100644 index 0000000..59718aa --- /dev/null +++ b/src/app/loan-edit/loan-edit.component.html @@ -0,0 +1,22 @@ +
+ + +
+
+
+

ColorGradient

+ +
+
+
+ + + + + + + + +

Additional info

+ +
diff --git a/src/app/loan-edit/loan-edit.component.scss b/src/app/loan-edit/loan-edit.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/loan-edit/loan-edit.component.spec.ts b/src/app/loan-edit/loan-edit.component.spec.ts new file mode 100644 index 0000000..b130eb3 --- /dev/null +++ b/src/app/loan-edit/loan-edit.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoanEditComponent } from './loan-edit.component'; + +describe('LoanEditComponent', () => { + let component: LoanEditComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoanEditComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoanEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/loan-edit/loan-edit.component.ts b/src/app/loan-edit/loan-edit.component.ts new file mode 100644 index 0000000..68777f0 --- /dev/null +++ b/src/app/loan-edit/loan-edit.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-loan-edit', + templateUrl: './loan-edit.component.html', + styleUrls: ['./loan-edit.component.scss'] +}) +export class LoanEditComponent implements OnInit { + //popup + public dialogOpened = false; + public windowOpened = false; + + //test + public somedata : string = "opened"; + constructor() { } + + ngOnInit(): void { + } + + public close(component) { + this.somedata = "" + Math.random(); + this[component + 'Opened'] = false; + } + + public open(component) { + //this.somedata = "" + Math.random(); + this[component + 'Opened'] = true; + } + + public action(status) { + console.log(`Dialog result: ${status}`); + setTimeout(()=>{ + this.dialogOpened = false; + },2000); + + } +} diff --git a/src/app/main-menu-items.ts b/src/app/main-menu-items.ts index 26e1c22..118abf7 100644 --- a/src/app/main-menu-items.ts +++ b/src/app/main-menu-items.ts @@ -18,8 +18,8 @@ export const mainMenuItems: any[] = [ text: 'Loans', icon: 'dollar', items: [ - { text: 'Add', icon: 'plus', url: 'https://google.com.au' }, - { text: 'List All', icon: 'table' ,url: 'https://google.com.au' }, + { text: 'Add', icon: 'plus', popup: "loanEdit" }, + { text: 'List All', icon: 'table' ,url: '#' }, { text: '--', separator: "true" }, { text: 'Export All Loans' , icon: "excel"}, { text: '--', separator: "true" }, @@ -30,7 +30,7 @@ export const mainMenuItems: any[] = [ text: 'Trails', icon: 'percent', items: [ - { text: 'List All', icon: 'table', url: 'https://google.com.au' }, + { text: 'List All', icon: 'table', url: '#' }, { text: '--', separator: "true" }, { text: 'Import From ...', icon : 'upload'} ] @@ -39,7 +39,7 @@ export const mainMenuItems: any[] = [ text: 'Clients', icon: 'user', items: [ - { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, + { text: 'Add ', icon: 'plus', url: '#' }, { text: 'List All', fa: faIdCard }, { text: '--', separator: "true" }, { text: 'Search' ,icon: 'search'}, @@ -52,7 +52,7 @@ export const mainMenuItems: any[] = [ text: 'Brokers', fa: faUserCircle, items: [ - { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, + { text: 'Add ', icon: 'plus', url: '#' }, { text: 'List All', fa: faIdCardAlt}, { text: '--', separator: "true" }, { text: 'Search' , icon: 'search'},