feat: merge v15.2.0-next

worktile · Aug 16, 2023 · 65aa1f3 · 65aa1f3
1 parent 1607ed6
commit 65aa1f3
Show file tree

Hide file tree

Showing 19 changed files with 311 additions and 51 deletions.
diff --git a/.wpmrc.js b/.wpmrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-    allowBranch: ['master', 'release-auto-*'],
+    allowBranch: ['master', 'v15.*', 'v16.*', 'v17.*', 'release-auto-*'],
     bumpFiles: ['package.json', 'package-lock.json', 'packages/gantt/package.json'],
     skip: {
         confirm: true

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,18 @@ All notable changes to this project will be documented in this file. See [standa
 
 - fix children display error when dropEnterPredicate return false #INFR-8641 ([54c3455](https://github.com/worktile/ngx-gantt/commit/54c3455739e0e6559e18f0e77130c84a50e5e118)), closes [#INFR-8641](https://github.com/worktile/ngx-gantt/issues/INFR-8641)
 
+# [15.2.0-next.1](https://github.com/worktile/ngx-gantt/compare/15.2.0-next.0...15.2.0-next.1) (2023-07-28)
+
+### Features
+
+- support load data when virtual scroll #INFR-8652 ([#395](https://github.com/worktile/ngx-gantt/issues/395)) ([f20ad4c](https://github.com/worktile/ngx-gantt/commit/f20ad4c3913b0fe7a19ae480dec495a99392427a)), closes [#INFR-8652](https://github.com/worktile/ngx-gantt/issues/INFR-8652) [#INFR-8626](https://github.com/worktile/ngx-gantt/issues/INFR-8626)
+
+# [15.2.0-next.0](https://github.com/worktile/ngx-gantt/compare/15.1.1...15.2.0-next.0) (2023-07-19)
+
+### Features
+
+- gantt component support footer template #INFR-8626 ([#394](https://github.com/worktile/ngx-gantt/issues/394)) ([c437b0c](https://github.com/worktile/ngx-gantt/commit/c437b0c80782ce1c17e38d63eaf49c76554ca3b3)), closes [#INFR-8626](https://github.com/worktile/ngx-gantt/issues/INFR-8626) [#INFR-8626](https://github.com/worktile/ngx-gantt/issues/INFR-8626)
+
 ## [15.1.1](https://github.com/worktile/ngx-gantt/compare/15.1.0...15.1.1) (2023-07-05)
 
 ### Bug Fixes

diff --git a/docs/guides/basic/event.md b/docs/guides/basic/event.md
@@ -115,3 +115,18 @@ export class GanttTableDragEndedEvent<T = unknown> {
   sourceParent: GanttItem<T>; // 拖动开始数据项父
 }
 ```
+
+# GanttVirtualScrolledIndexChangeEvent
+
+Gantt 组件虚拟滚动视口中可见的第一个元素的索引发生变化时触发
+
+```ts
+export class GanttVirtualScrolledIndexChangeEvent {
+  index: number; // 视口第一个元素 index
+  renderedRange: {
+    start: number;
+    end: number;
+  }; // 当前渲染的条目范围
+  count: number; // 总条目数量
+}
+```
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -169,6 +169,11 @@ module.exports = [
                 description: `选择数据项事件`,
                 type: 'EventEmitter<GanttSelectedEvent>'
             },
+            {
+                name: 'virtualScrolledIndexChange',
+                description: `虚拟滚动视口中可见的第一个元素的索引发生变化事件`,
+                type: 'EventEmitter<GanttVirtualScrolledIndexChangeEvent>'
+            },
             {
                 name: '#group',
                 description: `设置分组显示模板`,
@@ -185,13 +190,13 @@ module.exports = [
                 type: 'TemplateRef<any>'
             },
             {
-                name: '#tableEmpty',
-                description: `设置空表格模板`,
+                name: '#toolbar',
+                description: `工具栏自定义模版`,
                 type: 'TemplateRef<any>'
             },
             {
-                name: '#toolbar',
-                description: `工具栏自定义模版`,
+                name: '#tableFooter',
+                description: `设置底部模板`,
                 type: 'TemplateRef<any>'
             }
         ]
@@ -246,6 +251,16 @@ module.exports = [
                 name: '#rowAfterSlot',
                 description: `设置表格中每行的后置自定义渲染模板`,
                 type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableEmpty',
+                description: `设置空表格模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableFooter',
+                description: `设置表格底部模板`,
+                type: 'TemplateRef<any>'
             }
         ]
     },

diff --git a/example/src/app/gantt-custom-view/gantt.component.ts b/example/src/app/gantt-custom-view/gantt.component.ts
@@ -23,7 +23,7 @@ registerView(customViewType, GanttViewCustom);
     selector: 'app-gantt-custom-view-example',
     templateUrl: './gantt.component.html'
 })
-export class AppGanttCustomViewExampleComponent implements OnInit, AfterViewInit {
+export class AppGanttCustomViewExampleComponent implements OnInit {
     viewType = customViewType;
 
     showWeekend = true;
@@ -78,10 +78,6 @@ export class AppGanttCustomViewExampleComponent implements OnInit, AfterViewInit
 
     ngOnInit(): void {}
 
-    ngAfterViewInit() {
-        setTimeout(() => this.ganttComponent.scrollToDate(1627729997), 200);
-    }
-
     barClick(event: GanttBarClickEvent) {
         this.thyNotify.info('Event: barClick', `你点击了 [${event.item.title}]`);
     }

diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.html b/example/src/app/gantt-virtual-scroll/gantt.component.html
@@ -1,12 +1,18 @@
-<div style="line-height: 30px; padding: 15px; display: flex">
-  <div style="flex: 1">
-    <span class="text-primary">NgxGantt</span>
-    默认开启了虚拟滚动功能，如需关闭该功能设置 virtualScrollEnabled 参数为 false 即可。
-  </div>
-</div>
 <thy-layout>
+  <thy-header class="header-with-baseline">
+    <ng-template #headerContent>
+      <span class="text-primary">NgxGantt</span>
+      &nbsp;&nbsp;默认开启了虚拟滚动功能，如需关闭该功能设置 virtualScrollEnabled 参数为 false 即可。
+    </ng-template>
+  </thy-header>
   <thy-content>
-    <ngx-gantt #gantt [items]="items" [virtualScrollEnabled]="true">
+    <ngx-gantt
+      #gantt
+      [items]="items"
+      [virtualScrollEnabled]="true"
+      (virtualScrolledIndexChange)="virtualScrolledIndexChange($event)"
+      [loading]="loading"
+    >
       <ngx-gantt-table>
         <ngx-gantt-column name="标题" width="180px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
@@ -21,11 +27,37 @@
             {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
+
+        <ng-template #tableFooter let-columns="columns">
+          <div class="table-footer">
+            <div class="gantt-table-column" *ngFor="let column of columns; let i = index" [style.width]="column.columnWidth">
+              {{ column.name }}
+            </div>
+          </div>
+        </ng-template>
       </ngx-gantt-table>
 
       <ng-template #bar let-item="item">
         <span style="color: #fff">&nbsp;&nbsp;{{ item.title }} </span>
       </ng-template>
+
+      <ng-template #footer>
+        <div class="footer-container" [style.width.px]="gantt?.view.width">
+          <div
+            class="footer-item"
+            *ngFor="let day of gantt?.view.secondaryDatePoints"
+            [style.left.px]="day.x - gantt?.view.options.cellWidth / 2"
+            [style.width.px]="gantt?.view.options.cellWidth"
+          >
+            <ng-container *ngIf="false; else empty">
+              <div class="stat stat-fill"></div>
+            </ng-container>
+            <ng-template #empty>
+              <div class="stat stat-empty">0</div>
+            </ng-template>
+          </div>
+        </div>
+      </ng-template>
     </ngx-gantt>
   </thy-content>
 </thy-layout>
diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.ts b/example/src/app/gantt-virtual-scroll/gantt.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, HostBinding, ViewChild, AfterViewInit } from '@angular/core';
-import { GanttItem, GanttPrintService, NgxGanttComponent } from 'ngx-gantt';
+import { Component, OnInit, HostBinding, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { GanttItem, GanttPrintService, GanttVirtualScrolledIndexChangeEvent, NgxGanttComponent } from 'ngx-gantt';
+import { delay, of } from 'rxjs';
 import { randomItems, random } from '../helper';
 
 @Component({
@@ -8,13 +9,15 @@ import { randomItems, random } from '../helper';
     providers: [GanttPrintService]
 })
 export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewInit {
-    items: GanttItem[] = randomItems(10000);
+    items: GanttItem[] = [];
 
     @HostBinding('class.gantt-example-component') class = true;
 
     @ViewChild('gantt') ganttComponent: NgxGanttComponent;
 
-    constructor() {}
+    loading = false;
+
+    constructor(private cdr: ChangeDetectorRef) {}
 
     ngOnInit(): void {
         // init items children
@@ -28,4 +31,23 @@ export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewI
     ngAfterViewInit() {
         setTimeout(() => this.ganttComponent.scrollToDate(1627729997), 200);
     }
+
+    virtualScrolledIndexChange(event: GanttVirtualScrolledIndexChangeEvent) {
+        // 检查滚动位置是否接近列表底部
+        if (event.renderedRange.end + 20 >= event.count) {
+            // 加载更多数据
+            if (!this.loading) {
+                const items = randomItems(100);
+                this.loading = true;
+                of(items)
+                    .pipe(delay(1000))
+                    .subscribe(() => {
+                        console.log('loadDone');
+                        this.loading = false;
+                        this.items = [...this.items, ...items];
+                        this.cdr.detectChanges();
+                    });
+            }
+        }
+    }
 }
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -76,9 +76,6 @@
       <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
@@ -25,6 +25,7 @@ import { randomItems, random } from '../helper';
 @Component({
     selector: 'app-gantt-example',
     templateUrl: './gantt.component.html',
+    styleUrls: ['./gantt.scss'],
     providers: [GanttPrintService]
 })
 export class AppGanttExampleComponent implements OnInit, AfterViewInit {

diff --git a/example/src/app/gantt/gantt.scss b/example/src/app/gantt/gantt.scss
diff --git a/example/src/app/helper.ts b/example/src/app/helper.ts
@@ -11,7 +11,7 @@ export function randomItems(length: number, parent?: GanttItem, group?: string)
         const start = addDays(new Date(), random(-200, 200));
         const end = addDays(start, random(0, 100));
         items.push({
-            id: `${parent?.id || group || ''}00000${i}`,
+            id: `${parent?.id || group || ''}${Math.floor(Math.random() * 100000000)}`,
             title: `${parent?.title || 'Task'}-${i}`,
             start: getUnixTime(start),
             end: getUnixTime(end),

diff --git a/example/src/styles.scss b/example/src/styles.scss
@@ -45,6 +45,7 @@ $primary: #6698ff;
     margin: 20px;
     border: 1px solid #eee;
     height: calc(100vh - 95px);
+    overflow: auto;
 
     .thy-layout-header {
       .layout-header-title {
@@ -62,6 +63,32 @@ $primary: #6698ff;
     }
     ngx-gantt-root {
       border: 1px solid #eee;
+      .table-footer {
+        display: flex;
+        .gantt-table-column {
+          overflow: hidden;
+          border-right: 1px solid #eee;
+          box-sizing: border-box;
+          padding: 0 15px;
+          line-height: 44px;
+
+          &:last-child {
+            border-right: none;
+          }
+        }
+      }
+      .footer-container {
+        display: flex;
+        position: relative;
+        height: 100%;
+        .footer-item {
+          border-right: 1px solid #eee;
+          line-height: 44px;
+          &:last-child {
+            border-right: none;
+          }
+        }
+      }
     }
   }
 }
diff --git a/packages/gantt/src/class/event.ts b/packages/gantt/src/class/event.ts
@@ -63,3 +63,12 @@ export class GanttTableDragEnterPredicateContext<T = unknown> {
     target: GanttItem<T>;
     dropPosition: GanttTableDropPosition;
 }
+
+export class GanttVirtualScrolledIndexChangeEvent {
+    index: number;
+    renderedRange: {
+        start: number;
+        end: number;
+    };
+    count: number;
+}