fix(gantt-table): add collapse in gantt table group

worktile · May 28, 2020 · 5101eea · 5101eea
1 parent 3b817ba
commit 5101eea
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 75 deletions.
diff --git a/example/src/app/examples/examples.component.html b/example/src/app/examples/examples.component.html
@@ -4,7 +4,12 @@
       {{ row.title }}
     </ng-template>
   </ngx-gantt-column>
-  <ng-template #group let-group>
+  <ngx-gantt-column name="开始时间">
+    <ng-template #cell let-row>
+      {{ row.start }}
+    </ng-template>
+  </ngx-gantt-column>
+  <!-- <ng-template #group let-group>
     {{ group.title }}
-  </ng-template>
+  </ng-template> -->
 </ngx-gantt>
diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -8,9 +8,7 @@ import {
     HostBinding,
     ChangeDetectorRef,
     NgZone,
-    SimpleChanges,
-    ContentChildren,
-    QueryList
+    SimpleChanges
 } from '@angular/core';
 import {
     GanttItem,
@@ -29,7 +27,6 @@ import { GanttDomService, ScrollDirection } from './gantt-dom.service';
 import { takeUntil, take } from 'rxjs/operators';
 import { GanttDragContainer } from './gantt-drag-container';
 import { Subject } from 'rxjs';
-import { GanttTableColumnComponent } from './table/column/column.component';
 
 export abstract class GanttUpper {
     @Input('items') originItems: GanttItem[] = [];
@@ -58,10 +55,6 @@ export abstract class GanttUpper {
 
     @ContentChild('bar', { static: true }) barTemplate: TemplateRef<any>;
 
-    @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
-
-    @ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
-
     public view: GanttView;
 
     public items: GanttItemInternal[] = [];

diff --git a/packages/gantt/src/gantt.scss b/packages/gantt/src/gantt.scss
@@ -1,4 +1,4 @@
-$gantt-header-height: 50px !default;
+$gantt-header-height: 44px !default;
 $gantt-side-width: 200px !default;
 $gantt-full-screen-width: 60px !default;
 $gantt-border-color: #eee !default;
@@ -16,8 +16,11 @@ $gantt-date-secondary-color: #333 !default;
 $gantt-date-secondary-font-size: 14px !default;
 $gantt-date-secondary-weekend-color: #aaa !default;
 $gantt-date-secondary-border-color: #ddd !default;
-$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default;
-$gantt-date-today-color: #FF9F73 !default;
+$gantt-date-week-backdrop-bg: rgba(
+    $color: #f3f3f3,
+    $alpha: 0.5,
+) !default;
+$gantt-date-today-color: #ff9f73 !default;
 
 // @import './bar/bar.scss';
 // @import './dependencies/dependencies.scss';
@@ -27,53 +30,53 @@ $gantt-date-today-color: #FF9F73 !default;
 @import './bar/bar.component.scss';
 
 .gantt {
-  width: 100%;
-  height: 100%;
-  background-color: $gantt-bg-color;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-
-  .gantt-side {
-    width: 400px;
-    border-right: 1px solid #ddd;
-  }
-
-  .gantt-container {
-    flex: 1;
+    width: 100%;
+    height: 100%;
+    background-color: $gantt-bg-color;
     position: relative;
-    display: flex;
     overflow: hidden;
-  }
+    display: flex;
 
-  .gantt-viewer-container {
-    width: 100%;
-    height: calc(100% - 50px);
-    flex: 1;
-    position: absolute;
-    top: 50px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-
-    .gantt-viewer-groups .gantt-viewer-items {
-      height: 100%;
+    .gantt-side {
+        width: 400px;
+        border-right: 1px solid #ddd;
     }
 
-    .gantt-group {
-      height: 50px;
-      box-sizing: border-box;
-      background: #fafafa;
+    .gantt-container {
+        flex: 1;
+        position: relative;
+        display: flex;
+        overflow: hidden;
     }
 
-    .gantt-item {
-      height: 50px;
-      border-bottom: 1px solid $gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
+    .gantt-viewer-container {
+        width: 100%;
+        height: calc(100% - 44px);
+        flex: 1;
+        position: absolute;
+        top: 44px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        overflow: auto;
+
+        .gantt-viewer-groups .gantt-viewer-items {
+            height: 100%;
+        }
+
+        .gantt-group {
+            height: 44px;
+            box-sizing: border-box;
+            background: #fafafa;
+        }
+
+        .gantt-item {
+            height: 44px;
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+            position: relative;
+        }
     }
-  }
 }
 
 // .gantt-container {
@@ -116,7 +119,6 @@ $gantt-date-today-color: #FF9F73 !default;
 //     }
 //   }
 
-
 //   .gantt-drag-backdrop {
 //     position: absolute;
 //     top: 0;

diff --git a/packages/gantt/src/gantt.styles.ts b/packages/gantt/src/gantt.styles.ts
@@ -1,5 +1,5 @@
 export const defaultStyles = {
-    lineHeight: 50,
+    lineHeight: 44,
     barHeight: 25,
 };
 

diff --git a/packages/gantt/src/table/column/column.component.ts b/packages/gantt/src/table/column/column.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ContentChild, TemplateRef, Input } from '@angular/core';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
 
 @Component({
     selector: 'ngx-gantt-column',
@@ -7,6 +8,13 @@ import { Component, OnInit, ContentChild, TemplateRef, Input } from '@angular/co
 export class GanttTableColumnComponent implements OnInit {
     @Input() name: string;
 
+    @Input('width')
+    set width(width: number | string) {
+        this.columnWidth = coerceCssPixelValue(width);
+    }
+
+    public columnWidth: string;
+
     @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
 
     constructor() {}

diff --git a/packages/gantt/src/table/gantt-table.component.scss b/packages/gantt/src/table/gantt-table.component.scss
@@ -1,6 +1,6 @@
 $gantt-table-color: #333 !default;
-$gantt-table-td-height: 50px !default;
-$gantt-table-thead-height: 50px !default;
+$gantt-table-td-height: 44px !default;
+$gantt-table-thead-height: 44px !default;
 $gantt-table-td-padding: 0 15px !default;
 $gantt-table-bg: #fff !default;
 $gantt-table-border-color: #eee !default;
@@ -13,8 +13,7 @@ $gantt-table-border-color: #eee !default;
         margin: 0;
         padding: 0;
         table-layout: fixed;
-        border-collapse: separate;
-        border-spacing: 0;
+        border-collapse: collapse;
         color: $gantt-table-color;
         background-color: transparent;
         thead,

diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts
@@ -11,13 +11,18 @@ import {
     OnChanges,
     OnDestroy,
     SimpleChanges,
-    HostBinding
+    HostBinding,
+    ContentChild,
+    TemplateRef,
+    ContentChildren,
+    QueryList
 } from '@angular/core';
 import { GanttUpper } from '../gantt-upper';
 import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 import { GanttLinkDragEvent, GanttDependencyEvent, GanttItemInternal } from '../class';
 import { GanttDomService } from '../gantt-dom.service';
 import { GanttDragContainer } from '../gantt-drag-container';
+import { GanttTableColumnComponent } from './column/column.component';
 
 @Component({
     selector: 'ngx-gantt',
@@ -41,6 +46,10 @@ export class GanttTableComponent extends GanttUpper implements GanttRef, OnInit,
 
     @Output() linkClick = new EventEmitter<GanttDependencyEvent>();
 
+    @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
+
+    @ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
+
     @HostBinding('class.gantt-table') ganttTableClass = true;
 
     constructor(

diff --git a/packages/gantt/src/table/group/group.component.html b/packages/gantt/src/table/group/group.component.html
@@ -1,7 +1,26 @@
 <div class="gantt-table-group-header">
-  <ng-template
-    [ngTemplateOutlet]="groupHeader"
-    [ngTemplateOutletContext]="{ $implicit: group, group: group }"
-  ></ng-template>
+  <ng-container *ngIf="groupHeader; else default">
+    <ng-template
+      [ngTemplateOutlet]="groupHeader"
+      [ngTemplateOutletContext]="{ $implicit: group, group: group.origin }"
+    ></ng-template>
+  </ng-container>
+  <ng-template #default>
+    <div class="gantt-table-group-header-title" (click)="collapseGroup()">
+      <!-- todo -->
+      <span>-></span>
+      <ng-container *ngIf="groupHeaderTitle; else defaultTitle">
+        <ng-template
+          [ngTemplateOutlet]="groupHeaderTitle"
+          [ngTemplateOutletContext]="{ $implicit: group, group: group.origin }"
+        ></ng-template>
+      </ng-container>
+      <ng-template #defaultTitle>
+        <span class="group-title"> {{ group.title }}</span>
+      </ng-template>
+    </div>
+  </ng-template>
+</div>
+<div [hidden]="isCollapse">
+  <ng-content></ng-content>
 </div>
-<ng-content></ng-content>
diff --git a/packages/gantt/src/table/group/group.component.scss b/packages/gantt/src/table/group/group.component.scss
@@ -1,10 +1,14 @@
 .gantt-table-group {
     .gantt-table-group-header {
-        height: 50px;
+        height: 44px;
+        line-height: 44px;
         background: #fafafa;
         vertical-align: middle;
         display: flex;
         align-items: center;
         padding: 0 15px;
+        .gantt-table-group-header-title {
+            cursor: pointer;
+        }
     }
 }
diff --git a/packages/gantt/src/table/group/group.component.ts b/packages/gantt/src/table/group/group.component.ts
@@ -10,9 +10,17 @@ export class GanttTableGroupComponent implements OnInit {
 
     @Input() groupHeader: TemplateRef<any>;
 
+    @Input() groupHeaderTitle: TemplateRef<any>;
+
     @HostBinding('class.gantt-table-group') ganttTableGroupClass = true;
 
+    public isCollapse = false;
+
     constructor(public elementRef: ElementRef<HTMLDivElement>) {}
 
     ngOnInit() {}
+
+    collapseGroup() {
+        this.isCollapse = !this.isCollapse;
+    }
 }
diff --git a/packages/gantt/src/table/items/items.component.html b/packages/gantt/src/table/items/items.component.html
@@ -1,34 +1,30 @@
 <table>
   <tbody>
-    <ng-container *ngFor="let row of items; let i = index">
-      <ng-template
-        [ngTemplateOutlet]="trTemplate"
-        [ngTemplateOutletContext]="{ row: row, index: i, level: 0 }"
-      ></ng-template>
+    <ng-container *ngFor="let row of items">
+      <ng-template [ngTemplateOutlet]="trTemplate" [ngTemplateOutletContext]="{ row: row }"></ng-template>
     </ng-container>
   </tbody>
 </table>
 
-<ng-template #trTemplate let-row="row" let-i="index" let-level="level">
+<ng-template #trTemplate let-row="row">
   <tr>
     <td *ngFor="let column of columns">
       <div [class.text-truncate]="true">
         <ng-template
           [ngTemplateOutlet]="tdTemplate"
           [ngTemplateOutletContext]="{
             column: column,
-            row: row.origin,
-            index: i
+            row: row.origin
           }"
         ></ng-template>
       </div>
     </td>
   </tr>
 </ng-template>
 
-<ng-template #tdTemplate let-column="column" let-row="row" let-index="index">
+<ng-template #tdTemplate let-column="column" let-row="row">
   <ng-template
     [ngTemplateOutlet]="column.templateRef"
-    [ngTemplateOutletContext]="{ $implicit: row, row: row.origin, index: index }"
+    [ngTemplateOutletContext]="{ $implicit: row, row: row.origin }"
   ></ng-template>
 </ng-template>