feat(baseline): #INFR-9182 support baseline template

worktile · Aug 23, 2023 · 32b2295 · 32b2295
1 parent efd980e
commit 32b2295
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 4 deletions.
diff --git a/packages/gantt/src/components/baseline/baseline.component.html b/packages/gantt/src/components/baseline/baseline.component.html
@@ -1 +1,6 @@
-<div #content *ngIf="baselineItem" class="baseline-content"></div>
+<div #content *ngIf="baselineItem" class="baseline-content">
+  <ng-template
+    [ngTemplateOutlet]="template"
+    [ngTemplateOutletContext]="{ item: baselineItem.origin, refs: baselineItem.refs }"
+  ></ng-template>
+</div>
diff --git a/packages/gantt/src/components/baseline/baseline.component.scss b/packages/gantt/src/components/baseline/baseline.component.scss
@@ -2,7 +2,7 @@
 
 .gantt-baseline {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   .baseline-content {
     height: 8px;
     border-radius: 2px;

diff --git a/packages/gantt/src/components/baseline/baseline.component.ts b/packages/gantt/src/components/baseline/baseline.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, Inject, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Inject, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { GanttBaselineItemInternal } from '../../class/baseline';
@@ -11,6 +11,8 @@ import { GanttUpper, GANTT_UPPER_TOKEN } from '../../gantt-upper';
 export class NgxGanttBaselineComponent implements OnInit {
     @Input() baselineItem: GanttBaselineItemInternal;
 
+    @Input() template: TemplateRef<any>;
+
     public unsubscribe$ = new Subject<void>();
 
     @HostBinding('class.gantt-baseline') ganttBaselineClass = true;

diff --git a/packages/gantt/src/components/baseline/test/baseline.component.spec.ts b/packages/gantt/src/components/baseline/test/baseline.component.spec.ts
@@ -64,3 +64,50 @@ describe('ngx-gantt-baseline', () => {
         expect(baselineItems.length).toEqual(mockBaselineItems.length);
     });
 });
+
+@Component({
+    selector: 'test-gantt-baseline-template',
+    template: ` <ngx-gantt #gantt [items]="items" [baselineItems]="baselineItems" [viewType]="viewType">
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+        <ng-template #baseline>
+            <div class="baseline-container"></div>
+        </ng-template>
+    </ngx-gantt>`
+})
+export class TestGanttBaselineTemplateComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockBarItems;
+
+    baselineItems = mockBaselineItems;
+}
+
+describe('ngx-gantt-baseline-template', () => {
+    let fixture: ComponentFixture<TestGanttBaselineComponent>;
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttBaselineComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttBaselineComponent);
+        fixture.detectChanges();
+        await fixture.whenStable();
+        await fixture.whenStable();
+        fixture.detectChanges();
+    });
+
+    it('should render baseline item by template', () => {
+        const baselineItems = fixture.debugElement.queryAll(By.directive(NgxGanttBaselineComponent));
+        expect(baselineItems.length).toEqual(mockBaselineItems.length);
+        const baselineContainer = fixture.debugElement.queryAll(By.css('.baseline-container'));
+        expect(baselineContainer).toBeTruthy();
+    });
+});
diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html
@@ -26,7 +26,11 @@
       <ng-container *ngIf="(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)">
         <gantt-range *ngIf="data.type | isGanttRangeItem" [template]="rangeTemplate" [item]="data"></gantt-range>
         <gantt-bar *ngIf="data.type | isGanttBarItem" [item]="data" [template]="barTemplate" (barClick)="barClick.emit($event)"></gantt-bar>
-        <gantt-baseline *ngIf="ganttUpper.baselineItemsMap[data.id]" [baselineItem]="ganttUpper.baselineItemsMap[data.id]"></gantt-baseline>
+        <gantt-baseline
+          *ngIf="ganttUpper.baselineItemsMap[data.id]"
+          [baselineItem]="ganttUpper.baselineItemsMap[data.id]"
+          [template]="baselineTemplate"
+        ></gantt-baseline>
       </ng-container>
     </div>
   </ng-container>

diff --git a/packages/gantt/src/components/main/gantt-main.component.ts b/packages/gantt/src/components/main/gantt-main.component.ts
@@ -19,6 +19,8 @@ export class GanttMainComponent {
 
     @Input() rangeTemplate: TemplateRef<any>;
 
+    @Input() baselineTemplate: TemplateRef<any>;
+
     @Output() barClick = new EventEmitter<GanttBarClickEvent>();
 
     @Output() lineClick = new EventEmitter<GanttLineClickEvent>();

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -130,6 +130,8 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
 
     @ContentChild('item', { static: true }) itemTemplate: TemplateRef<any>;
 
+    @ContentChild('baseline', { static: true }) baselineTemplate: TemplateRef<any>;
+
     @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
 
     @ContentChild('groupHeader', { static: true }) groupHeaderTemplate: TemplateRef<any>;

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -55,6 +55,7 @@
           [itemTemplate]="itemTemplate"
           [barTemplate]="barTemplate"
           [rangeTemplate]="rangeTemplate"
+          [baselineTemplate]="baselineTemplate"
           (barClick)="barClick.emit($event)"
           (lineClick)="lineClick.emit($event)"
         >