Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fiz diferente, fiz no momento do click no play..

Olá, fiz de uma maneira diferente e gostaria de compartilhar

acabei interpretetando de uma maneira diferente e coloquei no Componente Temporizador ao invez de colocar no Formulario..

passei como props o idProjeto para o componente Temporizador

      <div class="column">
        <Temporizador :idProjeto="idProjeto" @aoFinalizarTarefa="salvarTarefa" />
      </div>

e no componente Temporizador fiz uma condição se esse idProjeto fosse vazio chamava o NOTIFICAR

<template>
  <section class="is-flex is-align-items-center is-justify-content-space-between">
    <Cronometro :tempoEmSegundos="tempoEmSegundos"/>
    <button class="button" @click="iniciar" :disabled="cronometroRodando">
      <span class="icon">
        <i class="fas fa-play"></i>
      </span>
      <span>play</span>
    </button>
    <button class="button" @click="finalizar" :disabled="!cronometroRodando">
      <span class="icon">
        <i class="fas fa-stop"></i>
      </span>
      <span>stop</span>
    </button>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Cronometro from "./Cronometro.vue";
import { useStore } from "@/store";
import { NOTIFICAR } from "@/store/tipo-mutacoes";
import { TipoNotificacao } from "@/interfaces/INotificacoes";

export default defineComponent({
  name: "Temporizador",
  emits: ['aoFinalizarTarefa'],
  props:['idProjeto'],
  components: {
    Cronometro,
  },
  data () {
    return {
      tempoEmSegundos: 0,
      cronometroRodando: false,
      cronometro: 0 
    }
  },
  methods: {
    iniciar () : void {
      if(this.idProjeto === ''){
        this.store.commit(NOTIFICAR, {
          titulo: 'Atenção',
          texto: 'Por favor selecione uma tarefa para iniciar o contador',
          tipo: TipoNotificacao.ATENCAO
        })
      } else {
        this.cronometroRodando = true
        this.cronometro = setInterval(() => {
          this.tempoEmSegundos += 1
        }, 1000)
      }
    },
    finalizar () : void {
      this.$emit('aoFinalizarTarefa', this.tempoEmSegundos)
      this.tempoEmSegundos = 0
      this.cronometroRodando = false
      clearInterval(this.cronometro)
    }
  },
  setup(){
    const store = useStore()

    return { 
      store
    }
  }
});
</script>
<style scoped>
.button {
  margin-left: 8px;
}
</style>
1 resposta
solução!

Oi Sergio, tudo bem?

É muito bom ver que você está explorando diferentes formas de resolver o desafio :D. Isso é algo que realmente apreciamos e encorajamos na aprendizagem de programação.

A sua solução parece funcionar bem! Você optou por fazer a verificação no momento do clique no botão de iniciar o temporizador, enquanto a sugestão da aula era fazer a verificação no momento de finalizar a tarefa. Ambas as abordagens têm seus méritos.

No seu caso, você está prevenindo que o usuário inicie o temporizador sem um projeto selecionado, o que pode ser uma boa ideia para evitar que o usuário gaste tempo em uma tarefa que não será registrada.

Já a sugestão da aula, ao realizar a verificação no momento de finalizar a tarefa, permite que o usuário inicie o temporizador e só seja alertado do problema quando tentar finalizar a tarefa. Isso pode ser útil em casos onde o usuário pode querer iniciar o temporizador antes de selecionar o projeto, por exemplo.

A escolha entre uma abordagem ou outra depende muito do comportamento que você deseja incentivar no usuário. Ambas são válidas e você fez um ótimo trabalho implementando a sua solução!

Continue os bons estudos.

Um abraço.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software