From 96887c46e821cedb43cac026abcebb42649a5495 Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Thu, 25 Jul 2019 03:00:12 +0000 Subject: Add the modal shared module Issue-ID: DCAEGEN2-1671 Signed-off-by: Ekko Chang Change-Id: Ibb7709739e3414d0e2fc955e1dffd747b5591d66 --- .../admin/src/src/app/app.module.ts | 39 ++++--- .../app/shared/modules/modal/modal.component.html | 101 ++++++++++++++++- .../app/shared/modules/modal/modal.component.ts | 79 ++++++++++++- .../src/src/app/shared/modules/modal/modal.data.ts | 31 ++++++ .../app/shared/modules/modal/modal.directive.ts | 33 ++++++ .../app/shared/modules/modal/modal.interface.ts | 28 +++++ .../views/test/modal-demo/modal-demo.component.css | 0 .../test/modal-demo/modal-demo.component.html | 9 ++ .../test/modal-demo/modal-demo.component.spec.ts | 25 +++++ .../views/test/modal-demo/modal-demo.component.ts | 14 +++ .../src/src/app/views/test/test.component.html | 9 +- .../admin/src/src/app/views/test/test.component.ts | 123 +++++++++++++++++---- 12 files changed, 439 insertions(+), 52 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts create mode 100644 components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.directive.ts create mode 100644 components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.css create mode 100644 components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.html create mode 100644 components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.ts (limited to 'components/datalake-handler/admin') diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts index d02f45de..6bf83055 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -75,20 +75,22 @@ import { AboutComponent } from "./views/about/about.component"; // Loading spinner import { NgxSpinnerModule } from "ngx-spinner"; -import { DashboardSettingComponent } from './views/dashboard-setting/dashboard-setting.component'; -import { DashboardListComponent } from './views/dashboard-setting/dashboard-list/dashboard-list.component'; -import { TemplateComponent } from './views/dashboard-setting/template/template.component'; -import { CreateDashboardComponent } from './views/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component'; -import { TemplateListComponent } from './views/dashboard-setting/template/template-list/template-list.component'; -import { NewTemplateModalComponent } from './views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component'; -import { EditTemplateModalComponent } from './views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component'; -import { NewTopicModelComponent } from './views/topics/topic-list/new-topic-model/new-topic-model.component'; -import { TestComponent } from './views/test/test.component'; -import { ModalComponent } from './shared/modules/modal/modal.component'; -import { TableComponent } from './shared/modules/table/table.component'; -import { SearchComponent } from './shared/modules/search/search.component'; -import { CardComponent } from './shared/modules/card/card.component'; -import { ButtonComponent } from './shared/components/Button/button.component'; +import { DashboardSettingComponent } from "./views/dashboard-setting/dashboard-setting.component"; +import { DashboardListComponent } from "./views/dashboard-setting/dashboard-list/dashboard-list.component"; +import { TemplateComponent } from "./views/dashboard-setting/template/template.component"; +import { CreateDashboardComponent } from "./views/dashboard-setting/dashboard-list/create-dashboard/create-dashboard.component"; +import { TemplateListComponent } from "./views/dashboard-setting/template/template-list/template-list.component"; +import { NewTemplateModalComponent } from "./views/dashboard-setting/template/template-list/new-template-modal/new-template-modal.component"; +import { EditTemplateModalComponent } from "./views/dashboard-setting/template/template-list/edit-template-modal/edit-template-modal.component"; +import { NewTopicModelComponent } from "./views/topics/topic-list/new-topic-model/new-topic-model.component"; +import { TestComponent } from "./views/test/test.component"; +import { ModalComponent } from "./shared/modules/modal/modal.component"; +import { TableComponent } from "./shared/modules/table/table.component"; +import { SearchComponent } from "./shared/modules/search/search.component"; +import { CardComponent } from "./shared/modules/card/card.component"; +import { ButtonComponent } from "./shared/components/Button/button.component"; +import { ModalDirective } from "./shared/modules/modal/modal.directive"; +import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component"; @NgModule({ declarations: [ @@ -125,7 +127,8 @@ import { ButtonComponent } from './shared/components/Button/button.component'; SearchComponent, CardComponent, ButtonComponent, - + ModalDirective, + ModalDemoComponent ], imports: [ BrowserModule, @@ -158,7 +161,9 @@ import { ButtonComponent } from './shared/components/Button/button.component'; NewTopicModelComponent, CreateDashboardComponent, NewTemplateModalComponent, - EditTemplateModalComponent + EditTemplateModalComponent, + ModalComponent, + ModalDemoComponent ] }) -export class AppModule { } +export class AppModule {} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html index 0b81c38f..38654bcd 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.html @@ -1,3 +1,98 @@ -

- modal works! -

+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ {{ this.contentComponent.data.notice | translate}} +
+
+ + +
+ +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+
+ + + +
+
+
+
+
+
+ + + + +
+ +
+ + + +
+
+
+
+
+
+ +
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts index 15c22508..0eade628 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.component.ts @@ -1,15 +1,84 @@ -import { Component, OnInit } from '@angular/core'; +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { + Component, + OnInit, + Input, + Output, + EventEmitter, + ViewChild, + ComponentFactoryResolver +} from "@angular/core"; + +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { ModalDirective } from "src/app/shared/modules/modal/modal.directive"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ModalInterface } from "src/app/shared/modules/modal/modal.interface"; @Component({ - selector: 'app-modal', - templateUrl: './modal.component.html', - styleUrls: ['./modal.component.css'] + selector: "app-modal", + templateUrl: "./modal.component.html", + styleUrls: ["./modal.component.css"] }) export class ModalComponent implements OnInit { + @Input() contentComponent: ModalContentData; + @Output() passEntry: EventEmitter = new EventEmitter(); + @ViewChild(ModalDirective) modalContent: ModalDirective; - constructor() { } + constructor( + public activeModal: NgbActiveModal, + private componentFactoryResolver: ComponentFactoryResolver + ) {} ngOnInit() { + this.loadComponent(); } + loadComponent() { + const componentFactory = this.componentFactoryResolver.resolveComponentFactory( + this.contentComponent.component + ); + + const viewContainerRef = this.modalContent.viewContainerRef; + viewContainerRef.clear(); + + const componentRef = viewContainerRef.createComponent(componentFactory); + (componentRef.instance).data = this.contentComponent.data; + } + + nextPage() { + console.log("nextpage"); + //TODO: Switch the pages + } + + passBack() { + console.log("passback"); + //TODO: Save the data + + this.passEntry.emit("save...."); + } } diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts new file mode 100644 index 00000000..ff2f0152 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.data.ts @@ -0,0 +1,31 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ + +import { Type } from "@angular/core"; + +export class ModalContentData { + constructor(public component: Type, public data: any) {} +} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.directive.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.directive.ts new file mode 100644 index 00000000..dd623645 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.directive.ts @@ -0,0 +1,33 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ +import { Directive, ViewContainerRef } from "@angular/core"; + +@Directive({ + selector: "[modal-content]" +}) +export class ModalDirective { + constructor(public viewContainerRef: ViewContainerRef) {} +} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts new file mode 100644 index 00000000..a3b47282 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/modules/modal/modal.interface.ts @@ -0,0 +1,28 @@ +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ +export interface ModalInterface { + data: any; +} diff --git a/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.css b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.css new file mode 100644 index 00000000..e69de29b diff --git a/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.html b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.html new file mode 100644 index 00000000..167a8542 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.html @@ -0,0 +1,9 @@ +

+ modal-demo works! +

+

+ name: {{ this.data.content.name }} +

+

+ state: {{ this.data.state }} +

diff --git a/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.spec.ts b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.spec.ts new file mode 100644 index 00000000..2c397963 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModalDemoComponent } from './modal-demo.component'; + +describe('ModalDemoComponent', () => { + let component: ModalDemoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModalDemoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModalDemoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.ts b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.ts new file mode 100644 index 00000000..9a4507e0 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit, Input } from "@angular/core"; + +@Component({ + selector: "app-modal-demo", + templateUrl: "./modal-demo.component.html", + styleUrls: ["./modal-demo.component.css"] +}) +export class ModalDemoComponent implements OnInit { + @Input() data: any; + + constructor() {} + + ngOnInit() {} +} diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html index 007e3800..7b58bd76 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html @@ -7,8 +7,9 @@

Module 2 -----> modal

- - +

Module 3 -----> search

@@ -25,7 +26,7 @@ text: string is ok for block and inline sytle. MAKE SURE that icon style button needs specific text. This property is used for defined the function of the button. E.g. if you what a "cancel" button, please input a 'Cancel' string to this property and an 'add' string is for 'add' button style: thress properties is available: block, inline, icon. This property is used for the style of the button. We support three button styles. - color: two properties is available: dark, light. This property is used for the color of the button. dark button is filled, light button is unfilled. + color: two properties is available: dark, light. This property is used for the color of the button. dark button is filled, light button is unfilled. @@ -37,4 +38,4 @@
- \ No newline at end of file + diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts index 04d5bc38..a04220ff 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts @@ -1,41 +1,98 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; + +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +import { ModalComponent } from "src/app/shared/modules/modal/modal.component"; + +import { Topic } from "src/app/core/models/topic.model"; +import { ModalContentData } from "src/app/shared/modules/modal/modal.data"; +import { ModalDemoComponent } from "src/app/views/test/modal-demo/modal-demo.component"; + @Component({ - selector: 'app-test', - templateUrl: './test.component.html', - styleUrls: ['./test.component.css'] + selector: "app-test", + templateUrl: "./test.component.html", + styleUrls: ["./test.component.css"] }) export class TestComponent implements OnInit { - modalShow: boolean = false; mockcolumns: Array = []; mocktabledata: Array = []; - constructor(private notificationService: ToastrNotificationService, ) { } + // Modal example + topic: Topic; + // Modal example end + + constructor( + private notificationService: ToastrNotificationService, + // Modal example + private modalService: NgbModal // Modal example end + ) {} ngOnInit() { this.mockcolumns = [ - { name: 'TEMPLATE_NAME', width: '100', dataIndex: 'name', sortable: true }, - { name: 'TEMPLATE_TYPE', width: '180', dataIndex: 'type' }, - { name: 'TOPICS_NAME', width: '220', dataIndex: 'topic', renderText: '3' }, - { name: 'DEPLOY_TO_DASHBOARD', width: '220', dataIndex: '', icontext: 'DEPLOY' }, - { name: '', width: '20', dataIndex: '', icon: 'trash' }, - ] - this.mocktabledata = [{ - name: 'aaaa', type: '333', topic: '尽快尽快' - }, - { - name: 'ccccc', type: '666', topic: '2222' - }, { - name: 'bbbbb', type: '77777', topic: '555' - }] + { + name: "TEMPLATE_NAME", + width: "100", + dataIndex: "name", + sortable: true + }, + { name: "TEMPLATE_TYPE", width: "180", dataIndex: "type" }, + { + name: "TOPICS_NAME", + width: "220", + dataIndex: "topic", + renderText: "3" + }, + { + name: "DEPLOY_TO_DASHBOARD", + width: "220", + dataIndex: "", + icontext: "DEPLOY" + }, + { name: "", width: "20", dataIndex: "", icon: "trash" } + ]; + this.mocktabledata = [ + { + name: "aaaa", + type: "333", + topic: "尽快尽快" + }, + { + name: "ccccc", + type: "666", + topic: "2222" + }, + { + name: "bbbbb", + type: "77777", + topic: "555" + } + ]; + + // Modal example + // Data for different components of modal body + // Example for topic, not only topic but also db, design or tools + this.topic = new Topic(); + this.topic.name = "topic.name (test)"; + this.topic.login = "123"; + this.topic.password = "123"; + this.topic.sinkdbs = ""; + this.topic.enabled = true; + this.topic.saveRaw = true; + this.topic.dataFormat = ""; + this.topic.ttl = 123; + this.topic.correlateClearedMessage = true; + this.topic.messageIdPath = ""; + this.topic.type = false; + // Modal example end } - buttonAction(string: string = '') { + + buttonAction(string: string = "") { switch (string) { - case 'modal': + case "modal": this.modalShow = true; break; - case 'modalcancel': + case "modalcancel": this.modalShow = false; break; default: @@ -43,4 +100,24 @@ export class TestComponent implements OnInit { break; } } + + openModalDemo() { + let contentComponent = new ModalContentData(ModalDemoComponent, { + title: "AAI-EVENT-TEST", // Modal title string + notice: "Notice: This topic uses the default topics settings.", // Notice string + state: "new", // Modal type: new/edit + content: this.topic // Data for modal body in different component + }); + + const modalRef = this.modalService.open(ModalComponent, { + size: "lg", + centered: true + }); + + modalRef.componentInstance.contentComponent = contentComponent; + modalRef.componentInstance.passEntry.subscribe(receivedEntry => { + console.log("receivedEntry: " + receivedEntry); + modalRef.close(); + }); + } } -- cgit 1.2.3-korg