Componente de preços

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,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>
 

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'];
+export const estados = ['NOVO', 'JOGUEI', 'SATISFEITO', 'ETERNO'];
+
+export const precos = ['DE_GRACA', 'DESCONHECIDO', 'PRESENTE'];