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: [
TableComponent,
SearchComponent,
CardComponent,
+ ButtonComponent,
],
imports: [
--- /dev/null
+<!-- 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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+/*
+ 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;
+ }
+ }
+
+}
-<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
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table',
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() {
- }
+ }
}
<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>
</div>
<div>
<p>Module 2 -----> modal</p>
- <app-modal></app-modal>
+ <app-modal>
+ </app-modal>
</div>
<div>
<p>Module 3 -----> search</p>
</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
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',
})
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;
+ }
}
-
}
"TOPICS_NAME": "Topic",
"DEPLOY_TO_DASHBOARD": "Deploy",
"DEPLOY": "Deploy",
+ "NODATA": "No Data",
"NEW_TEMPLATE": "New design",
"TEMPLATE_BODY": "Body",
"FIELUPLOAD": "Upload file",
"FEDDFER": "DataLake Feeder",
"TOPICS": "Topics",
"DATABASE": "Database",
- "DASHBOARD":"仪表板设置",
- "DASHBOARDLIST":"仪表板",
- "TEMPLATE":"模板",
+ "DASHBOARD": "仪表板设置",
+ "DASHBOARDLIST": "仪表板",
+ "TEMPLATE": "模板",
"ABOUT": "About"
},
-
"NAME": "名称",
"STATUS": "状态",
"SINK": "数据库",
"ID_EXTRACTION": "ID提取",
"CONFIGURED": "已配置",
"UNCONFIGURED": "未配置",
- "NEW_TOPIC":"新建主题",
-
+ "NEW_TOPIC": "新建主题",
"DATABASE_CONNECTIONS": "数据库连接",
"BUCKET": "Bucket",
"HOST": "主机",
"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
"FEDDFER": "DataLake Feeder",
"TOPICS": "Topics",
"DATABASE": "Database",
- "DASHBOARD":"儀表板設置",
- "DASHBOARDLIST":"儀表板",
- "TEMPLATE":"模板",
+ "DASHBOARD": "儀表板設置",
+ "DASHBOARDLIST": "儀表板",
+ "TEMPLATE": "模板",
"ABOUT": "About"
},
-
"NAME": "名稱",
"STATUS": "狀態",
"SINK": "資料庫",
"ID_EXTRACTION": "ID提取",
"CONFIGURED": "已配置",
"UNCONFIGURED": "未配置",
- "NEW_TOPIC":"新建主題",
-
-
+ "NEW_TOPIC": "新建主題",
"DATABASE_CONNECTIONS": "資料庫連線",
"BUCKET": "Bucket",
"HOST": "主機",
"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
Code Review / dcaegen2 / services.git / commitdiff