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

package/dist/es2015/editing/edit.service.js

@@ -4,38 +4,106 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { EMPTY, forkJoin, isObservable, of, Subject } from 'rxjs';
+import { MappingService } from '../common/mapping.service';
+import { map, expand, reduce } from 'rxjs/operators';
+import { isPresent, normalizeGanttData } from '../utils';
 /**
  * @hidden
  */
 let EditService = class EditService {
-    /**
-     * @hidden
-     */
-    constructor() {
+    constructor(mapper) {
+        this.mapper = mapper;
         this.showEditingDialog = new Subject();
         this.showConfirmationDialog = new Subject();
         this.editEvent = new Subject();
+        this.addEvent = new Subject();
+        this.updatedItems = [];
+        this.deletedItems = [];
+        this.itemIndex = (item, data) => {
+            return data.findIndex(dataItem => this.mapper.extractFromTask(dataItem, 'id') === this.mapper.extractFromTask(item, 'id'));
+        };
     }
-    createEditDialog(dataItem, formGroup) {
+    set dependencies(items) {
+        // Can this whole thing be moved to edit-dialog? Dependencies might not be needed here
+        const dataItemId = this.mapper.extractFromTask(this.dataItem, 'id');
+        this.predecessors = items.filter(item => this.mapper.extractFromDependency(item, 'toId') === dataItemId);
+        this.successors = items.filter(item => this.mapper.extractFromDependency(item, 'fromId') === dataItemId);
+    }
+    get dependencies() {
+        return [...this.predecessors, ...this.successors];
+    }
+    createEditDialog(dataItem, taskFormGroup, dependencies) {
         this.dataItem = dataItem;
-        this.formGroup = formGroup;
+        this.taskFormGroup = taskFormGroup;
+        this.dependencies = dependencies;
         this.showEditingDialog.next(true);
     }
     closeEditDialog() {
         this.showEditingDialog.next(false);
         this.dataItem = undefined;
-        this.formGroup = undefined;
+        this.taskFormGroup = undefined;
+        this.dependencies = [];
+        this.updatedItems = [];
+        this.deletedItems = [];
     }
     triggerEditEvent(editResultType) {
         this.editEvent.next({
-            formGroup: this.formGroup,
+            taskFormGroup: this.taskFormGroup,
             dataItem: this.dataItem,
+            dependencies: {
+                createdItems: this.getCreatedDependencies(),
+                updatedItems: this.updatedItems,
+                deletedItems: this.deletedItems
+            },
             editResultType
         });
     }
+    updateDependencies(item) {
+        if (!this.isNew(item)) {
+            // update
+            const index = this.itemIndex(item, this.updatedItems);
+            if (index !== -1) {
+                this.updatedItems.splice(index, 1, item);
+            }
+            else {
+                this.updatedItems.push(item);
+            }
+        }
+    }
+    getCreatedDependencies() {
+        return this.dependencies.filter(item => this.mapper.extractFromDependency(item, 'id') === null);
+    }
+    deleteDependency(item) {
+        const updatedIndex = this.itemIndex(item, this.updatedItems);
+        if (updatedIndex !== -1) {
+            this.updatedItems.splice(updatedIndex, 1);
+        }
+        if (!this.isNew(item)) {
+            this.deletedItems.push(item);
+        }
+    }
+    loadTasks(initialValues, isInitializer = true) {
+        return forkJoin(initialValues.map(v => this.getElementById(v))).pipe(map((value) => value.reduce((acc, item) => acc = acc.concat(normalizeGanttData(item)), [])), expand(values => {
+            if (values.some(el => this.hasChildren(el))) {
+                return this.loadTasks(values, false);
+            }
+            return EMPTY;
+        }), reduce((acc, values) => acc.concat(values), isInitializer ? [...initialValues] : []));
+    }
+    getElementById(item) {
+        const children = this.fetchChildren(item);
+        if (isObservable(children)) {
+            return children;
+        }
+        return of(children);
+    }
+    isNew(item) {
+        return !isPresent(this.mapper.extractFromDependency(item, 'id'));
+    }
 };
 EditService = tslib_1.__decorate([
-    Injectable()
+    Injectable(),
+    tslib_1.__metadata("design:paramtypes", [MappingService])
 ], EditService);
 export { EditService };

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

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { MappingService } from '../common/mapping.service';
+import { GanttLocalizationService } from '../localization/gantt-localization.service';
+import { EditService } from './edit.service';
+/**
+ * @hidden
+ */
+export declare class TaskFieldsComponent {
+    mapper: MappingService;
+    private editService;
+    private localizationService;
+    constructor(mapper: MappingService, editService: EditService, localizationService: GanttLocalizationService);
+    /**
+     * @hidden
+     */
+    readonly formGroup: FormGroup;
+    getText(token: string): string;
+}

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

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* 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 } from '@angular/core';
+import { MappingService } from '../common/mapping.service';
+import { GanttLocalizationService } from '../localization/gantt-localization.service';
+import { EditService } from './edit.service';
+/**
+ * @hidden
+ */
+let TaskFieldsComponent = class TaskFieldsComponent {
+    constructor(mapper, editService, localizationService) {
+        this.mapper = mapper;
+        this.editService = editService;
+        this.localizationService = localizationService;
+    }
+    /**
+     * @hidden
+     */
+    get formGroup() {
+        return this.editService.taskFormGroup;
+    }
+    getText(token) {
+        return this.localizationService.get(token);
+    }
+};
+TaskFieldsComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-gantt-task-fields',
+        template: `
+        <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>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [MappingService,
+        EditService,
+        GanttLocalizationService])
+], TaskFieldsComponent);
+export { TaskFieldsComponent };

package/dist/es2015/expanded-state/expandable.directive.d.ts

@@ -2,7 +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 { ExpandableDirective, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { ExpandableDirective } from '@progress/kendo-angular-treelist';
 /**
  * A directive which controls the expanded state of the items.
  */
@@ -14,5 +14,4 @@ export declare class GanttExpandableDirective extends ExpandableDirective {
      *
      */
     expandBy: string | ((dataItem: any) => any);
-    constructor(gantt: ExpandableTreeComponent);
 }

package/dist/es2015/expanded-state/expandable.directive.js

@@ -4,15 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Directive, Input } from '@angular/core';
-import { ExpandableDirective, ExpandableTreeComponent } from '@progress/kendo-angular-treelist';
+import { ExpandableDirective } from '@progress/kendo-angular-treelist';
 /**
  * A directive which controls the expanded state of the items.
  */
 let GanttExpandableDirective = class GanttExpandableDirective extends ExpandableDirective {
-    // fixes an injection error in some builds/ng-versions (e.g. StackBlitz)
-    constructor(gantt) {
-        super(gantt);
-    }
 };
 tslib_1.__decorate([
     Input(),
@@ -22,7 +18,6 @@ GanttExpandableDirective = tslib_1.__decorate([
     Directive({
         exportAs: 'kendoGanttExpandable',
         selector: '[kendoGanttExpandable]'
-    }),
-    tslib_1.__metadata("design:paramtypes", [ExpandableTreeComponent])
+    })
 ], GanttExpandableDirective);
 export { GanttExpandableDirective };

package/dist/es2015/gantt.component.d.ts

@@ -24,12 +24,13 @@ import { GanttTaskTemplateDirective } from './template-directives/task-template.
 import { GanttSummaryTaskTemplateDirective } from './template-directives/summary-task-template.directive';
 import { GanttTaskContentTemplateDirective } from './template-directives/task-content-template.directive';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
-import { ToolbarPosition } from './models/toolbar-position';
+import { ToolbarSettings } from './models/toolbar-settings';
 import { ExpandEvent } from './expanded-state/expand-event';
 import { ViewBase } from './timeline/view-base';
 import { SelectionChangeEvent } from './selection/selection-change-event';
 import { TaskEditEvent } from './models/events/task-edit-event.interface';
 import { CellCloseEvent } from './models/events/cell-close-event.interface';
+import { TaskAddEvent } from './models/events/task-add-event.interface';
 /**
  * Represents the Kendo UI Gantt component for Angular.
  *
@@ -109,7 +110,7 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private optionChangesService;
     private dependencyDomService;
     private editService;
-    localizationService: LocalizationService;
+    private localizationService;
     private hostElement;
     private zone;
     treeList: TreeListComponent;
@@ -164,7 +165,7 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * Provides a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection))
      *
-     * > The [`selectable`]({% slug gantt_api_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+     * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
      */
     isSelected: (dataItem: object) => boolean;
     /**
@@ -178,29 +179,32 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     /**
      * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
      *
-     * > When set to `true`, the [`isSelected`]({% slug gantt_api_ganttcomponent %}#toc-isselected) callback has to be provided.
+     * > When set to `true`, the [`isSelected`]({% slug api_gantt_ganttcomponent %}#toc-isselected) callback has to be provided.
      * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
      */
     selectable: boolean;
     /**
-     * The position of the toolbar.
+     * The toolbar configuration. Defines the position and content of the toolbar(s).
+     * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
+     * All are optional and default to `top`.
      *
-     * The possible values are:
-     * - `top`—Positions the toolbar above the Gantt panes.
-     * - `bottom`—Positions the toolbar below the Gantt panes.
+     * The possible values for each option are:
+     * - `top`—Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
+     * - `bottom`—Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
      * - `both`—Displays two toolbar instances. Positions the first one above,
-     * and the second one - below the Gantt panes.
-     * - `none`—No toolbar is rendered.
+     * and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.
+     * - `none`—No toolbar is rendered when used for setting `position`.
+     * No add task or view selector tool is rendered when used for setting `addTaskTool` or `viewSelectorTool`.
      */
-    toolbarPosition: ToolbarPosition;
+    toolbarSettings: ToolbarSettings;
     /**
      * Gets or sets the callback function that retrieves the child items for a particular item.
      */
-    fetchChildren: (item: object) => Observable<object[]>;
+    fetchChildren: (dataItem: any) => Observable<object[]>;
     /**
      * Gets or sets the callback function that indicates if a particular item has child items.
      */
-    hasChildren: (item: object) => boolean;
+    hasChildren: (dataItem: any) => boolean;
     /**
      * Defines the dependencies that will be drawn between the rendered tasks.
      *
@@ -335,6 +339,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * Fires when the user saves an edited task.
      */
     save: EventEmitter<TaskEditEvent>;
+    /**
+     * Fires when the user adds a task.
+     */
+    taskAdd: EventEmitter<TaskAddEvent>;
     /**
      * Fires when the sorting of the Gantt is changed.
      * You have to handle the event yourself and sort the data.
@@ -434,10 +442,6 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      * Used by the views selector.
      */
     readonly viewTypes: string[];
-    /**
-     * @hidden
-     */
-    readonly editDialogFormGroup: FormGroup;
     /**
      * @hidden
      *
@@ -460,6 +464,9 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private _rowClass;
     private _taskClass;
     private _activeView;
+    private _toolbarSettings;
+    private _fetchChildren;
+    private _hasChildren;
     private lastTreeListCellClick;
     private direction;
     private rtl;
@@ -503,7 +510,10 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
      */
     reorderColumn(source: GanttColumnBase, destIndex: number, options?: ColumnReorderConfig): void;
     /**
-     * Updates the data of the Gantt and forces row-related callbacks to be called anew.
+     * Forces the TreeList to evaluate if some data items have changed and re-renders the rows information, if needed.
+     * Recalculates and re-renders the Timeline period, if needed.
+     * Redraws changed dependencies, if needed.
+     * Executes all row-related callbacks anew.
      */
     updateView(): void;
     /**
@@ -600,4 +610,5 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
     private getActiveViewOptions;
     private isSameSelection;
     private getSelectionAction;
+    private getFirstSelectedItem;
 }