@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
234 lines (233 loc) • 14 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators, ReactiveFormsModule } 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';
import { plusIcon, minusIcon } from '@progress/kendo-svg-icons';
import { CellTemplateDirective, ColumnComponent, GridComponent, SelectionDirective, ToolbarTemplateDirective } from '@progress/kendo-angular-grid';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
import * as i0 from "@angular/core";
import * as i1 from "../common/mapping.service";
import * as i2 from "./edit.service";
import * as i3 from "../localization/gantt-localization.service";
import * as i4 from "@angular/forms";
/**
* @hidden
*/
export class DependenciesTableComponent {
mapper;
editService;
localizationService;
// TODO: should consist of only valid connection tasks
tasks;
dependencies;
dependencyType;
dependenciesChange = new EventEmitter();
selectedKeys = [];
formGroups = new FormArray([]);
dependencyTypes = this.getDependencyTypes();
plusIcon = plusIcon;
minusIcon = minusIcon;
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';
}
constructor(mapper, editService, localizationService) {
this.mapper = mapper;
this.editService = editService;
this.localizationService = localizationService;
}
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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DependenciesTableComponent, deps: [{ token: i1.MappingService }, { token: i2.EditService }, { token: i3.GanttLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DependenciesTableComponent, isStandalone: true, selector: "kendo-gantt-dependencies-table", inputs: { tasks: "tasks", dependencies: "dependencies", dependencyType: "dependencyType" }, outputs: { dependenciesChange: "dependenciesChange" }, ngImport: i0, template: `
<kendo-grid
[data]="dependencies"
[selectable]="{ mode: 'single' }"
[(selectedKeys)]="selectedKeys"
kendoGridSelectBy
[height]="275"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
icon="plus"
[svgIcon]="plusIcon"
(click)="addHandler()"
>
{{ getText('taskEditingDependenciesAddButtonText') }}
</button>
<button
kendoButton
icon="minus"
[svgIcon]="minusIcon"
[disabled]="selectedKeys.length === 0"
(click)="removeHandler()"
>
{{ 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>
`, isInline: true, dependencies: [{ kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DependenciesTableComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-gantt-dependencies-table',
template: `
<kendo-grid
[data]="dependencies"
[selectable]="{ mode: 'single' }"
[(selectedKeys)]="selectedKeys"
kendoGridSelectBy
[height]="275"
>
<ng-template kendoGridToolbarTemplate>
<button
kendoButton
icon="plus"
[svgIcon]="plusIcon"
(click)="addHandler()"
>
{{ getText('taskEditingDependenciesAddButtonText') }}
</button>
<button
kendoButton
icon="minus"
[svgIcon]="minusIcon"
[disabled]="selectedKeys.length === 0"
(click)="removeHandler()"
>
{{ 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>
`,
standalone: true,
imports: [GridComponent, SelectionDirective, ToolbarTemplateDirective, ButtonComponent, ColumnComponent, CellTemplateDirective, DropDownListComponent, ReactiveFormsModule]
}]
}], ctorParameters: () => [{ type: i1.MappingService }, { type: i2.EditService }, { type: i3.GanttLocalizationService }], propDecorators: { tasks: [{
type: Input
}], dependencies: [{
type: Input
}], dependencyType: [{
type: Input
}], dependenciesChange: [{
type: Output
}] } });