Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida no Ex. 4 da Aula 8 - Tornando nosso cadastro ainda melhor!

Quando eu altero um grupo de uma imagem já cadastrada meu servidor apresenta a seguinte mensagem:

{ message: 'Can\'t insert key iViGw3XfmJLunHfd, it violates the unique constraint',
  key: 'iViGw3XfmJLunHfd',
  errorType: 'uniqueViolated' }

Lembro que no começo do exercício de Editar e Remover tinhamos esse mesmo problema e resolvemos com o método $http.put. Esse método também resolve a questão dos grupos, mesmo que estejam em controllers diferentes? Eu vejo que altera e salva o grupo, mas sempre apresenta essa mensagem. Pensei talvez que eu tivesse que tratar isso no controller GruposController, mas também penso que não faz sentido, já que no FotoController ele recebe o objeto por completo.

Podem me ajudar? Obrigada :)

Códigos:

// foto-controller

angular.module('alurapic')
.controller('FotoController', function($scope, $http, $routeParams) {
    $scope.foto = {};
    $scope.mensagem = '';
    //exibe os dados da foto a ser editada
    if($routeParams.fotoId){
        $http.get('/v1/fotos/'+$routeParams.fotoId)
        .success(function(foto){
            $scope.foto = foto;


        })
        .error(function(erro){
            console.log(erro);
            $scope.mensagem='A foto'+ foto.titulo + ' não pode ser editada.';
        });
    }

    $scope.submeter = function(){
        //edição
        if($scope.formulario.$valid){
            if($routeParams.fotoId){
                var nomeFoto = $scope.foto.titulo;
                $http.put('/v1/fotos/'+$routeParams.fotoId, $scope.foto)
                .success(function(foto){

                    $scope.mensagem='A foto '+ nomeFoto + ' foi editada  com sucesso!';

                })
                .error(function(erro){
                    console.log(erro);
                    $scope.mensagem='A foto'+ foto.titulo + ' não pode ser editada.';
                });
            }
            //inclusão
            $http.post('/v1/fotos', $scope.foto)
            .success(function(){
                $scope.foto = {},
                $scope.mensagem='Foto adicionada com sucesso!';
            })
            .error(function(erro){
                $console.log(erro);
            })
        }
    };

});

//grupos-controller

angular.module('alurapic')
.controller('GruposController', function($scope, $http){
    $scope.grupos = [];

    $http.get('v1/grupos')
    .success(function(grupos){
        $scope.grupos = grupos;

    })
    .error(function(erro){
        console.log(erro);
    });



});

Foto.html

<div class="page-header text-center">
    <h1>{{foto.titulo}}</h1>
</div>
<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<form novalidate name="formulario" class="row" ng-submit="submeter()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Título</label>
            <input name="titulo" class="form-control" ng-model="foto.titulo" ng-maxlength="20" required>  
            <span ng-show="formulario.$submitted && formulario.titulo.$error.required" class="form-control alert-danger">Título obrigatório</span> 


            <span ng-show="formulario.$submitted && formulario.titulo.$error.maxlength" class="form-control alert-danger">O tamanho máximo para o título é de 20 caracteres.</span>  
        </div>
        <div class="form-group">
            <label>URL</label>
            <input name="url" class="form-control" ng-model="foto.url" required>
            <span ng-show="formulario.$submitted && formulario.url.$error.required" class="form-control alert-danger">Url obrigatória</span>
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="descricao" class="form-control" ng-model="foto.descricao">
            </textarea>
        </div>


        <!-- novidade aqui! -->

        <div class="form-group">
            <label>Grupo</label>
            <select name="grupo" class="form-control" required 
            ng-controller="GruposController" 
            ng-model="foto.grupo"
            ng-options="grupo._id as grupo.nome for grupo in grupos" >
                <option value="">Escolha um grupo</option>
            </select>
            <span ng-show="formulario.$submitted && formulario.grupo.$error.required" class="form-control alert-danger">
                Grupo obrigatório
            </span>
        </div>


        <button type="submit" class="btn btn-primary" ng-disabled="formulario.$invalid">
            Salvar
        </button>
         <a href="/" class="btn btn-primary">Voltar</a>
        <hr>
    </div>
    <div class="col-md-6">
        <minha-foto url="{{foto.url}}"  titulo="{{foto.titulo}}" ></minha-foto>
    </div>
</form>
4 respostas
solução!

Josélia,

Tudo bem?

Não analisei todo o código mas, a princípio, me parece que falta apenas um "else" na sua lógica. Veja:

if($routeParams.fotoId){ var nomeFoto = $scope.foto.titulo; $http.put('/v1/fotos/'+$routeParams.fotoId, $scope.foto) .success(function(foto){

$scope.mensagem='A foto '+ nomeFoto + ' foi editada com sucesso!';

}) .error(function(erro){ console.log(erro); $scope.mensagem='A foto'+ foto.titulo + ' não pode ser editada.'; }); }

// falta um else aqui // por isso sempre passa pela inclusão, // gerando a mensagem de violação de chave única

//inclusão $http.post('/v1/fotos', $scope.foto) .success(function(){ $scope.foto = {}, $scope.mensagem='Foto adicionada com sucesso!'; }) .error(function(erro){ $console.log(erro); })

Perfeito Gabriel. Realmente falta o else. Josélia, se quiser reforçar essa parte de uma estudada novamente em

https://www.alura.com.br/course/angularjs-mvc/section/7/explanation

Lá explico passo a passo.

Realize os ajustes e passe seu Feedback para nós.

Era isso mesmo, pessoal. Na minha funçao chamada pelo ng-submit eu não tratava a condiçao que a tela estava, se era uma alteraçao ou uma inclusão.

Obrigada!

Excelente, agora é continuar com os estudos!!