Skip to content

Commit 901dfd9

Browse files
qianmoQqianmoQ
authored
Merge pull request #274 from qianmoQ/feature-object-designer
Feature object designer
2 parents 4f7db82 + 111d784 commit 901dfd9

20 files changed

Lines changed: 309 additions & 128 deletions

‎src/renderer/app/layout/header/header.component.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,20 @@
1010
<ng-template #betaPopoverContent>
1111
<nz-space [nzSize]="30">
1212
<a *nzSpaceItem [routerLink]="['/query/beta']">
13-
<nz-avatar [nzSize]="64" nzIcon="console-sql" style="background-color:#87d068;"></nz-avatar>
13+
<nz-card nzBorderless="true" [nzCover]="coverQueryTemplate">
14+
<nz-card-meta nzTitle="{{'common.query'|translate}}"></nz-card-meta>
15+
</nz-card>
16+
<ng-template #coverQueryTemplate>
17+
<span nz-icon nzType="console-sql" style="color:#87d068; font-size: 35px;"></span>
18+
</ng-template>
1419
</a>
1520
<a *nzSpaceItem [routerLink]="['/object/designer']">
16-
<nz-avatar [nzSize]="64" nzIcon="appstore-add" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
21+
<nz-card nzBorderless="true" [nzCover]="coverObjectDesignerTemplate">
22+
<nz-card-meta nzTitle="{{'common.designer'|translate}}"></nz-card-meta>
23+
</nz-card>
24+
<ng-template #coverObjectDesignerTemplate>
25+
<span nz-icon nzType="appstore-add" style="color:#f56a00; font-size: 35px;"></span>
26+
</ng-template>
1727
</a>
1828
</nz-space>
1929
</ng-template>

‎src/renderer/app/layout/header/header.component.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.logo {
2+
width: 120px;
3+
height: 31px;
4+
background: rgba(255, 255, 255, 0.2);
5+
margin: 0px 30px 15px 30px;
6+
float: left;
7+
}
8+
9+
nz-header {
10+
position: fixed;
11+
width: 100%;
12+
z-index: 1;
13+
}
14+
15+
.ant-layout-header {
16+
padding: 0;
17+
}

‎src/renderer/app/layout/header/header.component.ts‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,7 @@ import { ipcRenderer, shell } from 'electron';
88
@Component({
99
selector: 'app-header',
1010
templateUrl: './header.component.html',
11-
styles: [
12-
`
13-
.logo {
14-
width: 120px;
15-
height: 31px;
16-
background: rgba(255, 255, 255, 0.2);
17-
margin: 0px 30px 15px 30px;
18-
float: left;
19-
}
20-
21-
nz-header {
22-
position: fixed;
23-
width: 100%;
24-
z-index: 1;
25-
}
26-
27-
.ant-layout-header {
28-
padding: 0;
29-
}
30-
`
31-
]
11+
styleUrls: ['./header.component.scss']
3212
})
3313
export class HeaderComponent extends BaseComponent implements OnInit {
3414
version: string = PackageUtils.get('version');

‎src/renderer/app/ng-zorro-antd.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
3939
import { NzTypographyModule } from 'ng-zorro-antd/typography';
4040
import { NzIconModule } from "ng-zorro-antd/icon";
4141
import { NzSpaceModule } from "ng-zorro-antd/space";
42+
import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
4243

4344
@NgModule({
4445
declarations: [],
@@ -82,7 +83,8 @@ import { NzSpaceModule } from "ng-zorro-antd/space";
8283
NzDrawerModule,
8384
NzTypographyModule,
8485
NzIconModule,
85-
NzSpaceModule
86+
NzSpaceModule,
87+
NzCheckboxModule
8688
]
8789
})
8890
export class NgZorroAntdModule {

‎src/renderer/app/views/object_designer/designer.module.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ import { TableService } from "@renderer/services/management/table.service";
1313
import {
1414
LayoutContentDetailDatabaseComponent
1515
} from "@renderer/app/views/object_designer/layout/content/components/preview/database/detail.database.component";
16-
import {
17-
LayoutDetailTableComponent
18-
} from "@renderer/app/views/object_designer/layout/content/components/preview/table/detail.table.component";
1916
import { AceModule } from "ngx-ace-wrapper";
2017
import {
2118
CreateTableComponent
2219
} from "@renderer/app/views/object_designer/layout/content/components/create_table/create.table.component";
20+
import {
21+
PreviewTableComponent
22+
} from "@renderer/app/views/object_designer/layout/content/components/preview_table/preview.table.component";
2323

2424
const DESIGNER_ROUTES: Routes = [
2525
{path: '', component: DesignerComponent}
@@ -40,8 +40,8 @@ const DESIGNER_ROUTES: Routes = [
4040
DesignerComponent,
4141
LayoutContentComponent,
4242
LayoutContentDetailDatabaseComponent,
43-
LayoutDetailTableComponent,
44-
CreateTableComponent
43+
CreateTableComponent,
44+
PreviewTableComponent
4545
],
4646
providers: [
4747
DatabaseService,

‎src/renderer/app/views/object_designer/designer.style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
:host ::ng-deep .ant-card-small > .ant-card-body {
16-
padding: 2px;
16+
padding: 5px;
1717
}
1818

1919
:host ::ng-deep .ant-divider-horizontal {

‎src/renderer/app/views/object_designer/layout/content/components/create_table/create.table.component.ts‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export class CreateTableComponent {
1717
applyData: DesignerApplyData;
1818

1919
applyTableName: string;
20-
applyColumns: DesignerColumn[] = [];
20+
applyColumns: Array<DesignerColumn> = new Array<DesignerColumn>;
21+
applyCheckedColumns: Set<string> = new Set<string>;
22+
applyLastCheckedColumn: string = null;
2123
dataType = [
2224
'varchar',
2325
'int',
@@ -36,6 +38,7 @@ export class CreateTableComponent {
3638
enableLiveAutocompletion: true
3739
}
3840
};
41+
applyTableEngines = ['Memory'];
3942

4043
constructor(private builderFactory: BuilderFactory,
4144
private pluginFactory: PluginFactory,
@@ -49,13 +52,43 @@ export class CreateTableComponent {
4952
}
5053
}
5154

52-
handlerPlusColumn() {
55+
handlerGenerateColumn(): DesignerColumn {
5356
const milliseconds = new Date().getTime();
5457
const random = (Math.random() * milliseconds).toFixed(0);
5558
const id = StringUtils.format('{0}_{1}', [milliseconds, random]);
5659
const column = new DesignerColumn();
5760
column.id = id;
58-
this.applyColumns = [...this.applyColumns, column];
61+
return column;
62+
}
63+
64+
handlerPlusColumn() {
65+
this.applyColumns = [...this.applyColumns, this.handlerGenerateColumn()];
66+
}
67+
68+
handlerPlusPreColumn() {
69+
if (this.applyCheckedColumns.size > 0) {
70+
// If contained selected columns are added to the previous row of the column by default
71+
const index = this.applyColumns.findIndex(item => this.applyLastCheckedColumn === item.id);
72+
this.applyColumns.splice(index, 0, this.handlerGenerateColumn());
73+
this.applyColumns = [...this.applyColumns];
74+
} else {
75+
// If not selected, the column is added to the first row by default
76+
this.applyColumns = [this.handlerGenerateColumn(), ...this.applyColumns];
77+
}
78+
}
79+
80+
handlerMinusColumn() {
81+
this.applyColumns = this.applyColumns.filter(column => !this.applyCheckedColumns.has(column.id));
82+
}
83+
84+
handlerColumnChecked(column: string, checked: boolean) {
85+
this.applyLastCheckedColumn = column;
86+
if (checked) {
87+
this.applyCheckedColumns.add(column);
88+
} else {
89+
this.applyCheckedColumns.delete(column);
90+
this.applyData.table = null;
91+
}
5992
}
6093

6194
handlerSqlPreview() {

‎src/renderer/app/views/object_designer/layout/content/components/create_table/create.table.view.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
[nzShowPagination]="false" [nzData]="applyColumns">
1111
<thead>
1212
<tr>
13+
<th></th>
1314
<th>{{'common.name'|translate}}</th>
1415
<th>{{'common.type'|translate}}</th>
1516
<th>{{'common.length'|translate}}</th>
@@ -19,6 +20,8 @@
1920
</thead>
2021
<tbody>
2122
<tr *ngFor="let data of tableContainer.data">
23+
<td [nzChecked]="applyCheckedColumns.has(data['id'])"
24+
(nzCheckedChange)="handlerColumnChecked(data['id'], $event)"></td>
2225
<td nzEllipsis>
2326
<input nz-input [(ngModel)]="data['name']"/>
2427
</td>
@@ -51,6 +54,22 @@
5154
</div>
5255
</nz-tab>
5356

57+
<nz-tab [nzTitle]="engineTemplate">
58+
<ng-template #engineTemplate>
59+
<i class="fa fa-fire"></i>
60+
{{'common.engine'|translate}}
61+
</ng-template>
62+
<div nz-row [nzGutter]="[16, 16]" style="padding: 10px;">
63+
<div *ngFor="let engine of applyTableEngines" [nzSpan]="4" nz-col>
64+
<nz-radio-group [(ngModel)]="applyData.engine">
65+
<label nzValue="{{engine}}" nz-radio-button>
66+
{{engine}}
67+
</label>
68+
</nz-radio-group>
69+
</div>
70+
</div>
71+
</nz-tab>
72+
5473
<nz-tab [nzTitle]="sqlPreviewTemplate" (nzSelect)="handlerSqlPreview()">
5574
<ng-template #sqlPreviewTemplate>
5675
<i class="fa fa-eye"></i>
@@ -79,4 +98,15 @@
7998
(click)="handlerPlusColumn()">
8099
<i nz-icon nzType="plus-circle" class="action-button-success"></i>
81100
</button>
101+
<button nz-button nzSize="small" nzType="text"
102+
nz-tooltip nzTooltipTitle="{{'common.insert'|translate}}{{'common.column'|translate}}"
103+
(click)="handlerPlusPreColumn()">
104+
<i nz-icon nzType="left-circle" [nzTheme]="'twotone'" [nzTwotoneColor]="'#1890ff'"></i>
105+
</button>
106+
<button nz-button nzSize="small" nzType="text" [disabled]="applyCheckedColumns.size <= 0"
107+
nz-tooltip nzTooltipTitle="{{'common.delete'|translate}}{{'common.column'|translate}}"
108+
(click)="handlerMinusColumn()">
109+
<span nz-icon nzType="minus-circle" class="action-button-danger"></span>
110+
<span *ngIf="applyCheckedColumns.size > 0">({{applyCheckedColumns.size}})</span>
111+
</button>
82112
</ng-template>

‎src/renderer/app/views/object_designer/layout/content/components/preview/database/detail.database.component.ts‎

Lines changed: 71 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { StringUtils } from "@renderer/utils/string.utils";
77
import { ActionEnum } from "@renderer/enum/action.enum";
88
import { TypeEnum } from "@renderer/enum/type.enum";
99
import { AssertUtils } from "@renderer/app/views/object_designer/utils/assert.utils";
10+
import { NzMessageService } from "ng-zorro-antd/message";
1011

1112
@Component({
1213
selector: 'object-designer-layout-content-detail-database',
@@ -17,45 +18,92 @@ export class LayoutContentDetailDatabaseComponent implements AfterViewInit {
1718
@Input()
1819
applyData: DesignerApplyData;
1920

21+
loading = {
22+
tableContainer: false,
23+
}
2024
tableDataSize = 0;
2125
applyResultColumns = [];
22-
loading = {
23-
tableContainer: false
26+
applySelectTable = {
27+
checkedTables: new Set<string>()
28+
}
29+
deleteTable = {
30+
visible: false,
31+
loading: false
2432
}
2533

2634
constructor(private pluginFactory: PluginFactory,
27-
private configFactory: ConfigFactory) {
35+
private configFactory: ConfigFactory,
36+
private messageService: NzMessageService) {
2837
}
2938

3039
ngAfterViewInit(): void {
31-
setTimeout(() => {
32-
this.loading.tableContainer = true;
33-
this.tableDataSize = 0;
34-
const request = new RequestModel();
35-
request.config = this.applyData.dataSource;
36-
const type = this.applyData.dataSource.type;
37-
const sql = StringUtils.format(this.configFactory.createConfig(type).getStatement('metadataManagementFetchTables'),
38-
[this.applyData.database]);
39-
40-
this.pluginFactory.createService(type)
41-
.getResponse(request, sql)
42-
.then(response => {
43-
if (response.status) {
44-
this.tableDataSize = response.data.rows;
45-
if (this.tableDataSize > 0) {
46-
this.applyResultColumns = response.data.columns;
47-
}
40+
setTimeout(() => this.handlerInitializer(), 0)
41+
}
42+
43+
handlerInitializer() {
44+
this.loading.tableContainer = true;
45+
this.tableDataSize = 0;
46+
const request = new RequestModel();
47+
request.config = this.applyData.dataSource;
48+
const type = this.applyData.dataSource.type;
49+
const sql = StringUtils.format(this.configFactory.createConfig(type).getStatement('metadataManagementFetchTables'),
50+
[this.applyData.database]);
51+
52+
this.pluginFactory.createService(type)
53+
.getResponse(request, sql)
54+
.then(response => {
55+
if (response.status) {
56+
this.tableDataSize = response.data.rows;
57+
if (this.tableDataSize > 0) {
58+
this.applyResultColumns = response.data.columns;
4859
}
49-
this.loading.tableContainer = false;
50-
});
51-
}, 0)
60+
}
61+
this.loading.tableContainer = false;
62+
});
5263
}
5364

5465
handlerNewTable() {
5566
this.applyData.command.action = ActionEnum.create;
5667
this.applyData.command.type = TypeEnum.table;
5768
}
5869

70+
handlerTableChecked(tableName: string, checked: boolean) {
71+
if (checked) {
72+
this.applySelectTable.checkedTables.clear();
73+
this.applySelectTable.checkedTables.add(tableName);
74+
this.applyData.table = tableName;
75+
} else {
76+
this.applySelectTable.checkedTables.delete(tableName);
77+
this.applyData.table = null;
78+
}
79+
}
80+
81+
handlerApplyDeleteTable() {
82+
this.deleteTable.visible = true;
83+
}
84+
85+
handlerCancelDeleteTable() {
86+
this.deleteTable.visible = false;
87+
}
88+
89+
handlerDeleteTable() {
90+
this.deleteTable.loading = true;
91+
const request = new RequestModel();
92+
request.config = this.applyData.dataSource;
93+
const sql = StringUtils.format('DROP TABLE {0}.{1}', [this.applyData.database, this.applyData.table]);
94+
this.pluginFactory.createService(this.applyData.dataSource.type)
95+
.getResponse(request, sql)
96+
.then(response => {
97+
if (response.status) {
98+
this.messageService.success("OK");
99+
this.applySelectTable.checkedTables.delete(this.applyData.table);
100+
this.handlerInitializer();
101+
}
102+
this.deleteTable.loading = false;
103+
this.deleteTable.visible = false;
104+
});
105+
}
106+
59107
isCreateTable(): boolean {
60108
return AssertUtils.isCreateTable(this.applyData);
61109
}

‎src/renderer/app/views/object_designer/layout/content/components/preview/database/detail.database.style.scss‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,3 @@
1-
:host ::ng-deep .action-buttons {
2-
margin-left: 10px;
3-
}
4-
5-
:host ::ng-deep .action-button {
6-
margin-left: 10px;
7-
}
8-
9-
:host ::ng-deep .action-button-success {
10-
color: #00c853;
11-
}
12-
13-
:host ::ng-deep .action-button-danger {
14-
color: #ff7875;
15-
}
16-
17-
:host ::ng-deep .ant-divider-horizontal {
18-
margin: 0;
19-
}
20-
211
:host ::ng-deep .ant-card-small>.ant-card-head>.ant-card-head-wrapper>.ant-card-head-title {
222
padding: 8px 10px;
233
}

0 commit comments

Comments
 (0)