sky.js/sky.form.js

(function(SKY){

	SKY.form = function(descriptor, o){
		return new function(){
			this.appendTo = function(parent){ this.fieldset.appendTo(parent); return this; }

			this.assign = function(o){
				for (var n in this.descriptor.fields)
				{
					var fieldDesc = this.descriptor.fields[n];
					var editor = this.editors[fieldDesc.name];
					if (editor)
					{
						editor.value( o[fieldDesc.name] );
					}
				}
				return this;
			}
			this.valid = function(){
				for (var name in this.editors){
					var editor = this.editors[name];
					if (!editor.valid())
						return false;
				}
				return true;
			}
			this.changed = function(){
				for (var name in this.editors){
					var editor = this.editors[name];

					if (editor.changed())
						return true;
				}
				return false;
			}
			this.changes = function(){
				if (this.changed()){
					var changes = {}
					for (var name in this.editors){
						var editor = this.editors[name];
	
						if (editor.changed())
						{
							changes[editor.id()] = editor.value();
						}
					}
					return changes;
				}
				return {}
			}

			this.descriptor = descriptor;
			this.editors = {}
			this.fieldset = $("<fieldset></fieldset>");

			for (var n in descriptor.fields){
				var fieldDesc = descriptor.fields[n];
				var skyType = SKY.type(fieldDesc.type);
				var label = $("<label></label>");
				var editor = SKY.prototypes.SKYReferencingType.isPrototypeOf(skyType) ? skyType.selector(fieldDesc.name) : skyType.editor(fieldDesc.name);

				label
				.text( fieldDesc.label ? fieldDesc.label : fieldDesc.name ) 
				.appendTo(this.fieldset);
				
				editor
				.html().appendTo(this.fieldset);

				this.editors[fieldDesc.name] = editor;
			}

			if (o)
				this.assign(o);
		};

	}

}(SKY));

(function($){
	function log(o){
		console.log(o);
		return o;
	}
	var defaultOptions = {
            fields: [		// Object Fields to show in Dialog
/*            {
				key: "",				// Key of the property
				label: "",				// Label Text
				type: "text",			// Editor to use
				toEditor: function(v){ return v; }	// converter function to convert field value to editor value
				fromEditor: function(c){ return v; }// converter function to convert editor value to field value
            },
            */
            ],
            id: null,		// Name of field to use as unique identifier for ajax requests to collection,
            				// alternatively: function(o){ return id; }	Method to retrieve ID from object
            readonly: false,	// default readonly flag
            ajax: {
                url: null,	// ajax collection URLSchnuff17

			},
			
			accept: function(o){

			},
			cancel: function(o){
			},

    	};
    var defaultDialogOptions = {
			modal: true,
	        closeOnEscape: true,
	        draggable: false,
	        title: "skyForm",
	        minWidth: 600,
	        autoOpen: false,
	        buttons: [
	            {
	                    text: "abbrechen",
	                    click: null,
	            },
	            {
	                    text: "OK",
	                    click: null,
	            },
	        ]
    	};

	function populateForm( o, options = {} )
	{
	    var opt = Object.assign( {
	            top: null,
	            transform: function(v){ return v; },
	            properties: {},
	        }, options );

	    for (const key in o)
	    {
	        var po = Object.assign( {
	            transform: opt.transform,
	        }, opt.properties[key]);
	        
	        var i = $("#" + key, opt.top);
	        if (i.length)
	            i.val( po.transform(o[key]) );
	    }
	}

	function createControl(type, key)
	{
		if ($.sky.controls[type])
		{
			return $.sky.controls[type](type, key);
		}

		switch (type)
		{
			default:
				return $(`<input id="${key}">`);
		}
	}

    $.skyForm = function(o, options = {} ){
        var opts = Object.assign(defaultOptions, options);        

        var fieldSet = $("<fieldset></fieldset>");
        var fields = (opts.fields.length) ? opts.fields : log(Object.keys(o)).map( function(k){ return { key: k, label: k }; } );

        fields.forEach( function(field){
        	fieldSet.append($(`<label for="${field.key}">${field.label}</label>`))
        	fieldSet.append(
        			createControl( field.type, field.key ).val( o[field.key] )
        		);
        });

        var dlgOptions = Object.assign( {}, defaultDialogOptions );
		dlgOptions.title = opts.title;
		dlgOptions.buttons[0].click = function(){
			if (options.cancel)
				options.cancel(o);

			$(this).dialog("close");
		};
		dlgOptions.buttons[1].click = function(){

			if (options.accept)
				options.accept(o);

			$(this).dialog("close");
		};

        fieldSet.dialog( dlgOptions );
        fieldSet.dialog( "open" );
    }



    
}( jQuery ));