Rotas diferentes com o mesmo arquivo .vue

Tema.vue

<script setup lang="ts">
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 { format } from "date-fns";
import { computed, onMounted, ref } from "vue";
import type { Header } from "vue3-easy-data-table";
import "vue3-easy-data-table/dist/style.css";

const store = useTemaStore();
onMounted(() => {
  store.listaEstudoTemaWithSumFilhos();
});

const getTemas = computed(() => {
  return store.temas;
});

const searchField = ref("nome");
const searchValue = ref("");

const headers: Header[] = [
  { text: "Sub-temas", value: "total", sortable: true },
  { text: "Tema", value: "nome", sortable: true },
  { text: "Criado em", value: "createdat", sortable: true },
  { text: "Atualizado em", value: "updatedat", sortable: true },
  { text: "Editado por", value: "nomepessoa", sortable: true },
  { text: "", value: "operation" },
];
const items = ref(getTemas);
const themeColor = ref("rgb(var(--v-theme-secondary))");
const page = ref({ title: "Temas de Estudo" });
const breadcrumbs = ref([
  {
    disabled: true,
    href: "#",
  },
]);
const visualizar = (id: number) => {
  router.push("/tema/" + id);
};
const subTemas = (id: number) => {
  router.push("/sub-tema/" + id);
};
</script>
<template>
  <v-row>
    <v-col cols="12" md="12">
      <BaseBreadcrumb
        :title="page.title"
        :breadcrumbs="breadcrumbs"
      ></BaseBreadcrumb>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="12">
      <UiParentCard title="Gerenciador dos Temas de Estudo">
        <v-row justify="space-between" class="align-center mb-3">
          <v-col cols="12" md="3">
            <v-text-field
              type="text"
              variant="outlined"
              placeholder="Pesquise pelo nome"
              v-model="searchValue"
              density="compact"
              hide-details
              prepend-inner-icon="mdi-magnify"
            />
          </v-col>
        </v-row>
        <EasyDataTable
          :headers="headers"
          :items="items"
          table-class-name="customize-table"
          :theme-color="themeColor"
          :search-field="searchField"
          :search-value="searchValue"
          :rows-per-page="5"
          buttons-pagination
        >
          <template #item-total="{ total }">
            <div class="player-wrapper">
              {{ total }}
            </div>
          </template>
          <template #item-nome="{ nome }">
            <div class="player-wrapper">
              {{ nome }}
            </div>
          </template>
          <template #item-createdat="{ createdat }">
            <div class="player-wrapper">
              {{ format(new Date(createdat), "dd/MM/yyyy HH:mm:ss") }}
            </div>
          </template>
          <template #item-updatedat="{ updatedat }">
            <div class="player-wrapper">
              {{ format(new Date(updatedat), "dd/MM/yyyy HH:mm:ss") }}
            </div>
          </template>
          <template #item-nomepessoa="{ nomepessoa }">
            <div class="player-wrapper">
              {{ nomepessoa }}
            </div>
          </template>
          <template #item-operation="item">
            <div class="operation-wrapper">
              <v-btn icon variant="text" @click="visualizar(item.id)">
                <v-tooltip activator="parent"> Visualizar </v-tooltip>
                <EyeIcon size="18" />
              </v-btn>
              <v-btn
                icon
                variant="text"
                v-if="item.total > 0"
                @click="subTemas(item.id)"
              >
                <v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
                <ApiAppIcon size="18" />
              </v-btn>
            </div>
          </template>
        </EasyDataTable>
      </UiParentCard>
    </v-col>
  </v-row>
</template>

Rotas

const MainRoutes = {
  path: "/main",
  meta: {
    requiresAuth: true,
  },
  redirect: "/main",
  component: () => import("@/layouts/full/FullLayout.vue"),
  children: [
    {
      path: "/",
      redirect: "/dashboards/analytical",
    },
    {
      name: "Por tema",
      path: "/analise-tema",
      component: () => import("@/views/apps/analise-tema/AnaliseTema.vue"),
    },
    {
      name: "An√°lise Tema de Estudo",
      path: "/analise-tema/:id",
      component: () => import("@/views/apps/analise-tema/AnaliseTemaPorId.vue"),
    },
    {
      name: "Temas",
      path: "/tema",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },
    {
      name: "Sub tema an√°lise Tema",
      path: "/sub-tema/:id",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },
  ],
};

export default MainRoutes;

Estou nesta rota

{
      name: "Temas",
      path: "/tema",
      component: () => import("@/views/apps/tema/Tema.vue"),
    },

Quando clico neste botão, muda a roda, mas o arquivo é o mesmo. Tema.vue

<v-btn
                icon
                variant="text"
                v-if="item.total > 0"
                @click="subTemas(item.id)"
              >
                <v-tooltip activator="parent"> Ver Sub-temas </v-tooltip>
                <ApiAppIcon size="18" />
              </v-btn>

Como recarregar a p√°gina com os novos dados ?

Não entendi… pq vc ta mudando a rota e mantendo o msm arquivo? Quais novos dados vc quer mostrar?

1 curtida

O que acontece

A consulta vem com as informa√ß√Ķes principal. E estas podem ter filhos. E os filhos podem ter filhos e por ai vai

Ent√£o eu preciso que seja o mesmo formul√°rio, mas com informa√ß√Ķes diferentes.

√Č melhor vc criar outro arquivo mant√©ndo o ‚Äúmesmo‚ÄĚ formul√°rio ent√£o. Pq do jeito q ta hj, ta misturando as responsabilidades.

Uma coisa é uma coisa, outra coisa é outra coisa.


Pode ter os arquivos, por exemplo:

Tema.vue
TemaDetalhe.vue
1 curtida

Pensei nisto.
Mas como disse, o filho pode ter filho e assim por diante. Meio que sem fim.

Bisavo, vo, pai, filho, neto, bisneto, e por diante.

O que muda s√£o s√≥ as informa√ß√Ķes que est√£o no banco de dados.

Então não precisaria de duas rotas, né? Só mudar a info da tela, se possível, mostra um print da tela só pra eu ter um entendimento melhor do que vc quer de vdd

1 curtida

A tela é bem simples. só tabela.
Ao clicar neste bot√£o, ele busca no backend as informa√ß√Ķes.

Tá, e aí? Tem que abrir outra tela igual a essa com os sub temas? Ou vai abrir um item nessa tabela?

1 curtida

A principio eu queria e prefiro abrir na tabela, mas também não consegui.

Mas também não consegui pela rota.

Essa tabela é de alguma lib? Ou vc fez na mão?

1 curtida

Esta

achei esse expandable row na documentação, ja tentou?

1 curtida

Sim j√° tinha achado ela. Acho que vou utilizar ela mesmo.