From 4b4451f098492ef3982a6aeb392ec0fb4fa73f8a Mon Sep 17 00:00:00 2001
From: Gustavo Barbosa <programacao@sotu.casa>
Date: Wed, 13 Aug 2025 13:11:49 -0300
Subject: [PATCH] =?UTF-8?q?Componente=20de=20pre=C3=A7os?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComponenteDePreco.vue      | 35 +++++++++++++++++++
 src/frontend/src/components/TabelaDeJogos.vue | 12 +++++--
 src/frontend/src/modelo/Jogo.ts               |  4 ++-
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/components/ComponenteDePreco.vue

diff --git a/src/frontend/src/components/ComponenteDePreco.vue b/src/frontend/src/components/ComponenteDePreco.vue
new file mode 100644
index 0000000..909372c
--- /dev/null
+++ b/src/frontend/src/components/ComponenteDePreco.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Preco as Preco } from '@/modelo/Jogo';
+import { Tag } from 'primevue';
+
+defineProps<{
+  preco: Preco
+}>();
+
+function severidade(preco: Preco): string | undefined {
+  switch (preco) {
+    case 'DESCONHECIDO': return 'secondary';
+    case 'DE_GRACA': return 'success';
+    case 'PRESENTE': return 'info';
+    default: return undefined
+  }
+}
+
+function rótulo(preco: Preco): Preco | string {
+  if (preco == "DE_GRACA") {
+    return 'DE GRAÇA';
+  } else {
+    return preco;
+  }
+}
+
+</script>
+
+<template>
+  <span v-if="typeof preco === 'number'"> R$ {{
+    preco.toLocaleString('pt-BR', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }) }}</span>
+  <Tag v-else :value="rótulo(preco)" :severity="severidade(preco)" />
+</template>
\ No newline at end of file
diff --git a/src/frontend/src/components/TabelaDeJogos.vue b/src/frontend/src/components/TabelaDeJogos.vue
index cca4ea0..9252948 100644
--- a/src/frontend/src/components/TabelaDeJogos.vue
+++ b/src/frontend/src/components/TabelaDeJogos.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Jogo, { estados } from '@/modelo/Jogo';
+import Jogo, { estados, precos } from '@/modelo/Jogo';
 import { Column, DataTable, InputText, Select, type DataTableFilterMeta } from 'primevue';
 import { ref } from 'vue';
 import ComponenteDeEstado from './ComponenteDeEstado.vue';
+import ComponenteDePreco from './ComponenteDePreco.vue';
 
 defineProps<{
   jogos: Jogo[]
@@ -55,7 +56,14 @@ function lojas(jogos: Jogo[]): string[] {
 
     <Column field="preco" sortable header="Preço">
       <template #filter="{ filterModel, filterCallback }">
-        <InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
+        <Select v-model="filterModel.value" @change="filterCallback()" :options="precos" :show-clear="true">
+          <template #option="slotProps">
+            <ComponenteDePreco :preco="slotProps.option" />
+          </template>
+        </Select>
+      </template>
+      <template #body="{ data }">
+        <ComponenteDePreco :preco="data.preco" />
       </template>
     </Column>
 
diff --git a/src/frontend/src/modelo/Jogo.ts b/src/frontend/src/modelo/Jogo.ts
index 1593a17..9033d9f 100644
--- a/src/frontend/src/modelo/Jogo.ts
+++ b/src/frontend/src/modelo/Jogo.ts
@@ -13,4 +13,6 @@ export type Preco = 'DE_GRACA' | 'DESCONHECIDO' | 'PRESENTE' | number;
 
 export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'ETERNO';
 
-export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];
\ No newline at end of file
+export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];
+
+export const precos = ['DE_GRACA', 'DESCONHECIDO', 'PRESENTE'];
\ No newline at end of file