UNPKG

@syncfusion/ej2-gantt

Version:
1,101 lines 203 kB
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; import { remove, extend, isNullOrUndefined, createElement, getValue, setValue, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base'; import { DataManager, DataUtil } from '@syncfusion/ej2-data'; import { Dialog } from '@syncfusion/ej2-popups'; import { Tab } from '@syncfusion/ej2-navigations'; import { Grid, Edit, Toolbar as GridToolbar, Page, getObject, Sort, RowDD, Group, Aggregate, ColumnChooser, ContextMenu, ColumnMenu, Resize, Reorder, DetailRow, Search, Print, PdfExport, ExcelExport, Filter } from '@syncfusion/ej2-grids'; import { ForeignKey, getActualProperties } from '@syncfusion/ej2-grids'; import { RichTextEditor, Toolbar as RTEToolbar, Link, HtmlEditor, QuickToolbar, Count, Image, Table, EmojiPicker, FileManager, FormatPainter, MarkdownEditor } from '@syncfusion/ej2-richtexteditor'; import { ConstraintType } from '../base/enum'; import { TextBox, NumericTextBox, MaskedTextBox, FormValidator } from '@syncfusion/ej2-inputs'; import { CheckBox } from '@syncfusion/ej2-buttons'; import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars'; import { DropDownList, ComboBox } from '@syncfusion/ej2-dropdowns'; import { isScheduledTask } from '../base/utils'; import { TreeGrid, Selection as TreeGridSelection, Filter as TreeGridFilter, Edit as TreeGridEdit, VirtualScroll, Sort as TreeGridSort, Page as TreeGridPage, Aggregate as TreeGridAggregate, Reorder as TreeGridReorder, Resize as TreeGridResize, Toolbar as TreeGridToolbar, RowDD as TreeGridRowDD } from '@syncfusion/ej2-treegrid'; import { getUid } from '../base/utils'; /** * * @hidden */ var DialogEdit = /** @class */ (function () { /** * Constructor for render module * * @param {Gantt} parent . * @returns {void} . */ function DialogEdit(parent) { this.isFromDialogPredecessor = false; this.isTriggered = false; this.taskFieldColumn = []; this.customFieldColumn = []; this.processedId = []; /** * @private */ this.updatedEditFields = null; this.updatedAddFields = null; this.addedRecord = null; this.dialogEditValidationFlag = false; this.ganttResources = []; this.isValidData = true; this.isResourceTabUpdated = false; /** * @private */ this.previousResource = []; /** * @private */ this.isResourceUpdate = false; this.parent = parent; this.localeObj = this.parent.localeObj; this.beforeOpenArgs = { cancel: false }; this.types = this.getPredecessorType(); this.rowData = {}; this.editedRecord = {}; this.inputs = { booleanedit: CheckBox, dropdownedit: DropDownList, datepickeredit: DatePicker, datetimepickeredit: DateTimePicker, maskededit: MaskedTextBox, numericedit: NumericTextBox, stringedit: TextBox, defaultedit: TextBox }; this.processDialogFields(); this.wireEvents(); } DialogEdit.prototype.wireEvents = function () { this.parent.on('chartDblClick', this.dblClickHandler, this); }; DialogEdit.prototype.dblClickHandler = function (e) { var ganttData = this.parent.ganttChartModule.getRecordByTarget(e); if (!isNullOrUndefined(ganttData) && this.parent.editModule && this.parent.editSettings.allowEditing) { this.openEditDialog(ganttData); } }; /** * Method to validate add and edit dialog fields property. * * @returns {void} . * @private */ DialogEdit.prototype.processDialogFields = function () { if (isNullOrUndefined(this.parent.editDialogFields) || this.parent.editDialogFields && this.parent.editDialogFields.length === 0) { this.updatedEditFields = this.getDefaultDialogFields(); this.updatedEditFields = this.validateDialogFields(this.updatedEditFields); } else { this.updatedEditFields = this.validateDialogFields(this.parent.editDialogFields); } if (isNullOrUndefined(this.parent.addDialogFields) || this.parent.addDialogFields && this.parent.addDialogFields.length === 0) { this.updatedAddFields = this.getDefaultDialogFields(); this.updatedAddFields = this.validateDialogFields(this.updatedAddFields); } else { this.updatedAddFields = this.validateDialogFields(this.parent.addDialogFields); } }; DialogEdit.prototype.validateDialogFields = function (dialogFields) { var newDialogFields = []; var emptyCustomColumn = 0; for (var i = 0; i < dialogFields.length; i++) { var fieldItem = getActualProperties(dialogFields[i]); if (fieldItem.type === 'General' && (isNullOrUndefined(fieldItem.fields) || fieldItem.fields.length === 0)) { fieldItem.fields = this.getGeneralColumnFields(); } if (fieldItem.type === 'Advanced' && (isNullOrUndefined(fieldItem.fields) || fieldItem.fields.length === 0)) { fieldItem.fields = this.getAdvancedColumnFields(); // Assuming this method exists } if (fieldItem.type === 'Dependency' && isNullOrUndefined(this.parent.taskFields.dependency) || fieldItem.type === 'Resources' && isNullOrUndefined(this.parent.taskFields.resourceInfo) || fieldItem.type === 'Notes' && isNullOrUndefined(this.parent.taskFields.notes)) { continue; } if (fieldItem.type === 'Custom' && (isNullOrUndefined(fieldItem.fields) || fieldItem.fields.length === 0)) { emptyCustomColumn += 1; fieldItem.fields = this.getCustomColumnFields(); } if (emptyCustomColumn > 1) { continue; } newDialogFields.push(fieldItem); } return newDialogFields; }; /** * Method to get general column fields * * @returns {string[]} . */ DialogEdit.prototype.getGeneralColumnFields = function () { var fields = []; for (var _i = 0, _a = Object.keys(this.parent.columnMapping); _i < _a.length; _i++) { var key = _a[_i]; if (key === 'dependency' || key === 'resourceInfo' || key === 'notes' || key === 'constraintType' || key === 'constraintDate') { continue; } fields.push(this.parent.columnMapping[key]); } return fields; }; DialogEdit.prototype.getAdvancedColumnFields = function () { var fields = []; if (this.parent.columnMapping.constraintType) { fields.push(this.parent.columnMapping.constraintType); } if (this.parent.columnMapping.constraintDate) { fields.push(this.parent.columnMapping.constraintDate); } return fields; }; /** * Method to get custom column fields * * @returns {void} . */ DialogEdit.prototype.getCustomColumnFields = function () { var fields = []; for (var i = 0; i < this.parent.customColumns.length; i++) { fields.push(this.parent.customColumns[i]); } return fields; }; /** * Get default dialog fields when fields are not defined for add and edit dialogs * * @returns {AddDialogFieldSettings} . */ DialogEdit.prototype.getDefaultDialogFields = function () { var dialogFields = []; var fieldItem = {}; var taskFields = this.parent.taskFields; var columnMapping = this.parent.columnMapping; if (Object.keys(columnMapping).length !== 0) { fieldItem.type = 'General'; dialogFields.push(fieldItem); } if (!isNullOrUndefined(getValue('dependency', columnMapping))) { fieldItem = {}; if (this.parent.columnByField[columnMapping.dependency.valueOf()].visible !== false) { fieldItem.type = 'Dependency'; } dialogFields.push(fieldItem); } if (!isNullOrUndefined(getValue('resourceInfo', columnMapping))) { fieldItem = {}; if (this.parent.columnByField[columnMapping.resourceInfo.valueOf()].visible !== false) { fieldItem.type = 'Resources'; } dialogFields.push(fieldItem); } if (!isNullOrUndefined(getValue('constraintType', columnMapping)) && !isNullOrUndefined(getValue('constraintDate', columnMapping))) { fieldItem = {}; fieldItem.type = 'Advanced'; dialogFields.push(fieldItem); } if (!isNullOrUndefined(getValue('notes', columnMapping))) { fieldItem = {}; if (this.parent.columnByField[columnMapping.notes.valueOf()].visible !== false) { fieldItem.type = 'Notes'; } dialogFields.push(fieldItem); } if (!isNullOrUndefined(getValue('segments', taskFields))) { fieldItem = {}; fieldItem.type = 'Segments'; dialogFields.push(fieldItem); } if (this.parent.customColumns.length > 0) { fieldItem = {}; fieldItem.type = 'Custom'; dialogFields.push(fieldItem); } return dialogFields; }; /** * @returns {void} . * @private */ DialogEdit.prototype.openAddDialog = function () { this.isEdit = false; this.editedRecord = this.composeAddRecord(); this.isFromAddDialog = true; this.createDialog(); }; /** * * @returns {Date} . * @private */ DialogEdit.prototype.getMinimumStartDate = function () { var minDate = DataUtil.aggregates.min(this.parent.flatData, 'ganttProperties.startDate'); if (!isNullOrUndefined(minDate)) { minDate = new Date(minDate.getTime()); } else { minDate = new Date(this.parent.timelineModule.timelineStartDate.getTime()); } minDate = this.parent.dateValidationModule.checkStartDate(minDate); return new Date(minDate.getTime()); }; /** * @returns {IGanttData} . * @private */ DialogEdit.prototype.composeAddRecord = function () { var tempData = {}; tempData.ganttProperties = {}; var columns = this.parent.ganttColumns; var taskSettings = this.parent.taskFields; var id = this.parent.editModule.getNewTaskId(); for (var i = 0; i < columns.length; i++) { var field = columns[i].field; if (field === taskSettings.id) { tempData[field] = id; tempData.ganttProperties.rowUniqueID = tempData[field]; } else if (columns[i].field === taskSettings.startDate) { if (isNullOrUndefined(tempData[taskSettings.endDate])) { tempData[field] = this.getMinimumStartDate(); } else { tempData[field] = new Date(tempData[taskSettings.endDate]); } if (this.parent.timezone) { tempData[field] = this.parent.dateValidationModule.remove(tempData[field], this.parent.timezone); } tempData.ganttProperties.startDate = new Date(tempData[field]); } else if (columns[i].field === taskSettings.endDate) { if (isNullOrUndefined(tempData[taskSettings.startDate])) { tempData[field] = this.getMinimumStartDate(); } else { tempData[field] = new Date(tempData[taskSettings.startDate]); } if (this.parent.timezone) { tempData[field] = this.parent.dateValidationModule.remove(tempData[field], this.parent.timezone); } tempData.ganttProperties.endDate = new Date(tempData[field]); } else if (columns[i].field === taskSettings.duration) { tempData[field] = 1; tempData.ganttProperties.duration = tempData[field]; tempData.ganttProperties.durationUnit = this.parent.durationUnit.toLocaleLowerCase(); } else if (columns[i].field === taskSettings.name) { tempData[field] = this.localeObj.getConstant('addDialogTitle') + ' ' + id; tempData.ganttProperties.taskName = tempData[field]; } else if (columns[i].field === taskSettings.progress) { tempData[field] = 0; tempData.ganttProperties.progress = tempData[field]; } else if (columns[i].field === taskSettings.work) { tempData[field] = 0; tempData.ganttProperties.work = tempData[field]; } else if (columns[i].field === taskSettings.type) { tempData[field] = this.parent.taskType; tempData.ganttProperties.taskType = tempData[field]; } else { tempData[this.parent.ganttColumns[i].field] = ''; } } tempData.ganttProperties.isAutoSchedule = (this.parent.taskMode === 'Auto') ? true : (this.parent.taskMode === 'Manual') ? false : tempData[taskSettings.manual] === true ? false : true; return tempData; }; /** * @returns {void} . * @private */ DialogEdit.prototype.openToolbarEditDialog = function () { var gObj = this.parent; if (gObj.editModule && gObj.editSettings.allowEditing) { if (gObj.selectionModule && this.parent.ganttChartModule.focusedRowIndex > -1) { gObj.selectionModule.selectRow(this.parent.ganttChartModule.focusedRowIndex, false, false); } var selectedRowId = gObj.selectionModule ? (gObj.selectionSettings.mode === 'Row' || gObj.selectionSettings.mode === 'Both') && gObj.selectionModule.selectedRowIndexes.length === 1 ? gObj.updatedRecords[gObj.selectionModule.selectedRowIndexes[0]].ganttProperties.rowUniqueID : gObj.selectionSettings.mode === 'Cell' && gObj.selectionModule.getSelectedRowCellIndexes().length === 1 ? gObj.updatedRecords[gObj.selectionModule.getSelectedRowCellIndexes()[0].rowIndex].ganttProperties.rowUniqueID : null : null; if (!isNullOrUndefined(selectedRowId)) { this.openEditDialog(selectedRowId); } } }; /** * @param { number | string | object} taskId . * @returns {void} . * @private */ DialogEdit.prototype.openEditDialog = function (taskId) { var ganttObj = this.parent; if (!isNullOrUndefined(taskId)) { if (!isNullOrUndefined(taskId['ganttProperties'])) { if (typeof taskId['ganttProperties']['taskId'] === 'string') { this.numericOrString = 'stringedit'; } else { this.numericOrString = 'numericedit'; } } if (isNullOrUndefined(taskId['ganttProperties']) && !isNullOrUndefined(taskId)) { if (isNaN(Number(taskId)) || this.parent.columnByField[this.parent.taskFields.id].editType === 'stringedit') { this.numericOrString = 'stringedit'; } else { this.numericOrString = 'numericedit'; } } } if (typeof taskId === 'object' && !isNullOrUndefined(taskId)) { this.rowIndex = this.parent.currentViewData.indexOf(taskId); if (this.rowIndex > -1) { this.rowData = taskId; } } else if (!isNullOrUndefined(taskId)) { this.rowIndex = ganttObj.ids.indexOf(taskId.toString()); if (this.rowIndex > -1) { this.rowData = ganttObj.flatData[this.rowIndex]; } } else if (ganttObj.selectedRowIndex > -1) { this.rowData = ganttObj.currentViewData[ganttObj.selectedRowIndex]; this.rowIndex = ganttObj.selectedRowIndex; } this.isEdit = true; if (Object.keys(this.rowData).length !== 0) { this.editedRecord = extend({}, {}, this.rowData, true); this.isFromEditDialog = true; this.createDialog(); } }; DialogEdit.prototype.createDialog = function () { var _this = this; var ganttObj = this.parent; var dialogModel = {}; this.beforeOpenArgs.dialogModel = dialogModel; this.beforeOpenArgs.rowData = this.editedRecord; this.beforeOpenArgs.rowIndex = this.rowIndex; var dialogMaxWidth = this.parent.isAdaptive ? '' : '600px'; var dialog = this.parent.createElement('div', { id: ganttObj.element.id + '_dialog', styles: 'max-width:' + dialogMaxWidth }); dialog.classList.add('e-gantt-dialog'); ganttObj.element.appendChild(dialog); dialogModel.animationSettings = { effect: 'None' }; dialogModel.header = this.localeObj.getConstant(this.isEdit ? 'editDialogTitle' : 'addDialogTitle'); dialogModel.isModal = true; dialogModel.enableRtl = this.parent.enableRtl; dialogModel.allowDragging = (this.parent.isAdaptive || this.parent.enableAdaptiveUI) ? false : true; dialogModel.showCloseIcon = true; var position = this.parent.isAdaptive ? { X: 'top', Y: 'left' } : { X: 'center', Y: 'center' }; dialogModel.position = position; //dialogModel.width = '750px'; dialogModel.height = this.parent.isAdaptive ? '100%' : 'auto'; dialogModel.target = document.body; dialogModel.close = this.dialogClose.bind(this); dialogModel.closeOnEscape = true; /* eslint-disable-next-line */ dialogModel.beforeClose = function (args) { if (args.closedBy === 'escape') { if (args.event.name === 'key-pressed' && args.event.target.nodeName === 'INPUT') { args.cancel = true; } } }; dialogModel.open = function (args) { var dialogElement = getValue('element', args); var generalTabElement = dialogElement.querySelector('#' + _this.parent.element.id + 'GeneralTabContainer'); if (generalTabElement && generalTabElement.scrollHeight > generalTabElement.offsetHeight) { generalTabElement.classList.add('e-scroll'); } if (_this.tabObj.selectedItem === 0) { _this.tabObj.select(0); } if (_this.parent.isAdaptive) { dialogElement.style.maxHeight = 'none'; } if (_this.parent.focusModule) { _this.parent.focusModule.setActiveElement(dialogElement); } }; dialogModel.locale = this.parent.locale; dialogModel.buttons = [{ buttonModel: { content: this.localeObj.getConstant('saveButton'), cssClass: 'e-primary' }, click: this.buttonClick.bind(this) }, { buttonModel: { cssClass: 'e-flat', content: this.localeObj.getConstant('cancel') }, click: this.buttonClick.bind(this) }]; this.createTab(dialogModel, dialog); }; DialogEdit.prototype.buttonClick = function (e) { var target = e.target; target.style.pointerEvents = 'none'; if ((this.localeObj.getConstant('cancel')).toLowerCase() === e.target.innerText.trim().toLowerCase()) { if (this.dialog && !this.dialogObj.isDestroyed) { this.CustomformObj = null; this.formObj = null; this.storeValidTab = null; this.customFieldColumn = []; this.taskFieldColumn = []; this.dialogObj.hide(); this.dialogClose(); } } else { if (this.CustomformObj) { if (!this.CustomformObj.validate()) { target.style.pointerEvents = ''; return; } } if (this.formObj) { /* eslint-disable-next-line */ var formValid = this.formObj.validate(); if (!formValid) { target.style.pointerEvents = ''; return; } } if (this.storeDependencyTab || this.firstOccuringTab === 'Dependency') { /* eslint-disable-next-line */ var dependencyTab = void 0; if (this.firstOccuringTab === 'Dependency') { var element = e.target.closest('#' + this.parent.element.id + '_dialog'); dependencyTab = element.querySelector('.e-gridform'); } else { dependencyTab = this.storeDependencyTab.querySelector('.e-gridform'); } if (dependencyTab) { var dependencyTabValid = dependencyTab['ej2_instances'][0].validate(); if (!dependencyTabValid) { target.style.pointerEvents = ''; return; } } } if (this.storeResourceTab || this.firstOccuringTab === 'Resources') { /* eslint-disable-next-line */ var resourceTab = void 0; if (this.firstOccuringTab === 'Resources') { var element = e.target.closest('#' + this.parent.element.id + '_dialog'); resourceTab = element.querySelector('.e-gridform'); } else { resourceTab = this.storeResourceTab.querySelector('.e-gridform'); } if (resourceTab) { var resourceTabValid = resourceTab['ej2_instances'][0].validate(); if (!resourceTabValid) { target.style.pointerEvents = ''; return; } } } this.initiateDialogSave(); this.parent['updateDuration'] = false; this.CustomformObj = null; this.formObj = null; this.storeValidTab = null; this.customFieldColumn = []; this.taskFieldColumn = []; target.style.pointerEvents = 'auto'; } }; /** * @returns {void} . * @private */ DialogEdit.prototype.dialogClose = function () { if (this.dialog) { this.resetValues(); } if (!isNullOrUndefined(this.parent.focusModule) && !isNullOrUndefined(this.parent.focusModule.getActiveElement(true))) { this.parent.focusModule.getActiveElement(true).focus(); } }; DialogEdit.prototype.resetValues = function () { this.isEdit = false; this.isAddNewResource = false; this.editedRecord = {}; this.parent['triggeredColumnName'] = ''; this.rowData = {}; this.rowIndex = -1; this.addedRecord = null; this.ganttResources = []; this.dialogEditValidationFlag = false; this.isFromAddDialog = false; this.isFromEditDialog = false; this.dialogConstraintDate = null; if (this.dialog && !this.dialogObj.isDestroyed) { this.destroyDialogInnerElements(); this.dialogObj.destroy(); remove(this.dialog); this.dialog = null; } }; DialogEdit.prototype.destroyDialogInnerElements = function () { var ganttObj = this.parent; var tabModel = this.beforeOpenArgs.tabModel; var items = tabModel.items; for (var i = 0; i < items.length; i++) { var element = items[i].content; var id = element.getAttribute('id'); if (!isNullOrUndefined(id) || id !== '') { id = id.replace(ganttObj.element.id, ''); id = id.replace('TabContainer', ''); if (id === 'General') { this.destroyCustomField(element); } else if (id === 'Dependency') { var gridObj = element.ej2_instances[0]; gridObj.destroy(); } else if (id === 'Notes') { var rte = element.ej2_instances[0]; rte.destroy(); } else if (id === 'Resources') { var treeGridObj = element.ej2_instances[0]; treeGridObj.destroy(); } else if (id.indexOf('Custom') !== -1) { this.destroyCustomField(element); } } } }; DialogEdit.prototype.destroyCustomField = function (element) { var childNodes = element.childNodes; var ganttObj = this.parent; for (var i = 0; i < childNodes.length; i++) { var div = childNodes[i]; var inputElement = div.querySelector('input[id^="' + ganttObj.element.id + '"]'); if (inputElement) { var fieldName = inputElement.id.replace(ganttObj.element.id, ''); /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ var controlObj = div.querySelector('#' + ganttObj.element.id + fieldName).ej2_instances[0]; if (!isNullOrUndefined(controlObj)) { var column = ganttObj.columnByField[fieldName]; if (!isNullOrUndefined(column) && !isNullOrUndefined(column.edit) && !isNullOrUndefined(column.edit.destroy) && isNullOrUndefined(column.edit.params)) { var destroy = column.edit.destroy; if (typeof destroy === 'string') { destroy = getObject(destroy, window); destroy(); } else { column.edit.destroy(); } } else { controlObj.destroy(); } } } } }; /** * @returns {void} . * @private */ DialogEdit.prototype.destroy = function () { this.resetValues(); if (this.parent.isDestroyed) { return; } this.parent.off('chartDblClick', this.dblClickHandler); this.parent.editModule.dialogModule = undefined; }; /** * Method to get current edit dialog fields value * * @returns {AddDialogFieldSettings} . */ DialogEdit.prototype.getEditFields = function () { if (this.isEdit) { return this.updatedEditFields; } else { return this.updatedAddFields; } }; DialogEdit.prototype.createTab = function (dialogModel, dialog) { var _this = this; var ganttObj = this.parent; var tabModel = {}; var tabItems = []; var dialogSettings = this.getEditFields(); if (this.isEdit === true && ganttObj.viewType === 'ResourceView' && this.rowData.hasChildRecords) { // Filter to only keep the General tab dialogSettings = dialogSettings.filter(function (tab) { return tab.type === 'General'; }); } var tabElement; var tasks = ganttObj.taskFields; var length = dialogSettings.length; tabModel.items = tabItems; tabModel.locale = this.parent.locale; tabModel.enableRtl = this.parent.enableRtl; this.beforeOpenArgs.tabModel = tabModel; var count = 0; var index = 0; if (length > 0) { for (var i = 0; i < length; i++) { var dialogField = dialogSettings[i]; var tabItem = {}; if (dialogField.type === 'General') { if (Object.keys(ganttObj.columnMapping).length === 0) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('generalTab'); } tabItem.content = 'General'; this.beforeOpenArgs[tabItem.content] = this.getFieldsModel(dialogField.fields); } else if (dialogField.type === 'Segments') { if (isNullOrUndefined(tasks.segments)) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('segments'); } tabItem.content = 'Segments'; this.beforeOpenArgs[tabItem.content] = this.getSegmentsModel(dialogField.fields); } else if (dialogField.type === 'Dependency') { if (isNullOrUndefined(tasks.dependency)) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('dependency'); } tabItem.content = 'Dependency'; this.beforeOpenArgs[tabItem.content] = this.getPredecessorModel(dialogField.fields); } else if (dialogField.type === 'Resources') { if (isNullOrUndefined(tasks.resourceInfo)) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('resourceName'); } tabItem.content = 'Resources'; this.beforeOpenArgs[tabItem.content] = this.getResourcesModel(dialogField.fields); } else if (dialogField.type === 'Notes') { if (isNullOrUndefined(tasks.notes)) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('notes'); } tabItem.content = 'Notes'; this.beforeOpenArgs[tabItem.content] = this.getNotesModel(dialogField.fields); } else if (dialogField.type === 'Advanced') { if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('advancedTab'); } tabItem.content = 'Advanced'; this.beforeOpenArgs[tabItem.content] = this.getFieldsModel(dialogField.fields); } else { if (isNullOrUndefined(dialogField.fields) || dialogField.fields.length === 0) { continue; } if (isNullOrUndefined(dialogField.headerText)) { dialogField.headerText = this.localeObj.getConstant('customTab'); // eslint-disable-next-line count++; } tabItem.content = 'Custom' + '' + index++; this.beforeOpenArgs[tabItem.content] = this.getFieldsModel(dialogField.fields); } tabItem.header = { text: dialogField.headerText }; tabItems.push(tabItem); } } this.beforeOpenArgs.requestType = this.isEdit ? 'beforeOpenEditDialog' : 'beforeOpenAddDialog'; this.parent.trigger('actionBegin', this.beforeOpenArgs, function (arg) { if (!arg.cancel) { _this.parent['showLoadingIndicator'](); _this.renderTabItems(); tabModel.selected = _this.tabSelectedEvent.bind(_this); tabModel.height = _this.parent.isAdaptive ? '100%' : 'auto'; tabModel.overflowMode = 'Scrollable'; _this.tabObj = new Tab(tabModel); _this.tabObj.isStringTemplate = true; tabElement = _this.parent.createElement('div', { id: ganttObj.element.id + '_Tab' }); _this.tabObj.appendTo(tabElement); dialogModel.content = tabElement; _this.dialog = dialog; _this.dialogObj = new Dialog(dialogModel); _this.dialogObj.isStringTemplate = true; _this.dialogObj.appendTo(_this.dialog); var actionCompleteArgs = { action: 'OpenDialog', requestType: _this.isEdit ? 'openEditDialog' : 'openAddDialog', data: _this.beforeOpenArgs.rowData, element: _this.dialog, cancel: false }; var columns = _this.parent.treeGrid.grid.getColumns(); /* eslint-disable-next-line */ var isValidateColumn = columns.some(function (obj) { return obj.validationRules; }); if (isValidateColumn) { _this.CustomformObj = null; _this.formObj = null; _this.storeValidTab = null; _this.customFieldColumn = []; _this.taskFieldColumn = []; _this.changeFormObj(actionCompleteArgs.element); } _this.parent.trigger('actionComplete', actionCompleteArgs, function (actionCompleteArg) { _this.parent['hideLoadingIndicator'](); if (actionCompleteArg.cancel) { _this.resetValues(); } }); } else { arg.cancel = false; _this.parent['hideLoadingIndicator'](); } }); }; /* eslint-disable-next-line */ DialogEdit.prototype.changeFormObj = function (actionCompleteArgs) { if (!this.storeColumn) { this.storeColumn = this.parent.treeGrid.grid.getColumns(); } if (!this.taskfields) { this.taskfields = this.parent.taskFields['properties']; } if (!this.storeValidTab) { this.storeValidTab = this.getFilteredDialogFields(); } if (this.customFieldColumn.length === 0 || this.taskFieldColumn.length === 0) { this.validateColumn(this.storeColumn, this.taskfields, this.storeValidTab); } if (this.isFromAddDialog && this.parent.addDialogFields && this.parent.addDialogFields.length > 0) { var firstFieldType = this.parent.addDialogFields[0].type; if (firstFieldType === 'Resources' || firstFieldType === 'Dependency') { this.firstOccuringTab = firstFieldType; } } else if (this.isFromEditDialog && this.parent.editDialogFields && this.parent.editDialogFields.length > 0) { var firstFieldType = this.parent.editDialogFields[0].type; if (firstFieldType === 'Resources' || firstFieldType === 'Dependency') { this.firstOccuringTab = firstFieldType; } } if (!this.CustomformObj || !this.formObj) { var customFieldColumns = this.customFieldColumn; var taskFieldColumns = this.taskFieldColumn; if (!this.CustomformObj && customFieldColumns && customFieldColumns.length > 0) { /* eslint-disable-next-line */ var validationRulesArray = {}; for (var i = 0; i < customFieldColumns.length; i++) { var customColumn = customFieldColumns[i]; // Rename the variable if (customColumn.visible && customColumn.validationRules) { validationRulesArray[customColumn.field] = customColumn.validationRules; } } if (Object.keys(validationRulesArray).length > 0) { this.CustomformObj = actionCompleteArgs.querySelector('#' + this.parent.element.id + 'Custom0TabContainer'); if (this.CustomformObj) { this.CustomformObj = this.createFormObj(this.CustomformObj, validationRulesArray); } } } if (!this.formObj && taskFieldColumns && taskFieldColumns.length > 0) { /* eslint-disable-next-line */ var validationRulesArray = {}; for (var i = 0; i < taskFieldColumns.length; i++) { var taskColumn = taskFieldColumns[i]; // Rename the variable if (taskColumn.visible && taskColumn.validationRules) { validationRulesArray[taskColumn.field] = taskColumn.validationRules; } } if (Object.keys(validationRulesArray).length > 0) { this.formObj = actionCompleteArgs.querySelector('#' + this.parent.element.id + 'GeneralTabContainer'); if (this.formObj) { this.formObj = this.createFormObj(this.formObj, validationRulesArray); } } } } this.isFromAddDialog = false; this.isFromEditDialog = false; }; DialogEdit.prototype.getFilteredDialogFields = function () { var dialogFields = this.isFromAddDialog ? this.parent.addDialogFields : this.parent.editDialogFields; if (dialogFields.length !== 0) { return dialogFields.filter(function (obj) { return obj.type === 'General' || obj.type === 'Custom'; }); } return null; }; /* eslint-disable-next-line */ DialogEdit.prototype.validateColumn = function (storeColumn, taskfields, storeValidTab) { var _this = this; if (storeValidTab) { storeValidTab.forEach(function (element) { /* eslint-disable-next-line */ var targetArray = element.type === 'General' ? _this.taskFieldColumn : _this.customFieldColumn; element.fields.forEach(function (field) { var columnValue = _this.parent.getColumnByField(field, storeColumn); if (columnValue !== null) { targetArray.push(columnValue); } else { targetArray.push(_this.parent.columnByField[field]); } }); }); } else { /* eslint-disable-next-line */ storeColumn.forEach(function (column) { if (_this.parent.customColumns.indexOf(column.field) !== -1) { _this.customFieldColumn.push(column); } else { _this.taskFieldColumn.push(column); } }); } }; DialogEdit.prototype.createFormObj = function (form, rules) { var _this = this; return new FormValidator(form, { rules: rules, locale: this.parent.locale, validationComplete: function (args) { _this.validationComplete(args); }, customPlacement: function (inputElement, error) { var nameAttribute = inputElement.getAttribute('name'); if (nameAttribute) { var columnName = nameAttribute; _this.valErrorPlacement(inputElement, error, columnName); } } }); }; DialogEdit.prototype.valErrorPlacement = function (inputElement, error, columnName) { var id = columnName + "-tooltip"; var elem = this.getElemTable(inputElement); if (!elem) { this.createTooltip(inputElement, error, id); } else { var tooltipContent = elem.querySelector('.e-tip-content'); if (tooltipContent) { tooltipContent.innerHTML = error.outerHTML; } } }; DialogEdit.prototype.createTooltip = function (inputElement, errorMessage, id, display) { if (display === void 0) { display = 'block'; } var existingTooltip = document.getElementById(id); if (existingTooltip) { existingTooltip.remove(); } var parentElement = inputElement.parentElement; if (parentElement) { parentElement.style.position = 'relative'; } var tooltipContainer = document.createElement('div'); tooltipContainer.className = 'e-tooltip-wrap e-lib e-control e-popup e-griderror'; tooltipContainer.style.display = display; tooltipContainer.style.zIndex = '1000'; var labelId = id + "-label"; var tooltipLabel = document.createElement('div'); tooltipLabel.id = labelId; tooltipLabel.className = 'sr-only'; var tooltipContent = document.createElement('div'); tooltipContent.className = 'e-tip-content'; var errorMessageElement = document.createElement('div'); errorMessageElement.className = 'error-message'; errorMessageElement.appendChild(errorMessage.cloneNode(true)); var arrow = document.createElement('div'); arrow.className = 'e-arrow-tip e-tip-top'; arrow.appendChild(document.createElement('div')).className = 'e-arrow-tip-outer e-tip-top'; arrow.appendChild(document.createElement('div')).className = 'e-arrow-tip-inner e-tip-top'; tooltipContainer.setAttribute('aria-labelledby', labelId); tooltipContent.appendChild(errorMessageElement); tooltipContainer.appendChild(tooltipContent); tooltipContainer.appendChild(arrow); tooltipContainer.style.top = '125%'; tooltipContainer.style.left = '50%'; tooltipContainer.style.transform = 'translateX(-50%)'; if (parentElement) { parentElement.appendChild(tooltipLabel); parentElement.appendChild(tooltipContainer); } }; DialogEdit.prototype.getElemTable = function (inputElement) { var parentElement = inputElement.parentElement; if (parentElement) { return parentElement.querySelector('.e-tooltip-wrap'); } return null; }; DialogEdit.prototype.validationComplete = function (args) { var elem = this.getElemTable(args.element); if (elem) { if (args.status === 'failure') { elem.style.display = ''; } else { elem.style.display = 'none'; } } }; DialogEdit.prototype.tabSelectedEvent = function (args) { var ganttObj = this.parent; var id = args.selectedContent.childNodes[0].id; var dialogModule = this.parent.editModule.dialogModule; var dialog = dialogModule.dialog; var hasEditedBatchCell = dialog.getElementsByClassName('e-editedbatchcell').length > 0; var hasEditedOrAddedRow = dialog.getElementsByClassName('e-editedrow').length > 0 || dialog.getElementsByClassName('e-addedrow').length > 0; if (dialogModule.storeResourceTab && hasEditedBatchCell) { document.querySelector('#' + ganttObj.element.id + '' + 'Resources' + 'TabContainer_gridcontrol').ej2_instances[0].saveCell(); } else if (dialogModule.storeDependencyTab && hasEditedOrAddedRow) { document.querySelector('#' + ganttObj.element.id + '' + 'Dependency' + 'TabContainer').ej2_instances[0].editModule.batchSave(); } if (id === ganttObj.element.id + 'DependencyTabContainer') { this.storeDependencyTab = args.selectedContent; } if (id === ganttObj.element.id + 'ResourcesTabContainer') { this.storeResourceTab = args.selectedContent; } if (id === ganttObj.element.id + 'Custom0TabContainer') { var columns = this.parent.treeGrid.grid.getColumns(); /* eslint-disable-next-line */ var isValidateColumn = columns.some(function (obj) { return obj.validationRules; }); if (isValidateColumn) { this.changeFormObj(args.selectedContent); } } if (id === ganttObj.element.id + 'GeneralTabContainer') { var columns = this.parent.treeGrid.grid.getColumns(); /* eslint-disable-next-line */ var isValidateColumn = columns.some(function (obj) { return obj.validationRules; }); if (isValidateColumn) { this.changeFormObj(args.selectedContent); } } if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) { this.responsiveTabContent(id, ganttObj); } if (id === ganttObj.element.id + 'ResourcesTabContainer') { this.resourceSelection(id); } else if (id === ganttObj.element.id + 'NotesTabContainer') { document.getElementById(id).ej2_instances[0].refresh(); // const notesTabElement: HTMLElement = document.querySelector('#' + this.parent.element.id + 'NotesTabContainer') as HTMLInputElement; } else if (id === ganttObj.element.id + 'SegmentsTabContainer') { if (isNullOrUndefined(this.beforeOpenArgs.rowData.ganttProperties.startDate)) { document.getElementById(id).ej2_instances[0] .enableToolbarItems([this.parent.element.id + 'SegmentsTabContainer' + '_add'], false); } else { document.getElementById(id).ej2_instances[0] .enableToolbarItems([this.parent.element.id + 'SegmentsTabContainer' + '_add'], true); } } }; DialogEdit.prototype.responsiveTabContent = function (id, ganttObj) { var dialogContent = document.getElementById(ganttObj.element.id + '_dialog_dialog-content'); var dialogContentHeight = dialogContent.clientHeight; dialogContentHeight -= dialogContent.querySelector('.e-tab-header').offsetHeight; var grid = document.querySelector('#' + id); if (grid.classList.contains('e-grid')) { dialogContentHeight -= grid.ej2_instances[0].getHeaderContent().offsetHeight; var toolbar_1 = grid.querySelector('.e-toolbar'); if (toolbar_1) { dialogContentHeight -= toolbar_1.offsetHeight; } } grid.parentElement.style.height = dialogContentHeight + 'px'; }; DialogEdit.prototype.getFieldsModel = function (fields) { var fieldsModel = {}; var columnByField = this.parent.columnByField; for (var i = 0; i < fields.length; i++) { if (fields[i] === this.parent.taskFields.dependency || fields[i] === this.parent.taskFields.resourceInfo || fields[i] === this.parent.taskFields.notes) { continue; } if (!isNullOrUndefined(columnByField[fields[i]])) { var fieldName = fields[i]; this.createInputModel(columnByField[fieldName], fieldsModel); } } return fieldsModel; }; DialogEdit.prototype.processAndValidateScheduleDates = function (ganttObj, taskSettings) { var constraintDate = ganttObj.editModule.dialogModule.dialog.querySelector('#' + ganttObj.element.id + taskSettings.constraintDate); var constraintType = ganttObj.editModule.dialogModule.dialog.querySelector('#' + ganttObj.element.id + taskSettings.constraintType); var startDateElement = this.dialog.querySelector('#' + ganttObj.element.id + taskSettings.startDate); var endDateElement = this.dialog.querySelector('#' + ganttObj.element.id + taskSettings.endDate); this.alignDateWithConstraint(constraintDate, constraintType, startDateElement, endDateElement); }; DialogEdit.prototype.createInputModel = function (column, fieldsModel) { var _this = this; var ganttObj = this.parent; var locale = this.parent.locale; var taskSettings = this.parent.taskFields; var common = { placeholder: column.headerText, floatLabelType: 'Auto' }; if (!isNullOrUndefined(this.parent.taskFields.id) && !isNullOrUndefined(this.parent.columnMapping.id) && !isNullOrUndefined(this.numericOrString)) { if (taskSettings.id === column.field) { column.editType = this.numericOrString; } } if (column['editTemplate']) { var index = this.parent.currentViewD