fix: hide items without start and end #INFR-7011 (#334)

* fix: hide items without start and end #INFR-7011 * fix: fix review * fix: fix review
worktile · Mar 23, 2023 · 00d70be · 00d70be
1 parent 25b1487
commit 00d70be
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/packages/gantt/src/components/bar/bar.component.html b/packages/gantt/src/components/bar/bar.component.html
@@ -13,5 +13,5 @@
 <div class="gantt-bar-border"></div>
 <div #content class="gantt-bar-content" (click)="onBarClick($event)">
   <div class="gantt-bar-content-progress" *ngIf="item.progress >= 0" [style.width.%]="item.progress * 100"></div>
-  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
+  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"> </ng-template>
 </div>
diff --git a/packages/gantt/src/components/bar/bar.component.ts b/packages/gantt/src/components/bar/bar.component.ts
@@ -64,6 +64,10 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
         super.ngOnChanges(changes);
         if (!this.firstChange) {
             this.drag.updateItem(this.item);
+
+            if (changes.item.currentValue.refs?.width !== changes.item.previousValue.refs?.width) {
+                this.setContentBackground();
+            }
         }
     }
 
@@ -108,31 +112,33 @@ export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, Afte
     }
 
     private setContentBackground() {
-        const contentElement = this.contentElementRef.nativeElement;
-        const color = this.item.color || barBackground;
-        const style: Partial<CSSStyleDeclaration> = this.item.barStyle || {};
-        if (this.item.origin.start && this.item.origin.end) {
-            style.background = color;
-            style.borderRadius = '';
-        }
-        if (this.item.origin.start && !this.item.origin.end) {
-            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '4px 12.5px 12.5px 4px';
-        }
-        if (!this.item.origin.start && this.item.origin.end) {
-            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '12.5px 4px 4px 12.5px';
-        }
-        if (this.item.progress >= 0) {
-            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress') as HTMLDivElement;
-            style.background = hexToRgb(color, 0.3);
-            style.borderRadius = '';
-            contentProgressElement.style.background = color;
-        }
+        if (this.item.refs?.width) {
+            const contentElement = this.contentElementRef.nativeElement;
+            const color = this.item.color || barBackground;
+            const style: Partial<CSSStyleDeclaration> = this.item.barStyle || {};
+            if (this.item.origin.start && this.item.origin.end) {
+                style.background = color;
+                style.borderRadius = '';
+            }
+            if (this.item.origin.start && !this.item.origin.end) {
+                style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
+                style.borderRadius = '4px 12.5px 12.5px 4px';
+            }
+            if (!this.item.origin.start && this.item.origin.end) {
+                style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
+                style.borderRadius = '12.5px 4px 4px 12.5px';
+            }
+            if (this.item.progress >= 0) {
+                const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress') as HTMLDivElement;
+                style.background = hexToRgb(color, 0.3);
+                style.borderRadius = '';
+                contentProgressElement.style.background = color;
+            }
 
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
+            for (const key in style) {
+                if (style.hasOwnProperty(key)) {
+                    contentElement.style[key] = style[key];
+                }
             }
         }
     }