From d224376d026fb33021434dafc194087e301d3f4d Mon Sep 17 00:00:00 2001 From: Doug Bell Date: Fri, 7 Nov 2008 03:32:18 +0000 Subject: [PATCH] added: Delete columns in DataTable fixed: Now more than one DataTable can be on a page --- docs/changelog/7.x.x.txt | 2 + lib/WebGUI/Asset/Wobject/DataTable.pm | 2 +- lib/WebGUI/Form/DataTable.pm | 2 +- lib/WebGUI/i18n/English/Form_DataTable.pm | 12 ++ www/extras/yui-webgui/build/form/datatable.js | 185 +++++++++++++----- www/extras/yui-webgui/build/i18n/i18n.js | 5 +- 6 files changed, 161 insertions(+), 47 deletions(-) diff --git a/docs/changelog/7.x.x.txt b/docs/changelog/7.x.x.txt index fbdeba296..af186424a 100644 --- a/docs/changelog/7.x.x.txt +++ b/docs/changelog/7.x.x.txt @@ -10,6 +10,8 @@ not be imported, only the surveys themselves. - fixed #9028: Thingy fails when setting values containing single quotes - fixed #9047: Unable to reorder DataForm tabs + - added: Delete columns from DataTable + - fixed: Now more than one DataTable can be put on a page 7.6.2 - fixed: not allowed to add calendar events if in can edit group but not can add event group diff --git a/lib/WebGUI/Asset/Wobject/DataTable.pm b/lib/WebGUI/Asset/Wobject/DataTable.pm index f92682b1e..6e6a96686 100644 --- a/lib/WebGUI/Asset/Wobject/DataTable.pm +++ b/lib/WebGUI/Asset/Wobject/DataTable.pm @@ -220,7 +220,7 @@ sub prepareView { # TODO Use a WebGUI::DataSource my $dt = WebGUI::Form::DataTable->new( $session, { - name => "data", + name => $self->getId, value => $self->get('data'), defaultValue => undef, } diff --git a/lib/WebGUI/Form/DataTable.pm b/lib/WebGUI/Form/DataTable.pm index e6fee2023..06401e240 100644 --- a/lib/WebGUI/Form/DataTable.pm +++ b/lib/WebGUI/Form/DataTable.pm @@ -161,7 +161,7 @@ sub getDataTableHtml { # Progressively enhance the bejesus out of it $html .= <<"ENDJS"; ENDJS diff --git a/lib/WebGUI/i18n/English/Form_DataTable.pm b/lib/WebGUI/i18n/English/Form_DataTable.pm index 681f71351..ad51bad68 100644 --- a/lib/WebGUI/i18n/English/Form_DataTable.pm +++ b/lib/WebGUI/i18n/English/Form_DataTable.pm @@ -68,6 +68,12 @@ our $I18N = { context => q{Format for a column with numbers}, }, + "format date" => { + message => q{Date}, + lastUpdated => 0, + context => q{Format for a column with a date}, + }, + "add column" => { message => q{Add Column}, lastUpdated => 0, @@ -127,6 +133,12 @@ our $I18N = { lastUpdated => 0, context => q{How to reorder columns. Shown in the help pop-up}, }, + + "delete column" => { + message => q{Delete}, + lastUpdated => 0, + context => q{Button to delete a column, shown in the Edit Schema dialog}, + }, }; 1; diff --git a/www/extras/yui-webgui/build/form/datatable.js b/www/extras/yui-webgui/build/form/datatable.js index e787a374a..dd24f821c 100644 --- a/www/extras/yui-webgui/build/form/datatable.js +++ b/www/extras/yui-webgui/build/form/datatable.js @@ -322,10 +322,12 @@ WebGUI.Form.DataTable "help", "edit schema", "delete confirm", + "delete column", "format text", "format email", "format link", "format number", + "format date", "add column", "cancel", "ok", @@ -346,7 +348,7 @@ WebGUI.Form.DataTable } ); }; // Run this automatically - YAHOO.util.Event.onDOMReady( this.initI18N, undefined, this ); + YAHOO.util.Event.onContentReady( this.containerId, this.initI18N, undefined, this ); /************************************************************************ * showHelp ( event ) @@ -382,58 +384,144 @@ WebGUI.Form.DataTable */ this.showSchemaDialog = function ( e ) { + + // Function to remove a column + var removeColumn = function ( e, colId ) { + var form = this.element.getElementsByTagName( "form" )[0]; + // Add to deleteCols + var deleteCols = YAHOO.lang.JSON.parse( form.elements[ "deleteCols" ].value ); + deleteCols.push( form.elements[ "oldKey_" + colId ].value ); + form.elements[ "deleteCols" ].value + = YAHOO.lang.JSON.stringify( deleteCols ); + // Remove column from dialog + var div = document.getElementById( "col_" + colId ); + div.parentNode.removeChild( div ); + }; + + // Function to add a column + var addColumn = function ( e ) { + // this is the dialog + var form = this.element.getElementsByTagName( "form" )[0]; + + // Find the last indexed column + var newIdx = 0; + while ( form.elements[ "oldKey_" + newIdx ] ) { newIdx++; } + + var div = document.createElement( "div" ); + div.id = "col_" + newIdx; + + var button = form.elements[ "removeColumn_" + (newIdx - 1) ].cloneNode(true); + button.id = "removeColumn_" + newIdx; + var del = new YAHOO.widget.Button( "removeColumn_" + newIdx, { + type : "push", + container : div, + onclick : { + fn : function () { removeColumn( i ) }, + scope : this + } + } ); + + var oldKey = form.elements[ "oldKey_" + (newIdx - 1) ].cloneNode(true); + oldKey.name = "oldKey_" + newIdx; + oldKey.value = ""; + div.appendChild( oldKey ); + + var newKey = form.elements[ "newKey_" + (newIdx - 1) ].cloneNode(true); + newKey.name = "newKey_" + newIdx; + newKey.value = "New Column " + newIdx; + div.appendChild( newKey ); + + var format = form.elements[ "format_" + (newIdx - 1) ].cloneNode(true); + format.name = "format_" + newIdx; + format.selectedIndex = 0; + div.appendChild( format ); + + form.appendChild( div ); + }; + var dg = new YAHOO.widget.Dialog( "editSchemaDialog", { modal : true, fixedcenter : true }); dg.setHeader( this.i18n.get( "Form_DataTable", "edit schema" ) ); - var body = '
'; + var body = document.createElement( 'form' ); var cols = this.dataTable.getColumnSet().keys; for ( var i = 0; i < cols.length; i++ ) { - body = body - + '' - + '' - + '
' + //TODO: Refactor this to be a function, like addColumn above + var div = document.createElement( 'div' ); + div.className = "yui-skin-sam"; + div.id = "col_" + i; + + var del = new YAHOO.widget.Button( { + type : "push", + label : this.i18n.get( "Form_DataTable", "delete column" ), + container : div, + onclick : { + fn : removeColumn, + obj : i, + scope : dg + } + } ); + + var oldKey = document.createElement( "input" ); + oldKey.type = "hidden"; + oldKey.name = "oldKey_" + i; + oldKey.value = cols[i].key; + div.appendChild( oldKey ); + + var newKey = document.createElement( "input" ); + newKey.type = "text"; + newKey.name = "newKey_" + i; + newKey.value = cols[i].key; + div.appendChild( newKey ); + + var format = document.createElement('select'); + format.name = "format_" + i; + var availableFormats = [ + { + "value" : "text", + "label" : this.i18n.get( "Form_DataTable", "format text" ) + }, + { + "value" : "number", + "label" : this.i18n.get( "Form_DataTable", "format number" ) + }, + { + "value" : "email", + "label" : this.i18n.get( "Form_DataTable", "format email" ) + }, + { + "value" : "link", + "label" : this.i18n.get( "Form_DataTable", "format link" ) + }, + { + "value" : "date", + "label" : this.i18n.get( "Form_DataTable", "format date" ) + } + ]; + for ( var x = 0; x < availableFormats.length; x++ ) { + var opt = new Option( + availableFormats[x].label, + availableFormats[x].value, + cols[i].formatter == availableFormats[x].value + ); + format.appendChild( opt ); + } + div.appendChild( format ); + + body.appendChild( div ); } - body += '
'; + + // Columns to delete + var deleteCols = document.createElement( "input" ); + deleteCols.type = "hidden"; + deleteCols.name = "deleteCols"; + deleteCols.value = "[]"; + body.appendChild( deleteCols ); + dg.setBody( body ); - // Function to add a column - var addColumn = function ( e ) { - // this is the dialog - var form = this.element.getElementsByTagName( "form" )[0]; - - var newIdx = 0; - while ( form.elements[ "oldKey_" + newIdx ] ) { newIdx++; } - - var oldKey = form.elements[ "oldKey_" + (newIdx - 1) ].cloneNode(true); - oldKey.name = "oldKey_" + newIdx; - oldKey.value = ""; - form.appendChild( oldKey ); - - var newKey = form.elements[ "newKey_" + (newIdx - 1) ].cloneNode(true); - newKey.name = "newKey_" + newIdx; - newKey.value = "New Column " + newIdx; - form.appendChild( newKey ); - - var format = form.elements[ "format_" + (newIdx - 1) ].cloneNode(true); - format.name = "format_" + newIdx; - format.selectedIndex = 0; - form.appendChild( format ); - - form.appendChild( document.createElement( "br" ) ); - }; - dg.cfg.queueProperty( "buttons", [ { text: this.i18n.get( "Form_DataTable", "add column" ), handler: addColumn }, { text: this.i18n.get( "Form_DataTable", "cancel" ), handler: { fn: this.hideSchemaDialog, scope: this } }, @@ -520,8 +608,17 @@ WebGUI.Form.DataTable */ this.updateSchema = function () { - var i = 0; - var data = this.schemaDialog.getData(); + var data = this.schemaDialog.getData(); + + // First delete columns + var deleteCols = YAHOO.lang.JSON.parse( data[ "deleteCols" ] ); + for ( var x = 0; x < deleteCols.length; x++ ) { + var col = this.dataTable.getColumn( deleteCols[x] ); + this.dataTable.removeColumn( col ); + } + + // Update columns + var i = 0; while ( data[ "newKey_" + i ] ) { var oldKey = data[ "oldKey_" + i ]; var newKey = data[ "newKey_" + i ]; diff --git a/www/extras/yui-webgui/build/i18n/i18n.js b/www/extras/yui-webgui/build/i18n/i18n.js index e09110381..651a9cbf9 100644 --- a/www/extras/yui-webgui/build/i18n/i18n.js +++ b/www/extras/yui-webgui/build/i18n/i18n.js @@ -43,7 +43,10 @@ YAHOO.lang.augmentProto( WebGUI.i18n, YAHOO.util.EventProvider ); WebGUI.i18n.prototype.get = function ( ns, key ) { if ( typeof this.namespaces[ ns ][ key ] == "undefined" ) { - this.load( ns, [ key ] ); + var obj = {}; + obj[ns] = [ key ]; + this.load( obj ); + // TODO: Return placeholder that will get auto-updated } return this.namespaces[ ns ][ key ]; };