feat(table): add gantt side table

Author: HandsomeButterball

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "e269ef2e-9a71-4aa1-8085-f4a738a9cfef",
+  "lastSync": 0
+}

example/src/app/examples/examples.component.html

@@ -1 +1,10 @@
-<ngx-gantt [start]="1514736000" end="1609430400" [items]="items" [groups]="groups"></ngx-gantt>
+<ngx-gantt start="1514736000" end="1609430400" [items]="items" [groups]="groups">
+  <ngx-gantt-column name="标题">
+    <ng-template #cell let-row>
+      {{ row.origin.title }}
+    </ng-template>
+  </ngx-gantt-column>
+  <ng-template #group let-group>
+    {{ group.title }}
+  </ng-template>
+</ngx-gantt>

packages/gantt/src/gantt-upper.ts

@@ -1,4 +1,14 @@
-import { Input, TemplateRef, Output, EventEmitter, ContentChild, ElementRef, HostBinding } from '@angular/core';
+import {
+    Input,
+    TemplateRef,
+    Output,
+    EventEmitter,
+    ContentChild,
+    ElementRef,
+    HostBinding,
+    ContentChildren,
+    QueryList,
+} from '@angular/core';
 import {
     GanttItem,
     GanttGroup,
@@ -12,6 +22,7 @@ import { GanttView, GanttViewOptions } from './views/view';
 import { createViewFactory } from './views/factory';
 import { GanttDate } from './utils/date';
 import { Subject, fromEvent } from 'rxjs';
+import { GanttTableColumnComponent } from './table/column/column.component';
 
 const defaultStyles = {
     lineHeight: 55,
@@ -45,9 +56,11 @@ export abstract class GanttUpper {
 
     @Output() dragEnded = new EventEmitter<GanttDragEvent>();
 
-    @ContentChild('barTemplate', { static: true }) barTemplate: TemplateRef<any>;
+    @ContentChild('bar', { static: true }) barTemplate: TemplateRef<any>;
+
+    @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
 
-    @ContentChild('groupTemplate', { static: true }) groupTemplate: TemplateRef<any>;
+    @ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
 
     public view: GanttView;
 

packages/gantt/src/gantt.module.ts

@@ -6,17 +6,23 @@ import { GanttContainerComponent } from './layout/gantt-container.component';
 import { GanttSideComponent } from './layout/gantt-side.component';
 import { GanttFlatComponent } from './flat/gantt-flat.component';
 import { GanttBarComponent } from './bar/bar.component';
+import { GanttTableColumnComponent } from './table/column/column.component';
+import { GanttTableGroupComponent } from './table/group/group.component';
+import { GanttTableItemsComponent } from './table/items/items.component';
 
 @NgModule({
     imports: [CommonModule],
-    exports: [GanttTableComponent, GanttFlatComponent],
+    exports: [GanttTableComponent, GanttFlatComponent, GanttTableColumnComponent],
     declarations: [
         GanttTableComponent,
         GanttFlatComponent,
         GanttSideComponent,
         GanttContainerComponent,
         GanttCalendarComponent,
         GanttBarComponent,
+        GanttTableColumnComponent,
+        GanttTableGroupComponent,
+        GanttTableItemsComponent,
     ],
     providers: [],
 })

packages/gantt/src/table/column/column.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

packages/gantt/src/table/column/column.component.ts

@@ -1,10 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ContentChild, TemplateRef, Input } from '@angular/core';
 
 @Component({
-    selector: 'gantt-table-column',
-    template: '',
+    selector: 'ngx-gantt-column',
+    templateUrl: './column.component.html',
 })
 export class GanttTableColumnComponent implements OnInit {
+    @Input() name: string;
+
+    @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
+
     constructor() {}
 
     ngOnInit() {}

packages/gantt/src/table/gantt-table.component.html

@@ -1,9 +1,33 @@
-<gantt-side> </gantt-side>
+<gantt-side>
+  <div class="gantt-items-header" *ngIf="columns?.length">
+    <table>
+      <thead>
+        <th *ngFor="let column of columns" [title]="column.name">
+          {{ column.name }}
+        </th>
+      </thead>
+    </table>
+  </div>
+  <div class="gantt-items-container">
+    <ng-container *ngIf="groups.length; else itemsTemplate">
+      <gantt-table-group *ngFor="let group of groups" [group]="group" [groupHeader]="groupTemplate">
+        <gantt-table-items [items]="group.items" [columns]="columns"></gantt-table-items>
+      </gantt-table-group>
+    </ng-container>
+    <ng-template #itemsTemplate
+      ><gantt-table-items [items]="items" [columns]="columns"></gantt-table-items
+    ></ng-template>
+  </div>
+</gantt-side>
 <gantt-container>
   <gantt-calendar-overlay *ngIf="view"></gantt-calendar-overlay>
   <div class="gantt-viewer-container">
     <!-- groups -->
-    <div class="gantt-viewer-groups" *ngIf="groups && groups.length > 0; else itemsTemplate" [style.width.px]="view.width">
+    <div
+      class="gantt-viewer-groups"
+      *ngIf="groups && groups.length > 0; else itemsTemplate"
+      [style.width.px]="view.width"
+    >
       <ng-container *ngFor="let group of groups; trackBy: trackBy">
         <div class="gantt-group"></div>
         <div class="gantt-items">

packages/gantt/src/table/gantt-table.component.ts

@@ -1,16 +1,8 @@
-import {
-    Component,
-    OnInit,
-    ElementRef,
-    ChangeDetectionStrategy,
-    Input,
-    EventEmitter,
-    Output,
-    HostBinding,
-} from '@angular/core';
+import { Component, OnInit, ElementRef, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
 import { GanttUpper } from '../gantt-upper';
 import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 import { GanttDependencyDragEvent, GanttDependencyEvent, GanttItemInternal } from '../class';
+
 @Component({
     selector: 'ngx-gantt',
     templateUrl: './gantt-table.component.html',

packages/gantt/src/table/group/group.component.html

@@ -0,0 +1,7 @@
+<div class="gantt-table-group-header">
+  <ng-template
+    [ngTemplateOutlet]="groupHeader"
+    [ngTemplateOutletContext]="{ $implicit: group, group: group }"
+  ></ng-template>
+</div>
+<ng-content></ng-content>

packages/gantt/src/table/group/group.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, TemplateRef, Input, ViewChild, ElementRef, HostBinding } from '@angular/core';
+import { GanttGroup } from '../../class/group';
+
+@Component({
+    selector: 'gantt-table-group',
+    templateUrl: './group.component.html',
+})
+export class GanttTableGroupComponent implements OnInit {
+    @Input() group: GanttGroup;
+
+    @Input() groupHeader: TemplateRef<any>;
+
+    @HostBinding('class.gantt-table-group') ganttTableGroupClass = true;
+
+    constructor(public elementRef: ElementRef<HTMLDivElement>) {}
+
+    ngOnInit() {}
+}