From 9e04f08d9662613db1dc38c123f8c0741afad740 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Wed, 24 Jul 2019 17:49:59 +0800 Subject: feat: add button component Change-Id: I7558d1b73d40ce86ba1a533495cbfca1b347670b Issue-ID: DCAEGEN2-1671 Signed-off-by: cyuamber --- .../admin/src/src/app/app.module.ts | 2 + .../shared/components/Button/button.component.css | 0 .../shared/components/Button/button.component.html | 26 +++++++ .../components/Button/button.component.spec.ts | 25 +++++++ .../shared/components/Button/button.component.ts | 75 ++++++++++++++++++++ .../app/shared/modules/table/table.component.html | 43 +++++++++++- .../app/shared/modules/table/table.component.ts | 19 +++++- .../src/src/app/views/test/test.component.html | 26 ++++++- .../admin/src/src/app/views/test/test.component.ts | 37 +++++++++- .../admin/src/src/assets/i18n/en-us.json | 1 + .../admin/src/src/assets/i18n/zh-hans.json | 78 ++++++++++----------- .../admin/src/src/assets/i18n/zh-hant.json | 79 ++++++++++------------ 12 files changed, 315 insertions(+), 96 deletions(-) create mode 100644 components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.css create mode 100644 components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.html create mode 100644 components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.spec.ts create mode 100644 components/datalake-handler/admin/src/src/app/shared/components/Button/button.component.ts (limited to 'components/datalake-handler') 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 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 @@ + + + + + + + + + + + \ 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; + + 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 @@ -

- table works! -

+
+
+ + + + + + + {{row[column.dataIndex]}} + + + + + + + + + + + + + + + +
+
\ 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 = []; + @Input() data: Array = []; + + loadingIndicator: boolean = false; + template_list: Array = []; + + mesgNoData = { + emptyMessage: ` +
+
+ +
+
+ ` + }; 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 @@
-

Test module is used for some publice business modules sample

+

Test module is used for some public business modules sample

Module 1 -----> card

@@ -7,7 +7,8 @@

Module 2 -----> modal

- + +

Module 3 -----> search

@@ -15,6 +16,25 @@

Module 4 -----> table

- + +
+
+

components----button

+ 
+      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. 
+
+ + + + + + + + +
\ 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 = []; + mocktabledata: Array = []; + + 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 -- cgit 1.2.3-korg