Premium support for our pure JavaScript UI components


Post by progettouno »

Hei,

We need when we click with right mouse add an option and then we click on it execute a function.

Is possible? We upload also the code because when you send me instruction we don't understand where place configuration.

Thankyou
/**
* @namespace matrixPlannerController
*/
app.controller('matrixPlannerController', function($scope, $rootScope, $mdDialog, $mdToast, $filter, $cookies, order, note, rollback) {
	$scope.schedulerZoom = $cookies.get('schedulerZoom') == null ? 11 : JSON.parse($cookies.get('schedulerZoom'));
	/**
	* Set zoom of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setSchedulerZoom = function() {
		$scope.schedulerEngine.zoomLevel = $scope.schedulerZoom;
		$cookies.put('schedulerZoom', $scope.schedulerZoom);
	}

	$scope.residuals = $cookies.get('residuals') == null ? false : JSON.parse($cookies.get('residuals'));
	/**
	* Set to show residuals of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setResiduals = function() {
		$cookies.put('residuals', $scope.residuals);
	}

	/**
	* Export in excel
	* @memberOf matrixPlannerController
	*/
	$scope.exportExcel = function() {
		console.log('@todo: Export excel');
	}

	/**
	* Get unto event from matrixPlannerOptionsController
	* @memberOf matrixPlannerController
	*/
	$scope.$on('unto', function(event, data) {
		rollback.back($cookies.get('userId'), 'ProductionLot').then(function success(r) {
			order.getSingle({
				'ProductionLotGuid': r
			})
			.then(function(r) {
				var data = r;
				//create tempData for bug not update scheduler no databinding
				var tempData = $scope.schedulerEngine.eventStore.data;
				for(i = 0; i < tempData.length; i++) {
					if(tempData[i].id == data.id) {
						tempData[i] = r;
					}
				}
				$scope.schedulerEngine.eventStore.data = tempData;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		})
		.catch(function error(e) {
			var error = (e.data.error != null) ? e.data.error : 'Error';
			$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
			console.log(e);
		});
	});


	$scope.schedulerEngine = new bryntum.scheduler.Scheduler({
        appendTo: 'scheduler',
        showRemoveRowInContextMenu: false,
        enableDeleteKey: false,
        autoAdjust : true,
        rowHeight: 55,
        emptyText: '',
        columns: [
            {
            	text: $filter('uppercase')($filter('translate')('Workshop')),
            	field : 'workshop',
            	menuDisabled: true,
            	width: 289,
            	sortable: false
            },
            {
            	text: $filter('uppercase')($filter('translate')('Line')),
            	field : 'line',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${record.capacity == null ? '' : '<br/><span class="column-value-small">('+record.capacity+')</span>'}</p>
                	`;
            	}
            },
            {
            	text: $filter('uppercase')($filter('translate')('Residuals')),
            	field : 'residuals',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${(record.daysResidual == 'NaN' || record.daysResidual == '0.00')  ? '' : '<br/><span class="column-value-small">('+record.daysResidual+' '+$filter('translate')('d')+'.)</span>'}</p>
                	`;
            	}
            }
        ],
        features: {
        	scheduleContextMenu: false,
        	contextMenu: false,
        	timeRanges: true,
        	eventEdit: false,
        	eventTooltip: {
        		hoverDelay : 500,
        		template: function(tooltipData) {
        			var data = tooltipData.eventRecord.data;
        			var hasSizes = data.object.ProductionOrder.Item.HasSizes;
        			var sizesEnabled = data.object.ProductionOrder.Item.SizesEnabled;
        			var tempSizesDescription = data.object.ProductionOrder.Item.SizesDescription;
        			var tempPlannedQuantities = data.object.PlannedQuantities;
        			var tempReportedQuantities = data.object.ReportedQuantities;

        			var sizeDescription = [];
        			var plannedQuantities = [];
        			var reportedQuantities = [];

        			var tableSizes = '';

        			if(hasSizes) {
	        			for (var i = 0; i < sizesEnabled.length; i++) {
	        				if(sizesEnabled[i] == true) {
	        					sizeDescription.push(tempSizesDescription[i]);
	        					plannedQuantities.push(tempPlannedQuantities[i]);
	        					reportedQuantities.push(tempReportedQuantities[i]);
	        				}
	        			}
	        			if(sizeDescription.length > 0) {
	        				tableSizes += '<table class="table-sizes">';

	        				tableSizes += '<tr><th>'+$filter('translate')('Sizes')+'</th>';
	        				for (var i = 0; i < sizeDescription.length; i++) {
	        					tableSizes += '<td>'+(sizeDescription[i] == 0 ? '' : sizeDescription[i])+'</td>';
	        				}
	        				tableSizes += '<td class="total">'+ $filter('uppercase')($filter('translate')('Tot'))+'</td>';
	        				tableSizes += '</tr>';

	        				tableSizes += '<tr><th>'+$filter('translate')('Planned')+'</th>';
	        				sumPlannedQuantities = 0;
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					tableSizes += '<td>'+(plannedQuantities[i] == 0 ? '' : plannedQuantities[i])+'</td>';
	        					sumPlannedQuantities += plannedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumPlannedQuantities==0 ? '' : sumPlannedQuantities)+'</td></tr>';
	        				sumReportedQuantities = 0;
	        				tableSizes += '<tr><th>'+$filter('translate')('Reported')+'</th>';
	        				for (var i = 0; i < reportedQuantities.length; i++) {
	        					tableSizes += '<td>'+(reportedQuantities[i]==0 ? '' : reportedQuantities[i])+'</td>';
	        					sumReportedQuantities += reportedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumReportedQuantities==0 ? '' : sumReportedQuantities)+'</td></tr>';

	        				tableSizes += '<tr><td class="total">'+ $filter('uppercase')($filter('translate')('Diff'))+'</td>';
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					var diff = plannedQuantities[i] - reportedQuantities[i];
	        					tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td>';
	        				}
	        				diff = sumPlannedQuantities - sumReportedQuantities;
	        				tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td></tr>';

        					tableSizes += '</table>';
	        			}
        			}

        			var tempState = data.object.ProductionOrder.State;
        			var state = '-';
        			switch(tempState) {
        				case 0:
        					state = '<i class="fa fa-check-circle" aria-hidden="true"></i> '+$filter('translate')('Materials balance delivered');
        				break;
        				case 1:
        					state = '<i class="fa fa-minus-circle" aria-hidden="true"></i> '+$filter('translate')('Materials not delivered');
        				break;
        				case 2:
        					state = '<i class="fa fa-check-circle-o" aria-hidden="true"></i> '+$filter('translate')('Materials partial delivered');
        				break;
        			}

        			var startClock = $(tooltipData.startClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.startDate).format('HH:mm');
        			var endClock = $(tooltipData.endClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.endDate).format('HH:mm');

        			var tempFeasibility = data.object.ProductionOrder.Feasibility != null ? data.object.ProductionOrder.Feasibility : 0;
        			var feasibility = '';
        			if(feasibility == 100) {
        				feasibility = '<i class="fa fa-calendar-check-o" aria-hidden="true"></i>';
        			}
        			feasibility += tempFeasibility+'%<div class="state"><div class="done" style="width: '+tempFeasibility+'%"></div></div>';

        			return `
		                <div class="b-sch-event-title text-center">${data.name}</div>
		                <div class="b-sch-event-description">
		                	<table class="table-data">
		                		<tr><th>${$filter('translate')('Duration')}</th><td class="b-sch-clockwrap b-sch-clock-day b-sch-tooltip-startdate">${startClock}&nbsp;&nbsp;${endClock}</td></tr>
		                		<tr><th>${$filter('translate')('Description')}</th><td>${data.object.ProductionOrder.Item.Description}</td></tr>
		                		<tr><th>${$filter('translate')('Color')}</th><td>${data.object.ProductionOrder.Item.Color}</td></tr>
		                		<tr><th>${$filter('translate')('Feasibility')}</th><td>${feasibility}</td></tr>
		                		<tr><th>${$filter('translate')('State')}</th><td>${state}</td></tr>
		                	</table>
			                ${tableSizes}
		                </div
		            `;
		            /*
                	<tr class="tr-separator"><th>${$filter('translate')('Duration')}</th><td>${+moment.duration(data.object.Duration).asDays().toFixed(2)} ${$filter('translate')('Days')}</td></tr> <-- ??? format
                	<tr><th>${$filter('translate')('S. start')}</th><td>${data.object.WorkBeginDate}</td></tr>
                	<tr><th>${$filter('translate')('S. end')}</th><td>${data.object.WorkEndDate}</td></tr>			                	
		            */
        		}
        	},
        	eventResize: false,
        	eventDragCreate: false,
			eventDrag: {
				showExactDropPosition: true
			},
			resourceTimeRanges : true
        },
        barMargin: 5,
        eventRenderer: ({ eventRecord }) => (eventRecord),
        eventBodyTemplate : data => `
        	<div class="value">
        		<div class="content-event">${data.name} ${(data.object.ProductionOrder.Feasibility == 100) ? ' <i class="fa fa-calendar-check-o" aria-hidden="true"></i>' : '' } ${(data.object.ProductionOrder.State == 1) ? ' <i class="fa fa-minus-circle" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 2) ? ' <i class="fa fa-check-circle-o" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 0) ? ' <i class="fa fa-check-circle" aria-hidden="true"></i>' : '' }${(data.notes.length > 0 ? '&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i> ('+data.notes.length+')' : '')}<br/>(${data.done}/${data.todo})</div>
        	</div>
        	<div class="state"><div class="done" style="width: ${data.done/data.todo*100}%"></div></div>
        `,
        listeners : {
            catchAll(event) {      	
            	switch(event.type) {
				  case 'aftereventdrop':
				  	var data = event.eventRecords[0].data;
				  	//Update after drag
				    order.put(data.object.ProductionOrderGuid, data.lotNumber, {'CellId': data.resourceId, 'WorkBeginTime': moment(data.startDate).format('YYYY-MM-DD HH:mm:ss')}).then(function success(r) {
						//create tempData for bug not update scheduler no databinding
						var tempData = $scope.schedulerEngine.eventStore.data;
						for(i = 0; i < tempData.length; i++) {
							if(tempData[i].id == data.id) {
								tempData[i] = r;
							}
						}
						$scope.schedulerEngine.eventStore.data = tempData;
						$scope.schedulerEngine.selectEvent(r);
					})
					.catch(function error(e) {
						var error = (e.data.error != null) ? e.data.error : 'Error';
						$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
						console.log(e);
					});
				  break;
				  case 'eventdblclick':
				    	var data = event.eventRecord.data;
				    	$scope.popupDialog(data);
				  break;
				}
            }
        }
    });

    /**
	* Options check if is changed
	* @memberOf matrixPlannerController
	*/
	$rootScope.$watch('matrixPlannerOptionsFromDate + matrixPlannerOptionsToDate + matrixPlannerOptionsManufacturingType', function () {
		var fromDate = $rootScope.matrixPlannerOptionsFromDate;
		var toDate = $rootScope.matrixPlannerOptionsToDate;
		var manufacturingType = $rootScope.matrixPlannerOptionsManufacturingType;
		if(typeof(fromDate) != 'undefined' && typeof(toDate) != 'undefined' && typeof(manufacturingType) != 'undefined') {
			$scope.schedulerEngine.setTimeSpan(new Date(fromDate), new Date(toDate));
			$scope.setSchedulerZoom();
			order.get({'from': moment(fromDate).format('YYYY-MM-DD'), 'to': moment(toDate).format('YYYY-MM-DD'), 'manufacturingTypeId': manufacturingType}).then(function success(r) {
				$scope.schedulerEngine.eventStore.data = r.events;
				$scope.schedulerEngine.timeRanges = r.timeRanges;
				$scope.schedulerEngine.resources = r.resources;
				$scope.schedulerEngine.resourceTimeRanges = r.timeRangesResource;
				//$scope.schedulerEngine.scrollToNow(); <- not working also change date from/to
			})
			.catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		}
	});

	/**
    	* popupDialogController subcontroller for dialog
    	* @param {Object} data - Data to pass in dialog
    	* @memberOf matrixPlannerController
    */
  	function popupDialogController($scope, $mdDialog, data, note) {
  		//copy to avoid binding
  		$scope.data = angular.copy(data);

  		function getNote() {
  			note.get({
				'ObjectTable': 'ProductionLot',
				'ObjectId': $scope.data.id,
			})
			.then(function(r) {
				$scope.notes = r;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
  		}
  		getNote();	

		$scope.cancel = function() {
			$mdDialog.cancel();
		};
	    $scope.addNote = function(message) {
    		note.post({
    			'ObjectTable': 'ProductionLot',
    			'ObjectId': $scope.data.id,
    			'Text': message
    		})
    		.then(function(r) {
    			$scope.message = '';
    			getNote();

    		}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
	    }; 
  	}

  	/**
    	* Show popupDialog
    	* @param {Object} d - Data to pass in dialog
    	* @memberOf registrationController
    */

	$scope.popupDialog = function(d) {
	    $mdDialog.show({
	    	locals: {data: d},
			controller: popupDialogController,
			templateUrl: 'app/views/dialog/popup.html',
			parent: angular.element(document.body),
			clickOutsideToClose: true,
			fullscreen: $scope.customFullscreen,
			onRemoving: function (event, removePromise) {
				//update order get single order and replace
          		order.getSingle({
					'ProductionLotGuid': d.object.ProductionLotGuid
				})
				.then(function(r) {
					var data = d;
					//create tempData for bug not update scheduler no databinding
					var tempData = $scope.schedulerEngine.eventStore.data;
					for(i = 0; i < tempData.length; i++) {
						if(tempData[i].id == data.id) {
							tempData[i] = r;
						}
					}
					$scope.schedulerEngine.eventStore.data = tempData;
				}).catch(function error(e) {
					var error = (e.data.error != null) ? e.data.error : 'Error';
					$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
					console.log(e);
				});
        	}
	    })
	    .then(function(r) {
	    	
	    }, function() {});
  	}
});

Post by pmiklashevich »

We need when we click with right mouse add an option and then we click on it execute a function. Is possible?
Could you please explain more detailed what menu you want and where it should be placed? Maybe with screenshots?

Also please mention in every your posts app details: what app it is, versions etc.

Pavlo Miklashevych
Sr. Frontend Developer


Post by progettouno »

We use Angularjs, Scheduler 1.2

Post by progettouno »

Attachment
Attachments
right.jpg
right.jpg (385.37 KiB) Viewed 1436 times

Post by mats »

Sure it's possible, please see our docs: https://bryntum.com/docs/scheduler/#Sch ... ontextMenu

Post by progettouno »

Thankyou is possibile to remove deleteEvent and insert our options?
With our code how we can do it?

Thankyou
/**
* @namespace matrixPlannerController
*/
app.controller('matrixPlannerController', function($scope, $rootScope, $mdDialog, $mdToast, $filter, $cookies, order, note, rollback) {
	$scope.schedulerZoom = $cookies.get('schedulerZoom') == null ? 11 : JSON.parse($cookies.get('schedulerZoom'));
	/**
	* Set zoom of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setSchedulerZoom = function() {
		$scope.schedulerEngine.zoomLevel = $scope.schedulerZoom;
		$cookies.put('schedulerZoom', $scope.schedulerZoom);
	}

	$scope.residuals = $cookies.get('residuals') == null ? false : JSON.parse($cookies.get('residuals'));
	/**
	* Set to show residuals of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setResiduals = function() {
		$cookies.put('residuals', $scope.residuals);
	}

	/**
	* Export in excel
	* @memberOf matrixPlannerController
	*/
	$scope.exportExcel = function() {
		console.log('@todo: Export excel');
	}

	/**
	* Get unto event from matrixPlannerOptionsController
	* @memberOf matrixPlannerController
	*/
	$scope.$on('unto', function(event, data) {
		rollback.back($cookies.get('userId'), 'ProductionLot').then(function success(r) {
			order.getSingle({
				'ProductionLotGuid': r
			})
			.then(function(r) {
				var data = r;
				//create tempData for bug not update scheduler no databinding
				var tempData = $scope.schedulerEngine.eventStore.data;
				for(i = 0; i < tempData.length; i++) {
					if(tempData[i].id == data.id) {
						tempData[i] = r;
					}
				}
				$scope.schedulerEngine.eventStore.data = tempData;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		})
		.catch(function error(e) {
			var error = (e.data.error != null) ? e.data.error : 'Error';
			$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
			console.log(e);
		});
	});


	$scope.schedulerEngine = new bryntum.scheduler.Scheduler({
        appendTo: 'scheduler',
        showRemoveRowInContextMenu: false,
        enableDeleteKey: false,
        autoAdjust : true,
        rowHeight: 55,
        emptyText: '',
        columns: [
            {
            	text: $filter('uppercase')($filter('translate')('Workshop')),
            	field : 'workshop',
            	menuDisabled: true,
            	width: 289,
            	sortable: false
            },
            {
            	text: $filter('uppercase')($filter('translate')('Line')),
            	field : 'line',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${record.capacity == null ? '' : '<br/><span class="column-value-small">('+record.capacity+')</span>'}</p>
                	`;
            	}
            },
            {
            	text: $filter('uppercase')($filter('translate')('Residuals')),
            	field : 'residuals',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${(record.daysResidual == 'NaN' || record.daysResidual == '0.00')  ? '' : '<br/><span class="column-value-small">('+record.daysResidual+' '+$filter('translate')('d')+'.)</span>'}</p>
                	`;
            	}
            }
        ],
        features: {
        	scheduleContextMenu: false,
        	contextMenu: false,
        	timeRanges: true,
        	eventEdit: false,
        	eventTooltip: {
        		hoverDelay : 500,
        		template: function(tooltipData) {
        			var data = tooltipData.eventRecord.data;
        			var hasSizes = data.object.ProductionOrder.Item.HasSizes;
        			var sizesEnabled = data.object.ProductionOrder.Item.SizesEnabled;
        			var tempSizesDescription = data.object.ProductionOrder.Item.SizesDescription;
        			var tempPlannedQuantities = data.object.PlannedQuantities;
        			var tempReportedQuantities = data.object.ReportedQuantities;

        			var sizeDescription = [];
        			var plannedQuantities = [];
        			var reportedQuantities = [];

        			var tableSizes = '';

        			if(hasSizes) {
	        			for (var i = 0; i < sizesEnabled.length; i++) {
	        				if(sizesEnabled[i] == true) {
	        					sizeDescription.push(tempSizesDescription[i]);
	        					plannedQuantities.push(tempPlannedQuantities[i]);
	        					reportedQuantities.push(tempReportedQuantities[i]);
	        				}
	        			}
	        			if(sizeDescription.length > 0) {
	        				tableSizes += '<table class="table-sizes">';

	        				tableSizes += '<tr><th>'+$filter('translate')('Sizes')+'</th>';
	        				for (var i = 0; i < sizeDescription.length; i++) {
	        					tableSizes += '<td>'+(sizeDescription[i] == 0 ? '' : sizeDescription[i])+'</td>';
	        				}
	        				tableSizes += '<td class="total">'+ $filter('uppercase')($filter('translate')('Tot'))+'</td>';
	        				tableSizes += '</tr>';

	        				tableSizes += '<tr><th>'+$filter('translate')('Planned')+'</th>';
	        				sumPlannedQuantities = 0;
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					tableSizes += '<td>'+(plannedQuantities[i] == 0 ? '' : plannedQuantities[i])+'</td>';
	        					sumPlannedQuantities += plannedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumPlannedQuantities==0 ? '' : sumPlannedQuantities)+'</td></tr>';
	        				sumReportedQuantities = 0;
	        				tableSizes += '<tr><th>'+$filter('translate')('Reported')+'</th>';
	        				for (var i = 0; i < reportedQuantities.length; i++) {
	        					tableSizes += '<td>'+(reportedQuantities[i]==0 ? '' : reportedQuantities[i])+'</td>';
	        					sumReportedQuantities += reportedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumReportedQuantities==0 ? '' : sumReportedQuantities)+'</td></tr>';

	        				tableSizes += '<tr><td class="total">'+ $filter('uppercase')($filter('translate')('Diff'))+'</td>';
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					var diff = plannedQuantities[i] - reportedQuantities[i];
	        					tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td>';
	        				}
	        				diff = sumPlannedQuantities - sumReportedQuantities;
	        				tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td></tr>';

        					tableSizes += '</table>';
	        			}
        			}

        			var tempState = data.object.ProductionOrder.State;
        			var state = '-';
        			switch(tempState) {
        				case 0:
        					state = '<i class="fa fa-check-circle" aria-hidden="true"></i> '+$filter('translate')('Materials balance delivered');
        				break;
        				case 1:
        					state = '<i class="fa fa-minus-circle" aria-hidden="true"></i> '+$filter('translate')('Materials not delivered');
        				break;
        				case 2:
        					state = '<i class="fa fa-check-circle-o" aria-hidden="true"></i> '+$filter('translate')('Materials partial delivered');
        				break;
        			}

        			var startClock = $(tooltipData.startClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.startDate).format('HH:mm');
        			var endClock = $(tooltipData.endClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.endDate).format('HH:mm');

        			var tempFeasibility = data.object.ProductionOrder.Feasibility != null ? data.object.ProductionOrder.Feasibility : 0;
        			var feasibility = '';
        			if(feasibility == 100) {
        				feasibility = '<i class="fa fa-calendar-check-o" aria-hidden="true"></i>';
        			}
        			feasibility += tempFeasibility+'%<div class="state"><div class="done" style="width: '+tempFeasibility+'%"></div></div>';

        			return `
		                <div class="b-sch-event-title text-center">${data.name}</div>
		                <div class="b-sch-event-description">
		                	<table class="table-data">
		                		<tr><th>${$filter('translate')('Duration')}</th><td class="b-sch-clockwrap b-sch-clock-day b-sch-tooltip-startdate">${startClock}&nbsp;&nbsp;${endClock}</td></tr>
		                		<tr><th>${$filter('translate')('Description')}</th><td>${data.object.ProductionOrder.Item.Description}</td></tr>
		                		<tr><th>${$filter('translate')('Color')}</th><td>${data.object.ProductionOrder.Item.Color}</td></tr>
		                		<tr><th>${$filter('translate')('Feasibility')}</th><td>${feasibility}</td></tr>
		                		<tr><th>${$filter('translate')('State')}</th><td>${state}</td></tr>
		                	</table>
			                ${tableSizes}
		                </div
		            `;
		            /*
                	<tr class="tr-separator"><th>${$filter('translate')('Duration')}</th><td>${+moment.duration(data.object.Duration).asDays().toFixed(2)} ${$filter('translate')('Days')}</td></tr> <-- ??? format
                	<tr><th>${$filter('translate')('S. start')}</th><td>${data.object.WorkBeginDate}</td></tr>
                	<tr><th>${$filter('translate')('S. end')}</th><td>${data.object.WorkEndDate}</td></tr>			                	
		            */
        		}
        	},
        	eventResize: false,
        	eventDragCreate: false,
			eventDrag: {
				showExactDropPosition: true
			},
			resourceTimeRanges : true
        },
        barMargin: 5,
        eventRenderer: ({ eventRecord }) => (eventRecord),
        eventBodyTemplate : data => `
        	<div class="value">
        		<div class="content-event">${data.name} ${(data.object.ProductionOrder.Feasibility == 100) ? ' <i class="fa fa-calendar-check-o" aria-hidden="true"></i>' : '' } ${(data.object.ProductionOrder.State == 1) ? ' <i class="fa fa-minus-circle" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 2) ? ' <i class="fa fa-check-circle-o" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 0) ? ' <i class="fa fa-check-circle" aria-hidden="true"></i>' : '' }${(data.notes.length > 0 ? '&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i> ('+data.notes.length+')' : '')}<br/>(${data.done}/${data.todo})</div>
        	</div>
        	<div class="state"><div class="done" style="width: ${data.done/data.todo*100}%"></div></div>
        `,
        listeners : {
            catchAll(event) {      	
            	switch(event.type) {
				  case 'aftereventdrop':
				  	var data = event.eventRecords[0].data;
				  	//Update after drag
				    order.put(data.object.ProductionOrderGuid, data.lotNumber, {'CellId': data.resourceId, 'WorkBeginTime': moment(data.startDate).format('YYYY-MM-DD HH:mm:ss')}).then(function success(r) {
						//create tempData for bug not update scheduler no databinding
						var tempData = $scope.schedulerEngine.eventStore.data;
						for(i = 0; i < tempData.length; i++) {
							if(tempData[i].id == data.id) {
								tempData[i] = r;
							}
						}
						$scope.schedulerEngine.eventStore.data = tempData;
						$scope.schedulerEngine.selectEvent(r);
					})
					.catch(function error(e) {
						var error = (e.data.error != null) ? e.data.error : 'Error';
						$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
						console.log(e);
					});
				  break;
				  case 'eventdblclick':
				    	var data = event.eventRecord.data;
				    	$scope.popupDialog(data);
				  break;
				}
            }
        }
    });

    /**
	* Options check if is changed
	* @memberOf matrixPlannerController
	*/
	$rootScope.$watch('matrixPlannerOptionsFromDate + matrixPlannerOptionsToDate + matrixPlannerOptionsManufacturingType', function () {
		var fromDate = $rootScope.matrixPlannerOptionsFromDate;
		var toDate = $rootScope.matrixPlannerOptionsToDate;
		var manufacturingType = $rootScope.matrixPlannerOptionsManufacturingType;
		if(typeof(fromDate) != 'undefined' && typeof(toDate) != 'undefined' && typeof(manufacturingType) != 'undefined') {
			$scope.schedulerEngine.setTimeSpan(new Date(fromDate), new Date(toDate));
			$scope.setSchedulerZoom();
			order.get({'from': moment(fromDate).format('YYYY-MM-DD'), 'to': moment(toDate).format('YYYY-MM-DD'), 'manufacturingTypeId': manufacturingType}).then(function success(r) {
				$scope.schedulerEngine.eventStore.data = r.events;
				$scope.schedulerEngine.timeRanges = r.timeRanges;
				$scope.schedulerEngine.resources = r.resources;
				$scope.schedulerEngine.resourceTimeRanges = r.timeRangesResource;
				//$scope.schedulerEngine.scrollToNow(); <- not working also change date from/to
			})
			.catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		}
	});

	/**
    	* popupDialogController subcontroller for dialog
    	* @param {Object} data - Data to pass in dialog
    	* @memberOf matrixPlannerController
    */
  	function popupDialogController($scope, $mdDialog, data, note) {
  		//copy to avoid binding
  		$scope.data = angular.copy(data);

  		function getNote() {
  			note.get({
				'ObjectTable': 'ProductionLot',
				'ObjectId': $scope.data.id,
			})
			.then(function(r) {
				$scope.notes = r;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
  		}
  		getNote();	

		$scope.cancel = function() {
			$mdDialog.cancel();
		};
	    $scope.addNote = function(message) {
    		note.post({
    			'ObjectTable': 'ProductionLot',
    			'ObjectId': $scope.data.id,
    			'Text': message
    		})
    		.then(function(r) {
    			$scope.message = '';
    			getNote();

    		}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
	    }; 
  	}

  	/**
    	* Show popupDialog
    	* @param {Object} d - Data to pass in dialog
    	* @memberOf registrationController
    */

	$scope.popupDialog = function(d) {
	    $mdDialog.show({
	    	locals: {data: d},
			controller: popupDialogController,
			templateUrl: 'app/views/dialog/popup.html',
			parent: angular.element(document.body),
			clickOutsideToClose: true,
			fullscreen: $scope.customFullscreen,
			onRemoving: function (event, removePromise) {
				//update order get single order and replace
          		order.getSingle({
					'ProductionLotGuid': d.object.ProductionLotGuid
				})
				.then(function(r) {
					var data = d;
					//create tempData for bug not update scheduler no databinding
					var tempData = $scope.schedulerEngine.eventStore.data;
					for(i = 0; i < tempData.length; i++) {
						if(tempData[i].id == data.id) {
							tempData[i] = r;
						}
					}
					$scope.schedulerEngine.eventStore.data = tempData;
				}).catch(function error(e) {
					var error = (e.data.error != null) ? e.data.error : 'Error';
					$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
					console.log(e);
				});
        	}
	    })
	    .then(function(r) {
	    	
	    }, function() {});
  	}
});

Post by progettouno »

It works, we'd like to remove deleteEvent

Our code is:
/**
* @namespace matrixPlannerController
*/
app.controller('matrixPlannerController', function($scope, $rootScope, $mdDialog, $mdToast, $filter, $cookies, order, note, rollback) {
	$scope.schedulerZoom = $cookies.get('schedulerZoom') == null ? 11 : JSON.parse($cookies.get('schedulerZoom'));
	/**
	* Set zoom of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setSchedulerZoom = function() {
		$scope.schedulerEngine.zoomLevel = $scope.schedulerZoom;
		$cookies.put('schedulerZoom', $scope.schedulerZoom);
	}

	$scope.residuals = $cookies.get('residuals') == null ? false : JSON.parse($cookies.get('residuals'));
	/**
	* Set to show residuals of scheduler
	* @memberOf matrixPlannerController
	*/
	$scope.setResiduals = function() {
		$cookies.put('residuals', $scope.residuals);
	}

	/**
	* Export in excel
	* @memberOf matrixPlannerController
	*/
	$scope.exportExcel = function() {
		console.log('@todo: Export excel');
	}

	/**
	* Get unto event from matrixPlannerOptionsController
	* @memberOf matrixPlannerController
	*/
	$scope.$on('unto', function(event, data) {
		rollback.back($cookies.get('userId'), 'ProductionLot').then(function success(r) {
			order.getSingle({
				'ProductionLotGuid': r
			})
			.then(function(r) {
				var data = r;
				//create tempData for bug not update scheduler no databinding
				var tempData = $scope.schedulerEngine.eventStore.data;
				for(i = 0; i < tempData.length; i++) {
					if(tempData[i].id == data.id) {
						tempData[i] = r;
					}
				}
				$scope.schedulerEngine.eventStore.data = tempData;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		})
		.catch(function error(e) {
			var error = (e.data.error != null) ? e.data.error : 'Error';
			$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
			console.log(e);
		});
	});


	$scope.schedulerEngine = new bryntum.scheduler.Scheduler({
        appendTo: 'scheduler',
        showRemoveRowInContextMenu: false,
        enableDeleteKey: false,
        autoAdjust : true,
        rowHeight: 55,
        emptyText: '',
        columns: [
            {
            	text: $filter('uppercase')($filter('translate')('Workshop')),
            	field : 'workshop',
            	menuDisabled: true,
            	width: 289,
            	sortable: false
            },
            {
            	text: $filter('uppercase')($filter('translate')('Line')),
            	field : 'line',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${record.capacity == null ? '' : '<br/><span class="column-value-small">('+record.capacity+')</span>'}</p>
                	`;
            	}
            },
            {
            	text: $filter('uppercase')($filter('translate')('Residuals')),
            	field : 'residuals',            	
            	menuDisabled: true,
            	width: 90,
            	htmlEncode: false,
            	sortable: false,
            	renderer({record, value, size}) {
            		return `
                    <p><span class="column-value">${value == null ? '-' : value}</span>${(record.daysResidual == 'NaN' || record.daysResidual == '0.00')  ? '' : '<br/><span class="column-value-small">('+record.daysResidual+' '+$filter('translate')('d')+'.)</span>'}</p>
                	`;
            	}
            }
        ],
        features: {
        	scheduleContextMenu: false,
        	contextMenu: false,
        	eventContextMenu : {
            // Extra items for all events
            extraItems : [
                {
                    text : 'Split',
                    icon : 'fa fa-scissors',
                    onItem({eventRecord}) {
                    	console.log(eventRecord);
                    }
                }
            ]
        },
        	timeRanges: true,
        	eventEdit: false,
        	eventTooltip: {
        		hoverDelay : 500,
        		template: function(tooltipData) {
        			var data = tooltipData.eventRecord.data;
        			var hasSizes = data.object.ProductionOrder.Item.HasSizes;
        			var sizesEnabled = data.object.ProductionOrder.Item.SizesEnabled;
        			var tempSizesDescription = data.object.ProductionOrder.Item.SizesDescription;
        			var tempPlannedQuantities = data.object.PlannedQuantities;
        			var tempReportedQuantities = data.object.ReportedQuantities;

        			var sizeDescription = [];
        			var plannedQuantities = [];
        			var reportedQuantities = [];

        			var tableSizes = '';

        			if(hasSizes) {
	        			for (var i = 0; i < sizesEnabled.length; i++) {
	        				if(sizesEnabled[i] == true) {
	        					sizeDescription.push(tempSizesDescription[i]);
	        					plannedQuantities.push(tempPlannedQuantities[i]);
	        					reportedQuantities.push(tempReportedQuantities[i]);
	        				}
	        			}
	        			if(sizeDescription.length > 0) {
	        				tableSizes += '<table class="table-sizes">';

	        				tableSizes += '<tr><th>'+$filter('translate')('Sizes')+'</th>';
	        				for (var i = 0; i < sizeDescription.length; i++) {
	        					tableSizes += '<td>'+(sizeDescription[i] == 0 ? '' : sizeDescription[i])+'</td>';
	        				}
	        				tableSizes += '<td class="total">'+ $filter('uppercase')($filter('translate')('Tot'))+'</td>';
	        				tableSizes += '</tr>';

	        				tableSizes += '<tr><th>'+$filter('translate')('Planned')+'</th>';
	        				sumPlannedQuantities = 0;
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					tableSizes += '<td>'+(plannedQuantities[i] == 0 ? '' : plannedQuantities[i])+'</td>';
	        					sumPlannedQuantities += plannedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumPlannedQuantities==0 ? '' : sumPlannedQuantities)+'</td></tr>';
	        				sumReportedQuantities = 0;
	        				tableSizes += '<tr><th>'+$filter('translate')('Reported')+'</th>';
	        				for (var i = 0; i < reportedQuantities.length; i++) {
	        					tableSizes += '<td>'+(reportedQuantities[i]==0 ? '' : reportedQuantities[i])+'</td>';
	        					sumReportedQuantities += reportedQuantities[i];
	        				}
	        				tableSizes += '<td class="total">'+(sumReportedQuantities==0 ? '' : sumReportedQuantities)+'</td></tr>';

	        				tableSizes += '<tr><td class="total">'+ $filter('uppercase')($filter('translate')('Diff'))+'</td>';
	        				for (var i = 0; i < plannedQuantities.length; i++) {
	        					var diff = plannedQuantities[i] - reportedQuantities[i];
	        					tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td>';
	        				}
	        				diff = sumPlannedQuantities - sumReportedQuantities;
	        				tableSizes += '<td class="total">'+(diff==0 ? '' : diff)+'</td></tr>';

        					tableSizes += '</table>';
	        			}
        			}

        			var tempState = data.object.ProductionOrder.State;
        			var state = '-';
        			switch(tempState) {
        				case 0:
        					state = '<i class="fa fa-check-circle" aria-hidden="true"></i> '+$filter('translate')('Materials balance delivered');
        				break;
        				case 1:
        					state = '<i class="fa fa-minus-circle" aria-hidden="true"></i> '+$filter('translate')('Materials not delivered');
        				break;
        				case 2:
        					state = '<i class="fa fa-check-circle-o" aria-hidden="true"></i> '+$filter('translate')('Materials partial delivered');
        				break;
        			}

        			var startClock = $(tooltipData.startClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.startDate).format('HH:mm');
        			var endClock = $(tooltipData.endClockHtml).find('.b-sch-clock')[0].outerHTML+'&nbsp;'+ moment(tooltipData.endDate).format('HH:mm');

        			var tempFeasibility = data.object.ProductionOrder.Feasibility != null ? data.object.ProductionOrder.Feasibility : 0;
        			var feasibility = '';
        			if(feasibility == 100) {
        				feasibility = '<i class="fa fa-calendar-check-o" aria-hidden="true"></i>';
        			}
        			feasibility += tempFeasibility+'%<div class="state"><div class="done" style="width: '+tempFeasibility+'%"></div></div>';

        			return `
		                <div class="b-sch-event-title text-center">${data.name}</div>
		                <div class="b-sch-event-description">
		                	<table class="table-data">
		                		<tr><th>${$filter('translate')('Duration')}</th><td class="b-sch-clockwrap b-sch-clock-day b-sch-tooltip-startdate">${startClock}&nbsp;&nbsp;${endClock}</td></tr>
		                		<tr><th>${$filter('translate')('Description')}</th><td>${data.object.ProductionOrder.Item.Description}</td></tr>
		                		<tr><th>${$filter('translate')('Color')}</th><td>${data.object.ProductionOrder.Item.Color}</td></tr>
		                		<tr><th>${$filter('translate')('Feasibility')}</th><td>${feasibility}</td></tr>
		                		<tr><th>${$filter('translate')('State')}</th><td>${state}</td></tr>
		                	</table>
			                ${tableSizes}
		                </div
		            `;
		            /*
                	<tr class="tr-separator"><th>${$filter('translate')('Duration')}</th><td>${+moment.duration(data.object.Duration).asDays().toFixed(2)} ${$filter('translate')('Days')}</td></tr> <-- ??? format
                	<tr><th>${$filter('translate')('S. start')}</th><td>${data.object.WorkBeginDate}</td></tr>
                	<tr><th>${$filter('translate')('S. end')}</th><td>${data.object.WorkEndDate}</td></tr>			                	
		            */
        		}
        	},
        	eventResize: false,
        	eventDragCreate: false,
			eventDrag: {
				showExactDropPosition: true
			},
			resourceTimeRanges : true
        },
        barMargin: 5,
        eventRenderer: ({ eventRecord }) => (eventRecord),
        eventBodyTemplate : data => `
        	<div class="value">
        		<div class="content-event">${data.name} ${(data.object.ProductionOrder.Feasibility == 100) ? ' <i class="fa fa-calendar-check-o" aria-hidden="true"></i>' : '' } ${(data.object.ProductionOrder.State == 1) ? ' <i class="fa fa-minus-circle" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 2) ? ' <i class="fa fa-check-circle-o" aria-hidden="true"></i>' : '' }${(data.object.ProductionOrder.State == 0) ? ' <i class="fa fa-check-circle" aria-hidden="true"></i>' : '' }${(data.notes.length > 0 ? '&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i> ('+data.notes.length+')' : '')}<br/>(${data.done}/${data.todo})</div>
        	</div>
        	<div class="state"><div class="done" style="width: ${data.done/data.todo*100}%"></div></div>
        `,
        listeners : {
            catchAll(event) {      	
            	switch(event.type) {
				  case 'aftereventdrop':
				  	var data = event.eventRecords[0].data;
				  	//Update after drag
				    order.put(data.object.ProductionOrderGuid, data.lotNumber, {'CellId': data.resourceId, 'WorkBeginTime': moment(data.startDate).format('YYYY-MM-DD HH:mm:ss')}).then(function success(r) {
						//create tempData for bug not update scheduler no databinding
						var tempData = $scope.schedulerEngine.eventStore.data;
						for(i = 0; i < tempData.length; i++) {
							if(tempData[i].id == data.id) {
								tempData[i] = r;
							}
						}
						$scope.schedulerEngine.eventStore.data = tempData;
						$scope.schedulerEngine.selectEvent(r);
					})
					.catch(function error(e) {
						var error = (e.data.error != null) ? e.data.error : 'Error';
						$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
						console.log(e);
					});
				  break;
				  case 'eventdblclick':
				    	var data = event.eventRecord.data;
				    	$scope.popupDialog(data);
				  break;
				}
            }
        }
    });

    /**
	* Options check if is changed
	* @memberOf matrixPlannerController
	*/
	$rootScope.$watch('matrixPlannerOptionsFromDate + matrixPlannerOptionsToDate + matrixPlannerOptionsManufacturingType', function () {
		var fromDate = $rootScope.matrixPlannerOptionsFromDate;
		var toDate = $rootScope.matrixPlannerOptionsToDate;
		var manufacturingType = $rootScope.matrixPlannerOptionsManufacturingType;
		if(typeof(fromDate) != 'undefined' && typeof(toDate) != 'undefined' && typeof(manufacturingType) != 'undefined') {
			$scope.schedulerEngine.setTimeSpan(new Date(fromDate), new Date(toDate));
			$scope.setSchedulerZoom();
			order.get({'from': moment(fromDate).format('YYYY-MM-DD'), 'to': moment(toDate).format('YYYY-MM-DD'), 'manufacturingTypeId': manufacturingType}).then(function success(r) {
				$scope.schedulerEngine.eventStore.data = r.events;
				$scope.schedulerEngine.timeRanges = r.timeRanges;
				$scope.schedulerEngine.resources = r.resources;
				$scope.schedulerEngine.resourceTimeRanges = r.timeRangesResource;
				//$scope.schedulerEngine.scrollToNow(); <- not working also change date from/to
			})
			.catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
		}
	});

	/**
    	* popupDialogController subcontroller for dialog
    	* @param {Object} data - Data to pass in dialog
    	* @memberOf matrixPlannerController
    */
  	function popupDialogController($scope, $mdDialog, data, note) {
  		//copy to avoid binding
  		$scope.data = angular.copy(data);

  		function getNote() {
  			note.get({
				'ObjectTable': 'ProductionLot',
				'ObjectId': $scope.data.id,
			})
			.then(function(r) {
				$scope.notes = r;
			}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
  		}
  		getNote();	

		$scope.cancel = function() {
			$mdDialog.cancel();
		};
	    $scope.addNote = function(message) {
    		note.post({
    			'ObjectTable': 'ProductionLot',
    			'ObjectId': $scope.data.id,
    			'Text': message
    		})
    		.then(function(r) {
    			$scope.message = '';
    			getNote();

    		}).catch(function error(e) {
				var error = (e.data.error != null) ? e.data.error : 'Error';
				$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
				console.log(e);
			});
	    }; 
  	}

  	/**
    	* Show popupDialog
    	* @param {Object} d - Data to pass in dialog
    	* @memberOf registrationController
    */

	$scope.popupDialog = function(d) {
	    $mdDialog.show({
	    	locals: {data: d},
			controller: popupDialogController,
			templateUrl: 'app/views/dialog/popup.html',
			parent: angular.element(document.body),
			clickOutsideToClose: true,
			fullscreen: $scope.customFullscreen,
			onRemoving: function (event, removePromise) {
				//update order get single order and replace
          		order.getSingle({
					'ProductionLotGuid': d.object.ProductionLotGuid
				})
				.then(function(r) {
					var data = d;
					//create tempData for bug not update scheduler no databinding
					var tempData = $scope.schedulerEngine.eventStore.data;
					for(i = 0; i < tempData.length; i++) {
						if(tempData[i].id == data.id) {
							tempData[i] = r;
						}
					}
					$scope.schedulerEngine.eventStore.data = tempData;
				}).catch(function error(e) {
					var error = (e.data.error != null) ? e.data.error : 'Error';
					$mdToast.show($mdToast.simple().textContent($filter('translate')(error)));
					console.log(e);
				});
        	}
	    })
	    .then(function(r) {
	    	
	    }, function() {});
  	}
});
Attachments
remove.jpg
remove.jpg (409.81 KiB) Viewed 1426 times

Post by pmiklashevich »

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply