gustavo/organiza-jogos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: gustavo:0d3525620f62b709dc0706b6b26692ee4eecbba5
Branches Tags
gustavo:master
..
compare: gustavo:3448b076092678c52b2f868ecc5b96d1ab9dd82b
Branches Tags
gustavo:master

No commits in common. "0d3525620f62b709dc0706b6b26692ee4eecbba5" and "3448b076092678c52b2f868ecc5b96d1ab9dd82b" have entirely different histories.
0d3525620f ... 3448b07609

1 changed files with 7 additions and 13 deletions
Show stats Expand all files Collapse all files

20
src/frontend/src/components/TabelaDeJogos.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import Jogo, { estados, precos } from '@/modelo/Jogo';
import { Badge, Column, DataTable, InputText, Select, 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';
@ -9,10 +9,6 @@ defineProps<{
jogos: Jogo[]
}>();
defineEmits<{
selecionarJogo: [jogo: Jogo]
}>();
const filtros = ref({
nome: { value: null, matchMode: 'contains' },
loja: { value: null, matchMode: 'equals' },
@ -29,22 +25,20 @@ function lojas(jogos: Jogo[]): string[] {
<template>
<DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id" filter-display="row"
:globalFilterFields="['nome', 'estado', 'loja', 'preco']" row-hover
@row-click="$emit('selecionarJogo', $event.data)">
:globalFilterFields="['nome', 'estado', 'loja', 'preco']">
<Column field="nome" sortable header="Nome">
<template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @input="filterCallback" />
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
</template>
<template #body="{ data }">
{{ data.nome }}
<Badge v-if="data.ano" :value="data.ano" severity="secondary" />
{{ data.nome }} <span v-if="data.ano">({{ data.ano }})</span>
</template>
</Column>
<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">
<Select v-model="filterModel.value" @change="filterCallback()" :options="estados" :show-clear="true">
<template #option="slotProps">
<ComponenteDeEstado :estado="slotProps.option" />
</template>
@ -57,14 +51,14 @@ function lojas(jogos: Jogo[]): string[] {
<Column field="loja" sortable header="Loja">
<template #filter="{ filterModel, filterCallback }">
<Select v-model="filterModel.value" @change="filterCallback" :options="lojas(jogos)"
<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">
<Select v-model="filterModel.value" @change="filterCallback()" :options="precos" :show-clear="true">
<template #value="{ value }">
<ComponenteDePreco v-if="value" :preco="value" />
</template>