fix: fix lint error and columns change error

worktile · Mar 15, 2023 · 790860d · 790860d
1 parent 5597411
commit 790860d
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 143 deletions.
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -45,15 +45,15 @@
       (linkDragEnded)="linkDragEnded($event)"
     >
       <ngx-gantt-table>
-        <ngx-gantt-column name="开始时间" width="140px">
+        <ngx-gantt-column name="开始时间" [width]="140">
           <ng-template #cell let-item="item">
             {{ 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">
+        <ngx-gantt-column name="截止时间">
           <ng-template #cell let-item="item">
             {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>

diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -59,7 +59,7 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, expandable: true },
         // { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '000000'], expandable: true },
         { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '0000029'], expandable: true },
-        { id: '000002', title: 'Task 2', start: 1610536397, end: 1610622797 },
+        { id: '000002', title: 'Task 2', start: 1610536397, end: 1610622797, progress: 0.5 },
         { id: '000003', title: 'Task 3', start: 1628507597, end: 1633345997, expandable: true },
         { id: '000004', title: 'Task 4', start: 1624705997, expandable: true },
         { id: '000005', title: 'Task 5', start: 1628075597, end: 1629544397, color: '#709dc1' },
@@ -134,7 +134,6 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
 
     dragEnded(event: GanttDragEvent) {
         this.thyNotify.info('Event: dragEnded', `修改了 [${event.item.title}] 的时间`);
-        // this.items = [...this.items];
     }
 
     selectedChange(event: GanttSelectedEvent) {

diff --git a/packages/gantt/src/components/calendar/grid/calendar-grid.component.ts b/packages/gantt/src/components/calendar/grid/calendar-grid.component.ts
@@ -1,15 +1,4 @@
-import {
-    Component,
-    OnInit,
-    HostBinding,
-    OnChanges,
-    SimpleChanges,
-    OnDestroy,
-    NgZone,
-    Inject,
-    ElementRef,
-    AfterViewInit
-} from '@angular/core';
+import { Component, OnInit, HostBinding, OnChanges, SimpleChanges, OnDestroy, NgZone, Inject, ElementRef } from '@angular/core';
 import { GanttDatePoint } from '../../../class/date-point';
 import { Subject, merge } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -26,7 +15,7 @@ const mainHeight = 5000;
     selector: 'gantt-calendar-grid',
     templateUrl: './calendar-grid.component.html'
 })
-export class GanttCalendarGridComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+export class GanttCalendarGridComponent implements OnInit, OnDestroy {
     get view() {
         return this.ganttUpper.view;
     }
@@ -74,10 +63,6 @@ export class GanttCalendarGridComponent implements OnInit, AfterViewInit, OnChan
         });
     }
 
-    ngAfterViewInit() {}
-
-    ngOnChanges(changes: SimpleChanges): void {}
-
     trackBy(point: GanttDatePoint, index: number) {
         return point.text || index;
     }

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
@@ -39,7 +39,7 @@
           [ngTemplateOutletContext]="{ $implicit: data.origin, item: data.origin }"
         ></ng-template>
 
-        <div class="gantt-table-column" *ngFor="let column of columnList; let first = first" [style.width]="column.columnWidth">
+        <div class="gantt-table-column" *ngFor="let column of columns; let first = first" [style.width]="column.columnWidth">
           <div
             *ngIf="column?.showExpandIcon || (!hasShowExpandIcon && first)"
             class="gantt-expand-icon"

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
@@ -1,4 +1,17 @@
-import { Component, HostBinding, TemplateRef, QueryList, Input, OnInit, Inject, Output, EventEmitter } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import {
+    Component,
+    HostBinding,
+    TemplateRef,
+    QueryList,
+    Input,
+    OnInit,
+    Inject,
+    Output,
+    EventEmitter,
+    OnDestroy,
+    ChangeDetectorRef
+} from '@angular/core';
 import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent } from '../../../class';
 import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
@@ -9,15 +22,15 @@ import { GanttUpper, GANTT_UPPER_TOKEN } from '../../../gantt-upper';
     selector: 'gantt-table-body',
     templateUrl: './gantt-table-body.component.html'
 })
-export class GanttTableBodyComponent implements OnInit {
-    public columnList: QueryList<NgxGanttTableColumnComponent>;
-
+export class GanttTableBodyComponent implements OnInit, OnDestroy {
     public hasGroup: boolean;
 
     public flatData: (GanttGroupInternal | GanttItemInternal)[];
 
     public hasShowExpandIcon = false;
 
+    private unsubscribe$ = new Subject<void>();
+
     @Input() set tempData(data: (GanttGroupInternal | GanttItemInternal)[]) {
         const firstData = data[0];
         if (firstData && firstData.hasOwnProperty('items')) {
@@ -27,19 +40,7 @@ export class GanttTableBodyComponent implements OnInit {
         this.flatData = data;
     }
 
-    @Input()
-    set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
-        this.hasShowExpandIcon = false;
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-            }
-            if (column.showExpandIcon) {
-                this.hasShowExpandIcon = true;
-            }
-        });
-        this.columnList = columns;
-    }
+    @Input() columns: QueryList<NgxGanttTableColumnComponent>;
 
     @Input() groupTemplate: TemplateRef<any>;
 
@@ -57,10 +58,29 @@ export class GanttTableBodyComponent implements OnInit {
 
     constructor(
         @Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent,
-        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
+        private cdr: ChangeDetectorRef
     ) {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        this.columnsChange();
+        this.columns.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.columnsChange();
+            this.cdr.detectChanges();
+        });
+    }
+
+    private columnsChange() {
+        this.hasShowExpandIcon = false;
+        this.columns.forEach((column) => {
+            if (!column.columnWidth) {
+                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+            }
+            if (column.showExpandIcon) {
+                this.hasShowExpandIcon = true;
+            }
+        });
+    }
 
     expandGroup(group: GanttGroupInternal) {
         this.gantt.expandGroup(group);
@@ -74,4 +94,9 @@ export class GanttTableBodyComponent implements OnInit {
     trackBy(item: GanttGroupInternal | GanttItemInternal, index: number) {
         return item.id || index;
     }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
 }
diff --git a/packages/gantt/src/components/table/gantt-table.scss b/packages/gantt/src/components/table/gantt-table.scss
@@ -9,9 +9,9 @@
   position: relative;
   z-index: 3;
   border-right: 1px solid variables.$gantt-border-color;
-
   .gantt-table-column {
     font-weight: 400;
+    z-index: 1;
   }
 }
 
@@ -54,10 +54,6 @@
     .gantt-table-column {
       display: flex;
       padding: variables.$gantt-table-td-padding;
-
-      &:last-child {
-        border-right: none;
-      }
     }
 
     .gantt-table-column-content {

diff --git a/packages/gantt/src/components/table/header/gantt-table-header.component.html b/packages/gantt/src/components/table/header/gantt-table-header.component.html
@@ -1,17 +1,19 @@
-<div class="gantt-table-column" *ngFor="let column of columnList; let i = index" [style.width]="column.columnWidth">
-  <ng-container *ngIf="column.headerTemplateRef; else default" [ngTemplateOutlet]="column.headerTemplateRef"></ng-container>
-  <ng-template #default>
-    {{ column.name }}
-  </ng-template>
-  <div
-    class="gantt-table-drag-trigger"
-    cdkDrag
-    cdkDragLockAxis="x"
-    cdkDragBoundary=".gantt"
-    (cdkDragMoved)="dragMoved($event, column)"
-    (cdkDragStarted)="dragStarted($event)"
-    (cdkDragEnded)="columnDragEnded($event, column)"
-  ></div>
+<div class="d-flex">
+  <div class="gantt-table-column" *ngFor="let column of columns; let i = index" [style.width]="column.columnWidth">
+    <ng-container *ngIf="column.headerTemplateRef; else default" [ngTemplateOutlet]="column.headerTemplateRef"> </ng-container>
+    <ng-template #default>
+      {{ column.name }}
+    </ng-template>
+    <div
+      class="gantt-table-drag-trigger"
+      cdkDrag
+      cdkDragLockAxis="x"
+      cdkDragBoundary=".gantt"
+      (cdkDragMoved)="dragMoved($event, column)"
+      (cdkDragStarted)="dragStarted($event)"
+      (cdkDragEnded)="columnDragEnded($event, column)"
+    ></div>
+  </div>
 </div>
 
 <div

diff --git a/packages/gantt/src/components/table/header/gantt-table-header.component.ts b/packages/gantt/src/components/table/header/gantt-table-header.component.ts
@@ -1,9 +1,21 @@
-import { Component, HostBinding, QueryList, Input, OnInit, ViewChild, ElementRef, AfterViewInit, Inject } from '@angular/core';
+import {
+    Component,
+    HostBinding,
+    QueryList,
+    Input,
+    OnInit,
+    ViewChild,
+    ElementRef,
+    Inject,
+    OnDestroy,
+    ChangeDetectorRef
+} from '@angular/core';
 import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
 import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../../gantt-abstract';
 import { setStyleWithVendorPrefix } from '../../../utils/set-style-with-vendor-prefix';
+import { Subject, takeUntil } from 'rxjs';
 
 export const defaultColumnWidth = 100;
 export const minColumnWidth = 80;
@@ -17,33 +29,42 @@ interface DragFixedConfig {
     selector: 'gantt-table-header',
     templateUrl: './gantt-table-header.component.html'
 })
-export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
-    public columnList: QueryList<NgxGanttTableColumnComponent>;
-
+export class GanttTableHeaderComponent implements OnInit, OnDestroy {
     public dragStartLeft: number;
 
     public tableWidth = 0;
 
-    @Input()
-    set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-            }
-        });
-        this.columnList = columns;
-    }
+    private unsubscribe$ = new Subject<void>();
+
+    @Input() columns: QueryList<NgxGanttTableColumnComponent>;
 
     @ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;
 
     @HostBinding('class') className = `gantt-table-header gantt-table-row`;
 
-    constructor(private elementRef: ElementRef, @Inject(GANTT_ABSTRACT_TOKEN) private gantt: GanttAbstractComponent) {}
-
-    ngOnInit() {}
+    constructor(
+        private elementRef: ElementRef,
+        @Inject(GANTT_ABSTRACT_TOKEN) private gantt: GanttAbstractComponent,
+        private cdr: ChangeDetectorRef
+    ) {}
+
+    ngOnInit() {
+        this.columnsChange();
+        this.columns.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.columnsChange();
+            this.cdr.detectChanges();
+        });
+    }
 
-    ngAfterViewInit() {
-        this.tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+    private columnsChange() {
+        let tableWidth = 0;
+        this.columns.forEach((column) => {
+            if (!column.columnWidth) {
+                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+            }
+            tableWidth += Number(column.columnWidth.replace('px', ''));
+        });
+        this.tableWidth = tableWidth;
     }
 
     private dragFixed(config: DragFixedConfig) {
@@ -75,7 +96,7 @@ export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
         } else {
             originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
             movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth * this.columnList.length;
+            minWidth = minColumnWidth * this.columns.length;
         }
 
         this.dragFixed({
@@ -96,10 +117,11 @@ export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
         const columnWidth = Math.max(width || 0, minColumnWidth);
         column.columnWidth = coerceCssPixelValue(columnWidth);
         if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+            this.gantt.table.columnChanges.emit({ columns: this.columns });
         }
 
         this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
+        console.log(this.tableWidth);
         this.hideAuxiliaryLine();
         event.source.reset();
     }
@@ -110,7 +132,7 @@ export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
         const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
         const dragWidth = left - this.dragStartLeft;
         let tempWidth = 0;
-        this.columnList.forEach((column) => {
+        this.columns.forEach((column) => {
             const lastColumnWidth = parseInt(column.columnWidth, 10);
             const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
             const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
@@ -119,7 +141,7 @@ export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
         });
         this.tableWidth = tempWidth;
         if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+            this.gantt.table.columnChanges.emit({ columns: this.columns });
         }
 
         this.hideAuxiliaryLine();
@@ -137,4 +159,9 @@ export class GanttTableHeaderComponent implements OnInit, AfterViewInit {
     private hideAuxiliaryLine() {
         this.draglineElementRef.nativeElement.style.display = 'none';
     }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
 }