Tasks: Ordering of the task list

apps/tasks/css/style.css

@@ -1,3 +1,4 @@
+#tasks p.loading{margin:15px;}
 #tasks{position:fixed; overflow: auto; top:6.4em; width:50em; background:#f8f8f8; border-right:1px solid #ddd; }
 #task_details{position:absolute;left:63em;top:6.4em;}
 #task_details th{padding:2px;text-align:right;vertical-align:top; }
@@ -6,6 +7,7 @@
 .error{border-color:red;border-width:2px;}
 .task{position:relative;padding:0.5em 1em;}
 .task_actions{display:none;}
+#tasks h1{background-color:#1D2D44;color:white;font-size:120%;padding:0 0.5em;}
 
 .task .priority{background-color:black;color:white;position:absolute;top:0.5em}
 .task .priority-n{height:2.66ex;width:0.6em;}

apps/tasks/js/tasks.js

@@ -1,4 +1,16 @@
 OC.Tasks = {
+	bool_string_cmp:function(a, b) {
+		if (a === b) {
+			return 0;
+		}
+		if (a === false) {
+			return -1;
+		}
+		if (b === false) {
+			return 1;
+		}
+		return a.localeCompare(b);
+	},
 	create_task_div:function(task) {
 		var task_container = $('<div>')
 			.addClass('task')
@@ -78,6 +90,28 @@ OC.Tasks = {
 			}
 			task_container.data('show_count', hide_count);
 		});
+	},
+	order:function(sort, get_property, empty_label) {
+		var tasks = $('#tasks .task').not('.clone');
+		tasks.sort(sort);
+		var current = null;
+		tasks.detach();
+		var $tasks = $('#tasks').empty();
+		var container = $tasks;
+		tasks.each(function(){
+			if (get_property) {
+				var label = get_property($(this).data('task'));
+				if(label != current) {
+					current = label;
+					container = $('<div>').appendTo($tasks);
+					if (label == '' && empty_label) {
+						label = empty_label;
+					}
+					$('<h1>').text(label).appendTo(container);
+				}
+			}
+			container.append(this);
+		});
 	}
 };
 
@@ -134,6 +168,82 @@ $(document).ready(function(){
 		OC.Tasks.filter(this, '.location.tag');
 	});
 
+	$('#tasks_order_category').click(function(){
+		var tasks = $('#tasks .task').not('.clone');
+		var collection = {};
+		tasks.each(function(i, task) {
+			var categories = $(task).data('task').categories;
+			$(categories).each(function() {
+				if (!collection.hasOwnProperty(this)) {
+					collection[this] = [];
+				}
+				collection[this].push(task);
+				if (categories.length > 1) {
+					task = $(task).clone(true).addClass('clone').get(0);
+				}
+			});
+			if (categories.length == 0) {
+				if (!collection.hasOwnProperty('')) {
+					collection[''] = [];
+				}
+				collection[''].push(task);
+			}
+		});
+		var labels = [];
+		for (var label in collection) {
+			labels.push(label);
+		}
+		labels.sort();
+		tasks.detach();
+		var $tasks = $('#tasks').empty();
+		for (var index in labels) {
+			var label = labels[index];
+			var container = $('<div>').appendTo($tasks);
+			if (label == '') {
+				label = t('tasks', 'No category');
+			}
+			$('<h1>').text(label).appendTo(container);
+			container.append(collection[labels[index]]);
+		}
+	});
+
+	$('#tasks_order_due').click(function(){
+		OC.Tasks.order(function(a, b){
+			a = $(a).data('task').due;
+			b = $(b).data('task').due;
+			return OC.Tasks.bool_string_cmp(a, b);
+		});
+	});
+
+	$('#tasks_order_complete').click(function(){
+		OC.Tasks.order(function(a, b){
+			return ($(a).data('task').complete - $(b).data('task').complete) ||
+				OC.Tasks.bool_string_cmp($(a).data('task').completed, $(b).data('task').completed);
+		});
+	});
+
+	$('#tasks_order_location').click(function(){
+		OC.Tasks.order(function(a, b){
+			a = $(a).data('task').location;
+			b = $(b).data('task').location;
+			return OC.Tasks.bool_string_cmp(a, b);
+		});
+	});
+
+	$('#tasks_order_prio').click(function(){
+		OC.Tasks.order(function(a, b){
+			return $(a).data('task').priority
+			     - $(b).data('task').priority;
+		});
+	});
+
+	$('#tasks_order_label').click(function(){
+		OC.Tasks.order(function(a, b){
+			return $(a).data('task').summary.localeCompare(
+			       $(b).data('task').summary);
+		});
+	});
+
 	$('#tasks_delete').live('click',function(){
 		var id = $('#task_details').data('id');
 		$.getJSON('ajax/delete.php',{'id':id},function(jsondata){

apps/tasks/templates/tasks.php

@@ -1,10 +1,14 @@
 <div id="controls">
-	<form>
-		<input type="button" id="tasks_newtask" value="<?php echo $l->t('Add Task'); ?>">
-	</form>
+	<input type="button" id="tasks_newtask" value="<?php echo $l->t('Add Task'); ?>">
+	<input type="button" id="tasks_order_due" value="<?php echo $l->t('Order Due'); ?>">
+	<input type="button" id="tasks_order_category" value="<?php echo $l->t('Order Category'); ?>">
+	<input type="button" id="tasks_order_complete" value="<?php echo $l->t('Order Complete'); ?>">
+	<input type="button" id="tasks_order_location" value="<?php echo $l->t('Order Location'); ?>">
+	<input type="button" id="tasks_order_prio" value="<?php echo $l->t('Order Priority'); ?>">
+	<input type="button" id="tasks_order_label" value="<?php echo $l->t('Order Label'); ?>">
 </div>
 <div id="tasks">
-<p><?php echo $l->t('Loading tasks...') ?></p>
+<p class="loading"><?php echo $l->t('Loading tasks...') ?></p>
 </div>
 <div id="task_details">
 </div>