What's the best practice to set up an edit view in which you match something with other things coming from very large collections?

Question

I have a design question. Hope this doesn't come across as a lazy attempt.

I'm writing a simple accounting application: A ledger has many accounts, each account has many transactions, and so on.

Double-entry accounting dictates we match transactions with other transactions, so I have a separate model called LedgerItemGroup, which has many transactions.

Very simplistically, we can consider a transaction matched if it belongs to a LedgerItemGroup and the sum of the totals of all transactions in that group is equal to zero.

So far, so good.

My question is what the best approach would be to design the edit_ledger_item view for an unmatched transaction so that the bookkeeper can manually match it with one or more other unmatched transactions.

Here's an (incomplete) layout of the models involved:

class LedgerAccount < ActiveRecord::Base
  has_many :ledger_items
end

class LedgerItem < ActiveRecord::Base
  belongs_to :ledger_account
  belongs_to :ledger_item_group

  def matched?
    !self.ledger_item_group_id.nil?
  end
end

class LedgerItemGroup < ActiveRecord::Base
  has_many :ledger_items

  def reconciled?
    self.ledger_items.inject(0) { |sum, i| sum + i.total_amount } == 0
  end
end

This seems to call for a string query input box, plus something to delimit the data range, which then would dynamically yield a list of possible matches. The bookkeeper than adds one or more to a cart of sorts. When checked out, this constitutes the LedgerItemGroup.

A simple multiple select box populated with a collection of unmatched transactions here is out of the question as we can easily have hundreds or thousands at hand.

I do not want to reinvent the wheel here. Is the best approach a checkout cart? Any pointers, suggestions would be appreciated.

The app itself is here should you wish to see more of the code.

Answer 1

I believe multiple select boxes are like the express lane in a grocery store. 8 items or less.

Have you considered pages of check boxes for unmatched ledger items?

Break them up into divs containing a reasonable number of check boxes at a time, say 50. Make sure that all checkboxes across all dives are part of the same check box array. Render them all at once but give all the pages a classes based on their visibility. Then add some javascript pagination, a list of link to function that removes the visible class and adds it to the page associated with the link.

CSS:

.invisible{
  display:none;
}

Generated HTML

<div id="ledger_items_page_1" class="visible">
 First set of checkboxes
</div>
<div id="ledger_items_page_2" class="invisible">
 Second set of checkboxes
</div>

pagination example.

<%= link_to_function("page 3", 
  "$('.visibile').removeClassName('visibile').addClassName('invisible'); 
  $('ledger_items_page_3').removeClassName('invisible').addClassName('visible');") %>

It wouldn't hurt to display a list of selected ledger items to a list updated onchange for each of the checkboxes, this provides away of reminding the user what they've selected if the ledger items they've checked are not on the current page. Something that works like the way StackOverflow lets you manage your interesting tags question filters.

Given the heavy reliance on javascript you would have deny noscript users from using this action or make find another way to display things.

At the end you submit your form as you usually would.

• N.B.: The W3C standard is unclear on submitting form elements with display:none. But as far as I know, all of the major browsers support this behaviour.