Primevue - resolvido

Front-end
#1

Estou tentando utilizar esta biblioteca

no main.ts

Inclui

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.use(PrimeVue, { ripple: true });
app.use(ToastService);
app.component("Toast", Toast);

TemaCadastrar.vue

<script setup lang="ts">
import { ref } from "vue";

import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
import UiParentCard from "@/components/shared/UiParentCard.vue";
import { router } from "@/router";
import { useTemaStore } from "@/stores/apps/tema";

import { useToast } from "primevue/usetoast";
const toast = useToast();

const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
  {
    disabled: true,
    href: "#",
  },
]);

const store = useTemaStore();

const valid = ref(true);
const editedIndex = ref(-1);
let editedItem = ref({
  nome: "",
  indAtivo: false,
});
const desserts = ref({});
const limpar = () => {
  editedItem.value = {
    nome: "",
    indAtivo: false,
  };
};
const save = async () => {
  if (editedIndex.value > -1) {
    Object.assign(editedIndex.value, editedItem.value);
  } else {
    desserts.value = editedItem.value;
  }
  await store
    .salvar({
      nome: editedItem.value.nome,
    })
    .then(() => {
      toast.add({
        severity: "success",
        summary: "OK",
        detail: "Tema cadastrado com sucesso !",
        life: 30000,
      });
      router.push("/tema");
    });
};
</script>
<template>
  <v-row>
    <v-col cols="1" md="1">
      <v-btn icon variant="text" @click="router.back">
        <v-tooltip activator="parent"> Voltar </v-tooltip>
        <ArrowBackUpIcon size="18" />
      </v-btn>
    </v-col>
    <v-col cols="11" md="11">
      <BaseBreadcrumb
        :title="page.title"
        :breadcrumbs="breadcrumbs"
      ></BaseBreadcrumb>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="12">
      <UiParentCard title="Cadastrar tema de estudo">
        <v-card-text>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-col cols="12" sm="12">
              <v-text-field
                variant="outlined"
                hide-details
                v-model="editedItem.nome"
                label="Nome"
              ></v-text-field>
            </v-col>
          </v-form>
        </v-card-text>
        <v-card-actions class="pa-4">
          <v-spacer></v-spacer>
          <v-btn color="error" @click="limpar" variant="flat">
            <v-icon>mdi-drag</v-icon>
            <v-tooltip activator="parent"> Limpar </v-tooltip>
          </v-btn>
          <v-btn
            color="primary"
            variant="flat"
            @click="save"
            :disabled="editedItem.nome === ''"
          >
            <v-tooltip activator="parent"> Salvar </v-tooltip>
            <v-icon>mdi-content-save</v-icon>
          </v-btn>
        </v-card-actions>
      </UiParentCard>
    </v-col>
  </v-row>
</template>

Não dá erro mas quando clico em salvar, ele não mostra a mensagem em toast

O que falta ?

#2

Como utilizar ?

#3

vc pode fazer assim:

main.ts

import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
...
app.use(ToastService);
app.component("Toast", Toast)

.vue

<template>
    <div class="card flex justify-content-center">
        <Toast />
        <Button label="Show" @click="show()" />
    </div>
</template>

<script setup>
import { useToast } from "primevue/usetoast";
const toast = useToast();

const show = () => {
    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
};
</script>

No seu caso, faltou apenas o <Toast /> dentro do seu .vue.

1 curtida
#4

Coloquei <Toast /> e não apareceu.
O problema é o router.push(“/tema”); Se tiro ele a mensagem fica.

Coloquei assim no salvar

  await store
    .salvar({
      nome: editedItem.value.nome,
    })
    .then(() => {
      show();
      setTimeout(() => {
        router.push("/tema");
      }, 3000);
    });

Mas mesmo assim não é o correto. A mensagem some quando sai da página.

#5

Quando vc usa o await e cia, não precisa mais do then, então refatorando seu código, ele deve ficar assim:

 const data = {
   nome: editedItem.value.nome
 }

 await store.salvar(data);
 show();
 router.push("/tema");

Entendi… Coloca o <Toast /> dentro do seu App.vue então. Aí qdo mudar a rota ele não vai alterar o comportamento.

Do jeito q tá, ele destrói o Toast qnd muda de page mesmo…

1 curtida
#6

Funcionou.

Mas se o backend retornar erro, assim tenho que chamar

toast.add({
    severity: "error",
    summary: "Error",
    detail: mensagem do servidor,
    life: 3000,
  });
#7

pode fazer assim:

const data = {
   nome: editedItem.value.nome
 }

try {
  await store.salvar(data);
  showToast({
     type: 'success', 
     summary: 'OK', 
     message: 'Tema cadastrado com sucesso', 
  });
  router.push("/tema");
} catch (e) {
  showToast({
     type: 'error', 
     summary: 'Error', 
     message: e.message, 
  });
}

const showToast = ({type, summary, message, life = 3000}: {type: string, summary: string, message: string, life: number}) => {
   toast.add({ severity: type, summary, detail: message, life });
};
1 curtida
#8

Obrigado @rodriguesabner

1 curtida