iamBadgers/RushStatistics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rudimentary filter string for game list

Browse Source
This commit is contained in:
jmosrael@gmail.com
2024-05-18 14:13:38 -07:00
parent 401330d842
commit f0de240b8a
3 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/vues/CharacterDetails.vue
View File

@@ -23,13 +23,13 @@
</template> </template>
<style> <style>
.game-list { .game-list {
margin: 20px; margin: 20px;
margin-top: 25px; margin-top: 25px;
} }
.game-list-title{ .game-list-title {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>
<script setup lang="ts"> <script setup lang="ts">

8
frontend/src/vues/CharacterList.vue
View File

@@ -50,7 +50,7 @@ let count = 10
async function loadData() { async function loadData() {
const response = await axios.post('/api/character', { const response = await axios.post('/api/character', {
page: `${page.value-1}`, page: `${page.value - 1}`,
count: `${count}`, count: `${count}`,
orderBy: 'id' orderBy: 'id'
}) })
@@ -61,7 +61,7 @@ async function loadData() {
function setPage(targetPage: number) { function setPage(targetPage: number) {
console.log(targetPage) console.log(targetPage)
router.replace({query: {page: targetPage}}) router.replace({ query: { page: targetPage } })
} }
watch(route, (newValue, oldValue) => { watch(route, (newValue, oldValue) => {
@@ -70,8 +70,8 @@ watch(route, (newValue, oldValue) => {
}) })
onMounted(async () => { onMounted(async () => {
if(!route.query.page){ if (!route.query.page) {
router.replace({query: {page: 1}}) router.replace({ query: { page: 1 } })
} }
page.value = Number(route.query.page) page.value = Number(route.query.page)
loadData() loadData()

33
frontend/src/vues/GameList.vue
View File

@@ -1,4 +1,7 @@
<template> <template>
<div class="d-flex flex-row">
<input class="filter flex-1-0" placeholder="Filter by Name" v-model="filtervalue" />
</div>
<v-table> <v-table>
<thead> <thead>
<tr> <tr>
@@ -26,22 +29,35 @@
@update:modelValue="setPage($event)" @update:modelValue="setPage($event)"
></v-pagination> ></v-pagination>
</template> </template>
<style></style>
<style>
label.filter {
margin: 10px;
margin-bottom: 0px;
}
input.filter {
margin: 10px;
background: darkslategray;
border-color: lightgray;
}
</style>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onCreated, ref } from 'vue' import { onMounted, watch, ref } from 'vue'
import axios from 'axios' import axios from 'axios'
let page = 1 let page = 0
let count = 10 let count = 10
const games = ref({}) const games = ref({})
const pageCount = ref(1) const pageCount = ref(1)
const filtervalue = ref("")
async function loadData() { async function loadData() {
const response = await axios.post('/api/game', { const response = await axios.post('/api/game', {
page: `${page}`, page: `${page}`,
count: '10', count: '10',
orderBy: 'id' filter: filtervalue.value ? `title:${filtervalue.value}` : ""
}) })
games.value = response.data.gameData games.value = response.data.gameData
@@ -66,4 +82,13 @@ function setPage(targetPage: number) {
onMounted(async () => { onMounted(async () => {
loadData() loadData()
}) })
let debounce = null;
watch(filtervalue, (oldFilter, newFilter) => {
debounce = clearTimeout(debounce)
debounce = setTimeout(() => {
loadData()
}, 500)
})
</script> </script>