cadastoDepartamento.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="'layout/LayoutPadrao'">

<head>
<title>Cadastro de Departamento</title>
</head>

<section layout:fragment="conteudo">


    <br> </br>

    <form class="form-horizontal" method="POST"
        th:action="@{/departamentos}" th:object="${departamento}">
        <div layout:include="MensagemGeral"></div>
        <div layout:include="MensagemErro"></div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="clearfix">
                    <h1 class="panel-title aw-titulo-panel">Novo departamento</h1>
                    <a class="btn btn-link aw-link-panel"
                        th:href="@{/departamentos/pesquisar}">Voltar para pesquisa</a>
                </div>
            </div>

            <div class="panel-body">
                <input type="hidden" th:field="*{id}" />

                <div class="form-group"
                    th:classappend="${#fields.hasErrors('nome')} ? has-error">
                    <label for="nome" class="col-sm-2 control-label">Nome</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="nome"
                            th:field="*{nome}" />
                    </div>
                </div>


                <div class="form-group"
                    th:classappend="${#fields.hasErrors('localizacao')} ? has-error">
                    <label for="nome" class="col-sm-2 control-label">Localização</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="localizacao"
                            th:field="*{localizacao}" />
                    </div>
                </div>


                <div class="form-group">
                    <label for="valor" class="col-sm-2 control-label">Observação</label>
                    <div class="col-sm-4">

                        <textarea type="text" id="valor" class="form-control"
                            th:field="*{observacao}" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="responsavel" class="col-sm-2 control-label">Responsavel</label>

                    <div class="col-sm-4">

                        <div class="input-group">
                            <input name="usuario" id="usuario" type="text" class="form-control" autofocus="autofocus"> </input> <span
                                class="input-group-btn"> <a data-toggle="modal"
                                data-target="#modalTableDepartamento" class="btn btn-default">
                                    <i class="glyphicon glyphicon-search"></i>
                            </a>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal -->


        <div class="modal fade" id="modalTableDepartamento">
<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 class="modal-title">Lista de Usuarios</h3>



        </div>
        <div class="modal-body">
          <h5 class="text-center">Usuarios</h5>
          <table class="table table-striped" id="tblGrid">
            <thead id="tblHead">



                    <tr>
                        <td align="left">#ID</td>
                        <td>Nome</td>
                            <th class="col-md-1"></th>

                    </tr>
                    <tr th:each="usuario :${usuarios}">
                        <td align="left" th:text="${usuario.id}"></td>
                        <td align="left" th:text="${usuario.nome}"></td>
                        <td class="text-center"><a class="btn btn-link btn-xs"
                                title="Editar"  data-placement="top" > <span
                                    class="glyphicon glyphicon-ok" onclick="DepartamentoController.setUsario(usuario)" ></span>
                            </a> </td>

                    </tr>
             </thead>
             </table>
          <div class="form-group">
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save Changes</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
        </form>


    <script>
  $(document).ready(function() {

    $('#usuario').autocomplete({
        serviceUrl: '${pageContext.request.contextPath}/get_usuario_list',
        paramName: "name",
        delimiter: ",",
       transformResult: function(response) {

        return {
          //must convert json to javascript object before process
          suggestions: $.map($.parseJSON(response), function(item) {

              return { value: item.name, data: item.id };
           })

         };

            }

     });

  });
  </script>


        <!-- Modal


                 <div layout:include="/departamento/DialogoTabelaUsuarios"></div>
         -->
            <script th:src="@{/js/jquery-ui.min.js}"></script>

</section>
</html>