feat: gantt table component

worktile · May 27, 2020 · 742f094 · 742f094
1 parent a5082ec
commit 742f094
Show file tree

Hide file tree

Showing 17 changed files with 539 additions and 438 deletions.
diff --git a/packages/gantt/src/bar/bar.component.html b/packages/gantt/src/bar/bar.component.html
@@ -1 +1,19 @@
-<p>bar works!</p>
+<div class="gantt-bar-layer">
+  <div class="drag-handles">
+    <ng-container>
+      <span class="handle"></span>
+      <span class="handle"></span>
+    </ng-container>
+  </div>
+  <div class="dependency-handles">
+    <span class="handle"><span class="point"></span></span>
+    <span class="handle"> <span class="point"></span></span>
+  </div>
+</div>
+<div class="gantt-bar-border"></div>
+<div class="gantt-bar-content">
+  <ng-template
+    [ngTemplateOutlet]="template"
+    [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"
+  ></ng-template>
+</div>
diff --git a/packages/gantt/src/bar/bar.component.scss b/packages/gantt/src/bar/bar.component.scss
@@ -0,0 +1,160 @@
+$gantt-bar-layer-append-width: 32px;
+$gantt-bar-layer-append-height: 42px;
+$gantt-bar-dependency-height: 16px;
+$gantt-bar-dependency-drop-border: 5px;
+
+@mixin dependency-handles {
+  .dependency-handles {
+    .handle {
+      position: absolute;
+      display: inline-block;
+      cursor: pointer;
+      width: $gantt-bar-dependency-height;
+      height: $gantt-bar-dependency-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1001;
+
+      &:first-child {
+        left: 0;
+        top: 0;
+      }
+
+      &:last-child {
+        right: 0;
+        bottom: 0;
+      }
+
+      .point {
+        color: #348fe4;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #348fe4;
+        transition: 0.3 ease;
+
+        &:hover {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+}
+
+@mixin drag-handles {
+  .drag-handles {
+    background: $gantt-bar-layer-bg;
+    width: 100%;
+    height: calc(100% - #{$gantt-bar-dependency-height} * 2);
+    position: absolute;
+    border-radius: 4px;
+    top: $gantt-bar-dependency-height;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+
+    .handle {
+      width: 15px;
+      height: 100%;
+      position: absolute;
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:before,
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: $gantt-bar-handle-height;
+        background: $gantt-bar-handle-color;
+      }
+
+      &::before {
+        margin-right: 2px;
+      }
+
+      &:first-child {
+        left: 0;
+      }
+
+      &:last-child {
+        right: 0;
+      }
+    }
+  }
+}
+
+@mixin active-bar {
+  z-index: 1000;
+
+  .gantt-bar-layer {
+    display: block;
+    z-index: 1;
+  }
+
+  .gantt-bar-content {
+    z-index: 1;
+    box-shadow: none;
+  }
+
+  .cdk-drag {
+    transition: none;
+  }
+}
+
+.gantt-bar {
+  position: absolute;
+  background-color: $gantt-item-bg-color;
+  border-radius: 4px;
+  z-index: 1;
+  background: #348fe4;
+
+  .gantt-bar-layer {
+    width: calc(100% + #{$gantt-bar-layer-append-width});
+    height: calc(100% + #{$gantt-bar-layer-append-height});
+    position: absolute;
+    border-radius: 4px;
+    left: $gantt-bar-layer-append-width / 2 * -1;
+    top: $gantt-bar-layer-append-height / 2 * -1;
+    display: none;
+    @include drag-handles();
+    @include dependency-handles();
+  }
+
+  .gantt-bar-border {
+    width: calc(100% + #{$gantt-bar-dependency-drop-border} * 2);
+    height: calc(100% + #{$gantt-bar-dependency-drop-border} * 2);
+    position: absolute;
+    border-radius: 4px;
+    left: $gantt-bar-dependency-drop-border * -1;
+    top: $gantt-bar-dependency-drop-border * -1;
+    display: none;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .gantt-bar-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+
+  &-active {
+    @include active-bar();
+  }
+
+  &-dependency-drop {
+    .gantt-bar-border {
+      display: block;
+    }
+
+    .gantt-bar-content {
+      box-shadow: none;
+    }
+  }
+}
diff --git a/packages/gantt/src/bar/bar.component.ts b/packages/gantt/src/bar/bar.component.ts
@@ -1,11 +1,61 @@
-import { Component, OnInit } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    Input,
+    TemplateRef,
+    HostBinding,
+    ElementRef,
+    OnChanges,
+    SimpleChanges,
+    OnDestroy,
+    Inject,
+} from '@angular/core';
+import { GanttItemInternal } from '../class/item';
+import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
     selector: 'gantt-bar',
     templateUrl: './bar.component.html',
 })
-export class GanttBarComponent implements OnInit {
-    constructor() {}
+export class GanttBarComponent implements OnInit, OnChanges, OnDestroy {
+    @Input() item: GanttItemInternal;
 
-    ngOnInit() {}
+    @Input() template: TemplateRef<any>;
+
+    @HostBinding('class.gantt-bar') ganttItemClass = true;
+
+    private firstChange = true;
+
+    private unsubscribe$ = new Subject();
+
+    constructor(private elementRef: ElementRef<HTMLDivElement>, @Inject(GANTT_REF_TOKEN) public ganttRef: GanttRef) {}
+
+    ngOnInit() {
+        this.firstChange = false;
+
+        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.updatePositions();
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!this.firstChange) {
+            this.updatePositions();
+        }
+    }
+
+    private updatePositions() {
+        const element = this.elementRef.nativeElement;
+        element.style.left = this.item.refs.x + 'px';
+        element.style.top = this.item.refs.y + 'px';
+        element.style.width = this.item.refs.width + 'px';
+        element.style.height = this.ganttRef.styles.barHeight + 'px';
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
 }
diff --git a/packages/gantt/src/calendar/calendar.component.html b/packages/gantt/src/calendar/calendar.component.html
@@ -1,5 +1,5 @@
 <svg [attr.width]="view.width" [attr.height]="height">
-  <g class="date">
+  <g>
     <text
       class="primary-text"
       *ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
@@ -27,8 +27,18 @@
         class="primary-line"
       ></line>
     </g>
+
+    <g>
+      <line
+        [attr.x1]="0"
+        [attr.x2]="view.width"
+        [attr.y1]="headerHeight"
+        [attr.y2]="headerHeight"
+        class="header-line"
+      ></line>
+    </g>
   </g>
-  <g class="date">
+  <g>
     <g *ngIf="view.showTimeline">
       <line
         *ngFor="let point of view.secondaryDatePoints; let i = index; trackBy: trackBy"

diff --git a/packages/gantt/src/calendar/calendar.component.scss b/packages/gantt/src/calendar/calendar.component.scss
@@ -1,51 +1,54 @@
 .gantt-calendar-overlay {
   display: block;
   height: 100%;
+  overflow: hidden;
 
   line {
     shape-rendering: crispEdges;
   }
 
-  .date {
-    .primary-text {
-      fill: $gantt-date-primary-color;
-      font-size: $gantt-date-primary-font-size;
-    }
+  .primary-text {
+    fill: $gantt-date-primary-color;
+    font-size: $gantt-date-primary-font-size;
+  }
 
-    .secondary-text {
-      fill: $gantt-date-secondary-color;
-      font-size: $gantt-date-secondary-font-size;
+  .secondary-text {
+    fill: $gantt-date-secondary-color;
+    font-size: $gantt-date-secondary-font-size;
 
-      &-weekend {
-        fill: $gantt-date-secondary-weekend-color;
-      }
+    &-weekend {
+      fill: $gantt-date-secondary-weekend-color;
     }
+  }
 
-    .primary-text,
-    .secondary-text {
-      text-anchor: middle;
-    }
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
 
-    .primary-line {
-      stroke: $gantt-border-color;
-    }
+  .primary-line {
+    stroke: $gantt-border-color;
+  }
 
-    .secondary-line {
-      stroke-dasharray: 2px 3px;
-      stroke: $gantt-date-secondary-border-color;
-    }
+  .secondary-line {
+    stroke-dasharray: 2px 3px;
+    stroke: $gantt-date-secondary-border-color;
+  }
 
-    .secondary-backdrop {
-      fill: $gantt-date-week-backdrop-bg;
-    }
+  .header-line {
+    stroke: $gantt-border-color;
+  }
 
-    .today-line-angle {
-      fill: $gantt-date-today-color;
-    }
+  .secondary-backdrop {
+    fill: $gantt-date-week-backdrop-bg;
+  }
 
-    .today-line {
-      stroke: $gantt-date-today-color;
-      stroke-width: 2px;
-    }
+  .today-line-angle {
+    fill: $gantt-date-today-color;
+  }
+
+  .today-line {
+    stroke: $gantt-date-today-color;
+    stroke-width: 2px;
   }
 }
diff --git a/packages/gantt/src/calendar/calendar.component.ts b/packages/gantt/src/calendar/calendar.component.ts
@@ -21,6 +21,8 @@ import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
     public height = 500;
 
+    public headerHeight = 60;
+
     public todayPoint: {
         x: number;
         angle: string;