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

Aviso de "Agendamento existente!" sem abandonar a tela de cadastro

Prezado Instrutor, acabei de concluir o módulo 1 do curso de IONIC 3 e, ao fazê-lo, acompanhei a implementação de uma rotina que impedir que um dado fosse sobrescrito quando, no nosso exemplo, um agendamento em duplicidade era inserido. No entanto, enquanto usuário, acho que seria melhor que a mensagem aparecesse e o app continuasse na tela de agendamento, para que a data fosse alterada e, então, o agendamento fosse inserido sem duplicidade. Porém, no curso, a forma de validação de dado repetido fez com que o app retornasse à tela de seleção de carros.

Eu tentei de algumas maneiras fazer o app funcionar desta forma, ou seja, apresentando a mensagem e continuando na tela de cadastro de agendamento, mas todas as minhas tentativas não lograram êxito. Peço, destarte, que me tire das trevas e me leve para a luz.

Grato.

7 respostas

Boa tarde, Paulo! Como vai?

Uma solução rápida que eu pensei aqui seria fazer o seguinte:

1) Criar uma variável buttonOkHandler que vai representar o comportamento do seu botão de "ok" do alerta. E mais duas variáveis, cada uma delas representando um caso possível! Ou seja, teríamos uma variável com o comportamento do botão non caso de sucesso na inclusão do agendamento e outra para o comportamento em caso de erro.

let buttonOkHandler;
let successHandler = () => this.navCtrl.setRoot(HomePage);
let errorHandler = () => { return; };

this._alerta = this._alertCtrl.create({
     title: 'Aviso',
     buttons: [
          { 
               text: 'ok',
               handler: buttonOkHandler
          }
     ]
});

2) No subscribe() da operação de cadastro, além de definir a mensagem que irá aparecer no alerta, também teríamos que definir o comportamento que o botão de "ok" terá, da seguinte forma:

.subscribe(
     () => {
          mensagem = 'Agendamento realizado!';
          buttonOkHandler = successHandler;
     },
     (err: Error) => {
          mensagem = err.message;
          buttonOkHandler = errorHandler;
     }
);

Pegou a ideia? Qualquer coisa é só falar!

E aí, gostou da parte 1 do curso? O que achou? Espero que tenha curtido e aproveitado bastante! Aliás, indico fortemente também a parte 2 do curso que tem mtas outras coisas bacanas!

Grande abraço e bons estudos, meu aluno!

Oi Gabriel! Obrigado pela resposta tão rápida! Esse caminho deve funcionar, até porque é bem diferente dos outros que eu tentei (hehe). O problema é que existe, quase sempre, mais de uma forma de fazermos a mesma coisa, então, confunde um pouco. Na minha primeira tentativa, eu tentei verificar no cadastro.ts se a variável mensagem estava com o conteúdo de erro de duplicidade, mas não deu certo. Na segunda tentativa, eu tentei fazer o get() no cadastro.ts e verificar se o dado existia ANTES de chamar o salva() do agendamento-dao, mas não houve santo que fizesse o método get() funcionar, apesar de eu ter declarado storage e etc...

Enfim, quase funcionou... agora, o app continua na tela mesmo quando o agendamento dá certo... o que pode ter dado errado?

Um abraço!

Opa, meu aluno! Eu não sei se entendi corretamente. O que vc quer é fazer funcionar o que vc tentou em vez de colocar em prática o que eu sugeri? Se for isso, eu preciso do seu código e explicação do que vc tentou fazer nesse código em questão para ver se tem como fazê-lo funcionar corretamente.

Não. Desculpe, me expressei mal. Eu coloquei o código que vc me mandou e, ainda assim, não funcionou.

Como eu disse, agora o aplicativo não volta mais para a tela de escolha. Mesmo que o agendamento fique OK, a tela continua a de cadastro. Eu achei que ia funcionar, pois fazia todo o sentido, mas não funcionou. Com o código que vc me mandou, o app ficou na tela de cadastro tanto no caso de haver duplicidade quanto no caso de não haver duplicidade e o cadastro ocorrer normalmente.

Inclusive, para testar, eu coloquei os dois handlers iguais, ou seja, com o setRoot, e mesmo assim a tela continuou sem retornar para o root...

solução!

Perdoe-me, Paulo! Foi erro meu, como essa solução veio de cara na minha cabeça, eu acabei não percebendo que iria acarretar num problema. Da forma que te falei, quando a gente cria o alerta

this._alerta = this._alertCtrl.create({
     title: 'Aviso',
     buttons: [
          { 
               text: 'ok',
               handler: buttonOkHandler
          }
     ]
});

a variável buttonOkHandler está indefinida, por isso que ao submeter o formulário nada acontece. Para solucionar isso, devemos passar esse trecho de criação do alerta para dentro do bloco finally(), dessa maneira:

.finally(
     () => {
          this._alerta = this._alertCtrl.create({
               title: 'Aviso',
               subTitle: mensagem,
               buttons: [
                    { 
                         text: 'ok',
                         handler: buttonOkHandler
                    }
               ]
          });
          this._alerta.present();
     }
)

Além disso, o errorHandler nem precisa ser criado, uma vez que se der erro de duplicidade não é feito nada. Vc pode ver um exemplo prático aqui!

Para constatar que o comportamento que vc deseja está sendo feito, basta ir na aba "contacts" e marcar o checkbox indicando se é um contato duplicado ou não. Se for duplicado a aplicação irá fazer o alerta e permanecer no formulário. Caso não vc não marque a opção que indica duplicidade, ao submeter o formulário o alerta irá exibir a mensagem de sucesso e haverá uma navegação para a página inicial.

Grande abraço e bons estudos, meu aluno!

Maravilha, Gabriel. Já havia funcionado no código da app e eu aprimorei fazendo com que quando o erro fosse "agendamento duplicado", ele ficasse na tela e, quando fosse "erro do web service" ele voltasse para a primeira tela (afinal o agendamento foi feito, só não foi enviado).

Gostei também da ferramenta StackBlitz, que eu não conhecia. Ela só rodou no Chrome, no Safari deu ruim...

Enfim, vou fazer agora o módulo 2, obrigado pelas informações.

Um abraço!

Mto bem, Paulo!

O Stackblitz é uma mão na roda, principalmente por ser baseado no Monaco Editor que é a base do VS Code e por te dar um ambiente todo preparado para programar em Angular, Ionic, React e outros.

Espero que vc curta a parte 2 do curso! E se surgir qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!