Support minus column

Author: qianmoQ

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

@@ -13,7 +13,7 @@
 }
 
 :host ::ng-deep .ant-card-small > .ant-card-body {
-  padding: 2px;
+  padding: 5px;
 }
 
 :host ::ng-deep .ant-divider-horizontal {

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

@@ -18,6 +18,7 @@ export class CreateTableComponent {
 
   applyTableName: string;
   applyColumns: DesignerColumn[] = [];
+  applyCheckedColumns = new Set<string>;
   dataType = [
     'varchar',
     'int',
@@ -59,6 +60,19 @@ export class CreateTableComponent {
     this.applyColumns = [...this.applyColumns, column];
   }
 
+  handlerMinusColumn() {
+    this.applyColumns = this.applyColumns.filter(column => !this.applyCheckedColumns.has(column.id));
+  }
+
+  handlerColumnChecked(column: string, checked: boolean) {
+    if (checked) {
+      this.applyCheckedColumns.add(column);
+    } else {
+      this.applyCheckedColumns.delete(column);
+      this.applyData.table = null;
+    }
+  }
+
   handlerSqlPreview() {
     const sql = this.builderFactory.createBuilder(this.applyData.dataSource.type)
       .builderCreateTable(this.applyData.database, this.applyTableName, this.applyData.engine, this.applyColumns);

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

@@ -10,6 +10,7 @@
                   [nzShowPagination]="false" [nzData]="applyColumns">
           <thead>
           <tr>
+            <th></th>
             <th>{{'common.name'|translate}}</th>
             <th>{{'common.type'|translate}}</th>
             <th>{{'common.length'|translate}}</th>
@@ -19,6 +20,8 @@
           </thead>
           <tbody>
           <tr *ngFor="let data of tableContainer.data">
+            <td [nzChecked]="applyCheckedColumns.has(data['id'])"
+                (nzCheckedChange)="handlerColumnChecked(data['id'], $event)"></td>
             <td nzEllipsis>
               <input nz-input [(ngModel)]="data['name']"/>
             </td>
@@ -57,12 +60,12 @@
         {{'common.engine'|translate}}
       </ng-template>
       <div nz-row [nzGutter]="[16, 16]" style="padding: 10px;">
-          <div *ngFor="let engine of applyTableEngines" [nzSpan]="4" nz-col>
-            <nz-radio-group [(ngModel)]="applyData.engine">
-              <label nzValue="{{engine}}" nz-radio-button>
-                {{engine}}
-              </label>
-            </nz-radio-group>
+        <div *ngFor="let engine of applyTableEngines" [nzSpan]="4" nz-col>
+          <nz-radio-group [(ngModel)]="applyData.engine">
+            <label nzValue="{{engine}}" nz-radio-button>
+              {{engine}}
+            </label>
+          </nz-radio-group>
         </div>
       </div>
     </nz-tab>
@@ -95,4 +98,10 @@
           (click)="handlerPlusColumn()">
     <i nz-icon nzType="plus-circle" class="action-button-success"></i>
   </button>
+  <button nz-button nzSize="small" nzType="text" [disabled]="applyCheckedColumns.size <= 0"
+          nz-tooltip nzTooltipTitle="{{'common.delete'|translate}}{{'common.column'|translate}}"
+          (click)="handlerMinusColumn()">
+    <span nz-icon nzType="minus-circle" class="action-button-danger"></span>
+    <span *ngIf="applyCheckedColumns.size > 0">({{applyCheckedColumns.size}})</span>
+  </button>
 </ng-template>

src/renderer/styles.scss

@@ -26,6 +26,6 @@
   line-height: 16px;
 }
 
-.cdk-global-scrollblock {
-  overflow-y: hidden;
-}
+//.cdk-global-scrollblock {
+//  overflow-y: hidden;
+//}