online coding interviews

Suppose you wanted to allow your customers to create a list of items that are both editable and sortable. Customers should be able to sort the items by dragging them into the correct position. Customers should also be able to delete an item, and add a new item.

Yikes! Sounds like a lot of fancy UI. Thankfully, with the help of Rails 3.1 and jQuery-UI, it’s actually not that much code.

Let’s suppose that this list was used to define a custom workflow. Something like the following:

Here’s how we do it…

The Models

First, we’ll start with the models. A Workflow has many WorkflowStates. Each WorkflowState has a name (or “label”) and a position. The position attribute is used to preserve the relative ordering of the states. Note that we define an :order in the :has_many relationship, and we specify that Workflow accepts_nested_attributes for WorkflowStates.

The Form

Next comes the form and it’s controller. Note that we:

1. Explicitly include an input for the id of the WorkflowState. Rails will provide this automatically if you don’t… but it will also stick it outside the <li>. This will confuse the jQuery layer (coming soon).
2. The _destroy field is rendered as a hidden field, rather then the suggested checkbox. This allows us to provide the destroy functionality with a much more intuitive UI.

The Javascript

Finally, we layer on the jQuery goodness. This layer is responsible for

1. Making each input element draggable.
2. Keeping the position input elements in the form up to date.
3. Providing the add and delete and element features

Everything in the Javascript layer is pretty elegant… except the giant string of HTML needed to add a new item in the list. Anybody know a better way?

Posted by cailinanne