- Updated various client controls

- Introduced tuple and record containers
- Moved static rendering to the client side, using staticDisplay-flag, instead of using VHtmlDisplay display-mode in GenVisualize

git-svn-id: https://svn.cs.ru.nl/repos/iTask-system/trunk@978 63da3aa8-80fd-4f01-9db8-e6ea747a3da2

Client/build.jsb2

@@ -23,7 +23,6 @@
 		,{"text":"StringControl.js","path":"src/js/tui/"}
 		,{"text":"TimeControl.js","path":"src/js/tui/"}
 		,{"text":"UsernameControl.js","path":"src/js/tui/"}
-		,{"text":"DisplayControl.js","path":"src/js/tui/"}
 		,{"text":"ListContainer.js","path":"src/js/tui/"}
 		,{"text":"RecordContainer.js","path":"src/js/tui/"}
 		,{"text":"TupleContainer.js","path":"src/js/tui/"}

Client/src/js/itasks.ListPanel.js

@@ -30,7 +30,7 @@ itasks.ListPanel = Ext.extend(Ext.Panel,
 			var addButtonPanel = new Ext.Panel({
 				layout: 'ux.html',
 				html: '<table><tr><td style="font-style: italic; padding-right: 5px;">The list is empty.</td><td><span name="button"></span></td></tr></table>',
-				items: [addButton],
+				items: (this.staticDisplay)?[]:[addButton],
 				baseCls: 'list-item'
 			});
 			
@@ -119,7 +119,7 @@ itasks.list.Toolbox = Ext.extend(Ext.Panel,{
 
 itasks.list.Item = Ext.extend(Ext.Panel,{	
 	initComponent: function(){
-		
+			
 		Ext.apply(this,
 		{ border: false
 		, cls: 'list-item'
@@ -138,8 +138,8 @@ itasks.list.Item = Ext.extend(Ext.Panel,{
 		itasks.list.Item.superclass.initComponent.apply(this,arguments);
 	},
 	
-	afterRender: function(){
-		this.add(this.toolbox);
+	afterRender: function(){	
+		if(!this.ownerCt.staticDisplay) this.add(this.toolbox);
 		itasks.list.Item.superclass.afterRender.call(this,arguments);
 	}
 });

Client/src/js/ttc/FormContainer.js

@@ -7,7 +7,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
 		this.tbar = this.content.tbar;
 		this.replaceItems = [];
 		delete this.content;
-		
+				
 		Ext.apply(this,
 		{ layout: 'anchor'
 		, taskUpdates : {}
@@ -93,13 +93,23 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
 							itasks.ttc.common.attachTaskHandlers(newct);
 						}
 						break;
+					case "TUIAddTo":
+						var ct = Ext.getCmp(update[1]);
+						if(ct){
+							ct.add(update[2]);		
+							ct.doLayout();
+						
+							itasks.ttc.common.attachTaskHandlers(ct);							
+						}
+						
+						break;					
 					case "TUIRemove":
 						var ct = Ext.getCmp(update[1]);
 						
 						if(ct) {
 							var oct = ct.ownerCt;
-							oct.remove(update[1]);
 							
+							oct.remove(update[1]);							
 							oct.ownerCt.doLayout();
 							oct.ownerCt.syncSize();
 						}
@@ -125,7 +135,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
 							
 							oct.doLayout();
 							oct.syncSize();
-							oct.ownerCt.doLayout();
+							//oct.ownerCt.doLayout();
 							
 							//this.attachTaskHandlers(newct);
 							itasks.ttc.common.attachTaskHandlers(newct);
@@ -140,6 +150,7 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
 						break;
 					case "TUISetValue":
 						var ct = Ext.getCmp(update[1]);
+						
 						if(ct && ct.setValue) {
 							//suspend events to prevent check-event for checkbox
 							ct.suspendEvents();
@@ -152,8 +163,8 @@ itasks.ttc.FormContainer = Ext.extend(Ext.Panel, {
 										cur.setValue(false);
 									//...then set new one
 									ct.setValue(true);
-								}
-							} else {
+								}			
+							}else {
 								ct.setValue(update[2]);
 							}
 							ct.resumeEvents();

Client/src/js/ttc/TTCCommon.js

@@ -30,6 +30,7 @@ itasks.ttc.common.attachTaskHandlers = function(comp,taskId){
 		
 		var value;
 		switch(this.xtype) {
+			case "itasks.tui.Date": value = this.getRawValue(); break;
 			case "radiogroup": value = this.getValue().value; break;
 			case "checkboxgroup": value = checkboxValues(arguments[1]); break;
 			default: value = this.getValue();

Client/src/js/tui/BoolControl.js

@@ -2,12 +2,28 @@ Ext.ns("itasks.tui");
 
 itasks.tui.BoolControl = Ext.extend(Ext.form.Checkbox,{
 	initComponent: function() {
+		if(this.staticDisplay){
+			this.autoCreate = {tag: 'span', html: this.value};
+		}
+		
 		this.hideLabel = this.fieldLabel == null;
 		this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
+		
 		this.allowBlank = this.optional;
 		this.checked = this.value == "True";
+		
 		if(this.value == "") delete this.value;
+	
 		itasks.tui.BoolControl.superclass.initComponent.apply(this,arguments);
+	},
+	
+	setValue: function(value){
+		if(this.staticDisplay){
+			this.update(value);
+		}else{		
+			if(value == "True") value = true;
+			itasks.tui.BoolControl.superclass.setValue.call(this,value);
+		}
 	}
 });
 

Client/src/js/tui/ConstructorControl.js

+Ext.ns('itasks.tui');
+
+itasks.tui.ConstructorControl = Ext.extend(Ext.Panel,{
+	
+	initComponent : function(){
+		
+		//this.title = "Constructor Test";
+		
+		this.hideLabel = this.fieldLabel == null;
+		this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
+		//this.width =  '100%';
+		this.unstyled = true;
+		
+		var store = [["","Select..."]];
+		
+		for(var i=0; i<this.consValues.length; i++){
+			store[store.length] = [this.consValues[i],this.consValues[i]];
+		}
+		
+		if(!this.staticDisplay){
+			this.consField = new Ext.form.ComboBox({
+				name: this.name+'c',
+				id: this.id+'c',
+				triggerAction: 'all',
+				editable: false,
+				store: store,
+				value: store[(this.consSelIdx+1)][1],
+				hideLabel: true,
+				style: 'margin-bottom: 4px'
+			});
+		}else{
+			this.consField = {
+				id : this.id+'c',
+				staticDisplay: true,
+				html: store[(this.consSelIdx+1)][1],
+				hideLabel: true,
+				unstyled: true,
+				bodyStyle: 'margin-bottom: 4px'
+			}
+		}
+		
+		this.consField.setValue = function(value){
+				if(this.staticDisplay){
+					this.update(value);
+				}else{
+					Ext.form.ComboBox.superclass.setValue.call(this,value);
+				}
+		}
+		
+		this.items = [this.consField].concat(this.items);	
+	
+		itasks.tui.ConstructorControl.superclass.initComponent.apply(this,arguments);
+	}
+});
+
+Ext.reg('itasks.tui.Constructor',itasks.tui.ConstructorControl);
\ No newline at end of file

Client/src/js/tui/CurrencyControl.js

@@ -9,6 +9,10 @@ itasks.tui.CurrencyControl = Ext.extend(Ext.form.TextField,{
 		itasks.tui.CurrencyControl.superclass.initEvents.call(this);
 	},
 	initComponent: function() {
+		if(this.staticDisplay){			
+			this.autoCreate = {tag: 'div', style: 'overflow: auto; padding-top: 4px', html: this.value};
+		}
+		
 		this.hideLabel = this.fieldLabel == null;
 		this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
 		this.allowBlank = this.optional;
@@ -44,6 +48,13 @@ itasks.tui.CurrencyControl = Ext.extend(Ext.form.TextField,{
 	},
 	beforeBlur: function() {
 		this.setValue(this.normalize(this.getRawValue()));
+	},
+	setValue: function(value){
+		if(this.staticDisplay){
+			this.update(value);
+		}else{
+			itasks.tui.CurrencyControl.superclass.setValue.call(this,value);
+		}
 	}
 });
 

Client/src/js/tui/DateControl.js

@@ -3,14 +3,32 @@ Ext.ns("itasks.tui");
 itasks.tui.DateControl = Ext.extend(Ext.form.DateField,{
 	format: "d-m-Y",
 	initComponent: function() {
+		if(this.staticDisplay){
+			this.autoCreate = {tag: 'div', style: 'padding-top: 4px', html: this.value};
+		}
+			
 		this.hideLabel = this.fieldLabel == null;
 		this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
 		this.allowBlank = this.optional;
-		if(this.value == "") delete this.value;
-		itasks.tui.DateControl.superclass.initComponent.apply(this,arguments);
+		
+		itasks.tui.DateControl.superclass.initComponent.apply(this,arguments);		
 	},
-	getValue: function() {
-		return this.getRawValue();
+	//getValue: function() {
+		//return this.getRawValue();
+	//},
+	afterRender: function(ct,position){		
+		itasks.tui.DateControl.superclass.afterRender.call(this,ct,position);
+
+		if(this.staticDisplay){
+			this.el.next().remove();		
+		}	
+	},
+	setValue: function(value){
+		if(this.staticDisplay){
+			this.update(value);
+		}else{
+			itasks.tui.DateControl.superclass.setValue.call(this,value);
+		}
 	}
 });
 

Client/src/js/tui/DisplayControl.js

-Ext.ns('itasks.tui');
-
-itasks.tui.DisplayControl = Ext.extend(Ext.Panel,{
-	width: '100%',
-	fieldClass: 'x-form-field',
-	autoScroll: true,
-
-	initComponent: function(){
-		this.hideLabel = this.fieldLabel == null;
-		this.fieldLabel = itasks.util.fieldLabel(this.optional,this.fieldLabel);
-		this.unstyled = true;
-		this.layout = 'form';
-
-		this.panel = {
-			xtype: 'panel',
-			html: this.html,
-			unstyled: true
-		}
-		
-		delete this.html;
-		
-		Ext.apply(this,
-		{ items: [this.panel]
-		});	
-		
-		for(var i=0; i< this.formItems.length; i++){
-			this.formItems[i][1][0].hidden = true;
-			this.items[this.items.length] = this.formItems[i][1][0];
-		}
-		
-		itasks.tui.DisplayControl.superclass.initComponent.apply(this,arguments);
-	},
-	
-	afterRender: function(){
-		itasks.tui.DisplayControl.superclass.afterRender.call(this,arguments);
-		(this.moveActiveItems).defer(50,this);
-	},
-		
-	moveActiveItems: function(){	
-		for(var i=0; i< this.formItems.length; i++){
-			var fitem = this.formItems[i];
-			
-			var phid 	= fitem[0];
-			var elid  	= fitem[1][0].id;
-			
-			var ph 		= Ext.get(phid);
-			var cmp 	= Ext.getCmp(elid);
-			var el		= cmp.getEl();
-			
-			el.replace(ph);
-			cmp.show();
-			this.doLayout();
-		}
-		
-		this.doLayout();
-		this.findParentByType(itasks.ttc.FormContainer).doLayout();
-	}
-});
-
-Ext.reg('itasks.tui.Display',itasks.tui.DisplayControl);
-
-/*
-placeDelayedItems : function(){
-		for(var i=0; i < this.replaceItems.length; i++){
-			var phid = this.replaceItems[i].applyToPHid;
-			delete this.replaceItems[i].applyToPHid;
-			
-			var el = Ext.get(this.replaceItems[i].id);
-			var phEl = Ext.get(phid);
-			
-			el.replace(phEl);
-			el.removeClass('x-hidden');
-		}
-	},
-	
-	splitItems: function(data,ct){
-		this.replaceItems = [];
-	
-		if(data instanceof Array){
-			for(var i=0; i<data.length;i++){
-				if(data[i].applyToPHid != null){
-					data[i].cls = (data[i].cls || '')+' x-hidden';
-					ct.replaceItems[ct.replaceItems.length] = data[i];
-				}else	if(data[i].items){
-					ct.splitItems(data[i].items,ct);
-				}
-			}
-		}else {
-			if(data.applyToPHid != null){
-				data.cls = (data.cls || '')+' x-hidden';
-				ct.replaceItems[ct.replaceItems.length] = data;
-			}
-			
-			if(data.items != null){
-				ct.splitItems(data.items,ct);
-			}
-		}
-	}
-*/
\ No newline at end of file

Client/src/js/tui/DocumentControl.js

+Ext.ns('itasks.tui');
+
+itasks.tui.DocumentControl = Ext.extend(Ext.Panel,
+{	
+	initComponent: function(){
+		
+		Ext.apply(this,
+		{ unstyled: true
+		, layout: 'anchor'
+		, height: 26
+		, bodyStyle: 'margin: 0px 0px 2px 0px'
+		, width: 500
+		, allowUpload: true
+		, defaults: {
+			height: 26,
+			bodyStyle: 'padding: 0px 2px 0px 0px;',
+			anchor: '99%'
+		}});
+		
+		itasks.tui.DocumentControl.superclass.initComponent.apply(this,arguments);	
+		this.docInfo = Ext.decode(this.docInfo);
+		this.addClass('x-form-document');
+	},
+	
+	afterRender: function(arguments){
+		itasks.tui.DocumentControl.superclass.afterRender.call(this,arguments);
+		
+		if(this.staticDisplay){
+			if(this.docInfo.content != "EmptyDocument") this.showDownloadPanel();
+			else {
+				this.removeAll();
+				this.add({html: 'Empty Document', unstyled: true});
+			}
+		}else{
+			if(this.docInfo.content != "EmptyDocument") this.showDownloadPanel();
+			else this.showUploadPanel(false);
+		}
+	},
+	
+	showUploadPanel: function(showCancel){
+		this.removeAll();
+		this.add(new itasks.tui.document.UploadPanel({name: this.name, showCancel: showCancel}));
+	},
+	
+	showDownloadPanel: function(){
+		this.removeAll();
+		this.add(new itasks.tui.document.DownloadPanel({docInfo: this.docInfo, staticDisplay: this.staticDisplay}));
+	}
+});
+
+Ext.ns('itasks.tui.document');
+
+itasks.tui.document.DownloadPanel = Ext.extend(Ext.form.FormPanel,
+{
+	initComponent: function(){
+	
+		this.dlButton = new Ext.Button({
+			text: 'Download',
+			iconCls: 'x-form-document-download-icon',	
+			renderTarget: 'td.x-form-document-download-button',
+			handler: function(src,evt){
+				var form = this.findParentByType('itasks.tui.document.download');
+				var wt 	 = this.findParentByType('itasks.work');
+				
+				if(form.getForm().isValid()){
+					form.getForm().submit({
+						url: itasks.config.serverUrl+"/document/download",
+						
+						params: { _session : itasks.app.session
+									, docInfo  : Ext.encode(form.docInfo)
+									},
+						
+						waitMsg: null,
+						
+						failure: function(form, o){							
+							Ext.Msg.alert('Error',o.result.errors,function(){wt.refresh()});
+						}				
+					});
+				}
+			}
+		});
+		
+		this.editButton = new Ext.Button({
+			text : '',
+			iconCls: 'x-form-document-edit-icon',
+			renderTarget: 'td.x-form-document-edit-button',
+			handler: function(src,evt){
+				var form = this.findParentByType('itasks.tui.Document');
+				form.showUploadPanel(true);
+				form.doLayout();
+			}
+		});
+	
+		this.trashButton = new Ext.Button({
+			text : '',
+			iconCls: 'x-form-document-trash-icon',
+			renderTarget: 'td.x-form-document-trash-button',
+			handler: function(src,evt){
+				var form = this.findParentByType("itasks.tui.document.download");
+				var tf = this.findParentByType(itasks.ttc.FormContainer);
+				var wt = this.findParentByType("itasks.work");
+				var dp = this.findParentByType("itasks.tui.Document");
+				
+				var params = { _session : itasks.app.session
+					, _targettask : tf.taskId
+					, _maintask : wt.taskId
+					, _debug : itasks.app.debug ? 1 : 0
+					, _name : dp.name
+					, docInfo: Ext.encode(dp.docInfo)
+				};
+					
+				form.getForm().submit({
+					url: itasks.config.serverUrl+"/document/clear",
+					params: params,
+												
+					success: function(form, response){							
+						wt.refresh();														
+					},
+
+					failure: function(form, response){
+						itasks.app.restart("Document transaction failed");
+						return;
+					}
+				});
+			}
+		});
+		
+		Ext.apply(this,
+		{ layout: 'ux.html'
+		, unstyled: true
+		, fileUpload: true
+		, html:
+			'<div style="position: relative; top: 0px;"><table><tr><td class="x-form-document-icon"></td><td class="x-form-document-fileinfo"></td><td class="x-form-document-edit-button"></td><td class="x-form-document-trash-button"></td><td class="x-form-document-download-button"></td></tr></table></div>'
+		, items: [
+			{ xtype: 'displayfield'
+			, renderTarget: 'td.x-form-document-fileinfo'
+			, value: 'Test'
+			},
+			{ xtype: 'panel'
+			, renderTarget: 'td.x-form-document-icon'
+			, width: 16
+			, height: 16
+			, unstyled: true
+			},
+			(this.staticDisplay)?{}:this.editButton,
+			(this.staticDisplay)?{}:this.trashButton,
+			this.dlButton
+		]
+		});
+		
+		itasks.tui.document.DownloadPanel.superclass.initComponent.apply(this,arguments);
+		
+		var filename = this.docInfo.content[1].fileName;
+		var filesize = this.printFileSize(this.docInfo.content[1].size);
+	
+		this.items.items[0].value = filename+" ("+filesize+")"
+		this.items.items[1].addClass(this.iconMimeType(this.docInfo.content[1].mimeType));
+		
+	},
+	
+	iconMimeType: function(mime){
+	
+		if(mime.match("application/pdf")){
+			return('file-type-application-pdf-icon');
+		}
+		else if(mime.match('^image')){
+			return('file-type-image-icon');
+		}
+		else if(mime.match("^text")){
+			return('file-type-text-icon');
+		}
+		else if(mime.match("^application")){
+			return('file-type-application-icon');
+		}
+		else if(mime.match("^audio")){
+			return('file-type-audio-icon');
+		}
+		else if(mime.match("^video")){
+			return('file-type-video-icon');
+		}
+		else{
+			return('file-type-plain-icon');
+		}
+	},
+	
+	printFileSize: function(size){
+		if(size > 1048576){
+			return (size/1048576).toFixed(1)+" Mbytes"
+		}else if(size > 1024){
+			return (size/1024).toFixed(1)+" Kbytes"
+		}else{
+			return size+" bytes"
+		}
+	}
+});
+
+itasks.tui.document.UploadPanel = Ext.extend(Ext.form.FormPanel,
+{
+	initComponent: function(){
+	
+		this.uplButton = new Ext.Button({
+			text: 'Upload',
+			iconCls: 'x-form-document-upload-icon',
+			renderTarget: 'td.x-form-document-upload-button',
+            handler: function(src,evt){ 
+				
+				var form = this.findParentByType("itasks.tui.document.upload");
+				var tf = this.findParentByType(itasks.ttc.FormContainer);
+				var wt = this.findParentByType("itasks.work");
+				var dp = this.findParentByType("itasks.tui.Document");
+								
+				if(form.getForm().isValid()){				
+					form.getForm().submit({
+						url: itasks.config.serverUrl+"/document/upload",
+						
+						params: 
+							{ _session : itasks.app.session
+							, _targettask : tf.taskId
+							, _maintask : wt.taskId
+							, _debug : itasks.app.debug ? 1 : 0
+							, _name : dp.name
+							, docInfo: Ext.encode(dp.docInfo)
+							},
+						waitMsg: 'Uploading document. Please wait..',
+						success: function(form,response)
+							{
+								wt.refresh();
+							},
+						failure: function(form,response)
+							{
+								itasks.app.restart("Document transaction failed");
+								return;
+							}					
+					});
+				}		
+			}
+		});
+		
+		this.cancelButton = new Ext.Button({
+			text : '',
+			iconCls : 'x-form-document-cancel-icon',
+			renderTarget : 'td.x-form-document-cancel-button',
+			handler: function(src,evt){
+				var form = this.findParentByType('itasks.tui.Document');
+				form.showDownloadPanel();
+				form.doLayout();
+			}
+		});		
+						
+		Ext.apply(this,
+		{ fileUpload: true
+		, unstyled: true
+		, layout: 'hbox'
+		, defaults: {
+			allowBlank: false,
+			msgTarget: 'qtip',
+			border: false,
+			height: 24
+		}
+		, items : [
+			{	xtype: 'fileuploadfield',