fix jsontable and use it for Calendar feeds

lib/WebGUI/Asset.pm

@@ -2605,7 +2605,15 @@ sub update {
 
             # set the property
             if ($propertyDefinition->{serialize}) {
-                $setPairs{$property} = JSON->new->canonical->encode($value);
+                # Only serialize references
+                if ( ref $value ) {
+                    $setPairs{$property} = JSON->new->canonical->encode($value);
+                }
+                # Passing already serialized JSON string
+                elsif ( $value ) {
+                    $setPairs{$property} = $value;
+                    $value = JSON->new->decode( $value ); # for setting in _properties, below
+                }
             }
             else {
                 $setPairs{$property} = $value;

lib/WebGUI/Asset/Wobject/Calendar.pm

@@ -257,12 +257,32 @@ sub definition {
         },
 
         icalFeeds    => {
-            fieldType       => "textarea",
+            fieldType       => "JsonTable",
             defaultValue    => [],
             serialize       => 1,
-            noFormPost      => 1,
+            tab             => "feeds",
-            autoGenerate    => 0,
+            fields          => [
-            tab             => "display",
+                {
+                    name        => 'feedId',
+                    type        => 'id',
+                },
+                {
+                    name        => 'url',
+                    type        => 'text',
+                    size        => '40',
+                    label       => $i18n->get('Feed URL'),
+                },
+                {
+                    name        => 'status',
+                    type        => 'readonly',
+                    label       => $i18n->get('434','WebGUI'),
+                },
+                {
+                    name        => 'lastUpdated',
+                    type        => 'readonly',
+                    label       => $i18n->get('454', 'WebGUI'),
+                },
+            ],
         },
 
         icalInterval    => {
@@ -507,168 +527,16 @@ sub deleteFeed {
 
 #----------------------------------------------------------------------------
 
-=head2 getEditForm
+=head2 getEditTabs ( )
 
-Adds an additional tab for feeds. 
+Add the feeds tab to the edit form
-
-TODO: Abstract the Javascript enough to export into extras/yui-webgui for use
-in other areas.
 
 =cut
 
-sub getEditForm {
+sub getEditTabs {
-    my $self    = shift;
+    my ( $self ) = @_;
-    my $session = $self->session;
+    my $i18n    = WebGUI::International->new($self->session,"Asset_Calendar");
-    my $form    = $self->SUPER::getEditForm;
+    return $self->SUPER::getEditTabs, ["feeds",$i18n->get("feeds"), 6];
-    my $i18n    = WebGUI::International->new($session,"Asset_Calendar");
-
-    my $tab     = $form->addTab("feeds",$i18n->get("feeds"), 6);
-    $tab->raw("<tr><td>");
-
-    $tab->raw(<<'ENDJS');
-    <script type="text/javascript">
-    var FeedsManager    = new Object();
-
-    FeedsManager.addFeed = function (table,rowId,params) {
-        // TODO: Verify that feed URL is valid
-
-        var table    = document.getElementById(table);
-
-        // If id is "new"
-        //  Add a number on the end.
-        if (rowId == "new")
-            rowId = "new" + Math.round(Math.random() * 10000000000000000);
-
-        // Create 5 cells
-        var cells    = new Array();
-        for (var i = 0; i < 5; i++)
-            cells[i]    = document.createElement("td");
-
-
-        /*** [0] - Delete button */
-        var button    = document.createElement("img");
-        button.setAttribute("src","/extras/wobject/Calendar/images/delete.gif");
-        button.setAttribute("border","0");
-
-        var deleteLink    = document.createElement("a");
-        deleteLink.setAttribute("href","#");
-        YAHOO.util.Event.addListener(deleteLink, "click", function (e, rowId) {
-            FeedsManager.deleteFeed('feeds',rowId);
-            YAHOO.util.Event.preventDefault(e);
-        }, rowId);
-        deleteLink.appendChild(button);
-
-        cells[0].appendChild(deleteLink);
-
-
-        /*** [1] - Feed link for teh clicking and form element for teh saving */
-        var feedLink    = document.createElement("a");
-        feedLink.setAttribute("href",params.url);
-        feedLink.setAttribute("target","_new"); // TODO: Use JS to open window. target="" is deprecated
-        feedLink.appendChild(document.createTextNode(params.url));
-
-        var formElement    = document.createElement("input");
-        formElement.setAttribute("type","hidden");
-        formElement.setAttribute("name","feeds-"+rowId);
-        formElement.setAttribute("value",params.url);
-
-        cells[1].appendChild(feedLink);
-        cells[1].appendChild(formElement);
-
-
-        /*** [2] - Result (new) */
-        if (params.lastResult == undefined)
-            params.lastResult = "new";
-        var lastResult    = document.createTextNode(params.lastResult);
-
-        cells[2].appendChild(lastResult);
-
-
-        /*** [3] - Last updated */
-        if (params.lastUpdated == undefined)
-            params.lastUpdated = "never";
-        var lastUpdated    = document.createTextNode(params.lastUpdated);
-
-        cells[3].appendChild(lastUpdated);
-
-
-        /*** [4] - Update now! */
-        /* TODO */
-
-
-        /* Add the row to the table */
-        var row        = document.createElement("tr");
-        row.setAttribute("id",rowId);
-        for (var i = 0; i < cells.length; i++)
-            row.appendChild(cells[i]);
-
-        var tbody = table.getElementsByTagName('tbody')[0];
-        if (tbody)
-            tbody.appendChild(row);
-        else
-            table.appendChild(row);
-        FeedsManager.updateFeed(table.getAttribute("id"),rowId);
-    }
-
-
-    FeedsManager.updateFeed = function (table,rowId) {
-        /* TODO */
-
-    }
-
-
-    FeedsManager.deleteFeed = function (table,rowId) {
-        row        = document.getElementById(rowId);
-
-        row.parentNode.removeChild(row);
-    }
-
-
-    FeedsManager.setFeed    = function (table,rowId,params) {
-
-
-
-    }
-
-    </script>
-ENDJS
-
-
-    my $addFeed = $i18n->get('Add a feed');
-    my $add     = $i18n->get('Add');
-    my $feedUrl = $i18n->get('Feed URL');
-    my $status  = $i18n->get('434', 'WebGUI');
-    my $lastUpdated  = $i18n->get('454', 'WebGUI');
-    $tab->raw(<<"ENDHTML");
-    <label for="addFeed">$addFeed</label>
-    <input type="text" size="60" id="addFeed" name="addFeed" value="" />
-    <input type="button" value="$add" onclick="FeedsManager.addFeed('feeds','new',{ 'url' : this.form.addFeed.value }); this.form.addFeed.value=''" />
-
-    <table id="feeds" style="width: 100%;">
-    <thead>
-        <th style="width: 30px;">&nbsp;</th>
-        <th style="width: 50%;">$feedUrl</th>
-        <th>$status</th>
-        <th>$lastUpdated</th>
-        <th>&nbsp;</th>
-    </thead>
-    </table>
-ENDHTML
-
-
-
-    # Add the existing feeds
-    my $feeds    = $self->getFeeds();
-    $tab->raw('<script type="text/javascript">'."\n");
-    for my $feed (@{ $feeds }) {
-        my $feedId = $feed->{feedId};
-        $tab->raw("FeedsManager.addFeed('feeds','".$feedId."',".JSON->new->encode( $feed ).");\n");
-    }
-    $tab->raw('</script>');
-
-
-    $tab->raw("</td></tr>");
-    return $form;
 }
 
 #----------------------------------------------------------------------------
@@ -1000,37 +868,6 @@ sub processPropertiesFromFormPost {
         $self->createSubscriptionGroup();
     }
 
-    $self->session->errorHandler->info( "DEFAULT VIEW:" . $self->get('defaultView') );
-
-    ### Get feeds from the form
-    # Workaround WebGUI::Session::Form->param bug that returns duplicate
-    # names.
-    my %feeds;
-    for my $feedId ( grep /^feeds-/, ($form->param()) ) {
-        $feedId =~ s/^feeds-//;
-        $feeds{$feedId}++;
-    }
-    my @feedsFromForm = keys %feeds;
-
-    # Delete old feeds that are not in @feeds
-    my @oldFeeds = map { $_->{feedId} } @{ $self->getFeeds };
-
-    for my $feedId (@oldFeeds) {
-        if (!isIn($feedId, @feedsFromForm)) {
-            $self->deleteFeed($feedId);
-        }
-    }
-
-    # Create new feeds
-    for my $feedId (grep /^new(\d+)/, @feedsFromForm) {
-        $self->addFeed({
-            url         => $form->param("feeds-".$feedId),
-            feedType    => "ical",
-            lastUpdated => 'never',
-            lastResult  => '',
-        });
-    }
-
     return;
 }
 

lib/WebGUI/Form/JsonTable.pm

@@ -86,6 +86,23 @@ sub getName {
 
 #-------------------------------------------------------------------
 
+=head2 getOriginalValue ( )
+
+Get the original value, encoding to JSON if necessary
+
+=cut
+
+sub getOriginalValue {
+    my ( $self ) = @_;
+    my $value   = $self->SUPER::getOriginalValue;
+    if ( ref $value eq "ARRAY" ) {
+        return JSON->new->encode( $value );
+    }
+    return $value;
+}
+
+#-------------------------------------------------------------------
+
 =head2 getValue ( value )
 
 Get the value of the field. Substitute id fields with GUIDs.
@@ -96,6 +113,7 @@ sub getValue {
     my ( $self, $value ) = @_;
     $value ||= $self->SUPER::getValue;
 
+    $self->session->log->info( "JsonTable Got $value from form" );
     $value  = JSON->new->decode( $value );
 
     for my $row ( @{$value} ) {
@@ -162,13 +180,14 @@ sub toHtml {
             $fieldHtml  .= '<input type="hidden" class="jsontable_id" name="' . $fieldName . '" value="new" />';
         }
         else {  # Readonly or unknown
-            $fieldHtml  = '';
+            $fieldHtml  = '&nbsp;';
         }
 
         $output .= '<td>' . $fieldHtml . '</td>';
     }
 
-    $output .= '</tr></tbody></table>';
+    $output .= '<td></td>'      # Extra cell for buttons
+            . '</tr></tbody></table>';
 
     # Build the existing rows
     $output .= '<input type="hidden" name="' . $self->get('name') . '" value="' . $value . '" />';
@@ -185,7 +204,8 @@ sub toHtml {
     $output .= sprintf '<script src="%s" type="text/javascript"></script>', 
                 $url->extras('yui-webgui/build/form/jsontable.js');
     $output .= '<script type="text/javascript">'
-            . q{new WebGUI.Form.JsonTable("} . $self->get('name') . q{","} . $self->get( 'id' ) . q{");}
+            . q{new WebGUI.Form.JsonTable("} . $self->get('name') . q{","} . $self->get( 'id' ) . q{", }
+            . JSON->new->encode( $self->get('fields') ) . q{ );}
             . '</script>';
 
     return $output;

www/extras/yui-webgui/build/form/jsontable.js

@@ -0,0 +1,219 @@
+
+// Initialize namespace
+if (typeof WebGUI == "undefined") {
+    var WebGUI = {};
+}
+if (typeof WebGUI.Form == "undefined") {
+    WebGUI.Form = {};
+}
+
+/****************************************************************************
+ * WebGUI.Form.JsonTable( fieldName, tableId, columns )
+ * Create a JsonTable object. 
+ *
+ * fieldName holds the current JSON-encoded array of hashrefs of values. 
+ *
+ * tableId is where to put the rows and add all the events. 
+ *
+ * columns is an array of hashes of column data with the following keys:
+ *      type        -- The type of column, one of "text", "select", 
+ *                      "id", "hidden", "readonly"
+ *      name        -- The name of the column
+ *      label       -- The label of the column
+ *      options     -- select only. An array of name, label of options.
+ *
+ */
+WebGUI.Form.JsonTable 
+= function ( fieldName, tableId, columns ) {
+    this.fieldName  = fieldName;
+    this.tableId    = tableId;
+    this.columns    = columns;
+    this.table      = document.getElementById( this.tableId );
+    this.tbody      = this.table.getElementsByTagName( "tbody" )[0];
+
+    // Find the form
+    this.form       = this.table;
+    while ( this.form.nodeName != "FORM" ) {
+        this.form   = this.form.parentNode;
+    }
+
+    this.field      = this.form.elements[ this.fieldName ];
+    this.json       = this.field.value;
+    this.newRow     = YAHOO.util.Dom.getElementsByClassName( "new_row", "tr", this.table )[0];
+
+    try {
+        this.data       = YAHOO.lang.JSON.parse( this.json );
+    }
+    catch (err) {
+        this.data       = [];
+    }
+
+    // Add submit listener to update JSON
+    YAHOO.util.Event.addListener( this.form, "submit", this.update, this, true );
+
+    this.addButton  = this.table.getElementsByTagName( "button" )[0];
+    YAHOO.util.Event.addListener( this.addButton, "click",
+        function(e) { 
+            this.addRow();
+            e.preventDefault();
+            return false;
+        },
+        this, true
+    );
+
+    this.init();
+
+    return this;
+};
+
+/****************************************************************************
+ * addActions( row )
+ * Add the row actions to the given row
+ */
+WebGUI.Form.JsonTable.prototype.addActions
+= function (row) {
+    // Add row actions
+    var buttonCell      = row.lastChild;
+    var deleteButton    = document.createElement('input');
+    deleteButton.type   = "button";
+    deleteButton.value  = "Delete";
+    YAHOO.util.Event.addListener( deleteButton, "click", 
+        function (e) {
+            this.deleteRow( row );
+        },
+        this, true
+    );
+    buttonCell.appendChild( deleteButton );
+
+    var moveUpButton    = document.createElement('input');
+    moveUpButton.type   = "button";
+    moveUpButton.value  = "Up";
+    YAHOO.util.Event.addListener( moveUpButton, "click", 
+        function (e) {
+            this.moveRowUp( row );
+        },
+        this, true
+    );
+    buttonCell.appendChild( moveUpButton );
+
+    var moveDownButton      = document.createElement('input');
+    moveDownButton.type     = "button";
+    moveDownButton.value    = "Down";
+    YAHOO.util.Event.addListener( moveDownButton, "click", 
+        function (e) {
+            this.moveRowDown( row );
+        },
+        this, true
+    );
+    buttonCell.appendChild( moveDownButton );
+};
+
+/****************************************************************************
+ * addRow ( )
+ * Add a new row to the bottom of the table
+ */
+WebGUI.Form.JsonTable.prototype.addRow
+= function () {
+    var newRow  = this.newRow.cloneNode(true);
+    this.tbody.appendChild( newRow );
+    newRow.className        = "";
+    newRow.style.display    = "table-row";
+    this.addActions( newRow );
+    return newRow;
+};
+
+/****************************************************************************
+ * deleteRow( row )
+ * Delete the row from the table
+ */
+WebGUI.Form.JsonTable.prototype.deleteRow
+= function ( row ) {
+    row.parentNode.removeChild( row );
+};
+
+/****************************************************************************
+ * init ( )
+ * Initialize the JsonTable by adding rows for every datum
+ */
+WebGUI.Form.JsonTable.prototype.init
+= function () {
+    for ( var row in this.data ) {
+        // Copy new_row
+        var newRow  = this.addRow();
+
+        // Fill in values based on field type
+        var cells   = newRow.getElementsByTagName( "td" );
+        for ( var i = 0; i < this.columns.length - 1; i++ ) { // Last cell is for buttons
+            var cell        = cells[i];
+            var column      = this.columns[i];
+            var field       = cell.childNodes[0];
+            var value       = this.data[row][column.name] || '';
+            if ( column.type == "text" || column.type == "id"
+                || column.type == "hidden" ) {
+                field.value = value;
+            }
+            else if ( column.type == "select" ) {
+                for ( var x = 0; x < field.options.length; x++ ) {
+                    if ( field.options[x].value == value ) {
+                        field.options[x].selected = true;
+                    }
+                }
+            }
+            else { // "readonly" or unknown
+                cell.appendChild( document.createTextNode( value ) );
+            }
+        }
+    }
+};
+
+/****************************************************************************
+ * moveRowDown( row )
+ * Move the row down in the table
+ */
+WebGUI.Form.JsonTable.prototype.moveRowDown
+= function ( row ) {
+    var after  = row.nextSibling;
+    if ( after ) {
+        row.parentNode.insertBefore( after, row );
+    }
+};
+
+/****************************************************************************
+ * moveRowUp( row )
+ * Move the row up in the table
+ */
+WebGUI.Form.JsonTable.prototype.moveRowUp
+= function ( row ) {
+    var before  = row.previousSibling;
+    if ( before && before.className != "new_row" ) {
+        row.parentNode.insertBefore( row, before );
+    }
+};
+
+/****************************************************************************
+ * update (  )
+ * Update the value in our field with the correct JSON
+ */
+WebGUI.Form.JsonTable.prototype.update
+= function (e) {
+    var rows    = this.tbody.getElementsByTagName( 'tr' );
+    var data    = [];
+    for ( var i = 1; i < rows.length; i++ ) {
+        var cells   = rows[i].getElementsByTagName( 'td' );
+        var rowData = {};
+        for ( var x = 0; x < this.columns.length; x++ ) {
+            var cell    = cells[x];
+            var column  = this.columns[x];
+            var field   = cell.childNodes[0];
+            if ( field.nodeName == "INPUT" ) {
+                rowData[ column.name ] = field.value;
+            }
+            else if ( field.nodeName == "SELECT" ) {
+                var value   = field.options[ field.selectedIndex ].value;
+                rowData[ column.name ] = field.value;
+            }
+        }
+        data.push( rowData );
+    }
+    this.field.value = YAHOO.lang.JSON.stringify( data );
+};