feat(gantt): add expand icon column(#INFR-6568) (#312)

* feat(gantt): support fixed expand icon assign column(#INFR-6568) * test(gantt): add fixed expand icon test(#INFR-6568) * test(gantt): add fixed expand icon test(#INFR-6568) * feat(gantt): optimize code to expand icon column(#INFR-6568)
worktile · Feb 28, 2023 · 4a1d1be · 4a1d1be
1 parent 23a5dec
commit 4a1d1be
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 10 deletions.
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -45,17 +45,17 @@
       (linkDragEnded)="linkDragEnded($event)"
     >
       <ngx-gantt-table>
-        <ngx-gantt-column name="标题" width="180px">
-          <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
-        </ngx-gantt-column>
         <ngx-gantt-column name="开始时间" width="140px">
           <ng-template #cell let-item="item">
-            {{ item.start * 1000 | date: 'yyyy-MM-dd' }}
+            {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
+        <ngx-gantt-column name="标题" width="180px" [showExpandIcon]="true">
+          <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
+        </ngx-gantt-column>
         <ngx-gantt-column name="截止时间" width="140px">
           <ng-template #cell let-item="item">
-            {{ item.end * 1000 | date: 'yyyy-MM-dd' }}
+            {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
       </ngx-gantt-table>

diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html
@@ -82,8 +82,8 @@
         [ngTemplateOutlet]="rowBeforeTemplate"
         [ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"
       ></ng-template>
-      <div class="gantt-table-column" *ngFor="let column of columnList; let first = first" [style.width]="column.columnWidth">
-        <div *ngIf="first" class="gantt-expand-icon" [style.marginLeft.px]="level * 20">
+      <div class="gantt-table-column" *ngFor="let column of columnList" [style.width]="column.columnWidth">
+        <div *ngIf="expandIconColumn === column?.name" class="gantt-expand-icon" [style.marginLeft.px]="level * 20">
           <ng-container *ngIf="level < gantt.maxLevel - 1 && item.expandable">
             <gantt-icon
               *ngIf="!item.loading"

diff --git a/packages/gantt/src/components/table/gantt-table.component.ts b/packages/gantt/src/components/table/gantt-table.component.ts
@@ -39,16 +39,22 @@ export class GanttTableComponent implements OnChanges {
 
     public dragStartLeft: number;
 
+    public expandIconColumn: string;
+
     @Input() groups: GanttGroupInternal[];
 
     @Input() items: GanttItemInternal[];
 
     @Input()
     set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
+        this.expandIconColumn = columns.toArray()[0]?.name;
         columns.forEach((column) => {
             if (!column.columnWidth) {
                 column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
             }
+            if (column.showExpandIcon) {
+                this.expandIconColumn = column?.name;
+            }
         });
         this.columnList = columns;
     }

diff --git a/packages/gantt/src/components/table/test/table.spec.ts b/packages/gantt/src/components/table/test/table.spec.ts
@@ -11,7 +11,12 @@ import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.compone
     template: `
         <ngx-gantt #gantt [items]="items" [groups]="groups" [selectable]="selectable" [multiple]="multiple">
             <ngx-gantt-table>
-                <ngx-gantt-column [width]="200" name="标题">
+                <ngx-gantt-column name="开始时间" width="140px">
+                    <ng-template #cell let-item="item">
+                        {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
+                    </ng-template>
+                </ngx-gantt-column>
+                <ngx-gantt-column [width]="200" name="标题" [showExpandIcon]="showExpandIcon">
                     <ng-template #cell let-item="item">
                         {{ item.title }}
                     </ng-template>
@@ -34,6 +39,8 @@ export class TestGanttTableComponent {
 
     multiple = true;
 
+    showExpandIcon = true;
+
     constructor() {}
 }
 
@@ -202,4 +209,10 @@ describe('GanttTable', () => {
         itemNode.click();
         expect(selectionModel.selected.length).toEqual(0);
     });
+
+    it('should fixed expand icon column', () => {
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        const column = ganttTable.queryAll(By.css('.gantt-table-item'))[0].queryAll(By.css('.gantt-table-column'))[1];
+        expect(column.nativeElement.querySelector('.gantt-expand-icon').classList.contains('gantt-expand-icon')).toBeTrue();
+    });
 });
diff --git a/packages/gantt/src/table/gantt-column.component.ts b/packages/gantt/src/table/gantt-column.component.ts
@@ -15,6 +15,8 @@ export class NgxGanttTableColumnComponent {
 
     @Input() name: string;
 
+    @Input() showExpandIcon: boolean;
+
     @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
 
     @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;

diff --git a/packages/gantt/src/test/mocks/data.ts b/packages/gantt/src/test/mocks/data.ts
@@ -165,9 +165,19 @@ export function getMockGroupItems() {
                     id: 'item-child-0101',
                     title: 'VERSION Children 0101',
                     start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
-                    group_id: '00001',
+                    group_id: 'item-0101',
                     color: '#FF0000',
-                    linkable: false
+                    linkable: false,
+                    children: [
+                        {
+                            id: 'item-child-010101',
+                            title: 'VERSION Children 010101',
+                            start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+                            group_id: 'item-child-0101',
+                            color: '#FF0000',
+                            linkable: false
+                        }
+                    ]
                 }
             ]
         },