feat(toolbar): add toolbar component #INFR-5195 (#276)

worktile · Nov 23, 2022 · a420280 · a420280
1 parent 91da504
commit a420280
Show file tree

Hide file tree

Showing 26 changed files with 10,221 additions and 4,943 deletions.
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -96,6 +96,20 @@ module.exports = [
                 type: 'boolean',
                 default: 'false'
             },
+            {
+                name: 'showToolbar',
+                description: `设置是否展示工具栏`,
+                type: 'boolean',
+                default: 'false'
+            },
+            {
+                name: 'toolbarOptions',
+                description: `工具栏配置项`,
+                type: 'GanttToolbarOptions',
+                default: `{
+                    viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
+                }`
+            },
             {
                 name: 'loadOnScroll',
                 description: `滚动加载事件`,
@@ -155,6 +169,11 @@ module.exports = [
                 name: '#tableEmpty',
                 description: `设置空表格模板`,
                 type: 'TemplateRef<any>'
+            },
+            {
+                name: '#toolbar',
+                description: `工具栏自定义模版`,
+                type: 'TemplateRef<any>'
             }
         ]
     },
@@ -251,6 +270,18 @@ module.exports = [
             }
         ]
     },
+    {
+        type: 'component',
+        name: 'ngx-gantt-toolbar',
+        description: '工具栏组件',
+        properties: [
+            {
+                name: 'template',
+                description: `自定义工具栏模板`,
+                type: 'TemplateRef<any>'
+            }
+        ]
+    },
     {
         type: 'component',
         name: 'ngx-gantt-baseline',

diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -2,7 +2,7 @@
   <thy-header class="header-with-baseline">
     <ng-template #headerContent>
       <thy-button-group thySize="sm" thyType="outline-default">
-        <button thyButton *ngFor="let view of views" [class.active]="view.value === viewType" (click)="viewType = view.value">
+        <button thyButton *ngFor="let view of views" [class.active]="view.value === selectedViewType" (click)="selectView(view.value)">
           {{ view.name }}
         </button>
       </thy-button-group>
@@ -11,6 +11,9 @@
       &nbsp; &nbsp; &nbsp;
       <thy-button thyType="primary" thySize="sm" (click)="print('gantt-example')"> ↓ 导出为图片 </thy-button>
       &nbsp; &nbsp; &nbsp;
+      <span>工具栏：</span>
+      <thy-switch class="baseline-switch" [(ngModel)]="isShowToolbarChecked"> </thy-switch>
+      &nbsp; &nbsp; &nbsp;
       <span>基线对比：</span>
       <thy-switch class="baseline-switch" [(ngModel)]="isBaselineChecked" (ngModelChange)="switchChange()">基线对比 </thy-switch>
     </ng-template>
@@ -31,7 +34,10 @@
       [selectable]="true"
       [multiple]="true"
       [viewOptions]="viewOptions"
+      [showToolbar]="isShowToolbarChecked"
+      [toolbarOptions]="toolbarOptions"
       (barClick)="barClick($event)"
+      (viewChange)="viewChange($event)"
       (lineClick)="lineClick($event)"
       (dragMoved)="dragMoved($event)"
       (dragEnded)="dragEnded($event)"
@@ -57,6 +63,9 @@
       <ng-template #bar let-item="item">
         <span style="color: #fff">&nbsp;&nbsp;{{ item.title }} </span>
       </ng-template>
+      <!-- <ng-template #toolbar>
+        <span>test</span>
+      </ng-template> -->
     </ngx-gantt>
   </thy-content>
 </thy-layout>
diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -9,7 +9,9 @@ import {
     GanttPrintService,
     NgxGanttComponent,
     GanttSelectedEvent,
-    GanttBaselineItem
+    GanttBaselineItem,
+    GanttView,
+    GanttToolbarOptions
 } from 'ngx-gantt';
 import { of } from 'rxjs';
 import { delay } from 'rxjs/operators';
@@ -47,8 +49,12 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
 
     viewType: GanttViewType = GanttViewType.month;
 
+    selectedViewType: GanttViewType = GanttViewType.month;
+
     isBaselineChecked = false;
 
+    isShowToolbarChecked = true;
+
     items: GanttItem[] = [
         { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, expandable: true },
         { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '000000'], expandable: true },
@@ -82,6 +88,10 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         { id: '0000029', title: 'Task 29', start: 1618053197, end: 1619176397 }
     ];
 
+    toolbarOptions: GanttToolbarOptions = {
+        viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
+    };
+
     baselineItems: GanttBaselineItem[] = [];
 
     options = {
@@ -159,4 +169,14 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
             this.baselineItems = [];
         }
     }
+
+    selectView(type: GanttViewType) {
+        this.viewType = type;
+        this.selectedViewType = type;
+    }
+
+    viewChange(event: GanttView) {
+        console.log(event.viewType);
+        this.selectedViewType = event.viewType;
+    }
 }