10.5 Aplicação Web com VRaptor 4 – Voltando ao Controller: Criando Contatos

Vamos criar contatos agora, essa parte é legal, um pouco maior, mas bem legal. Vamos nessa então.

Mas antes de começarmos, vamos aos recadinhos e patrocinadores. Já estamos trabalhando no nosso projeto, caso tenha caído neste tutorial acidentalmente, pode ver a lista dos episódios anteriores na introdução que fiz para estes posts. E lembre-se, você pode e deve acompanhar os códigos pelo meu github, segue o link ai em baixo:

https://github.com/pedro-hos/aprendendo-vraptor

Vamos nessa então, abra o arquivo main.js, vamos edita-lo outra vez. Dentro dele acrescente os seguintes comandos

$scope.contato = new contatoService();
$scope.contatoTipos = contatoService.tipos();
$scope.telefoneTipos = telefoneService.tipos();
$scope.contato.telefones = [];

$scope.salvar = function () {
    $scope.contato.id > 0 ? atualizar() : novo();
};

function novo() {
    $scope.contato.$save().then(function () {
        $scope.contato = new contatoService();
        buscarTodos();
    }).catch( function (erro) {
        console.log(erro);
    });
};

function atualizar() { //não implementada ainda };

A primeira coisa que fazemos é criar $scope.contato = new contatoService(); passando para a view no $scope um novo contato service. Vamos usar ele no html, você irá entende em breve. Depois passamos os tipos de telefone e contato para a view usando o $scope também. E por fim criamos e passamos uma lista de telefones, isso porque na view iremos deixar o usuário passar até 2 telefones, então inseriremos nessa lista. Óbvio que o certo seria deixar o contato colocar quantos telefones ele queira, mas vamos facilitar as coisas.

Em seguida criamos $scope.salvar, esse será o método que chamaremos no ng-submit no formulário. Esse método possuí um if ternário, que verifica se o $scope.contato.id é > (maior que 0 (zero), se for maior que zero, queremos editar o contato, se não vamos criar um novo, porque o usuário não existe. Logo, temos que criar essas duas funções atualizar() e novo().

O atualizar() vamos implementar depois, no próximo post. Já o novo() chamamos a função save do service, usamos de $scope.usuario, que é uma instância de contatoService, porque penduramos os dados do contato nele na view, logo, vamos fazer um post no servidor passando esses dados. Temos o .then que em caso de sucesso, ou seja, uma resposta 201 do servidor, vamos limpar os campos do formulário e atualizar a lista e em caso de erro, vamos imprimir o erro no console.

Agora, let’s go para o main.html, vamos editá-lo e inserir o trecho de código a seguir antes da <div> que inserimos a listagem dos contatos, logo ficará assim:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Novo Contato</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal" role="form" name="mainForm" ng-submit="salvar()">
            <div class="form-group">
                <label for="_nome" class="col-sm-2 control-label">Nome</label>

                <div class="col-sm-5">
                    <input id="_nome" type="text" class="form-control" placeholder="Nome" ng-model="contato.nome"
                           ng-required="true">
                </div>
            </div>

            <div class="form-group">
                <label for="_email" class="col-sm-2 control-label">E-mail</label>

                <div class="col-sm-5">
                    <input id="_email" type="email" class="form-control" placeholder="E-mail" ng-model="contato.email"
                           ng-required="true">
                </div>
            </div>

            <div class="form-group">
                <label for="_tipoContato" class="col-sm-2 control-label">Tipo Contato</label>

                <div class="col-sm-5">
                    <select id="_tipoContato" class="form-control" ng-model="contato.tipoContato">
                        <option value=""> -- Escolha um Tipo --</option>
                        <option ng-repeat="tipo in contatoTipos" value="{{tipo}}"> {{tipo}}</option>
                    </select>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label for="_ddd" class="col-sm-2 control-label">Telefone 01</label>

                <div class="col-sm-2">
                    <input id="_ddd" type="text" class="form-control" placeholder="DDD"
                           ng-model="contato.telefones[0].ddd">
                </div>
                <div class="col-sm-3">
                    <input id="_telefone" type="text" class="form-control" placeholder="Telefone"
                           ng-model="contato.telefones[0].telefone">
                </div>
            </div>
            <div class="form-group">
                <label for="_tipoTelefone" class="col-sm-2 control-label">Tipo Telefone</label>

                <div class="col-sm-5">
                    <select id="_tipoContato" class="form-control" ng-model="contato.telefones[0].tipoTelefone">
                        <option value=""> -- Escolha um Tipo --</option>
                        <option ng-repeat="tipo in telefoneTipos" value="{{tipo}}"> {{tipo}}</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="_ddd" class="col-sm-2 control-label">Telefone 02</label>

                <div class="col-sm-2">
                    <input id="_ddd" type="text" class="form-control" placeholder="DDD"
                           ng-model="contato.telefones[1].ddd">
                </div>
                <div class="col-sm-3">
                    <input id="_telefone" type="text" class="form-control" placeholder="Telefone"
                           ng-model="contato.telefones[1].telefone">
                </div>
            </div>
            <div class="form-group">
                <label for="_tipoTelefone" class="col-sm-2 control-label">Tipo Telefone</label>

                <div class="col-sm-5">
                    <select id="_tipoContato" class="form-control" ng-model="contato.telefones[1].tipoTelefone">
                        <option value=""> -- Escolha um Tipo --</option>
                        <option ng-repeat="tipo in telefoneTipos" value="{{tipo}}"> {{tipo}}</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success" ng-disabled="mainForm.$invalid">
                        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                        Salvar
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

<!-- essa parte vc já tem

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Contatos</h3>
    </div>

outras partes omitidas
-->

Vamos lá. A primeira coisa que temos é ng-submit=”salvar()”, dentro da tag do formulário, esse salvar é o mesmo do método que temos no controller, lembram dele?

Outra coisa que temos que observar são vários ng-model=”” nos inputs do formulário, nos combo etc. Esse contato.nome, contato.email, etc, é o mesmo que mandamos pelo $scope no controller. Um detalhe legal também é observar como passamos os telefones no ng-model, contato.telefones[0], com isso dizemos que o primeiro elemento do array que criamos no controller deve ser aquele objeto, que ele deve ter os atributos. telefone, ddd, tipo etc (confuso?) Fizemos o mesmo inserindo mais um telefone usando [1].

Usamos o ng-required=”true” para os campos obrigatórios. E passamos os tipo de contato e telefone pelo $scope no controller e usamos novamente o ng-repeat. Nos combo-box  passamos o ng-model no select assim quando formos edita ele passará automagicamente o combo selecionado.

No botão salvar, usamos o ng-disabled=”mainForm.$invalid” que faz com que o botão só seja habilitado se o o formulário estiver com tudo preenchido, com email preenchido válido etc. Ou seja, ele apenas irá habilitar o botão, se, e somente se todos os campos estiverem válidos. O nome mainForm, é o mesmo que passamos no name do formulário.

<form class="form-horizontal" role="form" name="mainForm" ng-submit="salvar()">
<!-- omitido -->
</form>

Com  tudo rodando, vamos testar o cadastro, sua tela deve ser parecida com isso:

tela_completaPor hora era isso, agora temos que só deletar e editar o usuário. Será mais simples. Então se liga, qualquer dúvida posta ai nos comentários! Fui \o

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s