From 6e9cbac211fa36483f3f9317b08b0508c832aca6 Mon Sep 17 00:00:00 2001
From: Gustavo Barbosa <programacao@sotu.casa>
Date: Wed, 30 Jul 2025 22:31:29 -0300
Subject: [PATCH] =?UTF-8?q?Tabela=20b=C3=A1sica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/App.vue                      | 57 +++++--------------
 src/frontend/src/components/TabelaDeJogos.vue | 17 ++++++
 src/frontend/src/main.ts                      |  6 +-
 3 files changed, 37 insertions(+), 43 deletions(-)
 create mode 100644 src/frontend/src/components/TabelaDeJogos.vue

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index d05208d..f3db426 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,47 +1,20 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import { ref, type Ref } from 'vue';
+import TabelaDeJogos from './components/TabelaDeJogos.vue';
+import type Jogo from './modelo/Jogo';
+import { Button } from 'primevue';
+
+const jogos: Ref<Jogo[]> = ref([]);
+
+async function atualizar() {
+  const response = await fetch('http://localhost:8080/jogos');
+  jogos.value = await response.json() as Jogo[];
+}
+
+atualizar();
+
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <TabelaDeJogos :jogos="jogos" />
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/src/frontend/src/components/TabelaDeJogos.vue b/src/frontend/src/components/TabelaDeJogos.vue
new file mode 100644
index 0000000..5a47d33
--- /dev/null
+++ b/src/frontend/src/components/TabelaDeJogos.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type Jogo from '@/modelo/Jogo';
+import { Column, DataTable } from 'primevue';
+
+defineProps<{
+  jogos: Jogo[]
+}>();
+</script>
+
+<template>
+  <DataTable :value="jogos" sort-mode="multiple">
+    <Column field="id" sortable header="ID" />
+    <Column field="nome" sortable header="Nome" />
+    <Column field="estado" sortable header="Estado" />
+  </DataTable>
+
+</template>
\ No newline at end of file
diff --git a/src/frontend/src/main.ts b/src/frontend/src/main.ts
index 0ac3a5f..59ac0fc 100644
--- a/src/frontend/src/main.ts
+++ b/src/frontend/src/main.ts
@@ -2,5 +2,9 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
 
-createApp(App).mount('#app')
+createApp(App)
+  .use(PrimeVue, { theme: { preset: Aura } })
+  .mount('#app');