feat: add empty table #INFR-2051 (#129)

* feat: add empty table #INFR-2051 * fix: change emptyTable to tableEmpty
worktile · Jul 9, 2021 · 5f24470 · 5f24470
1 parent d807b82
commit 5f24470
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 5 deletions.
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -3,6 +3,7 @@ module.exports = {
     title: 'NgxGantt',
     siteProjectName: 'example',
     outputDir: 'dist/site',
+    logoUrl: 'https://cdn.pingcode.com/open-sources/gantt/logo.png',
     repoUrl: 'https://github.com/worktile/ngx-gantt',
     defaultLocale: 'zh-cn',
     navs: [

diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -128,6 +128,11 @@ module.exports = [
                 name: '#groupHeader',
                 description: `设置分组头部显示模板`,
                 type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableEmpty',
+                description: `设置空表格模板`,
+                type: 'TemplateRef<any>'
             }
         ]
     },

diff --git a/packages/gantt/src/components/icon/icons.ts b/packages/gantt/src/components/icon/icons.ts
@@ -7,10 +7,80 @@ const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/
     <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
 </path>
 </svg>`;
+const emptyIcon = `<svg
+width="148px"
+height="134px"
+viewBox="0 0 148 134"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+<defs>
+  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
+  </filter>
+</defs>
+<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  <g id="编组-6" transform="translate(1.000000, 1.000000)">
+    <ellipse
+      id="椭圆形"
+      fill="#EDEEF2"
+      opacity="0.3"
+      filter="url(#filter-1)"
+      cx="73.0800017"
+      cy="115.920003"
+      rx="73.0800017"
+      ry="16.8000004"
+    ></ellipse>
+    <g id="编组-5" transform="translate(15.120000, 0.000000)">
+      <polygon
+        id="矩形"
+        fill="#E2E4E9"
+        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
+      ></polygon>
+      <path
+        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
+        id="矩形"
+        fill="#F9FAFB"
+      ></path>
+      <path
+        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
+        id="矩形"
+        fill="#E8EAEE"
+      ></path>
+      <text
+        id="&lt;/null&gt;"
+        font-family="PingFangSC-Medium, PingFang SC"
+        font-size="15.1200003"
+        font-weight="400"
+        fill="#BCBECD"
+      >
+        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
+      </text>
+      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
+      <rect
+        id="矩形备份"
+        fill="#E8EAEE"
+        x="27.5600006"
+        y="63.8400014"
+        width="61.4800014"
+        height="5.04000011"
+        rx="2.52000006"
+      ></rect>
+      <path
+        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
+        id="矩形"
+        fill="#EDEFF2"
+      ></path>
+    </g>
+  </g>
+</g>
+</svg>`;
 export const icons = {
     'angle-right': angleRight,
     'angle-down': angleDown,
     'plus-square': plusSquare,
     'minus-square': minusSquare,
-    loading: loadingIcon
+    loading: loadingIcon,
+    empty: emptyIcon
 };
diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html
@@ -16,6 +16,14 @@
   </div>
 </div>
 <div class="gantt-table-body">
+  <ng-container *ngIf="!groups.length && !items.length">
+    <ng-container *ngIf="!emptyTemplate">
+      <gantt-icon class="empty-icon" iconName="empty"></gantt-icon>
+      <div class="empty-text">没有数据</div>
+    </ng-container>
+    <ng-template [ngTemplateOutlet]="emptyTemplate"></ng-template>
+  </ng-container>
+
   <ng-container *ngIf="groups && groups.length > 0; else itemsTemplate">
     <ng-container *ngFor="let group of groups">
       <div class="gantt-table-group" [ngClass]="group.class">

diff --git a/packages/gantt/src/components/table/gantt-table.component.scss b/packages/gantt/src/components/table/gantt-table.component.scss
@@ -1,5 +1,26 @@
 .gantt-table {
   display: block;
+  &-empty {
+    height: 100%;
+    position: relative;
+    .gantt-table-body {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 22px;
+      .empty-icon {
+        svg {
+          height: 78px;
+          width: 78px;
+        }
+      }
+      .empty-text {
+        color: #cacaca;
+      }
+    }
+  }
 
   &-drag-trigger {
     width: $gantt-table-header-drag-line-width;

diff --git a/packages/gantt/src/components/table/gantt-table.component.ts b/packages/gantt/src/components/table/gantt-table.component.ts
@@ -1,4 +1,15 @@
-import { Component, HostBinding, TemplateRef, QueryList, Input, OnInit, ViewChild, ElementRef } from '@angular/core';
+import {
+    Component,
+    HostBinding,
+    TemplateRef,
+    QueryList,
+    Input,
+    OnInit,
+    ViewChild,
+    ElementRef,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
 import { GanttItemInternal, GanttGroupInternal } from '../../class';
 import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
 import { defaultColumnWidth, minColumnWidth, NgxGanttComponent } from '../../gantt.component';
@@ -15,7 +26,7 @@ interface DragFixedConfig {
     selector: 'gantt-table',
     templateUrl: './gantt-table.component.html'
 })
-export class GanttTableComponent implements OnInit {
+export class GanttTableComponent implements OnInit, OnChanges {
     public columnList: QueryList<NgxGanttTableColumnComponent>;
 
     public dragStartLeft: number;
@@ -36,14 +47,24 @@ export class GanttTableComponent implements OnInit {
 
     @Input() groupTemplate: TemplateRef<any>;
 
+    @Input() emptyTemplate: TemplateRef<any>;
+
     @ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;
 
     @HostBinding('class.gantt-table') ganttTableClass = true;
 
+    @HostBinding('class.gantt-table-empty') ganttTableEmptyClass = false;
+
     constructor(public gantt: NgxGanttComponent, private elementRef: ElementRef) {}
 
     ngOnInit() {}
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {
+            this.ganttTableEmptyClass = true;
+        }
+    }
+
     private dragFixed(config: DragFixedConfig) {
         if (config.movedWidth < config.minWidth) {
             config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -1,6 +1,6 @@
 <ngx-gantt-root>
   <ng-template #sideTemplate>
-    <gantt-table [groups]="groups" [items]="items" [columns]="columns" [groupTemplate]="groupTemplate"></gantt-table>
+    <gantt-table [groups]="groups" [items]="items" [columns]="columns" [groupTemplate]="groupTemplate" [emptyTemplate]="tableEmptyTemplate"></gantt-table>
   </ng-template>
   <ng-template #mainTemplate>
     <gantt-main

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -15,7 +15,8 @@ import {
     QueryList,
     AfterViewInit,
     ViewChild,
-    ContentChild
+    ContentChild,
+    TemplateRef
 } from '@angular/core';
 import { startWith, takeUntil, take, finalize } from 'rxjs/operators';
 import { Subject, Observable } from 'rxjs';
@@ -59,6 +60,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, AfterViewIn
 
     @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList<NgxGanttTableColumnComponent>;
 
+    @ContentChild('tableEmpty', { static: true }) tableEmptyTemplate: TemplateRef<any>;
+
     private ngUnsubscribe$ = new Subject();
 
     public sideTableWidth = sideWidth;

diff --git a/packages/gantt/src/test/gantt.component.spec.ts b/packages/gantt/src/test/gantt.component.spec.ts
@@ -253,6 +253,13 @@ describe('ngx-gantt', () => {
             assertItems(fixture, newItems);
         });
 
+        it('should has empty class when has no items', () => {
+            ganttComponentInstance.items = [];
+            fixture.detectChanges();
+            const ganttTableElement = ganttDebugElement.query(By.css('.gantt-table'));
+            expect(ganttTableElement.nativeElement.classList).toContain('gantt-table-empty');
+        });
+
         it('should re render when scroll load', () => {});
     });