@worktile/gantt 12.0.1 → 12.0.2

package/packages/gantt/src/components/range/range.component.html

@@ -1,8 +0,0 @@
-<ng-container *ngIf="item.start && item.end">
-  <div class="gantt-range-main">
-    <div class="gantt-range-main-progress" *ngIf="item.progress >= 0" [style.width.%]="item.progress * 100"></div>
-  </div>
-  <div class="gantt-range-triangle left"></div>
-  <div class="gantt-range-triangle right"></div>
-  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
-</ng-container>

package/packages/gantt/src/components/range/range.component.scss

@@ -1,35 +0,0 @@
-.gantt-range {
-  position: absolute;
-  z-index: 2;
-  .gantt-range-main {
-    height: 10px;
-    background: #dfdfdf;
-    border: 1px solid #888;
-    border-radius: 4px 4px 0 0;
-    box-sizing: border-box;
-    position: relative;
-    .gantt-range-main-progress {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      background: #888;
-    }
-  }
-  .gantt-range-triangle {
-    width: 0;
-    height: 0;
-    border-top: 7px solid #888;
-    position: absolute;
-    top: 10px;
-
-    &.left {
-      border-right: 6px solid transparent;
-      left: 0;
-    }
-    &.right {
-      border-left: 6px solid transparent;
-      right: 0;
-    }
-  }
-}

package/packages/gantt/src/components/range/range.component.ts

@@ -1,27 +0,0 @@
-import { Component, OnInit, HostBinding, ElementRef, OnChanges, OnDestroy, Inject } from '@angular/core';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-import { GanttItemUpper } from '../../gantt-item-upper';
-
-@Component({
-    selector: 'ngx-gantt-range,gantt-range',
-    templateUrl: './range.component.html'
-})
-export class NgxGanttRangeComponent extends GanttItemUpper implements OnInit, OnChanges, OnDestroy {
-    @HostBinding('class.gantt-range') ganttRangeClass = true;
-
-    constructor(elementRef: ElementRef<HTMLDivElement>, @Inject(GANTT_UPPER_TOKEN) ganttUpper: GanttUpper) {
-        super(elementRef, ganttUpper);
-    }
-
-    ngOnInit() {
-        super.onInit();
-    }
-
-    ngOnChanges(): void {
-        super.onChanges();
-    }
-
-    ngOnDestroy() {
-        super.onDestroy();
-    }
-}

package/packages/gantt/src/components/range/test/range.component.spec.ts

@@ -1,80 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NgxGanttComponent } from '../../../gantt.component';
-import { NgxGanttModule } from '../../../gantt.module';
-import { GanttDate } from '../../../utils/date';
-import { NgxGanttRangeComponent } from '../range.component';
-
-const mockRangeItems = [
-    {
-        id: 'item-0101',
-        title: 'VERSION 0101',
-        start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
-        type: 'range',
-        progress: 0.5,
-        color: '#FF0000',
-        children: [
-            {
-                id: 'item-child-0101',
-                title: 'VERSION Children 0101',
-                start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
-                color: '#FF0000',
-                linkable: false,
-                type: 'range'
-            }
-        ]
-    },
-    {
-        id: 'item-0102',
-        title: 'VERSION 0102',
-        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
-        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
-        color: '#9ACD32',
-        expandable: true,
-        type: 'range'
-    }
-];
-
-@Component({
-    selector: 'test-gantt-range',
-    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
-        <ngx-gantt-table>
-            <ngx-gantt-column name="标题" width="200px">
-                <ng-template #cell let-item="item">
-                    {{ item.title }}
-                </ng-template>
-            </ngx-gantt-column>
-        </ngx-gantt-table>
-    </ngx-gantt>`
-})
-export class TestGanttRangeComponent {
-    constructor() {}
-
-    viewType = 'month';
-
-    items = mockRangeItems;
-}
-
-describe('ngx-gantt-range', () => {
-    let fixture: ComponentFixture<TestGanttRangeComponent>;
-    beforeEach(async () => {
-        TestBed.configureTestingModule({
-            imports: [CommonModule, NgxGanttModule],
-            declarations: [TestGanttRangeComponent]
-        }).compileComponents();
-        fixture = TestBed.createComponent(TestGanttRangeComponent);
-        fixture.detectChanges();
-    });
-
-    it('should render range item', () => {
-        const rangeItems = fixture.debugElement.queryAll(By.directive(NgxGanttRangeComponent));
-        expect(rangeItems.length).toEqual(mockRangeItems.length);
-    });
-
-    it('should has range progress', () => {
-        const rangeProgress = fixture.debugElement.queryAll(By.css('.gantt-range-main-progress'));
-        expect(rangeProgress.length).toEqual(1);
-    });
-});

package/packages/gantt/src/components/table/gantt-table.component.html

@@ -1,105 +0,0 @@
-<div class="gantt-table-header gantt-table-row">
-  <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>
-</div>
-<div class="gantt-table-body">
-  <ng-container *ngIf="!groups.length && !items.length">
-    <ng-container *ngIf="!emptyTemplate">
-      <gantt-icon class="empty-icon" iconName="empty"></gantt-icon>
-      <div class="empty-text">没有数据</div>
-    </ng-container>
-    <ng-template [ngTemplateOutlet]="emptyTemplate"></ng-template>
-  </ng-container>
-
-  <ng-container *ngIf="groups && groups.length > 0; else itemsTemplate">
-    <ng-container *ngFor="let group of groups">
-      <div class="gantt-table-group" [ngClass]="group.class">
-        <div class="gantt-table-group-title" [class.expanded]="group.expanded" (click)="expandGroup(group)">
-          <gantt-icon class="expand-icon" [iconName]="group.expanded ? 'angle-down' : 'angle-right'"></gantt-icon>
-          <ng-container *ngIf="groupTemplate; else default">
-            <ng-template
-              [ngTemplateOutlet]="groupTemplate"
-              [ngTemplateOutletContext]="{ $implicit: group.origin, group: group.origin }"
-            ></ng-template>
-          </ng-container>
-          <ng-template #default>
-            <span class="group-title">{{ group.title }}</span>
-          </ng-template>
-        </div>
-      </div>
-
-      <ng-container *ngIf="group.expanded">
-        <ng-template
-          [ngTemplateOutlet]="ganttItems"
-          [ngTemplateOutletContext]="{ group: group, items: group.items, level: 0 }"
-        ></ng-template>
-      </ng-container>
-    </ng-container>
-  </ng-container>
-</div>
-
-<div
-  class="gantt-table-drag-trigger"
-  cdkDrag
-  cdkDragLockAxis="x"
-  cdkDragBoundary=".gantt"
-  (cdkDragMoved)="dragMoved($event)"
-  (cdkDragStarted)="dragStarted($event)"
-  (cdkDragEnded)="tableDragEnded($event)"
-></div>
-
-<div #dragLine class="gantt-table-drag-auxiliary-line"></div>
-
-<ng-template #itemsTemplate>
-  <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: items, level: 0 }"></ng-template>
-</ng-template>
-
-<ng-template #ganttItems let-group="group" let-items="items" let-level="level">
-  <ng-container *ngFor="let item of items">
-    <div
-      class="gantt-table-item gantt-table-row"
-      [class.gantt-table-item-first-level-group]="level === 0 && (item.type | isGanttRangeItem)"
-      [class.gantt-table-item-with-group]="group"
-      [style.height.px]="gantt.styles.lineHeight"
-      [style.lineHeight.px]="gantt.styles.lineHeight"
-    >
-      <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">
-          <ng-container *ngIf="level < gantt.maxLevel - 1 && item.expandable">
-            <gantt-icon
-              *ngIf="!item.loading"
-              class="expand-icon"
-              [iconName]="item.expanded ? 'angle-down' : 'angle-right'"
-              (click)="expandChildren(item)"
-            ></gantt-icon>
-            <gantt-icon *ngIf="item.loading" [iconName]="'loading'"></gantt-icon>
-          </ng-container>
-        </div>
-        <div class="gantt-table-column-content">
-          <ng-template
-            [ngTemplateOutlet]="column.templateRef"
-            [ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"
-          ></ng-template>
-        </div>
-      </div>
-    </div>
-    <ng-template
-      *ngIf="item.children && item.expanded"
-      [ngTemplateOutlet]="ganttItems"
-      [ngTemplateOutletContext]="{ items: item.children, level: level + 1, group: group }"
-    ></ng-template>
-  </ng-container>
-</ng-template>

package/packages/gantt/src/components/table/gantt-table.component.scss

@@ -1,144 +0,0 @@
-.gantt-table {
-  display: block;
-  &-empty {
-    height: 100%;
-    position: relative;
-    .gantt-table-body {
-      position: absolute;
-      text-align: center;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin-top: 22px;
-      .empty-icon {
-        svg {
-          height: 78px;
-          width: 78px;
-        }
-      }
-      .empty-text {
-        color: #cacaca;
-      }
-    }
-  }
-
-  &-drag-trigger {
-    width: $gantt-table-header-drag-line-width;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    cursor: ew-resize;
-    z-index: 1;
-
-    &:hover {
-      background: $gantt-table-header-drag-line-color;
-      z-index: 2;
-    }
-  }
-
-  &-drag-auxiliary-line {
-    width: $gantt-table-header-drag-line-width;
-    background: $gantt-table-header-drag-line-color;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 100;
-    display: none;
-  }
-
-  .gantt-table-row {
-    display: flex;
-    box-sizing: border-box;
-    border-bottom: 1px solid $gantt-border-color;
-
-    .gantt-table-column {
-      overflow: hidden;
-      border-right: 1px solid $gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-  }
-
-  .gantt-table-header {
-    text-align: center;
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 2;
-    height: $gantt-header-height;
-    line-height: $gantt-header-height;
-
-    .gantt-table-column {
-      font-weight: 400;
-    }
-  }
-
-  .gantt-table-body {
-    .gantt-table-group {
-      display: flex;
-      height: $gantt-group-height;
-      background: $gantt-group-background-color;
-      padding: 0 10px;
-      align-items: center;
-      border-bottom: 1px solid $gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
-
-      .gantt-table-group-title {
-        cursor: pointer;
-
-        .expand-icon {
-          color: #aaa;
-          margin-right: 6px;
-        }
-      }
-    }
-
-    .gantt-table-item {
-      cursor: pointer;
-      &-first-level-group {
-        background: $gantt-group-background-color;
-      }
-
-      &-with-group {
-        .gantt-table-column {
-          &:first-child {
-            padding: 0 15px 0 32px;
-          }
-        }
-      }
-
-      .gantt-table-column {
-        display: flex;
-        padding: $gantt-table-td-padding;
-
-        &:last-child {
-          border-right: none;
-        }
-      }
-
-      .gantt-table-column-content {
-        flex: 1;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &:hover {
-        background-color: $gantt-container-background-color;
-      }
-    }
-
-    .gantt-expand-icon {
-      display: inline-block;
-      width: 20px;
-      color: #aaa;
-    }
-  }
-}

package/packages/gantt/src/components/table/gantt-table.component.ts

@@ -1,166 +0,0 @@
-import {
-    Component,
-    HostBinding,
-    TemplateRef,
-    QueryList,
-    Input,
-    OnInit,
-    ViewChild,
-    ElementRef,
-    OnChanges,
-    SimpleChanges,
-    Inject
-} from '@angular/core';
-import { GanttItemInternal, GanttGroupInternal } from '../../class';
-import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
-// import { defaultColumnWidth, minColumnWidth } from '../../gantt.component';
-import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
-import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../gantt-abstract';
-
-export const defaultColumnWidth = 100;
-export const minColumnWidth = 80;
-
-interface DragFixedConfig {
-    target: HTMLElement;
-    originWidth: number;
-    movedWidth: number;
-    minWidth: number;
-}
-@Component({
-    selector: 'gantt-table',
-    templateUrl: './gantt-table.component.html'
-})
-export class GanttTableComponent implements OnInit, OnChanges {
-    public columnList: QueryList<NgxGanttTableColumnComponent>;
-
-    public dragStartLeft: number;
-
-    @Input() groups: GanttGroupInternal[];
-
-    @Input() items: GanttItemInternal[];
-
-    @Input()
-    set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-            }
-        });
-        this.columnList = columns;
-    }
-
-    @Input() groupTemplate: TemplateRef<any>;
-
-    @Input() emptyTemplate: TemplateRef<any>;
-
-    @ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;
-
-    @HostBinding('class.gantt-table') ganttTableClass = true;
-
-    @HostBinding('class.gantt-table-empty') ganttTableEmptyClass = false;
-
-    constructor(@Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent, private elementRef: ElementRef) {}
-
-    ngOnInit() {}
-
-    ngOnChanges(changes: SimpleChanges) {
-        if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {
-            this.ganttTableEmptyClass = true;
-        } else {
-            this.ganttTableEmptyClass = false;
-        }
-    }
-
-    private dragFixed(config: DragFixedConfig) {
-        if (config.movedWidth < config.minWidth) {
-            config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;
-        }
-    }
-
-    expandGroup(group: GanttGroupInternal) {
-        this.gantt.expandGroup(group);
-    }
-
-    expandChildren(item: GanttItemInternal) {
-        this.gantt.expandChildren(item);
-    }
-
-    dragStarted(event: CdkDragStart) {
-        const target = event.source.element.nativeElement;
-        this.dragStartLeft = target.getBoundingClientRect().left;
-    }
-
-    dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-
-        let originWidth: number;
-        let movedWidth: number;
-        let minWidth: number;
-        if (column) {
-            originWidth = parseInt(column.columnWidth, 10);
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth;
-        } else {
-            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth * this.columnList.length;
-        }
-
-        this.dragFixed({
-            target,
-            originWidth,
-            movedWidth,
-            minWidth
-        });
-
-        this.showAuxiliaryLine(event);
-    }
-
-    columnDragEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
-        const columnWidth = Math.max(width || 0, minColumnWidth);
-        column.columnWidth = coerceCssPixelValue(columnWidth);
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
-        }
-
-        this.hideAuxiliaryLine();
-        event.source.reset();
-    }
-
-    tableDragEnded(event: CdkDragEnd) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-        const dragWidth = left - this.dragStartLeft;
-        this.columnList.forEach((column) => {
-            const lastColumnWidth = parseInt(column.columnWidth, 10);
-            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
-            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
-            column.columnWidth = coerceCssPixelValue(columnWidth);
-        });
-
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
-        }
-
-        this.hideAuxiliaryLine();
-        event.source.reset();
-    }
-
-    private showAuxiliaryLine(event: CdkDragMove) {
-        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
-        const targetRect = event.source.element.nativeElement.getBoundingClientRect();
-        const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
-        this.draglineElementRef.nativeElement.style.left = `${distance.x}px`;
-        this.draglineElementRef.nativeElement.style.display = 'block';
-    }
-
-    private hideAuxiliaryLine() {
-        this.draglineElementRef.nativeElement.style.display = 'none';
-    }
-}

package/packages/gantt/src/components/table/test/table.spec.ts

@@ -1,129 +0,0 @@
-import { fakeAsync, TestBed, ComponentFixture, async, inject, flush } from '@angular/core/testing';
-import { Component, ViewChild, DebugElement } from '@angular/core';
-import { NgxGanttModule } from 'ngx-gantt';
-import { By } from '@angular/platform-browser';
-import { GanttTableComponent } from '../gantt-table.component';
-import { getMockGroupItems, getMockGroups} from '../../../test/mocks/data';
-import { dispatchMouseEvent } from '../../../utils/testing';
-@Component({
-    selector: 'test-gantt-table',
-    template: `
-        <ngx-gantt #gantt [items]="items" [groups]="groups">
-            <ngx-gantt-table>
-                <ngx-gantt-column [width]="200" name="标题">
-                    <ng-template #cell let-item="item">
-                        {{ item.title }}
-                    </ng-template>
-                </ngx-gantt-column>
-            </ngx-gantt-table>
-        </ngx-gantt>
-    `,
-    providers: []
-})
-export class TestGanttTableComponent {
-    @ViewChild(GanttTableComponent, { static: true }) ganttTableComponent: GanttTableComponent;
-
-    items = getMockGroupItems();
-
-    groups = getMockGroups();
-
-    constructor() {}
-}
-
-describe('GanttTable', () => {
-    let component: TestGanttTableComponent;
-    let fixture: ComponentFixture<TestGanttTableComponent>;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            imports: [NgxGanttModule],
-            declarations: [TestGanttTableComponent]
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(TestGanttTableComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create gantt-table', () => {
-        expect(component).toBeDefined();
-        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
-        expect(ganttTable).toBeTruthy();
-        expect(ganttTable.nativeElement).toBeTruthy();
-    });
-
-    it('should expand groups', () => {
-        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
-        expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeTruthy();
-        ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.click();
-        fixture.detectChanges();
-        expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeFalsy();
-    });
-
-    it('should expand children', () => {
-        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
-        const tableChildrenLength = ganttTable.query(By.css('.gantt-table-body')).children.length;
-        ganttTable.nativeElement.querySelector('.gantt-table-item-with-group .gantt-expand-icon .expand-icon').click();
-        fixture.detectChanges();
-        expect(ganttTable.query(By.css('.gantt-table-body')).children.length).toEqual(tableChildrenLength + 1);
-    });
-
-    it('should column drag', fakeAsync(() => {
-        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
-        const dragTrigger = ganttTable.nativeElement.querySelector('.gantt-table-header .gantt-table-column .gantt-table-drag-trigger');
-        fixture.detectChanges();
-        flush();
-
-        const dragTriggerRight = dragTrigger.getBoundingClientRect().right;
-
-        dispatchMouseEvent(dragTrigger, 'mousedown');
-        fixture.detectChanges();
-        flush();
-
-        dispatchMouseEvent(document, 'mousemove', 200);
-        fixture.detectChanges();
-        flush();
-        fixture.detectChanges();
-
-        dispatchMouseEvent(document, 'mousemove', 250);
-        fixture.detectChanges();
-        flush();
-        fixture.detectChanges();
-
-        dispatchMouseEvent(document, 'mouseup');
-        fixture.detectChanges();
-        flush();
-
-        expect(dragTrigger.getBoundingClientRect().right).not.toBe(dragTriggerRight);
-    }));
-
-    it('should table drag', fakeAsync(() => {
-        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
-        const dragTrigger = ganttTable.nativeElement.children[2];
-        fixture.detectChanges();
-
-        const dragTriggerRight = dragTrigger.getBoundingClientRect().right;
-
-        dispatchMouseEvent(dragTrigger, 'mousedown');
-        fixture.detectChanges();
-        flush();
-
-        dispatchMouseEvent(document, 'mousemove', 250, 150);
-        fixture.detectChanges();
-        flush();
-        fixture.detectChanges();
-
-        dispatchMouseEvent(document, 'mousemove', 50, 50);
-        fixture.detectChanges();
-        flush();
-        fixture.detectChanges();
-
-        dispatchMouseEvent(document, 'mouseup');
-        fixture.detectChanges();
-        flush();
-
-        expect(dragTrigger.getBoundingClientRect().left).not.toBe(dragTriggerRight);
-    }));
-});