(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 = $("
"); for (var n in descriptor.fields){ var fieldDesc = descriptor.fields[n]; var skyType = SKY.type(fieldDesc.type); var 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 $(``); } } $.skyForm = function(o, options = {} ){ var opts = Object.assign(defaultOptions, options); var 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($(``)) 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 ));