TODO Template on lyonsdemo site?

[pktloss]

On the lyonsdemo.mindtouch.com site there is a TODO template that seems to be driving this nice task list on the site.

Should one be able to use this in Lyons 9.02 or is it custom or something?

Would like to integrate it into our wiki but having no luck with simple cut and paste.

Just wondering if its possible out of the box or if I need something to make it work other then just the template?

[rberinger]

That is an awesome task list. I am also getting an error when trying to use the template:

/content/body/pre, reference to undefined name 'dekiapi': line 2, column 1 (click for details)

Of course I usually copy in source mode but this time I had to use just straight select and copy since no edit capabilities so that is what may be causing it.

[pktloss]

Hopefully someone with access to it can post it.

It would be so nice to have and really add some value to the wiki internally.

Also hope to get that messaging functionality they have on there as well. But the TODO is probably the most useful thing I have seen yet.

[rberinger]

It would be so nice to have and really add some value to the wiki internally.

Thats exactly the type of functionality I have been looking for. I see that it is utilizing the new page properties to store the information. But I'm not sure why I am getting the error on the dekiapi();. What error where you getting?

Also hope to get that messaging functionality they have on there as well. But the TODO is probably the most useful thing I have seen yet.

I'm not quite sure about the benefit of this module (as of yet). I looks like it tracks the changes you do within the wiki which may be interesting but not sure of the value of someone else injecting something into that feed. Great example for development purposes though.

[rberinger]

OK after a bit more digging I don't think my API is setup right. Not sure whats wrong just yet but anything I try to do that has the include of dekiapi(); does not work. I am able to use the API from the desktop and I get API information back when I check the /@api/deki/@about page. So if your getting the same error as I am I think it has something to do with defining the api to the jQuery extension.

[pktloss]

I am getting this error:

/content/body/pre, reference to undefined name 'jquery': line 3, column 1


Details of the error:

MindTouch.Deki.Script.DekiScriptUndefinedNameException: reference to undefined name 'jquery': line 3, column 1
  at MindTouch.Deki.Script.DekiScriptVar.Evaluate (MindTouch.Deki.Script.DekiScriptEnv env) [0x00000] 
  at MindTouch.Deki.Script.DekiScriptAccess.Evaluate (MindTouch.Deki.Script.DekiScriptEnv env, Boolean evaluateProperties) [0x00000] 
  at MindTouch.Deki.Script.DekiScriptAccess.Evaluate (MindTouch.Deki.Script.DekiScriptEnv env) [0x00000] 
  at MindTouch.Deki.Script.DekiScriptCall.Evaluate (MindTouch.Deki.Script.DekiScriptEnv env) [0x00000] 
  at MindTouch.Deki.Script.DekiScriptSequence.Evaluate (MindTouch.Deki.Script.DekiScriptEnv env) [0x00000] 
  at MindTouch.Deki.Script.Dom.DekiScriptDomExpr.Evaluate (MindTouch.Deki.Script.DekiScriptEvalContext context, System.Xml.XmlNode parent, MindTouch.Deki.Script.DekiScriptEnv env) [0x00000]

I went to the lyonsdemo.mindtouch.com site and then the "Mindtouch Lyons" page where the todo is. I selected edit page, then source and copied the following code:

<h1>Mindtouch Lyons</h1>
<pre class="script">
// includes
dekiapi();
jquery.ui('smoothness');
&lt;div id="deki-todo"&gt;
// input form
&lt;form&gt;
    &lt;input id="todoid" type="hidden" value="" /&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="todo-assign"&gt;
&nbsp;&nbsp;&nbsp; " Task: "; 
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
    &lt;div class="todo-who"&gt;
    " Who: ";
    &lt;select id="todowho"&gt;
        foreach(var u in site.users where !u.anonymous) {
            &lt;option value=(u.name) selected=((u.id == user.id) ? 'selected' : nil)&gt;u.name&lt;/option&gt;
        }
    &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="todo-what"&gt;
    "What: "; &lt;input id="todowhat" type="text" /&gt;
    &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="todo-when"&gt;
    " When: "; &lt;input id="todowhen" type="text" value=(date.format(date.now, 'MM/dd/yyyy')) ctor="$this.datepicker();" /&gt;
    &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="todo-submit"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id="todoadd" type="button" value="Add" ctor="
        when($this.click) {
            @todoupdate({ index: #todoid.val(), entry: { what: #todowhat.val(), who: #todowho.val(), when: #todowhen.val(), author: {{user.name}}, done: false }});
            #todoid.val('');
            #todowhat.val('');
            #todoadd.val('Add');
            #tododelete.hide();
            #todoadd.blur();
        }
        when(#tododelete.click) {
            @todoupdate({ index: #todoid.val(), entry: null });
            #todoid.val('');
            #todowhat.val('');
            #todoadd.val('Add');
            #tododelete.hide();
            #todoadd.blur();
        }
        when(@todoedit) {
            Deki.Api.ReadPageProperty(null, 'urn:custom.mindtouch.com#todo', function(result) {
                var data = YAHOO.lang.JSON.parse(result.value || '[]');
                #todoid.val(@todoedit.index);
                #todowhat.val(data[@todoedit.index].what);
                #todowhen.val(data[@todoedit.index].when);
                #todowho.val(data[@todoedit.index].who);
                #todoadd.val('Update');
                #tododelete.show();
            }, function(result) {
                alert('An error occurred trying to read the TODO list (status: ' + result.status + ' - ' + result.text + ')');
            });
        }
        when(@todoupdate) {
            Deki.Api.ReadPageProperty(null, 'urn:custom.mindtouch.com#todo', function(result) {
                var data = eval('(' + (result.value || '[]') + ')');
                if(@todoupdate.index !== '') {
                    if(@todoupdate.entry === null) {
                        data.splice(@todoupdate.index, 1);
                    } else {
                        Deki.$.extend(data[@todoupdate.index], @todoupdate.entry);
                    }
                } else {
                    data.push(@todoupdate.entry);
                }
                if(result.etag) {
                    Deki.Api.UpdatePageProperty(result.href, YAHOO.lang.JSON.stringify(data), result.etag, function() {
                        Deki.Api.Reload(#todolist, null, function() { ToDoWireControls(); });
                    }, function(result) {
                        alert('An error occurred trying to update the TODO list (status: ' + result.status + ' - ' + result.text + ')');
                    });
                } else {
                    Deki.Api.CreatePageProperty(null, 'urn:custom.mindtouch.com#todo', YAHOO.lang.JSON.stringify(data), function() {
                        Deki.Api.Reload(#todolist);
                    }, function(result) {
                        alert('An error occurred trying to create the TODO list (status: ' + result.status + ' - ' + result.text + ')');
                    });
                }
            }, function(result) {
                alert('An error occurred trying to read the TODO list (status: ' + result.status + ' - ' + result.text + ')');
            });
        }
    " /&gt;
    &lt;input id="tododelete" style="display: none;" type="button" value="Delete" /&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/form&gt;

// todo list
var todo = json.parse(page.properties["todo"].text ?? "") ?? [];
let todo = [ item .. { index: __index } foreach var item in todo ];
let todo = list.sort(todo, _, true, "date.compare($left.when, $right.when)");
&lt;table id="todolist" cellspacing="0" cellpadding="0"&gt;
&nbsp;&nbsp;&nbsp; &lt;colgroup&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;col width="20" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;col width="20%" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;col /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;col width="15%" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;col width="75" /&gt;
&nbsp;&nbsp;&nbsp; &lt;/colgroup&gt;
    &lt;tr&gt;
        &lt;th&gt;string.nbsp&lt;/th&gt;
        &lt;th&gt;"When"&lt;/th&gt;
        &lt;th&gt;"What"&lt;/th&gt;
        &lt;th&gt;"Who"&lt;/th&gt;
        &lt;th&gt;string.nbsp&lt;/th&gt;
    &lt;/tr&gt;
    foreach(var entry in todo) {
        var class = "";
        if(entry.done) let class..= "completed ";
        if(date.issameday(date.now, entry.when)) let class ..= "due-today ";
        else if(date.isafter(date.now, entry.when)) let class ..= "due-past ";
        var title = "Created by " .. entry.author;
        &lt;tr class=(class)&gt;
            &lt;td&gt;&lt;input type="checkbox" name="done" value=(entry.index) checked=(entry.done ? 'checked' : nil) /&gt;&lt;/td&gt;
            &lt;td title=(title)&gt;&lt;span&gt;entry.when&lt;/span&gt;&lt;/td&gt;
            &lt;td title=(title)&gt;&lt;span&gt;entry.what&lt;/span&gt;&lt;/td&gt;
            &lt;td title=(title)&gt;&lt;span&gt;entry.who&lt;/span&gt;&lt;/td&gt;
            &lt;td class="todo-edit"&gt;&lt;a href="#" rel=(entry.index)&gt;"edit"&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
    }
&lt;/table&gt;
&lt;/div&gt;
&lt;script type="text/jem"&gt;"
function ToDoWireControls() {
    Deki.$('#todolist a').bind('click', function() {
        @todoedit({ index: Deki.$(this).attr('rel') }); 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  #todowhat.select();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return false;
    });
    Deki.$('#todolist input').bind('change', function() {
        var $this = Deki.$(this);
        @todoupdate({ index: $this.val(), entry: { done: this.checked } });
    });
}
ToDoWireControls();
"&lt;/script&gt;
</pre>
<p>
    <style type="text/css">/*<![CDATA[*/

#deki-todo {
	margin: 0;
	padding: 4px; 
	width: 98%;
}
#deki-todo table {
	width: 100%; 
	margin: 0;
}
#deki-todo table td {
	border-bottom: 1px solid #000;
	padding: 4px 2px;
}
#deki-todo tr td.todo-edit {
	text-align: right;
	padding-right: 8px;
}
#deki-todo tr.due-today td {
	background-color: #ff0; 	
}
#deki-todo tr.completed td {
	background-color: #fff;
}
#deki-todo tr.completed td span {
	text-decoration: line-through;
}
#deki-todo tr.due-past td, 
#deki-todo tr.due-past td.todo-edit a {
	color: #777;	
}
#deki-todo table th {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid #000;
}
#deki-todo form {
	padding: 4px; 
	background-color: #000;
	color: #fff; 
	overflow: hidden;
	margin-bottom: 8px;
}
#deki-todo div.todo-assign {
	font-weight: bold;
}
#deki-todo form, 
#deki-todo form input, 
#deki-todo form select {
	font-size: 11px;
}
#deki-todo form div {
	padding-right: 8px;	
	float: left;
}
#deki-todo div.todo-submit {
	float: right; 
	padding-right: 0px;
}
#deki-todo div.todo-submit input {
	margin-right: 4px;
}
#deki-todo table tr td.todo-edit a {
	background: url(/skins/common/icons/silk/page_white_edit.png) no-repeat center left;
	color: #000;
	text-decoration: none;
	padding: 3px 3px 3px 21px;
	font-size: 11px;
}
#deki-todo table tr td.todo-edit a:hover {
	text-decoration: underline;
}
/*]]>*/</style>
</p>

I have unsafehtml enabled. I then created a new page, switched to source and pasted content.

Obviously I don't know what I am doing and just trying the obvious easy thing to do in order to try getting it.

[lktest]

Since this feature looks like it's a work-in-progress still (and maybe an enterprise feature?), I don't want to speak for the Mindtouch dudes. But to save you time, I'll say that it looks like the new template requires new extensions. You aren't neccessarily doing anything incorrectly, you just might not have all the pieces to make the feature work. I might be wrong though!

[neilw]

The dekiapi() call calls an extension that implements AJAX access to the Deki API. You can grab it here.

[rberinger]

The dekiapi() call calls an extension that implements AJAX access to the Deki API. You can grab it here.

That fixed one problem now I'm also getting the jquery error that pktloss is.

[pktloss]

Humm.. I am starting to wonder if this has something to do with the unsafehtml or something.

I have the dekiapi.xml script.

I am starting to wonder if maybe we simply aren't able to copy and paste the code because we aren't seeing the complete code due to the unsafehtml?

I don't know enough about this but I set unsafehtml true and tried cut and pasting the code again and now I get something slightly different.