@syncfusion/ej2-gantt 19.4.56 → 20.1.47-1460716

package/dist/ts/gantt/actions/toolbar.ts

@@ -0,0 +1,489 @@
+/**
+ * Toolbar action related code goes here
+ */
+import { Gantt } from '../base/gantt';
+import { Toolbar as NavToolbar, ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
+import { createElement, extend, isNullOrUndefined, remove, getValue, EventHandler, addClass } from '@syncfusion/ej2-base';
+import * as cls from '../base/css-constants';
+import * as events from '../base/constant';
+import { RowSelectEventArgs } from '@syncfusion/ej2-grids';
+import { ToolbarItem } from '../base/enum';
+import { EditSettingsModel } from '../models/edit-settings-model';
+import { TextBox } from '@syncfusion/ej2-inputs';
+import { IGanttData } from '../base/common';
+export class Toolbar {
+    private parent: Gantt;
+    private predefinedItems: { [key: string]: ItemModel } = {};
+    private id: string;
+    public toolbar: NavToolbar;
+    private items: string[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search',
+        'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport',
+        'CsvExport', 'PdfExport', 'Indent', 'Outdent'];
+    public element: HTMLElement;
+    private searchElement: HTMLInputElement;
+    constructor(parent: Gantt) {
+        this.parent = parent;
+        this.id = this.parent.element.id;
+        this.parent.on('ui-toolbarupdate', this.propertyChanged, this);
+    }
+    private getModuleName(): string {
+        return 'toolbar';
+    }
+    /**
+     * @returns {void} .
+     * @private
+     */
+    public renderToolbar(): void {
+        const toolbarItems: (ToolbarItem | string | ItemModel)[] = this.parent.toolbar || [];
+        if (toolbarItems.length > 0) {
+            this.element = createElement(
+                'div', { id: this.parent.controlId + '_Gantt_Toolbar', className: cls.toolbar }
+            );
+            if (this.parent.treeGrid.grid.headerModule) {
+                this.parent.element.insertBefore(this.element, this.parent.treeGridPane.offsetParent);
+            } else {
+                this.parent.element.appendChild(this.element);
+            }
+            const preItems: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
+                'PrevTimeSpan', 'NextTimeSpan', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport',
+                'PdfExport', 'Indent', 'Outdent'];
+            for (const item of preItems) {
+                const itemStr: string = item.toLowerCase();
+                const localeName: string = item[0].toLowerCase() + item.slice(1);
+                this.predefinedItems[item] = {
+                    id: this.parent.element.id + '_' + itemStr, prefixIcon: 'e-' + itemStr,
+                    text: this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant(localeName),
+                    tooltipText: this.parent.localeObj.getConstant(localeName) + ((localeName === 'add' ||
+                        localeName === 'edit' || localeName === 'delete') ? this.parent.localeObj.getConstant('task') :
+                        (localeName === 'expandAll' || localeName === 'collapseAll') ?
+                            this.parent.localeObj.getConstant('tasks') : ''),
+                    align: this.parent.isAdaptive ? 'Right' : 'Left'
+                };
+            }
+            const searchLocalText: string = this.parent.localeObj.getConstant('search');
+            if (this.parent.isAdaptive) {
+                (this.predefinedItems as { Search: ItemModel }).Search = {
+                    id: this.id + '_searchbutton',
+                    prefixIcon: 'e-search-icon',
+                    tooltipText: searchLocalText,
+                    align: 'Right'
+                };
+            } else {
+                (this.predefinedItems as { Search: ItemModel }).Search = {
+                    id: this.id + '_search',
+                    template: '<div class="e-input-group e-search" role="search">' +
+                '<input id="' + this.id + '_searchbar" class="e-input" name="input" type="search"' +
+                // eslint-disable-next-line
+                'placeholder= \"' + searchLocalText + '\"/>' +
+                '<span id="' + this.id + '_searchbutton" class="e-input-group-icon e-search-icon e-icons"' +
+                'tabindex="-1" title="' + searchLocalText + '" aria-label= "search"></span>' +
+                '</div>',
+                    tooltipText: searchLocalText,
+                    align: 'Right', cssClass: 'e-search-wrapper'
+                };
+            }
+            this.createToolbar();
+        }
+    }
+
+    private createToolbar(): void {
+        const items: ItemModel[] = this.getItems();
+        this.toolbar = new NavToolbar({
+            items: items,
+            clicked: this.toolbarClickHandler.bind(this),
+            height: this.parent.isAdaptive ? 48 : 'auto'
+        });
+        this.toolbar.isStringTemplate = true;
+        this.toolbar.appendTo(this.element);
+        const cancelItem: Element = this.element.querySelector('#' + this.parent.element.id + '_cancel');
+        const updateItem: Element = this.element.querySelector('#' + this.parent.element.id + '_update');
+        if (cancelItem) {
+            addClass([cancelItem], cls.focusCell);
+        }
+        if (updateItem) {
+            addClass([updateItem], cls.focusCell);
+        }
+        if (this.parent.isAdaptive) {
+            this.element.insertBefore(this.getSearchBarElement(), this.element.childNodes[0]);
+            this.searchElement = this.element.querySelector('#' + this.parent.element.id + '_searchbar');
+            const textObj: TextBox = new TextBox({
+                placeholder: this.parent.localeObj.getConstant('search'),
+                floatLabelType: 'Never',
+                showClearButton: true
+            });
+            textObj.appendTo(this.searchElement);
+        } else {
+            this.searchElement = this.element.querySelector('#' + this.parent.element.id + '_searchbar');
+        }
+        if (this.parent.filterModule) {
+            this.wireEvent();
+            if (this.parent.searchSettings) {
+                this.updateSearchTextBox();
+            }
+        }
+        if (this.parent.readOnly) {
+            this.enableItems(
+                [this.parent.element.id + '_add', this.parent.element.id + '_update', this.parent.element.id + '_delete'
+                    , this.parent.element.id + '_cancel', this.parent.element.id + '_indent', this.parent.element.id + '_outdent'],
+                false);
+        }
+    }
+    private getSearchBarElement(): HTMLElement {
+        const div: HTMLElement = createElement('div', { className: 'e-adaptive-searchbar', styles: 'display: none' });
+        const textbox: HTMLElement = createElement('input', { attrs: { type: 'text' }, id: this.parent.element.id + '_searchbar' });
+        const span: HTMLElement = createElement('span', { className: 'e-backarrowspan e-icons' });
+        span.onclick = () => {
+            div.style.display = 'none';
+            (this.element.childNodes[1] as HTMLElement).style.display = 'block';
+        };
+        div.appendChild(span);
+        div.appendChild(textbox);
+        return div;
+    }
+
+    private wireEvent(): void {
+        if (this.searchElement) {
+            EventHandler.add(this.searchElement, 'keyup', this.keyUpHandler, this);
+            EventHandler.add(this.searchElement, 'focus', this.focusHandler, this);
+            EventHandler.add(this.searchElement, 'blur', this.blurHandler, this);
+        }
+    }
+    private propertyChanged(property: object): void {
+        const module: string = getValue('module', property);
+        if (module !== this.getModuleName() || !this.parent.toolbar) {
+            return;
+        }
+        if (this.element && this.element.parentNode) {
+            remove(this.element);
+        }
+        this.renderToolbar();
+        this.refreshToolbarItems();
+    }
+    private unWireEvent(): void {
+        if (this.searchElement) {
+            EventHandler.remove(this.searchElement, 'keyup', this.keyUpHandler);
+            EventHandler.remove(this.searchElement, 'focus', this.focusHandler);
+            EventHandler.remove(this.searchElement, 'blur', this.blurHandler);
+            this.searchElement = null;
+        }
+        this.parent.off('ui-toolbarupdate', this.propertyChanged);
+    }
+    private keyUpHandler(e: { keyCode: number }): void {
+        if (e.keyCode === 13 && this.parent.searchSettings.key !== this.searchElement.value) {
+            this.parent.searchSettings.key = this.searchElement.value;
+            this.parent.dataBind();
+        }
+    }
+    private focusHandler(e: FocusEvent): void {
+        (e.target as HTMLElement).parentElement.classList.add('e-input-focus');
+    }
+    private blurHandler(e: FocusEvent): void {
+        (e.target as HTMLElement).parentElement.classList.remove('e-input-focus');
+    }
+    /**
+     * Method to set value for search input box
+     *
+     * @returns {void} .
+     * @hidden
+     */
+    public updateSearchTextBox(): void {
+        if (this.searchElement && this.searchElement.value !== this.parent.searchSettings.key) {
+            this.searchElement.value = this.parent.searchSettings.key;
+        }
+    }
+    private getItems(): ItemModel[] {
+        const items: ItemModel[] = [];
+        const toolbarItems: (ToolbarItem | string | ItemModel)[] = this.parent.toolbar;
+        let searchIndex: number = -1;
+        toolbarItems.forEach((item: string | ItemModel, index: number) => {
+            if ((typeof (item) === 'string' && item === 'Search') ||
+                ((typeof (item) === 'object') && item.text === 'Search')) {
+                searchIndex = index;
+            }
+        });
+        if (searchIndex > -1) {
+            const searchItem: (string | ItemModel)[] = toolbarItems.splice(searchIndex, 1);
+            toolbarItems.push(searchItem[0]);
+        }
+        for (const item of toolbarItems) {
+            if (typeof item === 'string') {
+                items.push(this.getItemObject(item));
+            } else {
+                items.push(this.getItem(item));
+            }
+        }
+        return items;
+    }
+
+    private getItem(itemObject: ItemModel): ItemModel {
+        const item: ItemModel = this.predefinedItems[itemObject.text];
+        return item ? extend(item, item, itemObject) : itemObject;
+    }
+
+    private getItemObject(itemName: string): ItemModel {
+        return this.predefinedItems[itemName] || { text: itemName, id: this.id + '_' + itemName };
+    }
+    private toolbarClickHandler(arg: ClickEventArgs): void {
+        const gObj: Gantt = this.parent;
+        const gID: string = this.id;
+        extend(arg, { cancel: false });
+        gObj.trigger(events.toolbarClick, arg, (args: ClickEventArgs) => {
+            if (args.cancel) {
+                return;
+            } else {
+                if (this.parent.isAdaptive === true) {
+                    if (args.item.id === gID + '_edit' || args.item.id === gID + '_add' || args.item.id === gID + '_delete'
+                        || args.item.id === gID + '_searchbutton' || args.item.id === gID + '_expandall'
+                        || args.item.id === gID + '_collapseall') {
+                        if (this.parent.selectionModule && this.parent.selectionSettings.type === 'Multiple') {
+                            this.parent.selectionModule.hidePopUp();
+                            (<HTMLElement>document.getElementsByClassName('e-gridpopup')[0]).style.display = 'none';
+                        }
+                    }
+                }
+                switch (!isNullOrUndefined(args.item) && args.item.id) {
+                case gID + '_edit':
+                    if (gObj.editModule && gObj.editSettings.allowEditing) {
+                        gObj.editModule.dialogModule.openToolbarEditDialog();
+                    }
+                    break;
+                case gID + '_indent':
+                    if (gObj.editModule && gObj.selectionModule.getSelectedRecords().length) {
+                        gObj.indent();
+                    }
+                    break;
+                case gID + '_outdent':
+                    if (gObj.editModule && gObj.selectionModule.getSelectedRecords().length) {
+                        gObj.outdent();
+                    }
+                    break;
+                case gID + '_update':
+                    gObj.editModule.cellEditModule.isCellEdit = false;
+                    gObj.treeGrid.grid.saveCell();
+                    break;
+                case gID + '_cancel':
+                    gObj.cancelEdit();
+                    break;
+                case gID + '_add':
+                    if (gObj.editModule && gObj.editSettings.allowAdding) {
+                        gObj.editModule.dialogModule.openAddDialog();
+                    }
+                    break;
+                case gID + '_delete':
+                    if (this.parent.selectionModule && this.parent.editModule) {
+                        if ((this.parent.selectionSettings.mode !== 'Cell' && this.parent.selectionModule.selectedRowIndexes.length)
+                                || (this.parent.selectionSettings.mode === 'Cell' &&
+                                    this.parent.selectionModule.getSelectedRowCellIndexes().length)) {
+                            this.parent.editModule.startDeleteAction();
+                        }
+                    }
+                    break;
+                case gID + '_search':
+                {
+                    const searchButtonId: string = getValue('originalEvent.target.id', args);
+                    if (searchButtonId === this.parent.element.id + '_searchbutton' && this.parent.filterModule) {
+                        const keyVal: string =
+                                (<HTMLInputElement>this.element.querySelector('#' + this.parent.element.id + '_searchbar')).value;
+                        if (this.parent.searchSettings.key !== keyVal) {
+                            this.parent.searchSettings.key = keyVal;
+                            this.parent.dataBind();
+                        }
+                    }
+                    break;
+                }
+                case gID + '_searchbutton':
+                {
+                    const adaptiveSearchbar: HTMLElement = this.element.querySelector('.e-adaptive-searchbar');
+                    (adaptiveSearchbar.parentElement.childNodes[1] as HTMLElement).style.display = 'none';
+                    adaptiveSearchbar.style.display = 'block';
+                    break;
+                }
+                case gID + '_expandall':
+                    this.parent.ganttChartModule.expandCollapseAll('expand');
+                    break;
+                case gID + '_collapseall':
+                    this.parent.ganttChartModule.expandCollapseAll('collapse');
+                    break;
+                case gID + '_prevtimespan':
+                    this.parent.previousTimeSpan();
+                    break;
+                case gID + '_nexttimespan':
+                    this.parent.nextTimeSpan();
+                    break;
+                case gID + '_zoomin':
+                    this.zoomIn();
+                    break;
+                case gID + '_zoomout':
+                    this.zoomOut();
+                    break;
+                case gID + '_zoomtofit':
+                    this.zoomToFit();
+                    break;
+                }
+            }
+        });
+    }
+    /**
+     *
+     * @returns {void} .
+     * @private
+     */
+    public zoomIn(): void {
+        this.parent.timelineModule.processZooming(true);
+    }
+    /**
+     *
+     * @returns {void} .
+     * @private
+     */
+    public zoomToFit(): void {
+        this.parent.timelineModule.processZoomToFit();
+        this.parent.ganttChartModule.updateScrollLeft(0);
+    }
+    /**
+     *
+     * @returns {void} .
+     * @private
+     */
+    public zoomOut(): void {
+        this.parent.timelineModule.processZooming(false);
+    }
+    /**
+     * To refresh toolbar items bases current state of tasks
+     *
+     * @param {RowSelectEventArgs} args .
+     * @returns {void} .
+     */
+    public refreshToolbarItems(args?: RowSelectEventArgs): void {
+        const gObj: Gantt = this.parent;
+        let enableItems: string[] = [];
+        let disableItems: string[] = [];
+        const edit: EditSettingsModel = gObj.editSettings;
+        const gID: string = this.id;
+        const ind: number = gObj.selectedRowIndex;
+        let previousGanttRecord: IGanttData;
+        const isSelected: boolean = gObj.selectionModule ? gObj.selectionModule.selectedRowIndexes.length === 1 ||
+            gObj.selectionModule.getSelectedRowCellIndexes().length === 1 ? true : false : false;
+        const toolbarItems: ItemModel[] = this.toolbar ? this.toolbar.items : [];
+        const toolbarDefaultItems: string[] = [gID + '_add', gID + '_edit', gID + '_delete',
+            gID + '_update', gID + '_cancel', gID + '_indent', gID + '_outdent'];
+        const isResouceParent: boolean = (this.parent.viewType === 'ResourceView' && getValue('data.level', args) !== 0
+            || this.parent.viewType === 'ProjectView');
+        if (!isNullOrUndefined(this.parent.editModule)) {
+            const touchEdit: boolean = gObj.editModule.taskbarEditModule ?
+                gObj.editModule.taskbarEditModule.touchEdit : false;
+            const hasData: number = gObj.flatData && gObj.flatData.length;
+            // eslint-disable-next-line
+            edit.allowAdding && !touchEdit ? enableItems.push(gID + '_add') : disableItems.push(gID + '_add');
+            // eslint-disable-next-line
+            edit.allowEditing && isResouceParent && hasData && isSelected && !touchEdit ?
+                enableItems.push(gID + '_edit') : disableItems.push(gID + '_edit');
+            if (!edit.allowEditing || ind === 0 || ind === -1 || !hasData || !isSelected || this.parent.viewType === 'ResourceView') {
+                disableItems.push(gID + '_indent');
+                disableItems.push(gID + '_outdent');
+            } else {
+                if (gObj.updatedRecords[ind].level === 0 && hasData && !touchEdit) {
+                    enableItems.push(gID + '_indent');
+                    disableItems.push(gID + '_outdent');
+                } else {
+                    previousGanttRecord = gObj.updatedRecords[ind - 1];
+                    if ((gObj.updatedRecords[ind].level - previousGanttRecord.level === 1) && ind !== -1) {
+                        disableItems.push(gID + '_indent');
+                        enableItems.push(gID + '_outdent');
+                    } else if (ind !== -1) {
+                        enableItems.push(gID + '_indent');
+                        enableItems.push(gID + '_outdent');
+                    }
+                }
+            }
+            const isDeleteSelected: boolean = gObj.selectionModule ? gObj.selectionModule.selectedRowIndexes.length > 0 ||
+                gObj.selectionModule.getSelectedRowCellIndexes().length > 0 ? true : false : false;
+            // eslint-disable-next-line
+            edit.allowDeleting && isResouceParent && hasData && isDeleteSelected && !touchEdit ?
+                enableItems.push(gID + '_delete') : disableItems.push(gID + '_delete');
+            if (gObj.editSettings.mode === 'Auto' && !isNullOrUndefined(gObj.editModule.cellEditModule)
+                && gObj.editModule.cellEditModule.isCellEdit) {
+                // New initialization for enableItems and disableItems during isCellEdit
+                enableItems = [];
+                enableItems.push(gID + '_update', gID + '_cancel');
+                disableItems = [];
+                for (let t: number = 0; t < toolbarItems.length; t++) {
+                    if (toolbarItems[t].id !== gID + '_update' && toolbarItems[t].id !== gID + '_cancel' &&
+                        toolbarDefaultItems.indexOf(toolbarItems[t].id) !== -1) {
+                        disableItems.push(toolbarItems[t].id);
+                    }
+                }
+            } else {
+                disableItems.push(gID + '_update', gID + '_cancel');
+                for (let t: number = 0; t < toolbarItems.length; t++) {
+                    if (enableItems.indexOf(toolbarItems[t].id) === -1 && disableItems.indexOf(toolbarItems[t].id) === -1) {
+                        enableItems.push(toolbarItems[t].id);
+                    }
+                }
+            }
+        } else {
+            disableItems.push(gID + '_delete');
+            disableItems.push(gID + '_add');
+            disableItems.push(gID + '_edit');
+            disableItems.push(gID + '_update');
+            disableItems.push(gID + '_cancel');
+        }
+        for (let e: number = 0; e < enableItems.length; e++) {
+            let index: number;
+            for (let t: number = 0; t < toolbarItems.length; t++) {
+                if (toolbarItems[t].id === enableItems[e]) {
+                    index = t;
+                    break;
+                }
+            }
+            if (toolbarItems.length > 0) {
+                this.toolbar.hideItem(index, false);
+            }
+        }
+        for (let d: number = 0; d < disableItems.length; d++) {
+            let index: number;
+            for (let t: number = 0; t < toolbarItems.length; t++) {
+                if (toolbarItems[t].id === disableItems[d]) {
+                    index = t;
+                    break;
+                }
+            }
+            if (toolbarItems.length > 0) {
+                this.toolbar.hideItem(index, true);
+            }
+        }
+    }
+
+    /**
+     * Enables or disables ToolBar items.
+     *
+     * @param {string[]} items - Defines the collection of itemID of ToolBar items.
+     * @param {boolean} isEnable - Defines the items to be enabled or disabled.
+     * @returns {void} .
+     * @hidden
+     */
+    public enableItems(items: string[], isEnable: boolean): void {
+        for (const item of items) {
+            const element: HTMLElement = this.element.querySelector('#' + item);
+            if (element) {
+                this.toolbar.enableItems(element.parentElement, isEnable);
+            }
+        }
+    }
+
+    /**
+     * Destroys the Sorting of TreeGrid.
+     *
+     * @function destroy
+     * @returns {void} .
+     * @private
+     */
+    public destroy(): void {
+        if (this.parent.isDestroyed) { return; }
+        this.toolbar.destroy();
+        if (this.parent.filterModule) {
+            this.unWireEvent();
+        }
+        remove(this.element);
+    }
+}

package/dist/ts/gantt/actions/virtual-scroll.ts

@@ -0,0 +1,60 @@
+import { Gantt } from '../base/gantt';
+import { TreeGrid, VirtualScroll as TreeGridVirtualScroll } from '@syncfusion/ej2-treegrid';
+
+/**
+ * Gantt Virtual Scroll module will handle Virtualization
+ *
+ * @hidden
+ */
+export class VirtualScroll {
+    private parent: Gantt;
+    constructor(parent?: Gantt) {
+        this.parent = parent;
+        this.bindTreeGridProperties();
+    }
+    /**
+     * Get module name
+     *
+     * @returns {void} .
+     */
+    protected getModuleName(): string {
+        return 'virtualScroll';
+    }
+
+    /**
+     * Bind virtual-scroll related properties from Gantt to TreeGrid
+     *
+     * @returns {void} .
+     */
+    private bindTreeGridProperties(): void {
+        this.parent.treeGrid.enableVirtualization = this.parent.enableVirtualization;
+        TreeGrid.Inject(TreeGridVirtualScroll);
+    }
+
+    /**
+     * @returns {number} .
+     * @private
+     */
+    public getTopPosition(): number {
+        const virtualTable: HTMLElement = this.parent.ganttChartModule.scrollElement.querySelector('.e-virtualtable');
+        const translates: string[] = virtualTable.style.transform.split(',');
+        let top: string;
+        if (translates.length > 1) {
+            top = translates[1].trim().split(')')[0];
+        } else { 
+            let transformString: string = virtualTable.style.transform;
+            top = transformString.substring(transformString.lastIndexOf("(") + 1, transformString.lastIndexOf(")"))
+        }
+        return parseFloat(top);
+    }
+    /**
+     * To destroy the virtual scroll module.
+     *
+     * @returns {void} .
+     * @private
+     */
+    public destroy(): void {
+    // destroy module
+    }
+}
+

package/dist/ts/gantt/base/common.ts

@@ -0,0 +1,9 @@
+/**
+ * Gantt base related properties
+ */
+export * from './gantt';
+export * from './gantt-model';
+export * from './interface';
+export * from './utils';
+export * from './enum';
+export * from './constant';

package/dist/ts/gantt/base/constant.ts

@@ -0,0 +1,13 @@
+/**
+ *  This file was to define all public and internal events
+ */
+/** @hidden */
+export const load: string = 'load';
+/** @hidden */
+export const rowDataBound: string = 'rowDataBound';
+/** @hidden */
+export const queryCellInfo: string = 'queryCellInfo';
+/** @hidden */
+export const toolbarClick: string = 'toolbarClick';
+/** @hidden */
+export const keyPressed: string = 'key-pressed';