feat: support column inherits the class when gantt-table-column sets …

…class #INFR-6999
worktile · Mar 24, 2023 · 81f37c9 · 81f37c9
1 parent 00d70be
commit 81f37c9
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -48,7 +48,7 @@
       (linkDragEnded)="linkDragEnded($event)"
     >
       <ngx-gantt-table [draggable]="true" [dropEnterPredicate]="dropEnterPredicate" (dragDropped)="onDragDropped($event)">
-        <ngx-gantt-column name="开始时间" [width]="140">
+        <ngx-gantt-column name="开始时间" [class.start-time]="true" [width]="140">
           <ng-template #cell let-item="item">
             {{ item.id }}
           </ng-template>

diff --git a/packages/gantt/src/components/table/body/gantt-table-body.component.html b/packages/gantt/src/components/table/body/gantt-table-body.component.html
@@ -52,7 +52,7 @@
           [ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"
         ></ng-template>
 
-        <div class="gantt-table-column" *ngFor="let column of columns; let first = first" [style.width]="column.columnWidth">
+        <div [classList]="column.classList" *ngFor="let column of columns; let first = first" [style.width]="column.columnWidth">
           <!-- drag icon -->
           <gantt-icon
             *ngIf="first && draggable"

diff --git a/packages/gantt/src/components/table/body/gantt-table-body.component.ts b/packages/gantt/src/components/table/body/gantt-table-body.component.ts
@@ -106,6 +106,7 @@ export class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit
         this.columns.changes.pipe(startWith(this.columns), takeUntil(this.destroy$)).subscribe(() => {
             this.hasExpandIcon = false;
             this.columns.forEach((column) => {
+                column.classList.add('gantt-table-column');
                 if (!column.columnWidth) {
                     column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
                 }

diff --git a/packages/gantt/src/table/gantt-column.component.ts b/packages/gantt/src/table/gantt-column.component.ts
@@ -1,4 +1,4 @@
-import { Component, ContentChild, TemplateRef, Input, Inject } from '@angular/core';
+import { Component, ContentChild, TemplateRef, Input, Inject, ElementRef } from '@angular/core';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { GanttUpper, GANTT_UPPER_TOKEN } from '../gantt-upper';
 @Component({
@@ -21,5 +21,9 @@ export class NgxGanttTableColumnComponent {
 
     @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;
 
-    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper, private elementRef: ElementRef) {}
+
+    get classList(): DOMTokenList {
+        return this.elementRef.nativeElement.classList;
+    }
 }
diff --git a/packages/gantt/src/test/gantt.component.spec.ts b/packages/gantt/src/test/gantt.component.spec.ts
@@ -66,7 +66,13 @@ const config = {
             <ng-template #rowAfterSlot>
                 <div class="row-after"></div>
             </ng-template>
-            <ngx-gantt-column name="标题" width="200px">
+            <ngx-gantt-column
+                name="标题"
+                width="200px"
+                [class.title-name]="true"
+                [ngClass]="{ 'title-name-2': true }"
+                [class]="'title-name-3'"
+            >
                 <ng-template #cell let-item="item">
                     {{ item.title }}
                 </ng-template>
@@ -464,6 +470,17 @@ describe('ngx-gantt', () => {
             loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
             expect(loaderDom).toBeFalsy();
         }));
+
+        it('should column inherits the class when gantt-table-column sets class"', fakeAsync(() => {
+            const newItems = mockItems.slice(0, 1);
+            ganttComponentInstance.items = [...newItems];
+            fixture.detectChanges();
+            const ganttTable: DebugElement = ganttDebugElement.query(By.directive(GanttTableBodyComponent));
+            const ganttTableColumn = ganttTable.query(By.css('.gantt-table-column')).nativeElement;
+            expect(ganttTableColumn.classList).toContain('title-name');
+            expect(ganttTableColumn.classList).toContain('title-name-2');
+            expect(ganttTableColumn.classList).toContain('title-name-3');
+        }));
     });
 
     describe('#with groups', () => {