Filtros e tag de estado

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/TabelaDeJogos.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type Jogo from '@/modelo/Jogo';
+import Jogo, { estados } 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';
 
 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' },
+  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 }">
+        <InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
+      </template>
     </Column>
 
   </DataTable>

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';
+export type Estado = 'NOVO' | 'JOGUEI' | 'SATISFEITO' | 'ETERNO';
+
+export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];