ToDoItem

ToDoItemEdit

dekiapi();
jQuery.ui("smoothness");
<script type="text/javascript">"
"</script>
var todo = json.parse(page.properties['todo-item'].text ?? "") ?? [];
'This task has been assigned and ID of: ' ..page.id;
<div>
<form>
<input id="projpage" type="hidden" value=(todo.projectpage) />
<table bgcolor="#f0ffff" id="subtodoedit" cellspacing="1" cellpadding="1" border="1" width="100%" style="table-layout: fixed;">
    <tbody>
        <tr>
            <td valign="middle" rowspan="4"><span style="align:center;">'Assignee(s):'</span>; <br/>;
                <input type="text" id="user-search" />
                <div id="user-suggest">
                    <div id="userlist">
                    </div>
                </div>
                <select id="subassignee" size ="4" multiple="true" style="width:100%">
                    foreach(var u in todo.assignee) {
                        <option value=(u) selected=('selected')>u</option>
                    }
                </select>
            </td>
            <td align="right" valign="middle">'Assigner: '; <input id="subassigner" type="text" value=((todo.assigner ?? user.name)) disabled=((todo.assigner==nil) ? nil : 'disabled') />
            </td>
            <td align="right" valign="middle">'Start Date: '; <input id="substart" type="text" value=(((todo.startdate==nil) ?  date.format(date.now, 'MM/dd/yyyy') : todo.startdate)) disabled=((todo.startdate==nil) ? nil : 'disabled') ctor="$this.datepicker();"/>
            </td>
        </tr>
        <tr>
            <td align="right" valign="middle">'Priority: '; 
                <select id="subpriority">
                    <option value="3" selected=(((todo.priority == 3) ? 'selected' : nil))>'3'</option>
                    <option value="2" selected=(((todo.priority == 2) ? 'selected' : nil))>'2'</option>
                    <option value="1" selected=(((todo.priority == 1) ? 'selected' : nil))>'1'</option>
                </select>
                '     Percent: '; 
                <select id="subpercent">
                    <option value="5" selected=(((todo.percent == 5) ? 'selected' : nil))>'100%'</option>
                    <option value="4" selected=(((todo.percent == 4) ? 'selected' : nil))>'75%'</option>
                    <option value="3" selected=(((todo.percent == 3) ? 'selected' : nil))>'50%'</option>
                    <option value="2" selected=(((todo.percent == 2) ? 'selected' : nil))>'25%'</option>
                    <option value="1" selected=(((todo.percent == 1) ? 'selected' : nil))>'0%'</option>
                </select>
            </td>
            <td align="right" valign="middle">'Due Date: '; <input id="subdue" type="text" value=(((todo.duedate==nil) ? date.format(date.now, 'MM/dd/yyyy') : todo.duedate)) ctor="$this.datepicker();"/>
            </td>
        </tr>
        <tr>
            <td align="left" valign="middle" colspan="2">'Short Description: ';<input id="subdesc" type="text" value=(((todo.desc==nil) ? "" : todo.desc)) disabled=((todo.desc==nil) ? nil : 'disabled') style="width:30em" maxlength="40" />
            </td>
        </tr>
<tr>
<td>
    'Task On Hold: '; <input type="checkbox" id="onhold" value="" checked=(((todo.hold == true) ? 'checked' : nil)) />;
    <br/>;
    'Reason: '; <input type="text" id="holdreason" value=(((todo.holdreason==nil) ? "" : todo.holdreason)) />;
</td>
<td>
    'Task Complete: '; <input type="checkbox" id="tododone" value="" checked=(((todo.done == true) ? 'checked' : nil)) ctor="
                            when($this.click) {
                                if($this.attr('checked')){
                                    if(#subpercent.val() != '5') {
                                        alert('Task not marked 100% done');
                                        $this.attr('checked', false)
                                        return;
                                    } else {
                                        #onhold.attr('checked',false);
                                        #holdreason.attr('value', '');
                                        #donedate.attr('value', ({{date.format(date.now, 'MM/dd/yyyy')}}));
                                    }
                                } else {
                                    #donedate.attr('value', (''));
                                }
                            }
                            "/>;
    <br/>;
    'Done Date: '; <input type="text" id="donedate" value=(((todo.donedate==nil) ? "" : todo.donedate )) />;
</td>
</tr>
        <tr>
            <td align="center" valign="middle" colspan="3"> 
                <input id="subupdatetodo" type="button" value="Update" style="margin-top:15px;margin-bottom:15px" ctor="
                    when($this.click) {
                        $('#subassignee option').each(function(i) {
                            $(this).attr('selected','selected');
                        });

                        var todoitem  =  ({ assignee: #subassignee.val(), 
                                         assigner:    #subassigner.val(), 
                                         startdate:   #substart.val(),
                                         priority:    #subpriority.val(),
                                         percent:     #subpercent.val(),
                                         duedate:     #subdue.val(),
                                         desc:        #subdesc.val(),
                                         done:        #tododone.attr('checked'),
                                         donedate:    #donedate.val(),
                                         hold:        #onhold.attr('checked'),
                                         holdreason:  #holdreason.val(),
                                         projectpage: #projpage.val(),
                                         whochanged:  {{user.name}}
                                       });
                        #save.blur();

                        Deki.publish('ch_updatetodo', todoitem);
                    }
                " />
            </td>
        </tr>
    </tbody>
</table>
</form> 
</div>



<script type="text/jem">"
    var dapi = '/@api/deki/pages/=';
    var dpath = Deki.url.encode('"..page.path.."');

    Deki.subscribe('ch_updatetodo',null, function(c, m, d) {

        UpdateProperty(dpath,m);

    }, null);
"</script>

<script type="text/javascript">"
// Create Property
var SaveProperty = function(page, properties) {
        var pageapi = '/@api/deki/pages/=' + Deki.url.encode(Deki.url.encode(page));

        Deki.Api.CreatePageProperty(pageapi, 'urn:custom.mindtouch.com#todo-item', YAHOO.lang.JSON.stringify(properties), function() {
        		alert('Thank you. The information has been submitted.');
        	}, function(result) {
        		alert('An error occurred trying to create the store (status: ' + result.status + ' - ' + result.text + ')');
        	});

}


var UpdateProperty = function(page, properties) {

        var pageapi = '/@api/deki/pages/=' + Deki.url.encode(Deki.url.encode(page));

        Deki.Api.ReadPageProperty(null, 'urn:custom.mindtouch.com#todo-item', function(result) {
            if(result.etag) {    // page property exists, write over it.
               Deki.Api.UpdatePageProperty(result.href, YAHOO.lang.JSON.stringify(properties), result.etag, function() {
                    alert('Your task has been updated!');
                }, function(result) {
	            alert('An error occurred trying to update the store (status: ' + result.status + ' - ' + result.text + ')');
	        });
	    } 
        }, function(result) {
	    alert('An error occurred trying to read the store (status: ' + result.status + ' - ' + result.text + ')');
        });
}

"</script> 

<html><head>
// <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://developer.mindtouch.com/@api/deki/files/4844/=jquery.livequery.js" />
<script type="text/javascript">"
    $(document).ready(function() {
        $('#user-suggest #userlist a').livequery('click', function(event) {
            $('#subassignee').append('<option selected=\"selected\" value=\"' + $(this).text() + '\">' + $(this).text() + '</option>');
            $('#user-suggest').hide();
            $('#user-search').val('');
            $('#user-search').focus();
            return false;
        });
        
        $('#subassignee').dblclick(function() {
            $('#subassignee option:selected').remove();
        });

    });

	$('body').ready( function() {
		$('#user-search').keyup( function() {
                        if ($(this).val()==''){
				$('#user-suggest').hide();
				return false;
			}
	
			var q = $(this).val();
			
			clearTimeout($.data(this, 'timer'));
		    var ms = 400; //milliseconds
		    var wait = setTimeout(function() {
		      loadusers(q);
		    }, ms);
	    
	
			$.data(this, 'timer', wait);
		});
	});

function loadusers(u) {
    $('#user-suggest').hide();
    var userapi = 'http://developer.mindtouch.com/@api/deki/users?sortby=username&limit=20&activatedfilter=true&usernamefilter=' + u;

    jQuery.get(userapi,function(xml){
        // clear the previous results
        $('#user-suggest #userlist div').remove();

        // Establish a place holder for our name We need to do this so that we only get 1 unique username per user.
        var theuser;

        $(xml).find('users > user').each(function() {
            $(this).find('username').each(function() {
                theuser = $(this).text();
                return theuser;
            });

            $('#user-suggest #userlist').append('<div class=\"userpick\"><a href=\"#\" id=\"' + theuser + '\">' + theuser + '</a></div>');
        });
    });
    $('#user-suggest').show();
}

"</script>
<style type="text/css">"
    #user-suggest {
                    width=650px;
                    position:absolute;
                    border:1px solid #ccc;
                    background:#fff;
                    z-index:50;
                  }

    #user-suggest div#userlist div.userpick:hover {
                    text-decoration: underline; 
                    background-color:#0099CC;
                 }
    #user-suggest div#userlist div.userpick a {
                    text-decoration: none; 
                 }
    #user-suggest div#userlist div.userpick {
                    text-decoration: none; 
                    background-color:#FFFFcc;
                    padding-left:10px;
                    padding-right: 10px;
                 }
"</style>
</head></html>


<html><head>
<script type="text/javascript">"
    $(document).ready(function() {
        $('#taskhistory').hide();

        $('a#showhistory').click(function() {
           $('#taskhistory').toggle('slow'); 
        });

    });
"</script>
<style type="text/css">"
    #taskhistory{
        border:1px solid #CCCC33;
        padding:10px;
        margin-top:10px;
        width:500px;
        font-size:10px; 
        overflow:scroll;
    }
"</style>
</head></html>


// *** HERE WE DEFINE THE BODY OF THE TASK ITEM ***

var prevprop = {};
var summary = '';
var curprop = {};
var validkeys =['assignee','assigner','startdate','priority','percent','duedate','desc','done','donedate','hold','holdreason'];

<p>
<a href="#" id="showhistory">'Task History'</a>
</p>
<div id="taskhistory" class="hideable">
    foreach(var prop in page.properties) {
        foreach(var rev in prop.revisions) {
            if(rev.name == 'todo-item') {
//                date.format(rev.date,'u'); ' - '; rev.revision; <br/>; json.parse(rev.text);
let curprop = json.parse(rev.text);
let summary = '<b>' ..curprop.whochanged ..'</b> updated this task on:  ' ..date.format(rev.date,'u') ..'<br/>';

if(rev.revision == 1) {
    // This is the initial created task
    let prevprop = curprop;
    let summary ..= '<b>Task Created!</b><br/>'
} else {
    // Compare against previous property
    foreach(var k in validkeys) {
        if(typeof curprop[k] == 'list') {
            var prevlistprop = list.sort(prevprop[k]);
            foreach(var li in list.sort(curprop[k])) {
                if(li not in prevlistprop) {
                    let summary ..= ((curprop[k] == prevprop[k]) ? '' : 'Changed: <b>\"' ..k ..'\"</b> New Value(s): <b>\"' ..curprop[k] ..'\"</b><br/>');
                    break;
                }
            }
        } else {
            let summary ..= ((curprop[k] == prevprop[k]) ? '' : 'Changed: <b>\"' ..k ..'\"</b> New Value(s): <b>\"' ..curprop[k] ..'\"</b><br/>');
        }
    }
    let prevprop = curprop;
}
web.html(summary); <br/>;

            }
        }
    }
</div>