// 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: [
SearchComponent,
CardComponent,
ButtonComponent,
-
+ ModalDirective,
+ ModalDemoComponent
],
imports: [
BrowserModule,
NewTopicModelComponent,
CreateDashboardComponent,
NewTemplateModalComponent,
- EditTemplateModalComponent
+ EditTemplateModalComponent,
+ ModalComponent,
+ ModalDemoComponent
]
})
-export class AppModule { }
+export class AppModule {}
-<p>
- modal works!
-</p>
+<!--
+============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=========================================================
+-->
+
+<div class="p-1">
+
+ <!-- Modal Header -->
+ <div class="modal-header pb-0 border-0 border-bottom">
+ <div class="container-fluid">
+
+ <!-- Page Title -->
+ <div class="row">
+ <div class="col-md-12">
+ <label *ngIf="this.contentComponent.data.state == 'edit'" class="dl-h3">Edit </label>
+ <label class="dl-h3">{{ this.contentComponent.data.title | translate }}</label>
+ </div>
+ </div>
+ <!-- Page Title End -->
+
+ <div class="row">
+ <div class="col-md-12">
+ <hr />
+ </div>
+
+ <!-- Notice -->
+ <div *ngIf="this.contentComponent.data.notice" class="col-md-12">
+ <div class="dl-notice">
+ {{ this.contentComponent.data.notice | translate}}
+ </div>
+ </div>
+ <!-- Notice End -->
+
+ </div>
+
+ </div>
+ </div>
+ <!-- Modal Header End -->
+
+ <!-- Modal Body -->
+ <div class="modal-body border-0">
+ <div class="container-fluid">
+
+ <!-- Modal Content -->
+ <div class="row">
+ <div class="col-md-12">
+ <ng-template modal-content></ng-template>
+ </div>
+ </div>
+ <!-- Modal Content End -->
+
+ </div>
+ </div>
+ <!-- Modal Body End -->
+
+ <!-- Modal Footer -->
+ <div class="modal-footer border-0 pt-0 pb-2">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="d-flex justify-content-end">
+ <div class="p-1">
+ <span>
+ <app-button *ngIf="this.contentComponent.data.state == 'new'" [text]="'Next'" [style]="'inline'"
+ [color]="'dark'" (click)="this.nextPage()"></app-button>
+ <app-button *ngIf="this.contentComponent.data.state == 'edit'" [text]="'Save'" [style]="'inline'"
+ [color]="'dark'" (click)="this.passBack()"></app-button>
+ </span>
+ </div>
+
+ <div class="p-1">
+ <span>
+ <app-button [text]="'Cancel'" [style]="'inline'" [color]="'light'"
+ (click)="activeModal.close('Close click')"></app-button>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Modal Footer End -->
+</div>
-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<any> = 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);
+ (<ModalInterface>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....");
+ }
}
--- /dev/null
+/*
+ * ============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<any>, public data: any) {}
+}
--- /dev/null
+/*
+ * ============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) {}
+}
--- /dev/null
+/*
+ * ============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;
+}
--- /dev/null
+<p>
+ modal-demo works!
+</p>
+<p>
+ name: {{ this.data.content.name }}
+</p>
+<p>
+ state: {{ this.data.state }}
+</p>
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalDemoComponent } from './modal-demo.component';
+
+describe('ModalDemoComponent', () => {
+ let component: ModalDemoComponent;
+ let fixture: ComponentFixture<ModalDemoComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ModalDemoComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalDemoComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+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() {}
+}
</div>
<div>
<p>Module 2 -----> modal</p>
- <app-modal>
- </app-modal>
+ <button class="btn dl-btn-dark" (click)="openModalDemo()">
+ modal-demo
+ </button>
</div>
<div>
<p>Module 3 -----> search</p>
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.
</pre>
<app-button [text]="'Cancel'" [style]="'block'" [color]="'dark'" (click)="buttonAction('Cancel')"></app-button>
<app-button [text]="'plus'" [style]="'inlineicon'" [color]="'dark'"></app-button>
<app-button [text]="'trash'" [style]="'icon'" [color]="'light'" (click)="buttonAction('trash')"></app-button>
</div>
-</div>
\ No newline at end of file
+</div>
-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<any> = [];
mocktabledata: Array<any> = [];
- 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:
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();
+ });
+ }
}
Code Review / dcaegen2 / services.git / commitdiff