今回は、で作成したto-doの登録結果を一覧表示できるようにします。
TD.scalaの変更
to-do一覧には、to-doが完了したものを含めて表示するか、除いて表示するかのチェックボックスを設けます。このチェックボックスの設定内容は、セッションで管理することにするので、boolean値のセッション情報を表すオブジェクトを作成します。
src/main/scala/com/liftworkshop/snippet/TD.scala の最下部に以下のオブジェクトを追加します。
class TD { ・・・ } object QueryNotDone extends SessionVar(false)
引き続き、TD クラスの中にto-doをデータベースから検索する toShow メソッドを追加します。子のメソッドでは、検索条件として、ToDo.owner が現在のユーザであることを指定します。さらに、先ほど追加したオブジェクト、つまり、完了済みの to-do かどうかを判断し、ToDo.done の検索条件を追加します。
class TD { ・・・ doBind(form) } private def toShow = ToDo.findAll(By(ToDo.owner, User.currentUser), if (QueryNotDone) By(ToDo.done, false) else Ignore[ToDo], OrderBy(ToDo.done, Ascending), OrderBy(ToDo.priority, Descending), OrderBy(ToDo.desc, Ascending)) } object QueryNotDone extends SessionVar(false)
さらにその下に以下のdescメソッドを追加します。このメソッドは一覧のto-doの内容を表示します。to-doの内容を編集時にはテキストボックスを表示し、リターンを押すことで反映できるようにしています。この処理はajaxで行います。
class TD { ・・・ private def desc(td: ToDo, reDraw: () => JsCmd) = swappable(<span>{td.desc}</span>, <span>{ajaxText(td.desc, v => {td.desc(v).save; reDraw()})} </span>) } object QueryNotDone extends SessionVar(false)
最後にリストを表示するためのlistメソッドと、ヘルパーメソッドであるdoListを追加します。先ほどまでで追加したメソッドも、ここから呼ばれます。
class TD { ・・・ def list(html: NodeSeq) = { val id = S.attr("all_id").open_! def inner(): NodeSeq = { def reDraw() = SetHtml(id, inner()) bind("todo", html, "exclude" -> ajaxCheckbox(QueryNotDone, v => {QueryNotDone(v); reDraw}), "list" -> doList(reDraw) _) } inner() } private def doList(reDraw: () => JsCmd)(html: NodeSeq): NodeSeq = toShow. flatMap(td => bind("todo", html, "check" -> ajaxCheckbox(td.done, v => {td.done(v).save; reDraw()}), "priority" -> ajaxSelect(ToDo.priorityList, Full(td.priority.toString), v => {td.priority(v.toInt).save; reDraw()}), "desc" -> desc(td, reDraw) )) } object QueryNotDone extends SessionVar(false)
to-do一覧表示の追加
登録したアイテムを表示するよう、src/main/webapp/index.html の最下部に以下のコードを追加します。lift:TD.list にて追加した snippet が呼ばれます。
・・・ <lift:TD.list all_id="all_todos"> <div id="all_todos"> <div>Exclude done <todo:exclude/></div> <ul> <todo:list> <li> <todo:check><input type="checkbox"/></todo:check> <todo:priority> <select><option>1</option></select> </todo:priority> <todo:desc>To Do</todo:desc> </li> </todo:list> </ul> </div> </lift:TD.list> </lift:Util.in> </lift:surround>
ajax による編集も可能となっています。