Add the modal shared module

Issue-ID: DCAEGEN2-1671

Signed-off-by: Ekko Chang <ekko.chang@qct.io>
Change-Id: Ibb7709739e3414d0e2fc955e1dffd747b5591d66

12 files changed, 439 insertions, 52 deletions

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 @@
-<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&nbsp;</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>
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<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....");
+  }
 }
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<any>, 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
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/views/test/modal-demo/modal-demo.component.css
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 @@
+<p>
+  modal-demo works!
+</p>
+<p>
+  name: {{ this.data.content.name }}
+</p>
+<p>
+  state: {{ this.data.state }}
+</p>
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<ModalDemoComponent>;
+
+  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 @@
   </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>
@@ -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.
     </pre>
     <app-button [text]="'Cancel'" [style]="'block'" [color]="'dark'" (click)="buttonAction('Cancel')"></app-button>
 
@@ -37,4 +38,4 @@
     <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>
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<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:
@@ -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();
+    });
+  }
 }