Day 5 – Building a Project Manager mini app in DB-Toolkit

Posted by David Cramer on Nov 24, 2010

This tutorial requires at least Version 0.1.13 due to additional field types and a minor bug-fix. Please update before attempting the tutorial.

Well the time is here. You have learned the basics on how to make interfaces on tables. So now lets put them all together and build a functional project management app.
In this tutorial, we’ll cover all the methods we learned in days 1-4.
some new stuff we’ll learn today:

• Cloned Fields : This allows us to chain together multiple FieldTypes. you’ll see how this works.
• Dashboard Items: We’ll place a task list on the dashboard
• Filter Locks: We’ll lock down filters to create a pre-filtered report.

This is going to be a mainly text based tutorial, so there wont be many screenshots, but there will be screens on the new stuff. So lets get going.

Tables

As always with new tables, here are the two tables you’ll need for this tutorial. the projects and the tasks.

CREATE TABLE `app_projects` (
`ProjectID` int(10) unsigned NOT NULL AUTO_INCREMENT,
`Title` varchar(255) NOT NULL,
`StartDate` date NOT NULL,
`EndDate` date NOT NULL,
`Description` text NOT NULL,
PRIMARY KEY (`ProjectID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=101 ;

CREATE TABLE `app_tasks` (
`TaskID` int(10) unsigned NOT NULL AUTO_INCREMENT,
`ProjectID` int(11) NOT NULL,
`Title` varchar(255) NOT NULL,
`Start` datetime NOT NULL,
`End` datetime NOT NULL,
`UserID` int(11) NOT NULL,
`Priority` enum('Low','Normal','High') NOT NULL,
`Description` text NOT NULL,
`Status` int(11) NOT NULL,
PRIMARY KEY (`TaskID`),
KEY `ProjectID` (`ProjectID`,`UserID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=101 ;

Now that thouse are created, the first interface we’re going to build is the Projects Manager.

Projects Interface

go to DB-Toolkit -> Add New

Name the new interface Projects and the description Manage Projects, Give the menu group the name Projects and set the Permission to All. Leave Dashboard Unchecked.

Select Table, “app-projects” and move down to the Report Setup.

FieldTypes

ProjectID: set to Auto, Hidden-Indexed.
Title: Single Text Field, Shown-Indexed, Required
StartDate: Date Picker, Shown-Indexed, Required, Sortable
EndDate: Date Picker, Shown-Indexed, Sortable
Description, TextArea, Hidden-Indexed, Required

Scroll down to SortField and Select StartDate Ascending

Click Save.

Tasks Interface

FieldType config for ProjectID

Create a new Interface. Lets call this one Tasks, with the Description of Task Manager, Menu Group, Projects permission to All and leave Dashboard unchecked.

Select the “app_tasks” table and move on to the Fieldtypes.

FieldTypes

TaskID: Auto, hidden-indexed
ProjectID: Join->Join Table, Shown-Index, Required. In the FieldType Config, Link up the the field to app_projects, reference the ProjectID and show the Title. this will be a dropdown field.
Title: Single Text Field, Shown-Indexed, Required
Start: Auto Timestamp, Shown-Indexed, Sortable
End,  Date and Time, Shown-NotIndexed
AssignedTo: Join Table, Shown-Indexed, Required, Sortable. in The FieldType Config: Join to users table (usually wp_users) reference the ID and show the user_nicename field. type is dropdown.
Priority: Enum, Shown-Indexed, Required, Sortable
Description: Text Area, Hidden-Indexed, Required
Status: On-Off Toggle, Shown-Indexed

Sort field, Start Descending

Click Save.

Cloning

Here we introduce the concept of cloning. Open the interface Projects to Edit.

Scroll down to Report Setup, and click on Add Clone Field in the Advanced Field Types Box.

You’ll see a new Field Box appear just bellow the button, Drag the new field and place it between EndDate and Description. Click on the little gear to the right of the title to expose the Additional field settings. Name your field Duration. by tuping in the title field and close the panel by clicking the gear again.

settings for the cloned date difference panel

MasterField: This is the field we’re essentially cloning. this is the value that is passed back into the fieldtype handler. lets set it to ProjectID which should be already selected.
The rest is the same as a standard fieldtype panel.
Set the rest to Math->Date Difference,  Shown-Indexed. In the Field Config Panel, Select Start date and End date. order is not too important as it will only be calculating the time between the two dates.
open the FieldType Config for the Status Field and Check Enable Date Stamping and select End as the date stamp field. this will apply the current datestamp to that field when the status changes. Pretty Cool!

Head on over the the settings tab.

Now we can go an customise this interface to say Project instead of Item.
in the New Item Title, set it to Add Project.
Scroll down to Notifications & Buttons, Change all references from item to project. there purposes are pretty much self explanatory.

Click Save and done with this interface.

Open the Tasks Interface, and repeat the clone field steps to add a duration field to the tasks, you can also go and set the word Item to Tasks as you did with the projects while you’re there.

once you have done that, click save.

Dashboard

Go to your interfaces list and under Tasks, Click Duplicate to make a copy of the tasks interface. on the copy, click edit.

Change the name of the new interface to My Tasks with the Description of My Tasks. Check the Set as Dashboard item. and leave the Menu Group blank.
go down to the fieldtypes and change the UserID Field type to Auto Values->User ID and in the field type config panel, check Apply Hard Filter . this will set the report to show only entries for the logged in user id. in the Cloned Duration Field, remove it by click the red X next to the gear on the right as we dont need this.

Head on over the the List Template Tab.

Check Use Template and scroll down to the PreContent box and paste in the following html code:

<div style=””>
<div>
<ul>

In the Content box bellow that, use this code:

<li>{{Status}} <span>{{Title}}</span> <span>{{Start}}</span>
<div>Project: <strong>{{ProjectID}}</strong> | Priority: <strong>{{Priority}}</strong></div>
<div>{{Description}}</div>
</li>

scroll down to the PostContent Box ans paste in the following.

</ul>
</div>
</div>

That will set up the template for the dashboard, Click save and go view the new interface.

Click on the Show Filters button, in the filters panel, select unchecked in the Status Filter and click Lock Filters this will lock down this interface to only show unchecked tasks. Remember we set this interface to Apply Hard FIlter to the User ID? So this combination will now only show unchecked tasks for the currently logged in user. Pretty Neat!

Now click Edit on the interface and go to the Settings Tab.In general Settings, Check Hide Frame. Go down to ToolBar Settings and uncheck everything in that box. Scroll right down and Save.

and thats it! go to your dashboard, you’ll see your new tasks list.

Go play with your new project manager and comment below if you have any questions.