@progress/kendo-angular-gantt 0.2.1-dev.202112091019 → 0.3.0-dev.202201111723

package/dist/es2015/dependencies/utils.js

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { DependencyType } from '../models/dependency-type.enum';
 /**
  * @hidden
  *
@@ -45,9 +46,9 @@ export const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBefo
               |       |
         [[[]]]-       -[[[]]]
      */
-    if (type === 0 /* FF */ || type === 3 /* SS */) {
+    if (type === DependencyType.FF || type === DependencyType.SS) {
         // polyline start from first task
-        const dir = type === 3 /* SS */ ? 'left' : 'right';
+        const dir = type === DependencyType.SS ? 'left' : 'right';
         top = from.top;
         left = from[dir];
         points.push({ top, left });
@@ -73,9 +74,9 @@ export const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBefo
                                     |
                                     -[[[]]]
         */
-        const startDir = type === 2 /* SF */ ? 'left' : 'right';
-        const endDir = type === 2 /* SF */ ? 'right' : 'left';
-        const additionalTurn = type === 2 /* SF */
+        const startDir = type === DependencyType.SF ? 'left' : 'right';
+        const endDir = type === DependencyType.SF ? 'right' : 'left';
+        const additionalTurn = type === DependencyType.SF
             ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
             : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
         // polyline start from first task

package/dist/es2015/editing/add-task.component.d.ts

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PreventableEvent } from '@progress/kendo-angular-treelist';
+import { GanttAddTaskActionItem } from '../models/events/task-add-event.interface';
+import { EditService } from './edit.service';
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+export declare class GanttAddTaskComponent {
+    private localizationService;
+    private editService;
+    private ngZone;
+    /**
+     * Sets the data of the DropDownButton.
+     * > The data has to be provided in an array-like list.
+     */
+    data: GanttAddTaskActionItem[];
+    /**
+     * Defines the name of an existing icon in a Kendo UI theme.
+     * @default 'plus'
+     */
+    icon: string;
+    constructor(localizationService: LocalizationService, editService: EditService, ngZone: NgZone);
+    /**
+     * @hidden
+     */
+    getText(message: string): string;
+    /**
+     * @hidden
+     */
+    handleOpen(e: PreventableEvent): void;
+    /**
+     * @hidden
+     */
+    handleMouseClick(): void;
+    /**
+     * @hidden
+     */
+    handleItemClick(e: any): void;
+}

package/dist/es2015/editing/add-task.component.js

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, Input, NgZone } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { EditService } from './edit.service';
+/**
+ * The UI for adding new items to the Gantt.
+ * Use it within a toolbar template to provide a custom icon or list of options.
+ */
+let GanttAddTaskComponent = class GanttAddTaskComponent {
+    constructor(localizationService, editService, ngZone) {
+        this.localizationService = localizationService;
+        this.editService = editService;
+        this.ngZone = ngZone;
+        /**
+         * Sets the data of the DropDownButton.
+         * > The data has to be provided in an array-like list.
+         */
+        this.data = [{
+                text: this.getText('addChildText'),
+                type: 'addChild'
+            }, {
+                text: this.getText('addAboveText'),
+                type: 'addAbove'
+            }, {
+                text: this.getText('addBelowText'),
+                type: 'addBelow'
+            }];
+        /**
+         * Defines the name of an existing icon in a Kendo UI theme.
+         * @default 'plus'
+         */
+        this.icon = 'plus';
+    }
+    /**
+     * @hidden
+     */
+    getText(message) {
+        return this.localizationService.get(message);
+    }
+    /**
+     * @hidden
+     */
+    handleOpen(e) {
+        if (!this.editService.getSelectedItem()) {
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleMouseClick() {
+        if (!this.editService.getSelectedItem()) {
+            this.ngZone.run(() => {
+                this.editService.addEvent.next({
+                    selectedItem: null,
+                    actionType: 'addTask'
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleItemClick(e) {
+        this.editService.addEvent.next({
+            actionType: e.type,
+            selectedItem: null
+        });
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], GanttAddTaskComponent.prototype, "data", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], GanttAddTaskComponent.prototype, "icon", void 0);
+GanttAddTaskComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-gantt-add-task',
+        template: `
+        <kendo-dropdownbutton
+            [data]="data"
+            [icon]="icon"
+            [kendoEventsOutsideAngular]="{ click: handleMouseClick }"
+            [scope]="this"
+            (itemClick)="handleItemClick($event)"
+            (open)="handleOpen($event)">
+            {{ getText('addTaskText') }}
+        </kendo-dropdownbutton>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        EditService,
+        NgZone])
+], GanttAddTaskComponent);
+export { GanttAddTaskComponent };

package/dist/es2015/editing/dependencies-table.component.d.ts

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from '@angular/core';
+import { FormArray, FormControl } from '@angular/forms';
+import { MappingService } from '../common/mapping.service';
+import { GanttLocalizationService } from '../localization/gantt-localization.service';
+import { EditService } from './edit.service';
+/**
+ * @hidden
+ */
+export declare class DependenciesTableComponent {
+    mapper: MappingService;
+    editService: EditService;
+    private localizationService;
+    tasks: any[];
+    dependencies: any[];
+    dependencyType: 'predecessor' | 'successor';
+    dependenciesChange: EventEmitter<any>;
+    selectedKeys: any[];
+    formGroups: FormArray;
+    dependencyTypes: {
+        type: string;
+        id: number;
+    }[];
+    readonly taskId: number;
+    readonly dependencyIdField: string;
+    constructor(mapper: MappingService, editService: EditService, localizationService: GanttLocalizationService);
+    ngOnInit(): void;
+    getFormControl(dataItemIndex: number, field: string): FormControl;
+    getText(token: string): string;
+    getDependencyTypes(): {
+        type: string;
+        id: number;
+    }[];
+    addHandler(): void;
+    removeHandler(): void;
+}

package/dist/es2015/editing/dependencies-table.component.js

@@ -0,0 +1,160 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MappingService } from '../common/mapping.service';
+import { GanttLocalizationService } from '../localization/gantt-localization.service';
+import { DependencyType } from '../models/dependency-type.enum';
+import { EditService } from './edit.service';
+/**
+ * @hidden
+ */
+let DependenciesTableComponent = class DependenciesTableComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+        this.dependenciesChange = new EventEmitter();
+        this.selectedKeys = [];
+        this.formGroups = new FormArray([]);
+        this.dependencyTypes = this.getDependencyTypes();
+    }
+    get taskId() {
+        return this.editService.dataItem.id;
+    }
+    // The target dependency id field
+    // e.g. if Predecessors, we have the `fromId` which is the currently edited task,
+    // while the `toId` is missing (needs to be selected by the user)
+    get dependencyIdField() {
+        return this.dependencyType === 'predecessor' ? 'fromId' : 'toId';
+    }
+    ngOnInit() {
+        // generate the FormGroups per each Grid row
+        if (this.formGroups.controls.length === 0) {
+            const fields = this.mapper.dependencyFields;
+            this.dependencies.forEach(item => {
+                const formGroup = new FormGroup({
+                    [fields.id]: new FormControl(this.mapper.extractFromDependency(item, 'id')),
+                    [fields.fromId]: new FormControl(this.mapper.extractFromDependency(item, 'fromId'), Validators.required),
+                    [fields.toId]: new FormControl(this.mapper.extractFromDependency(item, 'toId'), Validators.required),
+                    [fields.type]: new FormControl(this.mapper.extractFromDependency(item, 'type'), Validators.required)
+                });
+                this.formGroups.push(formGroup);
+            });
+        }
+        this.formGroups.valueChanges.subscribe(val => {
+            this.formGroups.controls.forEach(control => {
+                if (control.dirty) {
+                    this.editService.updateDependencies(control.value);
+                }
+            });
+            this.dependenciesChange.emit(val);
+        });
+    }
+    getFormControl(dataItemIndex, field) {
+        // return the FormControl for the respective column editor
+        return this.formGroups.controls
+            .find((_control, index) => index === dataItemIndex)
+            .get(this.mapper.dependencyFields[field]);
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+    getDependencyTypes() {
+        const types = Object.keys(DependencyType)
+            .filter(value => typeof DependencyType[value] === 'number')
+            .map(type => {
+            return {
+                type,
+                id: DependencyType[type]
+            };
+        });
+        return types;
+    }
+    addHandler() {
+        const fields = this.mapper.dependencyFields;
+        const formGroup = new FormGroup({
+            [fields.id]: new FormControl(),
+            [fields.fromId]: new FormControl(this.dependencyIdField === 'toId' ? this.taskId : null, Validators.required),
+            [fields.toId]: new FormControl(this.dependencyIdField === 'fromId' ? this.taskId : null, Validators.required),
+            [fields.type]: new FormControl(null, Validators.required)
+        });
+        this.formGroups.push(formGroup);
+    }
+    removeHandler() {
+        const [selectedIndex] = this.selectedKeys;
+        const item = this.formGroups.at(selectedIndex).value;
+        this.editService.deleteDependency(item);
+        this.formGroups.removeAt(selectedIndex);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], DependenciesTableComponent.prototype, "tasks", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], DependenciesTableComponent.prototype, "dependencies", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], DependenciesTableComponent.prototype, "dependencyType", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], DependenciesTableComponent.prototype, "dependenciesChange", void 0);
+DependenciesTableComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-gantt-dependencies-table',
+        template: `
+        <kendo-grid
+            [data]="dependencies"
+            [selectable]="{ mode: 'single' }"
+            [(selectedKeys)]="selectedKeys"
+            kendoGridSelectBy
+            [height]="295"
+        >
+            <ng-template kendoGridToolbarTemplate>
+                <button kendoButton (click)="addHandler()">
+                    {{ getText('taskEditingDependenciesAddButtonText') }}
+                </button>
+                <button kendoButton (click)="removeHandler()" [disabled]="selectedKeys.length === 0">
+                    {{ getText('taskEditingDependenciesRemoveButtonText') }}
+                </button>
+            </ng-template>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridNameColumnTitle')" [field]="dependencyIdField">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="tasks"
+                        textField="title"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+            <kendo-grid-column [title]="getText('taskEditingDependenciesGridTypeColumnTitle')" field="type">
+                <ng-template kendoGridCellTemplate let-dataItem="dataItem" let-column="column" let-rowIndex="rowIndex">
+                    <kendo-dropdownlist
+                        [data]="dependencyTypes"
+                        textField="type"
+                        valueField="id"
+                        [valuePrimitive]="true"
+                        [formControl]="getFormControl(rowIndex, column.field)"
+                    >
+                    </kendo-dropdownlist>
+                </ng-template>
+            </kendo-grid-column>
+        </kendo-grid>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], DependenciesTableComponent);
+export { DependenciesTableComponent };

package/dist/es2015/editing/edit-dialog.component.d.ts

@@ -2,9 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { FormGroup } from '@angular/forms';
+import { ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { MappingService } from '../common/mapping.service';
+import { GanttDependency } from '../models/models';
 import { EditService } from './edit.service';
 /**
  * @hidden
@@ -12,10 +13,16 @@ import { EditService } from './edit.service';
 export declare class EditDialogComponent {
     mapper: MappingService;
     editService: EditService;
+    cdr: ChangeDetectorRef;
     private localizationService;
-    formGroup: FormGroup;
-    constructor(mapper: MappingService, editService: EditService, localizationService: LocalizationService);
+    data: any[];
+    loadedTasks: any[];
+    constructor(mapper: MappingService, editService: EditService, cdr: ChangeDetectorRef, localizationService: LocalizationService);
+    ngOnInit(): void;
+    predecessors: GanttDependency[];
+    successors: GanttDependency[];
     getText(token: string): string;
+    getDependencyType(typeId: number): string;
     handleEditingResult(editResultType: 'save' | 'cancel'): void;
     onTaskDelete(): void;
 }

package/dist/es2015/editing/edit-dialog.component.js

@@ -3,23 +3,44 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { MappingService } from '../common/mapping.service';
+import { DependencyType } from '../models/dependency-type.enum';
 import { EditService } from './edit.service';
 /**
  * @hidden
  */
 let EditDialogComponent = class EditDialogComponent {
-    constructor(mapper, editService, localizationService) {
+    constructor(mapper, editService, cdr, localizationService) {
         this.mapper = mapper;
         this.editService = editService;
+        this.cdr = cdr;
         this.localizationService = localizationService;
     }
+    ngOnInit() {
+        this.editService.loadTasks(this.data).subscribe(value => {
+            this.loadedTasks = value;
+        });
+    }
+    get predecessors() {
+        return this.editService.predecessors;
+    }
+    set predecessors(items) {
+        this.editService.predecessors = items;
+    }
+    get successors() {
+        return this.editService.successors;
+    }
+    set successors(items) {
+        this.editService.successors = items;
+    }
     getText(token) {
         return this.localizationService.get(token);
     }
+    getDependencyType(typeId) {
+        return DependencyType[typeId];
+    }
     handleEditingResult(editResultType) {
         this.editService.triggerEditEvent(editResultType);
     }
@@ -29,8 +50,8 @@ let EditDialogComponent = class EditDialogComponent {
 };
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", FormGroup)
-], EditDialogComponent.prototype, "formGroup", void 0);
+    tslib_1.__metadata("design:type", Array)
+], EditDialogComponent.prototype, "data", void 0);
 EditDialogComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt-edit-dialog',
@@ -42,34 +63,34 @@ EditDialogComponent = tslib_1.__decorate([
             (close)="handleEditingResult('cancel')">
             <kendo-dialog-messages
                 [closeTitle]="getText('taskEditingDialogCloseTitle')"></kendo-dialog-messages>
-            <form class="k-form" [formGroup]="formGroup">
-                <kendo-formfield *ngIf="formGroup.contains(mapper.taskFields.title)">
-                    <kendo-label [for]="mapper.taskFields.title" [text]="getText('titleFieldInputLabel')"></kendo-label>
-                    <input class="k-textbox" [formControlName]="mapper.taskFields.title" />
-                </kendo-formfield>
-                <div class="k-hstack">
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.start)">
-                        <kendo-label [for]="mapper.taskFields.start" [text]="getText('startFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.start"></kendo-datetimepicker>
-                    </kendo-formfield>
-                    <kendo-treelist-spacer></kendo-treelist-spacer>
-                    <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.end)">
-                        <kendo-label [for]="mapper.taskFields.end" [text]="getText('endFieldInputLabel')"></kendo-label>
-                        <kendo-datetimepicker [formControlName]="mapper.taskFields.end"></kendo-datetimepicker>
-                    </kendo-formfield>
-                </div>
-                <kendo-formfield [style.width.%]="49" *ngIf="formGroup.contains(mapper.taskFields.completionRatio)">
-                    <kendo-label [for]="mapper.taskFields.completionRatio" [text]="getText('completionRatioFieldInputLabel')"></kendo-label>
-                    <kendo-numerictextbox
-                        [formControlName]="mapper.taskFields.completionRatio"
-                        [min]="0"
-                        [max]="1"
-                        [decimals]="2"
-                        format="p2"
-                        [step]="0.01"
-                    ></kendo-numerictextbox>
-                </kendo-formfield>
-            </form>
+
+            <kendo-tabstrip [keepTabContent]="true">
+                <kendo-tabstrip-tab [title]="getText('taskEditingGeneralTabTitle')" [selected]="true">
+                    <ng-template kendoTabContent>
+                    <kendo-gantt-task-fields></kendo-gantt-task-fields>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingPredecessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="predecessors"
+                            dependencyType="predecessor"
+                        >
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+                <kendo-tabstrip-tab [title]="getText('taskEditingSuccessorsTabTitle')">
+                    <ng-template kendoTabContent>
+                        <kendo-gantt-dependencies-table
+                            [tasks]="loadedTasks"
+                            [(dependencies)]="successors"
+                            dependencyType="successor">
+                        </kendo-gantt-dependencies-table>
+                    </ng-template>
+                </kendo-tabstrip-tab>
+            </kendo-tabstrip>
+
             <kendo-dialog-actions layout="normal">
                 <button kendoButton (click)="onTaskDelete()">{{ getText('deleteButtonText') }}</button>
                 <kendo-treelist-spacer></kendo-treelist-spacer>
@@ -81,6 +102,7 @@ EditDialogComponent = tslib_1.__decorate([
     }),
     tslib_1.__metadata("design:paramtypes", [MappingService,
         EditService,
+        ChangeDetectorRef,
         LocalizationService])
 ], EditDialogComponent);
 export { EditDialogComponent };

package/dist/es2015/editing/edit.service.d.ts

@@ -3,18 +3,39 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { TaskAddEvent } from '../models/events/task-add-event.interface';
+import { GanttDependency } from '../main';
 import { EditEvent, EditResultType } from '../models/events/task-edit-event.interface';
+import { MappingService } from '../common/mapping.service';
 /**
  * @hidden
  */
 export declare class EditService {
+    private mapper;
     showEditingDialog: Subject<boolean>;
     showConfirmationDialog: Subject<any>;
     editEvent: Subject<EditEvent>;
-    formGroup: FormGroup;
+    addEvent: Subject<TaskAddEvent>;
+    taskFormGroup: FormGroup;
     dataItem: any;
-    createEditDialog(dataItem: any, formGroup: FormGroup): void;
+    getSelectedItem: () => any;
+    hasChildren: (node: any) => boolean;
+    fetchChildren: (node: any) => Observable<any[]> | any[];
+    dependencies: any[];
+    predecessors: GanttDependency[];
+    successors: GanttDependency[];
+    updatedItems: any[];
+    deletedItems: any[];
+    constructor(mapper: MappingService);
+    createEditDialog(dataItem: any, taskFormGroup: FormGroup, dependencies: any[]): void;
     closeEditDialog(): void;
     triggerEditEvent(editResultType: EditResultType): void;
+    updateDependencies(item: GanttDependency): void;
+    getCreatedDependencies(): any[];
+    deleteDependency(item: GanttDependency): void;
+    loadTasks(initialValues: any[], isInitializer?: boolean): Observable<any[]>;
+    private getElementById;
+    private itemIndex;
+    private isNew;
 }