Support table data custom view columns

Author: qianmoQ

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

@@ -10,10 +10,20 @@
       <ng-template #betaPopoverContent>
         <nz-space [nzSize]="30">
           <a *nzSpaceItem [routerLink]="['/query/beta']">
-            <nz-avatar [nzSize]="64" nzIcon="console-sql" style="background-color:#87d068;"></nz-avatar>
+            <nz-card nzBorderless="true" [nzCover]="coverQueryTemplate">
+              <nz-card-meta nzTitle="{{'common.query'|translate}}"></nz-card-meta>
+            </nz-card>
+            <ng-template #coverQueryTemplate>
+              <span nz-icon nzType="console-sql" style="color:#87d068; font-size: 35px;"></span>
+            </ng-template>
           </a>
           <a *nzSpaceItem [routerLink]="['/object/designer']">
-            <nz-avatar [nzSize]="64" nzIcon="appstore-add" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
+            <nz-card nzBorderless="true" [nzCover]="coverObjectDesignerTemplate">
+              <nz-card-meta nzTitle="{{'common.designer'|translate}}"></nz-card-meta>
+            </nz-card>
+            <ng-template #coverObjectDesignerTemplate>
+              <span nz-icon nzType="appstore-add" style="color:#f56a00; font-size: 35px;"></span>
+            </ng-template>
           </a>
         </nz-space>
       </ng-template>

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

@@ -0,0 +1,17 @@
+.logo {
+  width: 120px;
+  height: 31px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0px 30px 15px 30px;
+  float: left;
+}
+
+nz-header {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+}
+
+.ant-layout-header {
+  padding: 0;
+}

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

@@ -8,27 +8,7 @@ import { ipcRenderer, shell } from 'electron';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styles: [
-    `
-      .logo {
-        width: 120px;
-        height: 31px;
-        background: rgba(255, 255, 255, 0.2);
-        margin: 0px 30px 15px 30px;
-        float: left;
-      }
-
-      nz-header {
-        position: fixed;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .ant-layout-header {
-        padding: 0;
-      }
-    `
-  ]
+  styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent extends BaseComponent implements OnInit {
   version: string = PackageUtils.get('version');

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

@@ -39,6 +39,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzIconModule } from "ng-zorro-antd/icon";
 import { NzSpaceModule } from "ng-zorro-antd/space";
+import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
 
 @NgModule({
   declarations: [],
@@ -82,7 +83,8 @@ import { NzSpaceModule } from "ng-zorro-antd/space";
     NzDrawerModule,
     NzTypographyModule,
     NzIconModule,
-    NzSpaceModule
+    NzSpaceModule,
+    NzCheckboxModule
   ]
 })
 export class NgZorroAntdModule {

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

@@ -13,13 +13,13 @@ import { TableService } from "@renderer/services/management/table.service";
 import {
   LayoutContentDetailDatabaseComponent
 } from "@renderer/app/views/object_designer/layout/content/components/preview/database/detail.database.component";
-import {
-  LayoutDetailTableComponent
-} from "@renderer/app/views/object_designer/layout/content/components/preview/table/detail.table.component";
 import { AceModule } from "ngx-ace-wrapper";
 import {
   CreateTableComponent
 } from "@renderer/app/views/object_designer/layout/content/components/create_table/create.table.component";
+import {
+  PreviewTableComponent
+} from "@renderer/app/views/object_designer/layout/content/components/preview_table/preview.table.component";
 
 const DESIGNER_ROUTES: Routes = [
   {path: '', component: DesignerComponent}
@@ -40,8 +40,8 @@ const DESIGNER_ROUTES: Routes = [
     DesignerComponent,
     LayoutContentComponent,
     LayoutContentDetailDatabaseComponent,
-    LayoutDetailTableComponent,
-    CreateTableComponent
+    CreateTableComponent,
+    PreviewTableComponent
   ],
   providers: [
     DatabaseService,

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

@@ -1,23 +1,3 @@
-:host ::ng-deep .action-buttons {
-  margin-left: 10px;
-}
-
-:host ::ng-deep .action-button {
-  margin-left: 10px;
-}
-
-:host ::ng-deep .action-button-success {
-  color: #00c853;
-}
-
-:host ::ng-deep .action-button-danger {
-  color: #ff7875;
-}
-
-:host ::ng-deep .ant-divider-horizontal {
-  margin: 0;
-}
-
 :host ::ng-deep .ant-card-small>.ant-card-head>.ant-card-head-wrapper>.ant-card-head-title {
   padding: 8px 10px;
 }

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

@@ -4,25 +4,26 @@ import { PluginFactory } from "@renderer/factory/plugin.factory";
 import { ConfigFactory } from "@renderer/factory/config.factory";
 import { StringUtils } from "@renderer/utils/string.utils";
 import { RequestModel } from "@renderer/model/request.model";
-import { ResponseDataModel } from "@renderer/model/response.model";
 
 @Component({
-  selector: 'object-designer-layout-content-detail-table',
-  templateUrl: './detail.table.view.html',
-  styleUrls: ['./detail.table.style.scss']
+  selector: 'object-designer-layout-content-preview-table',
+  templateUrl: './preview.table.view.html',
+  styleUrls: ['./preview.table.style.scss']
 })
-export class LayoutDetailTableComponent implements AfterViewInit {
+export class PreviewTableComponent implements AfterViewInit {
   @Input()
   applyData: DesignerApplyData;
 
-  tableData = new ResponseDataModel();
-  tableDataSize = 0;
   loading = {
     tableContainer: false
   }
   applyResult = {
     headers: [],
-    columns: []
+    columns: [],
+    checkedColumns: []
+  }
+  applyVisible = {
+    columnDrawer: false
   }
 
   constructor(private pluginFactory: PluginFactory,
@@ -32,7 +33,6 @@ export class LayoutDetailTableComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.loading.tableContainer = true;
-      this.tableDataSize = 0;
       const request = new RequestModel();
       request.config = this.applyData.dataSource;
       const type = this.applyData.dataSource.type;
@@ -43,10 +43,10 @@ export class LayoutDetailTableComponent implements AfterViewInit {
         .getResponse(request, sql)
         .then(response => {
           if (response.status) {
-            this.tableDataSize = response.data.rows;
-            if (this.tableDataSize > 0) {
+            if (response.data.rows > 0) {
               Object.keys(response.data.columns[0]).forEach(column => {
                 this.applyResult.headers.push(column);
+                this.applyResult.checkedColumns.push({label: column, value: column, checked: true})
               })
               this.applyResult.columns = response.data.columns;
             }
@@ -55,4 +55,18 @@ export class LayoutDetailTableComponent implements AfterViewInit {
         });
     }, 0);
   }
+
+  handlerShowColumnDrawer() {
+    this.applyVisible.columnDrawer = true;
+  }
+
+  handlerCloseColumnDrawer() {
+    this.applyVisible.columnDrawer = false;
+  }
+
+  handlerColumnChecked() {
+    this.applyResult.headers = this.applyResult.checkedColumns
+      .filter(item => item.checked)
+      .map(item => item.value);
+  }
 }

src/renderer/app/views/object_designer/layout/content/components/preview/table/detail.table.view.html

@@ -0,0 +1,7 @@
+:host ::ng-deep .td {
+  min-width: 100px;
+}
+
+:host ::ng-deep .ant-card-small>.ant-card-head>.ant-card-head-wrapper>.ant-card-head-title {
+  padding: 8px 10px;
+}