SSDM-4341 : Attach DataSets on Experiments, datasets right panel as in sample form.

SVN: 37445

openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/ExperimentForm/ExperimentFormController.js

@@ -18,11 +18,19 @@ function ExperimentFormController(mainController, mode, experiment) {
 	this._mainController = mainController;
 	this._experimentFormModel = new ExperimentFormModel(mode, experiment);
 	this._experimentFormView = new ExperimentFormView(this, this._experimentFormModel);
+	this._windowHandlers = [];
 	
 	this.init = function($container) {
 		this._experimentFormView.repaint($container);
 	}
 	
+	this.finalize = function() {
+		for(var whIdx = 0; whIdx < this._windowHandlers.length; whIdx++) {
+			$(window).off("resize", this._windowHandlers[whIdx]);
+		}
+		$("#mainContainer").css("overflow-y", "auto");
+	}
+	
 	this.isDirty = function() {
 		return this._experimentFormModel.isFormDirty;
 	}

openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/ExperimentForm/ExperimentFormView.js

@@ -22,15 +22,48 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 		var _this = this;
 		$container.empty();
 		
-		var $form = $("<div>", { "class" : "row"});
+		var columnWith = 12;
+		if(this._experimentFormModel.mode === FormMode.VIEW) {
+			columnWith = 8;
+		}
+		
+		var $form = $("<span>", { "class" : "row col-md-" + columnWith });
 		
 		var $formColumn = $("<form>", { 
-			"class" : FormUtil.formColumClass + " form-horizontal", 
+			"class" : "form-horizontal form-panel-one", 
 			'role' : "form",
 			'action' : 'javascript:void(0);',
 			'onsubmit' : 'mainController.currentView.updateExperiment();'
 		});
 		
+		var $rightPanel = null;
+		if(this._experimentFormModel.mode === FormMode.VIEW) {
+			$rightPanel = $("<span>", { "class" : "row col-md-4 form-panel-two", "style" : "margin-left:20px; margin-top:20px;"});
+		}
+		//
+		if($rightPanel) {
+			var windowScrollManager = function($form, $rightPanel) {
+				return function() {
+					if($(window).width() > 1024) { //Min Desktop resolution
+						var scrollablePanelCss = {'min-height' : $(window).height() + 'px', 'max-height' : $(window).height() + 'px' };
+						$("#mainContainer").css("overflow-y", "hidden");
+						$formColumn.css(scrollablePanelCss);
+						$rightPanel.css(scrollablePanelCss);
+					} else {
+						var normalPanelCss = {'min-height' : 'initial', 'max-height' : 'initial' };
+						$("#mainContainer").css("overflow-y", "auto");
+						$formColumn.css(normalPanelCss);
+						$rightPanel.css(normalPanelCss);
+					}
+				}
+			}
+			windowScrollManager = windowScrollManager($form, $rightPanel);
+			$(window).resize(windowScrollManager);
+			this._experimentFormController._windowHandlers.push(windowScrollManager);
+			$(window).resize();
+		}
+		//
+		
 		$form.append($formColumn);
 		
 		//
@@ -44,12 +77,6 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 		var entityPath = null;
 		
 		var typeTitle = "" + ELNDictionary.getExperimentKindName(this._experimentFormModel.experiment.identifier) + ": ";
-//		if(this._experimentFormModel.experiment &&
-//		   this._experimentFormModel.experiment.identifier &&
-//		   profile.isInventorySpace(this._experimentFormModel.experiment.identifier.split("/")[1])
-//		) {
-//			typeTitle = "";
-//		}
 		
 		var title = null;
 		switch(this._experimentFormModel.mode) {
@@ -126,6 +153,28 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 		}
 		
 		$formColumn.append(FormUtil.getToolbar(toolbarModel));
+		$formColumn.append($("<br>"));
+		
+		//
+		// PREVIEW IMAGE
+		//
+		if(this._experimentFormModel.mode !== FormMode.CREATE) {
+			var $previewImage = $("<img>", { 'data-preview-loaded' : 'false',
+											 'class' : 'zoomableImage',
+											 'id' : 'preview-image',
+											 'src' : './img/image_loading.gif',
+											 'style' : 'max-width:100%; display:none;'
+											});
+			$previewImage.click(function() {
+				Util.showImage($("#preview-image").attr("src"));
+			});
+			
+			if($rightPanel && $(window).width() > 1024) { //Min Desktop resolution
+				$rightPanel.append($previewImage);
+			} else {
+				$formColumn.append($previewImage);
+			}
+		}
 		
 		//
 		// Identification Info on Create
@@ -145,13 +194,6 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 			}
 		}
 		
-		//
-		// Identification Info on not Create
-		//
-		if(this._experimentFormModel.mode !== FormMode.CREATE) {
-			this._paintIdentificationInfo($formColumn);
-		}
-		
 		//Sample List Container
 		if(this._experimentFormModel.mode !== FormMode.CREATE) {
 			$formColumn.append($("<legend>").append(ELNDictionary.Samples));
@@ -162,17 +204,27 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 		}
 		
 		//
-		// DATASETS
+		// Identification Info on not Create
 		//
+		if(this._experimentFormModel.mode !== FormMode.CREATE) {
+			this._paintIdentificationInfo($formColumn);
+		}
 		
+		//
+		// DATASETS
+		//
 		// Viewer
-		$formColumn.append($("<div>").append($("<legend>").text("DataSets")));
 		var $dataSetViewerContainer = $("<div>", { 'id' : 'dataSetViewerContainer', 'style' : 'margin-top:10px;'});
-		$formColumn.append($dataSetViewerContainer);
-		
 		// Uploader
-		var $dataSetUploaderContainer = $("<div>", { 'id' : 'dataSetUploaderContainer', 'style' : 'margin-top:10px;'});
-		$formColumn.append($dataSetUploaderContainer);
+		var $dataSetUploaderContainer = $("<div>");
+		
+		if($rightPanel) {
+			$rightPanel.append($dataSetViewerContainer);
+			$rightPanel.append($dataSetUploaderContainer);
+		} else {
+			$formColumn.append($dataSetViewerContainer);
+			$formColumn.append($dataSetUploaderContainer);
+		}
 		
 		//Create/Update Buttons
 		if(this._experimentFormModel.mode === FormMode.EDIT || this._experimentFormModel.mode === FormMode.CREATE) {
@@ -192,7 +244,13 @@ function ExperimentFormView(experimentFormController, experimentFormModel) {
 			$formColumn.append($updateBtn);
 		}
 		
+		//
+		// INIT
+		//
 		$container.append($form);
+		if($rightPanel) {
+			$container.append($rightPanel);
+		}
 		
 		Util.unblockUI();
 		

openbis_standard_technologies/dist/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/SampleForm/SampleFormView.js

@@ -231,6 +231,7 @@ function SampleFormView(sampleFormController, sampleFormModel) {
 		$formColumn.append($formTitle);
 		$formColumn.append(FormUtil.getToolbar(toolbarModel));
 		$formColumn.append($("<br>"));
+		
 		//
 		// PREVIEW IMAGE
 		//
@@ -435,7 +436,7 @@ function SampleFormView(sampleFormController, sampleFormModel) {
 		//
 		// INIT
 		//
-		$container.append($form).append($rightPanel);
+		$container.append($form);
 		if($rightPanel) {
 			$container.append($rightPanel);
 		}