【Scala】【Play Framework】Bootstrap のモーダルダイアログに書いた内容をDBにinsertする

TODOの新規追加を出来るようにする

Todo管理アプリ、前回の記事でデータベースへの接続ができた（【Scala】【Play Framework】Slick を使ってMySQLのDBに接続する - msawady’s learning memo）
今回は画面から新規Todoの追加を出来るようにする
- Bootstrap を利用した Modal Dialog の追加
- サーバーでの永続化処理の実装

Bootstrap を利用した Modal Dialog の追加

依存関係（tether.js）の追加

bootstrap.jsを動かすにあたり、jQueryだけでなくtether.jsも必要なので、webJarsを利用してインポート

libraryDependencies += "org.webjars.bower" % "tether" % "1.4.0"

    @Html(webJarsUtil.script("jquery.min.js"))
    @Html(webJarsUtil.script("tether.min.js"))
    @Html(webJarsUtil.script("bootstrap.min.js"))

bootstrap.js の前に jQuery, tether.js のimport を行う必要があるので注意。

Modal Dialog の追加

公式ドキュメントのサンプルコードをコピペしています。

v4-alpha.getbootstrap.com

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTodoModal">
   Add TODO
</button>

<div class="modal fade" id="addTodoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Input TODO</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="new-todo" class="form-control-label">Title:</label>
                    <input type="text" class="form-control" id="new-todo">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add-todo">Add TODO!!</button>
            </div>
        </div>
    </div>
</div>

コピペにあたっての注意点としては、button のdata-target属性とmodal-dialog の idは揃える必要があるよ..くらいですね^^;

サーバーへの永続化リクエストは以下のようにJavascriptを書きます.

    $('#add-todo').click(function() {
        var todo_title = $('#new-todo').val()
        if(todo_title){
            $.get('todo/add',
            {
                title: todo_title
            },
            function(){
                $('#myModal').modal('hide');
                location.reload()
            })
        }
    });

コールバック処理で、ダイアログを閉じてリロードするようにしています。Javascriptからモーダルダイアログを閉じるには以下のように書きます。

$('#myModal').modal('hide');

サーバーでの永続化処理の実装

めちゃめちゃ簡単です。Play Framework, slickともに素晴らしい…！

ルーティングの追加

conf/routes に以下を追加します。

GET     /todo/add                 controllers.TodoController.add(title)

Controller, Service, Repositoryの実装

処理をRepositoryまで持っていくだけなのであっさりと。

Controller

  def add(title: String) = Action {
    todoManager.add(title)
    Ok(todoView(todoManager.list))
  }

Service

def add(title: String): Unit = todoRepository.addTodo(new Todo(0, TodoStatus.UNDONE, title))

AUTO_INCREMENT なフィールドを持つレコード（今回はidがAUTO_INCREMENT）をinsertするときはデフォルト値として0をセットしておくと、INSERTのタイミングでよしなに採番されます。

Repository

 def addTodo(todo: Todo) = {
    database.run(Todos += todo)
  }

これで永続化できます。slick素晴らしい。

結果

Add TODOボタンを押すと f:id:msawady:20170910154958p:plain こんな感じのダイアログが出るので、Todoを入力 f:id:msawady:20170910155105p:plain ちゃんと採番されて追加されます f:id:msawady:20170910155151p:plain