feat(gantt): optimize code to expand icon column(#INFR-6568)

worktile · Feb 28, 2023 · 1de8641 · 1de8641
1 parent 7f47743
commit 1de8641
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -50,7 +50,7 @@
             {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="标题" width="180px" [fixedExpandIcon]="true">
+        <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">

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="column?.fixedExpandIcon || (!hasFixedExpandIcon && 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,21 +39,21 @@ export class GanttTableComponent implements OnChanges {
 
     public dragStartLeft: number;
 
-    public hasFixedExpandIcon = false;
+    public expandIconColumn: string;
 
     @Input() groups: GanttGroupInternal[];
 
     @Input() items: GanttItemInternal[];
 
     @Input()
     set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
-        this.hasFixedExpandIcon = false;
+        this.expandIconColumn = columns.toArray()[0]?.name;
         columns.forEach((column) => {
             if (!column.columnWidth) {
                 column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
             }
-            if (column.fixedExpandIcon) {
-                this.hasFixedExpandIcon = true;
+            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
@@ -16,7 +16,7 @@ import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.compone
                         {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
                     </ng-template>
                 </ngx-gantt-column>
-                <ngx-gantt-column [width]="200" name="标题" [fixedExpandIcon]="fixedExpandIcon">
+                <ngx-gantt-column [width]="200" name="标题" [showExpandIcon]="showExpandIcon">
                     <ng-template #cell let-item="item">
                         {{ item.title }}
                     </ng-template>
@@ -39,7 +39,7 @@ export class TestGanttTableComponent {
 
     multiple = true;
 
-    fixedExpandIcon = true;
+    showExpandIcon = true;
 
     constructor() {}
 }

diff --git a/packages/gantt/src/table/gantt-column.component.ts b/packages/gantt/src/table/gantt-column.component.ts
@@ -15,7 +15,7 @@ export class NgxGanttTableColumnComponent {
 
     @Input() name: string;
 
-    @Input() fixedExpandIcon: boolean;
+    @Input() showExpandIcon: boolean;
 
     @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;