Não vou mais usar filtro global

src/frontend/src/components/ComponenteDeEstado.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Estado } from '@/modelo/Jogo';
+import { Tag } from 'primevue';
+
+defineProps<{
+  estado: Estado
+}>();
+
+function severidade(estado: Estado): string | undefined {
+  switch (estado) {
+    case 'NOVO': return 'success';
+    case 'JOGUEI': return 'warn';
+    case 'SATISFEITO': return 'secondary';
+    case 'ETERNO': return 'info';
+  }
+}
+</script>
+
+<template>
+  <Tag :value="estado" :severity="severidade(estado)"> </Tag>
+</template>

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>

src/frontend/src/components/TabelaDeJogos.vue

@@ -1,37 +1,69 @@
 <script setup lang="ts">
-import type Jogo from '@/modelo/Jogo';
+import Jogo, { estados, precos } from '@/modelo/Jogo';
-import { Column, DataTable, InputText, type DataTableFilterMeta } from 'primevue';
+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[]
 }>();
 
 const filtros = ref({
-  global: { value: null, matchMode: 'contains' },
   nome: { value: null, matchMode: 'contains' },
-  loja: { value: null, matchMode: 'in' },
+  loja: { value: null, matchMode: 'equals' },
-  estado: { value: null, matchMode: 'contains'}
+  preco: { value: null, matchMode: 'contains' },
-} as DataTableFilterMeta );
+  estado: { value: null, matchMode: 'equals' }
+} as DataTableFilterMeta);
+
+function lojas(jogos: Jogo[]): string[] {
+  return jogos
+    .map(jogo => jogo.loja)
+    .filter((loja, indice, lista) => lista.indexOf(loja) === indice);
+}
 </script>
 
 <template>
-  <DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id"
+  <DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id" filter-display="row"
-    filter-display="row" :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
+    :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
-    
+
     <Column field="nome" sortable header="Nome">
       <template #filter="{ filterModel, filterCallback }">
         <InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
       </template>
     </Column>
-    
+
-    <Column field="estado" sortable header="Estado">
+    <Column field="estado" sortable header="Estado" :show-filter-menu="false">
+      <template #filter="{ filterModel, filterCallback }">
+        <Select v-model="filterModel.value" @change="filterCallback()" :options="estados" :show-clear="true">
+          <template #option="slotProps">
+            <ComponenteDeEstado :estado="slotProps.option" />
+          </template>
+        </Select>
+      </template>
+      <template #body="{ data }">
+        <ComponenteDeEstado :estado="data.estado" />
+      </template>
     </Column>
-    
+
     <Column field="loja" sortable header="Loja">
+      <template #filter="{ filterModel, filterCallback }">
+        <Select v-model="filterModel.value" @change="filterCallback()" :options="lojas(jogos)"
+          :show-clear="true"></Select>
+      </template>
     </Column>
-    
+
     <Column field="preco" sortable header="Preço">
+      <template #filter="{ filterModel, 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>
 
   </DataTable>

src/frontend/src/modelo/Jogo.ts

@@ -9,6 +9,10 @@ export default class Jogo {
   ) { }
 }
 
-export type Preco = 'VALOR' | 'DE_GRACA' | 'DESCONHECIDO' | 'PRESENTE' | number;
+export type Preco = 'DE_GRACA' | 'DESCONHECIDO' | 'PRESENTE' | number;
 
-export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'PALHA' | 'ETERNO';
+export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'ETERNO';
+
+export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];
+
+export const precos = ['DE_GRACA', 'DESCONHECIDO', 'PRESENTE'];

src/main/java/casa/sotu/organizajogos/api/json/SerializadorDePreco.java

@@ -22,7 +22,7 @@ public class SerializadorDePreco extends StdSerializer<Preco> {
   @Override
   public void serialize(Preco preco, JsonGenerator generator, SerializerProvider provider) throws IOException {
     if (preco.tipo() == TipoDePreco.VALOR) {
-      generator.writeString(preco.valor().toString());
+      generator.writeNumber(preco.valor());
     } else {
       generator.writeString(preco.tipo().name());
     }