| Project: | ProjectPier |
| Version: | 0.8.0.3 |
| Component: | Code |
| Category: | feature request |
| Priority: | minor |
| Assigned: | yartap |
| Status: | new |
Jump to:
I wanted to try replacing Basecamp (and my $50 expense/month) with ProjectPier but there were some capabilities lacking. The first one I noticed was time tracking which I resolved by using this patch - http://www.projectpier.org/node/920. The second was reordering tasks within a task list. I like to allow my clients to prioritize the tasks in the order they want them done. ProjectPier comes with the ability to reorder, but you have to change the numbers in text boxes on the Reorder page. Some of my clients aren't too sharp (computer-wise) and probably wouldn't even attempt to manage it this way, so I wanted to mimic the capability Basecamp offers where you can just drag and drop directly from the task list to reorder them and it saves the new order automatically.
I just based it on this post from volomike - http://www.projectpier.org/node/1700.
So here's how I did it.
1. Download JqueryUI at http://jqueryui.com/download
Make sure you include the Sortable component and probably all the Core stuff as well.
2. Upload the 2 files in the /js folder from the zip file to public/assets/javascript/jquery. You may need to create the jquery folder if it doesn't exist.
3. Edit the file named jquery/jquery-1.4.2.min.js (keeping in mind that your version number may be different) and add this to the end of the file to prevent conflicts with YUI:
var $j = $;
$ = '';
4. Add links to the jquery files
In application/layouts/project_website.php, add the following just after the favicon link around line 13.
<?php echo add_javascript_to_page('jquery/jquery-1.4.2.min.js') ?>
<?php echo add_javascript_to_page('jquery/jquery-ui-1.8.2.custom.min.js') ?>
5. Also in application/layouts/project_website.php, after <?php echo render_page_head() ?>, add the following.
<script language="javascript" type="text/javascript" >
$j(document).ready(
function() {
$j("#sortme").sortable({
update : function () {
serial = $j('#sortme').sortable('serialize');
$j.ajax({
url: "sort_tasks.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>
6. Upload the attached sort_tasks.php (removing _.txt from the filename) to the ProjectPier root (or anywhere you want, just update the path in the ajax above), updating the file with your database info. You can get your DB info from /config/config.php if you don't have it. I didn't know how else to connect to the database, so this was my solution.
7. Finally, you'll need to update /application/views/task/task_list.php. Attached is my updated task_list.php file. Again, remove the _.txt if you use the attached file.
I basically replaced the table related tags with ul, li, and span tags
Once this is all done, you should be able to drag the tasks up and down and it will save the order automatically.
You'll probably want to do some styling of the li tags and I'm sure there are better ways to do some of this, but it works for me. It would be great for somebody to change this so the AJAX call is more integrated with PP. I just don't have the time to figure it out at this point.
| Attachment | Size |
|---|---|
| sort_tasks.php_.txt | 292 bytes |
| task_list.php_.txt | 7.53 KB |
sort_tasks.php
Improved code: No more hardcoded values.
<?phpinclude('config/config.php');
$link=mysql_connect(DB_HOST,DB_USER,DB_PASS);
@mysql_select_db(DB_NAME); $task = $_POST['task'];
for ($i = 0; $i < count($task); $i++) {
mysql_query("UPDATE `" . TABLE_PREFIX . "project_tasks` SET `order`=" . $i . " WHERE `id`='" . $task[$i] . "'") or die(mysql_error());
}
?>