diff options
Diffstat (limited to 'components/datalake-handler')
21 files changed, 729 insertions, 123 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 ecab9a7b..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,19 +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 { 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: [ @@ -123,7 +126,9 @@ import { CardComponent } from './shared/modules/card/card.component'; TableComponent, SearchComponent, CardComponent, - + ButtonComponent, + ModalDirective, + ModalDemoComponent ], imports: [ BrowserModule, @@ -156,7 +161,9 @@ import { CardComponent } from './shared/modules/card/card.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/components/Button/button.component.css b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.css diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html new file mode 100644 index 00000000..3e753df3 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html @@ -0,0 +1,26 @@ +<!-- block type buttons --> +<button type="button" *ngIf="this.buttonstyle===1" + [class]="this.buttoncolor===1? 'btn dl-btn-light btn-block':'btn dl-btn-dark btn-block'"> + <span> {{this.text | translate}}</span> +</button> + +<!-- inline type buttons --> +<button type="button" *ngIf="this.buttonstyle===2" [class]="this.buttoncolor===1? 'btn dl-btn-light':'btn dl-btn-dark'"> + <span> {{this.text | translate}}</span> +</button> + +<!-- inline icon buttons --> +<button *ngIf="this.buttonstyle===4" [class]="this.buttoncolor===1? 'btn dl-btn-light':'btn dl-btn-dark'"> + <span> + <i *ngIf="this.text==='search'" class="fa fa-search"></i> + <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i> + <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i> + </span> +</button> + +<!-- icon type buttons --> +<button type="button" *ngIf="this.buttonstyle===3" class="btn dl-icon-enable p-2"> + <i *ngIf="this.text==='search'" class="fa fa-search"></i> + <i *ngIf="this.text==='plus'" class="fa fa-plus fa-xs" aria-hidden="true"></i> + <i *ngIf="this.text==='trash'" class="fa fa-trash fa-xs" aria-hidden="true"></i> +</button>
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.spec.ts b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.spec.ts new file mode 100644 index 00000000..794fc677 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonComponent } from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture<ButtonComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ButtonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts new file mode 100644 index 00000000..b01260e9 --- /dev/null +++ b/components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts @@ -0,0 +1,75 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + 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. +*/ + + +/** + * This component is designed for all kinds of Button. + * + * @author Xu Ran + * + */ + +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-button', + templateUrl: './button.component.html', + styleUrls: ['./button.component.css'] +}) +export class ButtonComponent implements OnInit { + /** + * This component supports thress properties. + * text: + * All strings are ok for block and inline sytle. MAKE SURE that icon and inlineicon 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: four properties is available: block, inline, inlineicon, 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. + */ + + @Input() text: string; + @Input() style: string; + @Input() color: string; + buttonstyle: number; + buttoncolor: number; + constructor() { } + + ngOnInit() { + switch (this.style) { + case 'block': + this.buttonstyle = 1; + break; + case 'inline': + this.buttonstyle = 2; + break; + case 'icon': + this.buttonstyle = 3; + break; + case 'inlineicon': + this.buttonstyle = 4; + break; + } + + switch (this.color) { + case 'light': + this.buttoncolor = 1; + break; + case 'dark': + this.buttoncolor = 2; + break; + } + } + +} 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 </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/shared/modules/table/table.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html index 38e41676..e37065bc 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.html @@ -1,3 +1,40 @@ -<p> - table works! -</p> +<div class="row"> + <div class="col-md-12"> + <!-- <ngx-datatable #mytemlate class="bootstrap" [rows]="data" [columnMode]="'force'" [headerHeight]="40" + [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [loadingIndicator]="loadingIndicator" + [messages]="mesgNoData" [limit]="10" (activate)="onActivate($event)"> --> + + <ngx-datatable #mytemlate class="bootstrap" [rows]="data" [columnMode]="'force'" [headerHeight]="40" + [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true" [loadingIndicator]="loadingIndicator" + [messages]="mesgNoData" [limit]="10"> + + <ngx-datatable-column sortable="column.sortable" *ngFor="let column of columns" [width]="column.width" + name="{{ column.name | translate }}" prop="column.name" headerClass="d-flex justify-content-center" + cellClass="d-flex justify-content-center"> + <ng-template let-row="row" ngx-datatable-cell-template> + <span *ngIf="column.dataIndex&&column.dataIndex.length!==0">{{row[column.dataIndex]}}</span> + <span *ngIf="column.renderText&&column.renderText.length!==0"></span> + <span *ngIf="column.icontext&&column.icontext.length!==0"> + <app-button [text]="column.icontext" [style]="'inline'" [color]="'dark'"> + </app-button> + </span> + <span *ngIf="column.icon&&column.icon.length!==0"> + <app-button [text]="column.icon" [style]="'icon'" [color]="'dark'"> + </app-button> + </span> + </ng-template> + </ngx-datatable-column> + + <!-- <ngx-datatable-column [width]="10" name="" sortable="true" cellClass="d-flex justify-content-center"> + <ng-template let-row="row" ngx-datatable-cell-template> + <span> + <button class="btn action-icon-setting" (click)="this.deleteTemplateModel(row.id);"> + <i class="fas fa-trash-alt fa-xs"></i> + </button> + </span> + </ng-template> + </ngx-datatable-column> --> + + </ngx-datatable> + </div> +</div>
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts index 7e97f375..933582a4 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/table/table.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-table', @@ -6,10 +6,25 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./table.component.css'] }) export class TableComponent implements OnInit { + @Input() columns: Array<any> = []; + @Input() data: Array<any> = []; + + loadingIndicator: boolean = false; + template_list: Array<any> = []; + + mesgNoData = { + emptyMessage: ` + <div class="d-flex justify-content-center"> + <div class="p-2"> + <label class="dl-nodata">No data</label> + </div> + </div> + ` + }; constructor() { } ngOnInit() { - } + } } 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 f4d08c15..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 @@ -1,5 +1,5 @@ <div> - <h3>Test module is used for some publice business modules sample</h3> + <h3>Test module is used for some public business modules sample</h3> <div> <p>Module 1 -----> card</p> <app-card></app-card> @@ -7,7 +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> @@ -15,6 +17,25 @@ </div> <div> <p>Module 4 -----> table</p> - <app-table></app-table> + <app-table [data]="mocktabledata" [columns]="mockcolumns"></app-table> </div> -</div>
\ No newline at end of file + <div> + <p>components----button</p> + <pre> + Please set three properties to the button components: + 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. + </pre> + <app-button [text]="'Cancel'" [style]="'block'" [color]="'dark'" (click)="buttonAction('Cancel')"></app-button> + + <app-button [text]="'Cancel'" [style]="'inline'" [color]="'light'" (click)="buttonAction('Cancel')"></app-button> + <app-button [text]="'Save'" [style]="'inline'" [color]="'dark'" (click)="buttonAction('Save')"></app-button> + + <app-button [text]="'search'" [style]="'icon'" [color]="'dark'" (click)="buttonAction('search')"></app-button> + <app-button [text]="'plus'" [style]="'icon'" [color]="'light'" (click)="buttonAction('add')"></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> 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 ff623a7f..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,15 +1,123 @@ -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> = []; + + // Modal example + topic: Topic; + // Modal example end - constructor() { } + 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" + } + ]; + + // 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 = "") { + switch (string) { + case "modal": + this.modalShow = true; + break; + case "modalcancel": + this.modalShow = false; + break; + default: + this.notificationService.success(string + " action successful!"); + 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(); + }); + } } diff --git a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json index 99bc7512..3540190a 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/en-us.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/en-us.json @@ -52,6 +52,7 @@ "TOPICS_NAME": "Topic", "DEPLOY_TO_DASHBOARD": "Deploy", "DEPLOY": "Deploy", + "NODATA": "No Data", "NEW_TEMPLATE": "New design", "TEMPLATE_BODY": "Body", "FIELUPLOAD": "Upload file", diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json index 16d5b58d..d5e527c7 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hans.json @@ -3,12 +3,11 @@ "FEDDFER": "DataLake Feeder", "TOPICS": "Topics", "DATABASE": "Database", - "DASHBOARD":"仪表板设置", - "DASHBOARDLIST":"仪表板", - "TEMPLATE":"模板", + "DASHBOARD": "仪表板设置", + "DASHBOARDLIST": "仪表板", + "TEMPLATE": "模板", "ABOUT": "About" }, - "NAME": "名称", "STATUS": "状态", "SINK": "数据库", @@ -21,8 +20,7 @@ "ID_EXTRACTION": "ID提取", "CONFIGURED": "已配置", "UNCONFIGURED": "未配置", - "NEW_TOPIC":"新建主题", - + "NEW_TOPIC": "新建主题", "DATABASE_CONNECTIONS": "数据库连接", "BUCKET": "Bucket", "HOST": "主机", @@ -30,45 +28,41 @@ "ENABLE_SSL": "加密通信", "VERIFY": "验证", "SETTING": "设置", - "DOCUMENT_STORE": "文档存储", "SEARCH_ENGINE": "搜索引擎", - "DELETE": "删除", "ERROR_CODE": "错误代码", "SUCCESS_UPDATED": "更新成功", "TOPIC_DEFAULT_CONF_NOTICE": "注意: 本Topic使用默认Topic设置。", - - "HOME":"首页", - "ConfigDashboard":"配置仪表板", - "EDIT":"编辑", - "OK":"确认", - "Save":"保存", - "Cancel":"取消", - "NewDashboard":"新建仪表板", - "DestinationType":"目标类型", - "InputValue":"默认", - "Username":"用户名", - "Password":"密码", - "Enabled":"启用", - - "No":"No", - "TEMPLATE_NAME":"名称", - "TEMPLATE_TYPE":"类型", - "TOPICS_NAME":"主题", - "DEPLOY_TO_DASHBOARD":"部署", - "DEPLOY":"部署", - "NEW_TEMPLATE":"新建模板", - "TEMPLATE_BODY":"模板体", - "FIELUPLOAD":"文件上传", - - "SUCCESSFULLY_CREARED":"创建成功", - "FAILED_CREARED":"创建失败", - "SUCCESSFULLY_UPDATED":"更新成功", - "FAILED_UPDATED":"更新失败", - "SUCCESSFULLY_DELETED":"删除成功", - "FAILED_DELETED":"删除失败", - "Deploy_SUCCESSFULLY":"部署成功", - "Deploy_FAILED":"部署失败", - "ARE_YOU_SURE_DELETE":"您确定您要删除吗？" -} + "HOME": "首页", + "ConfigDashboard": "配置仪表板", + "EDIT": "编辑", + "OK": "确认", + "Save": "保存", + "Cancel": "取消", + "NewDashboard": "新建仪表板", + "DestinationType": "目标类型", + "InputValue": "默认", + "Username": "用户名", + "Password": "密码", + "Enabled": "启用", + "No": "No", + "TEMPLATE_NAME": "名称", + "TEMPLATE_TYPE": "类型", + "TOPICS_NAME": "主题", + "DEPLOY_TO_DASHBOARD": "部署", + "DEPLOY": "部署", + "NODATA": "暂无数据", + "NEW_TEMPLATE": "新建模板", + "TEMPLATE_BODY": "模板体", + "FIELUPLOAD": "文件上传", + "SUCCESSFULLY_CREARED": "创建成功", + "FAILED_CREARED": "创建失败", + "SUCCESSFULLY_UPDATED": "更新成功", + "FAILED_UPDATED": "更新失败", + "SUCCESSFULLY_DELETED": "删除成功", + "FAILED_DELETED": "删除失败", + "Deploy_SUCCESSFULLY": "部署成功", + "Deploy_FAILED": "部署失败", + "ARE_YOU_SURE_DELETE": "您确定您要删除吗？" +}
\ No newline at end of file diff --git a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json index f8fc0fa7..a678ff3d 100644 --- a/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json +++ b/components/datalake-handler/admin/src/src/assets/i18n/zh-hant.json @@ -3,12 +3,11 @@ "FEDDFER": "DataLake Feeder", "TOPICS": "Topics", "DATABASE": "Database", - "DASHBOARD":"儀表板設置", - "DASHBOARDLIST":"儀表板", - "TEMPLATE":"模板", + "DASHBOARD": "儀表板設置", + "DASHBOARDLIST": "儀表板", + "TEMPLATE": "模板", "ABOUT": "About" }, - "NAME": "名稱", "STATUS": "狀態", "SINK": "資料庫", @@ -21,9 +20,7 @@ "ID_EXTRACTION": "ID提取", "CONFIGURED": "已配置", "UNCONFIGURED": "未配置", - "NEW_TOPIC":"新建主題", - - + "NEW_TOPIC": "新建主題", "DATABASE_CONNECTIONS": "資料庫連線", "BUCKET": "Bucket", "HOST": "主機", @@ -31,45 +28,41 @@ "ENABLE_SSL": "加密通信", "VERIFY": "驗證", "SETTING": "設定", - "DOCUMENT_STORE": "文檔儲存", "SEARCH_ENGINE": "搜尋引擎", - "DELETE": "刪除", "ERROR_CODE": "錯誤代碼", "SUCCESS_UPDATED": "更新成功", "TOPIC_DEFAULT_CONF_NOTICE": "注意：此Topic目前使用預設配置。", - - "HOME":"首頁", - "ConfigDashboard":"配置儀表板", - "EDIT":"編輯", - "OK":"確認", - "Save":"保存", - "Cancel":"取消", - "NewDashboard":"新建儀表板", - "DestinationType":"目標類型", - "InputValue":"默認", - "Username":"用戶名", - "Password":"密碼", - "Enabled":"啟用", - - "No":"No", - "TEMPLATE_NAME":"名稱", - "TEMPLATE_TYPE":"類型", - "TOPICS_NAME":"主題", - "DEPLOY_TO_DASHBOARD":"部署", - "DEPLOY":"部署", - "NEW_TEMPLATE":"新建模板", - "TEMPLATE_BODY":"模板體", - "FIELUPLOAD":"文件上傳", - - "SUCCESSFULLY_CREARED":"創建成功", - "FAILED_CREARED":"創建失败", - "SUCCESSFULLY_UPDATED":"更新成功", - "FAILED_UPDATED":"更新失败", - "SUCCESSFULLY_DELETED":"刪除成功", - "FAILED_DELETED":"删除失败", - "Deploy_SUCCESSFULLY":"部署成功", - "Deploy_FAILED":"部署失败", - "ARE_YOU_SURE_DELETE":"您確定您要刪除嗎？" -} + "HOME": "首頁", + "ConfigDashboard": "配置儀表板", + "EDIT": "編輯", + "OK": "確認", + "Save": "保存", + "Cancel": "取消", + "NewDashboard": "新建儀表板", + "DestinationType": "目標類型", + "InputValue": "默認", + "Username": "用戶名", + "Password": "密碼", + "Enabled": "啟用", + "No": "No", + "TEMPLATE_NAME": "名稱", + "TEMPLATE_TYPE": "類型", + "TOPICS_NAME": "主題", + "DEPLOY_TO_DASHBOARD": "部署", + "DEPLOY": "部署", + "NODATA": "暫無數據", + "NEW_TEMPLATE": "新建模板", + "TEMPLATE_BODY": "模板體", + "FIELUPLOAD": "文件上傳", + "SUCCESSFULLY_CREARED": "創建成功", + "FAILED_CREARED": "創建失败", + "SUCCESSFULLY_UPDATED": "更新成功", + "FAILED_UPDATED": "更新失败", + "SUCCESSFULLY_DELETED": "刪除成功", + "FAILED_DELETED": "删除失败", + "Deploy_SUCCESSFULLY": "部署成功", + "Deploy_FAILED": "部署失败", + "ARE_YOU_SURE_DELETE": "您確定您要刪除嗎？" +}
\ No newline at end of file |