feat: support table loader #INFR-6879 (#329)

worktile · Mar 21, 2023 · 9ac7146 · 9ac7146
1 parent a81f54a
commit 9ac7146
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 5 deletions.
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -49,6 +49,20 @@ module.exports = [
                 default: 'false'
             },
 
+            {
+                name: 'loading',
+                description: `是否展示加载器`,
+                type: 'boolean',
+                default: 'false'
+            },
+
+            {
+                name: 'loadingDelay',
+                description: '设置在多少`毫秒`内,忽略加载器展示',
+                type: 'number',
+                default: '0'
+            },
+
             {
                 name: 'maxLevel',
                 description: `设置最大展示层级`,

diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -7,6 +7,8 @@
         </button>
       </thy-button-group>
       &nbsp; &nbsp; &nbsp;
+      <thy-button thyType="primary" thySize="sm" (click)="refresh()">刷新</thy-button>
+      &nbsp; &nbsp; &nbsp;
       <thy-button thyType="primary" thySize="sm" (click)="scrollToToday()">今天</thy-button>
       &nbsp; &nbsp; &nbsp;
       <thy-button thyType="primary" thySize="sm" (click)="print('gantt-example')"> ↓ 导出为图片 </thy-button>
@@ -36,6 +38,7 @@
       [viewOptions]="viewOptions"
       [showToolbar]="isShowToolbarChecked"
       [toolbarOptions]="toolbarOptions"
+      [loading]="loading"
       (barClick)="barClick($event)"
       (viewChange)="viewChange($event)"
       (lineClick)="lineClick($event)"

diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -14,7 +14,7 @@ import {
     GanttToolbarOptions,
     GanttTableDragEnterPredicateContext
 } from 'ngx-gantt';
-import { of } from 'rxjs';
+import { finalize, of } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { randomItems, random } from '../helper';
@@ -56,6 +56,8 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
 
     isShowToolbarChecked = true;
 
+    loading = false;
+
     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 },
@@ -186,6 +188,20 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         this.selectedViewType = event.viewType;
     }
 
+    refresh() {
+        this.loading = true;
+        of(randomItems(30))
+            .pipe(
+                delay(2000),
+                finalize(() => {
+                    this.loading = false;
+                })
+            )
+            .subscribe((res) => {
+                this.items = res;
+            });
+    }
+
     onDragDropped(event) {
         console.log(event);
     }

diff --git a/packages/gantt/src/components/loader/loader.component.scss b/packages/gantt/src/components/loader/loader.component.scss
@@ -0,0 +1,90 @@
+@use '../../styles/variables.scss';
+
+.gantt-loader {
+  &-overlay {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 40px);
+    top: 40px;
+    left: 0;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 1001;
+  }
+
+  &-wrapper {
+    position: absolute;
+    padding-top: 20px;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &-loading {
+    display: inline-block;
+    position: relative;
+    height: 8px;
+    border-radius: 4px;
+    transform: translateX(-18px);
+
+    &:before,
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 8px;
+      width: 8px;
+      border-radius: 4px;
+    }
+
+    &:before {
+      animation: gantt-loader-loading-ellipsis-b 1s ease-in-out infinite;
+      background: variables.$gantt-loader-loading-color;
+      opacity: 0.4;
+    }
+
+    &:after {
+      animation: gantt-loader-loading-ellipsis-a 1s ease-in-out infinite;
+      background: variables.$gantt-loader-loading-color;
+      opacity: 0.8;
+    }
+
+    &-spot {
+      position: absolute;
+      left: 13px;
+      height: 8px;
+      width: 8px;
+      background: variables.$gantt-loader-loading-color;
+      border-radius: 4px;
+    }
+  }
+}
+
+@keyframes gantt-loader-loading-ellipsis-b {
+  0% {
+    left: 0;
+    transform: scale(1.1);
+  }
+  50% {
+    left: 25px;
+    transform: scale(1);
+  }
+  100% {
+    left: 0;
+    transform: scale(1.1);
+  }
+}
+
+@keyframes gantt-loader-loading-ellipsis-a {
+  0% {
+    left: 25px;
+    transform: scale(1.1);
+  }
+  50% {
+    left: 0;
+    transform: scale(1);
+  }
+  100% {
+    left: 25px;
+    transform: scale(1.1);
+  }
+}
diff --git a/packages/gantt/src/components/loader/loader.component.ts b/packages/gantt/src/components/loader/loader.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'gantt-loader',
+    template: `
+        <div class="gantt-loader-wrapper">
+            <div class="gantt-loader-loading">
+                <span class="gantt-loader-loading-spot"></span>
+            </div>
+        </div>
+    `,
+    host: {
+        class: 'gantt-loader gantt-loader-overlay'
+    }
+})
+export class GanttLoaderComponent {}
diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -5,7 +5,7 @@
       <gantt-calendar-header></gantt-calendar-header>
     </div>
   </div>
-
+  <gantt-loader *ngIf="loading"></gantt-loader>
   <cdk-virtual-scroll-viewport
     class="gantt-virtual-scroll-viewport"
     [itemSize]="styles.lineHeight"

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -59,6 +59,28 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @Input() override linkable: boolean;
 
+    @Input() set loading(loading: boolean) {
+        if (loading) {
+            if (this.loadingDelay > 0) {
+                this.loadingTimer = setTimeout(() => {
+                    this._loading = loading;
+                    this.cdr.markForCheck();
+                }, this.loadingDelay);
+            } else {
+                this._loading = loading;
+            }
+        } else {
+            clearTimeout(this.loadingTimer);
+            this._loading = loading;
+        }
+    }
+
+    get loading() {
+        return this._loading;
+    }
+
+    @Input() loadingDelay: number = 0;
+
     @Output() linkDragStarted = new EventEmitter<GanttLinkDragEvent>();
 
     @Output() override linkDragEnded = new EventEmitter<GanttLinkDragEvent>();
@@ -81,6 +103,10 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     public renderData: (GanttGroupInternal | GanttItemInternal)[] = [];
 
+    private _loading: boolean = false;
+
+    private loadingTimer;
+
     private rangeStart: number;
 
     private rangeEnd: number;

diff --git a/packages/gantt/src/gantt.module.ts b/packages/gantt/src/gantt.module.ts
@@ -22,6 +22,7 @@ import { GanttTableHeaderComponent } from './components/table/header/gantt-table
 import { GanttCalendarHeaderComponent } from './components/calendar/header/calendar-header.component';
 import { GanttCalendarGridComponent } from './components/calendar/grid/calendar-grid.component';
 import { GanttTableBodyComponent } from './components/table/body/gantt-table-body.component';
+import { GanttLoaderComponent } from './components/loader/loader.component';
 
 @NgModule({
     imports: [CommonModule, DragDropModule, ScrollingModule],
@@ -47,6 +48,7 @@ import { GanttTableBodyComponent } from './components/table/body/gantt-table-bod
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
         GanttLinksComponent,
+        GanttLoaderComponent,
         NgxGanttBarComponent,
         GanttIconComponent,
         GanttDragBackdropComponent,

diff --git a/packages/gantt/src/public-api.ts b/packages/gantt/src/public-api.ts
@@ -12,6 +12,7 @@ export * from './components/bar/bar.component';
 export * from './components/range/range.component';
 export * from './components/baseline/baseline.component';
 export * from './components/toolbar/toolbar.component';
+export * from './components/loader/loader.component';
 export * from './utils/date';
 export * from './class';
 export * from './views/view';

diff --git a/packages/gantt/src/styles/index.scss b/packages/gantt/src/styles/index.scss
@@ -11,3 +11,4 @@
 @use '../components/links/links.component.scss';
 @use '../components/baseline/baseline.component.scss';
 @use '../components/toolbar/toolbar.component.scss';
+@use '../components/loader/loader.component.scss';
diff --git a/packages/gantt/src/styles/variables.scss b/packages/gantt/src/styles/variables.scss
@@ -52,3 +52,6 @@ $gantt-baseline-background-color: #cacaca !default;
 
 // toolbar
 $gantt-toolbar-view-active-color: $gantt-primary-color !default;
+
+// loader
+$gantt-loader-loading-color: #6698ff !default;
diff --git a/packages/gantt/src/test/gantt.component.spec.ts b/packages/gantt/src/test/gantt.component.spec.ts
@@ -24,6 +24,7 @@ import { GANTT_GLOBAL_CONFIG } from '../gantt.config';
 import { NgxGanttBaselineComponent } from '../components/baseline/baseline.component';
 import { GanttCalendarGridComponent } from '../components/calendar/grid/calendar-grid.component';
 import { GanttTableBodyComponent } from '../components/table/body/gantt-table-body.component';
+import { GanttLoaderComponent } from '../components/loader/loader.component';
 
 const mockItems = getMockItems();
 const mockGroupItems = getMockGroupItems();
@@ -51,6 +52,8 @@ const config = {
         [items]="items"
         [baselineItems]="baselineItems"
         [viewType]="viewType"
+        [loading]="loading"
+        [loadingDelay]="loadingDelay"
         [viewOptions]="viewOptions"
         [showToolbar]="showToolbar"
         [toolbarOptions]="toolbarOptions"
@@ -80,10 +83,14 @@ export class TestGanttBasicComponent {
 
     end = new GanttDate('2021-12-01 00:00:00').getUnixTime();
 
-    viewType = 'month';
+    viewType = GanttViewType.month;
 
     items = mockItems;
 
+    loading = false;
+
+    loadingDelay = 0;
+
     baselineItems = mockBaselineItems;
 
     viewOptions = {
@@ -129,7 +136,7 @@ export class TestGanttWithGroupsComponent {
 
     constructor() {}
 
-    viewType = 'month';
+    viewType = GanttViewType.month;
 
     groups = mockGroups;
 
@@ -154,7 +161,7 @@ export class TestGanttLoadChildrenComponent {
 
     constructor() {}
 
-    viewType = 'month';
+    viewType = GanttViewType.month;
 
     items = mockItems;
 
@@ -427,6 +434,36 @@ describe('ngx-gantt', () => {
             const toolbarViews = fixture.debugElement.query(By.css('.toolbar-views'));
             expect(toolbarViews).toBeFalsy();
         });
+
+        it('should show gantt loader when loading with true', fakeAsync(() => {
+            ganttComponentInstance.loading = true;
+            fixture.detectChanges();
+            let loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeTruthy();
+            ganttComponentInstance.loading = false;
+            fixture.detectChanges();
+            loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeFalsy();
+        }));
+        it('should hide loader when loading time less than loadingDelay', fakeAsync(() => {
+            ganttComponentInstance.loadingDelay = 2000;
+            fixture.detectChanges();
+            ganttComponentInstance.loading = true;
+            fixture.detectChanges();
+            let loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeFalsy();
+            tick(1000);
+            loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeFalsy();
+            tick(2000);
+            fixture.detectChanges();
+            loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeTruthy();
+            ganttComponentInstance.loading = false;
+            fixture.detectChanges();
+            loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            expect(loaderDom).toBeFalsy();
+        }));
     });
 
     describe('#with groups', () => {