From 39d8d9de75585d4d790173b7b0dc6f6a15b24cd6 Mon Sep 17 00:00:00 2001
From: Gustavo Barbosa <programacao@sotu.casa>
Date: Wed, 13 Aug 2025 12:18:29 -0300
Subject: [PATCH] Filtros e tag de estado

---
 .../src/components/ComponenteDeEstado.vue     | 21 ++++++++
 src/frontend/src/components/TabelaDeJogos.vue | 49 ++++++++++++++-----
 src/frontend/src/modelo/Jogo.ts               |  4 +-
 3 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/src/components/ComponenteDeEstado.vue

diff --git a/src/frontend/src/components/ComponenteDeEstado.vue b/src/frontend/src/components/ComponenteDeEstado.vue
new file mode 100644
index 0000000..d5254c1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/frontend/src/components/TabelaDeJogos.vue b/src/frontend/src/components/TabelaDeJogos.vue
index 967905a..cca4ea0 100644
--- a/src/frontend/src/components/TabelaDeJogos.vue
+++ b/src/frontend/src/components/TabelaDeJogos.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type Jogo from '@/modelo/Jogo';
-import { Column, DataTable, InputText, type DataTableFilterMeta } from 'primevue';
+import Jogo, { estados } from '@/modelo/Jogo';
+import { Column, DataTable, InputText, Select, type DataTableFilterMeta } from 'primevue';
 import { ref } from 'vue';
+import ComponenteDeEstado from './ComponenteDeEstado.vue';
 
 defineProps<{
   jogos: Jogo[]
@@ -10,28 +11,52 @@ defineProps<{
 const filtros = ref({
   global: { value: null, matchMode: 'contains' },
   nome: { value: null, matchMode: 'contains' },
-  loja: { value: null, matchMode: 'in' },
-  estado: { value: null, matchMode: 'contains'}
-} as DataTableFilterMeta );
+  loja: { value: null, matchMode: 'equals' },
+  preco: { value: null, matchMode: 'contains' },
+  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"
-    filter-display="row" :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
-    
+  <DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id" filter-display="row"
+    :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 }">
+        <InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
+      </template>
     </Column>
 
   </DataTable>
diff --git a/src/frontend/src/modelo/Jogo.ts b/src/frontend/src/modelo/Jogo.ts
index 16151e1..1593a17 100644
--- a/src/frontend/src/modelo/Jogo.ts
+++ b/src/frontend/src/modelo/Jogo.ts
@@ -11,4 +11,6 @@ export default class Jogo {
 
 export type Preco = 'DE_GRACA' | 'DESCONHECIDO' | 'PRESENTE' | number;
 
-export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'ETERNO';
\ No newline at end of file
+export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'ETERNO';
+
+export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];
\ No newline at end of file