diff options
author | cyuamber <xuranyjy@chinamobile.com> | 2019-07-24 17:49:59 +0800 |
---|---|---|
committer | cyuamber <xuranyjy@chinamobile.com> | 2019-07-24 17:50:49 +0800 |
commit | 9e04f08d9662613db1dc38c123f8c0741afad740 (patch) | |
tree | 6bf97267bdbe2d6e6db8878300d89b94b48fd71d /components/datalake-handler/admin | |
parent | 8891e4097a3655adf434734efa38b0e7cb76e6c5 (diff) |
feat: add button component
Change-Id: I7558d1b73d40ce86ba1a533495cbfca1b347670b
Issue-ID: DCAEGEN2-1671
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'components/datalake-handler/admin')
12 files changed, 315 insertions, 96 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..d02f45de 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -88,6 +88,7 @@ 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'; @NgModule({ declarations: [ @@ -123,6 +124,7 @@ import { CardComponent } from './shared/modules/card/card.component'; TableComponent, SearchComponent, CardComponent, + ButtonComponent, ], imports: [ 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/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/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html index f4d08c15..007e3800 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,8 @@ </div> <div> <p>Module 2 -----> modal</p> - <app-modal></app-modal> + <app-modal> + </app-modal> </div> <div> <p>Module 3 -----> search</p> @@ -15,6 +16,25 @@ </div> <div> <p>Module 4 -----> table</p> - <app-table></app-table> + <app-table [data]="mocktabledata" [columns]="mockcolumns"></app-table> + </div> + <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>
\ 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 ff623a7f..04d5bc38 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,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import { ToastrNotificationService } from "src/app/shared/components/toastr-notification/toastr-notification.service"; @Component({ selector: 'app-test', templateUrl: './test.component.html', @@ -7,9 +7,40 @@ import { Component, OnInit } from '@angular/core'; }) export class TestComponent implements OnInit { - constructor() { } + modalShow: boolean = false; + mockcolumns: Array<any> = []; + mocktabledata: Array<any> = []; + + constructor(private notificationService: ToastrNotificationService, ) { } 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' + }] + } + 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; + } } - } 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 |