Skip to content

Commit

Permalink
improv: Allow searching in tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@Griefed
Griefed committed Feb 3, 2024
1 parent 808c01d commit f189c90
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 43 deletions.
22 changes: 16 additions & 6 deletions serverpackcreator-web-frontend/src/components/HistoryTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,18 @@
</q-inner-loading>
</q-card>
<q-table
v-else class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" bordered dense
v-else class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" bordered dense :filter="filter"
style="max-width: 100vw;" no-data-label="No history available (yet)..."
no-results-label="The search didn't uncover any results"
:pagination="initialPagination">
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search"/>
</template>
</q-input>
</template>

<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
Expand All @@ -38,7 +46,7 @@
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%" style="max-width: 1100px;" v-if="props.expand">
<q-td colspan="100%" style="max-width: 1100px;" v-if="props.expand" auto-width>
<div class="row">
<div class="col">
<ModPackCard :id="props.row.modPackId"/>
Expand Down Expand Up @@ -81,17 +89,17 @@ const columns = [
name: 'timestamp',
label: 'Date and Time',
field: 'timestamp',
format: (val: number) => date.formatDate(val, 'YYYY-MM-DD : HH:mm'),
sortable: true,
align: 'left'
align: 'left',
format: (val: number) => date.formatDate(val, 'YYYY-MM-DD : HH:mm')
},
{
name: 'errors',
label: 'Errors',
field: 'errors',
format: (val: string[]) => val.length,
sortable: false,
align: 'left'
align: 'left',
format: (val: string[]) => val.length
}
];
Expand All @@ -101,9 +109,11 @@ export default defineComponent({
setup() {
const visible = ref(true);
const showSimulatedReturnData = ref(false);
const filter = ref('');
return {
visible,
showSimulatedReturnData,
filter,
showTextLoading() {
visible.value = true;
showSimulatedReturnData.value = false;
Expand Down
79 changes: 47 additions & 32 deletions serverpackcreator-web-frontend/src/components/ModpacksTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,26 @@
</transition>
</q-card-section>
<q-inner-loading :showing="visible">
<q-spinner-gears size="50px" color="accent" />
<q-spinner-gears size="50px" color="accent"/>
</q-inner-loading>
</q-card>
<q-table
v-else
class="sticky-header-table"
:rows="rows"
:columns="columns"
row-key="id"
title="Modpacks"
bordered dense
style="max-width: 100vw;"
no-data-label="No modpacks available (yet)..."
no-results-label="The search didn't uncover any results"
:pagination="initialPagination">
<q-table v-else class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" title="Modpacks" bordered
dense style="max-width: 100vw;" no-data-label="No modpacks available (yet)..." :filter="filter"
no-results-label="The search didn't uncover any results" :pagination="initialPagination">
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search"/>
</template>
</q-input>
</template>

<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
<q-btn push size="xs" color="primary" round icon="sync" @click="loadData" />
<q-btn push size="xs" color="primary" round icon="sync" @click="loadData"/>
</q-th>
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props" auto-width>
<strong>{{ col.label }}</strong>
</q-th>
</q-tr>
Expand All @@ -45,7 +44,7 @@
</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
<span v-if="col.field === 'name' && props.row.size > 0">
{{ col.value }}
<q-btn :href="buildDownloadUrl(props.row.id)" color="info" dense icon="download" round size="sm"
Expand All @@ -61,42 +60,58 @@
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%" style="max-width: 100vw;" v-if="props.expand">
<ServerPacksTable :id="props.row.id" />
<q-td colspan="100%" style="max-width: 100vw;" v-if="props.expand" auto-width>
<ServerPacksTable :id="props.row.id"/>
</q-td>
</q-tr>
</template>
</q-table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { modpacks } from 'boot/axios';
import { date } from 'quasar';
import {defineComponent, ref} from 'vue';
import {modpacks} from 'boot/axios';
import {date} from 'quasar';
import ServerPacksTable from 'components/ServerPacksTable.vue';
const columns = [
{ name: 'id', label: 'Modpack ID', field: 'id', sortable: true, align: 'left' },
{ name: 'name', label: 'Name', field: 'name', sortable: false, align: 'left' },
{ name: 'projectID', label: 'Project ID', field: 'projectID', sortable: true, align: 'left' },
{ name: 'versionID', label: 'Version ID', field: 'versionID', sortable: true, align: 'left' },
{ name: 'source', label: 'Source', field: 'source', sortable: false, align: 'left' },
{ name: 'status', label: 'Status', field: 'status', sortable: false, align: 'left' },
{ name: 'size', label: 'Size', field: 'size', sortable: false, align: 'left' },
{ name: 'serverPacks', label: 'Server Packs', field: 'serverPacks', sortable: false, align: 'left', format: (val: Array<never>) => val.length },
{ name: 'sha256', label: 'SHA256 Hash', field: 'sha256', sortable: false, align: 'left' },
{ name: 'dateCreated', label: 'Date and Time', field: 'dateCreated', sortable: true, align: 'left', format: (val: number) => date.formatDate(val, 'YYYY-MM-DD : HH:mm') }
{name: 'id', label: 'Modpack ID', field: 'id', sortable: true, align: 'left'},
{name: 'name', label: 'Name', field: 'name', sortable: false, align: 'left'},
{name: 'projectID', label: 'Project ID', field: 'projectID', sortable: true, align: 'left'},
{name: 'versionID', label: 'Version ID', field: 'versionID', sortable: true, align: 'left'},
{name: 'source', label: 'Source', field: 'source', sortable: false, align: 'left'},
{name: 'status', label: 'Status', field: 'status', sortable: false, align: 'left'},
{name: 'size', label: 'Size', field: 'size', sortable: false, align: 'left'},
{
name: 'serverPacks',
label: 'Server Packs',
field: 'serverPacks',
sortable: false,
align: 'left',
format: (val: Array<never>) => val.length
},
{name: 'sha256', label: 'SHA256 Hash', field: 'sha256', sortable: false, align: 'left'},
{
name: 'dateCreated',
label: 'Date and Time',
field: 'dateCreated',
sortable: true,
align: 'left',
format: (val: number) => date.formatDate(val, 'YYYY-MM-DD : HH:mm')
}
];
export default defineComponent({
name: 'ModpacksTable',
components: { ServerPacksTable },
components: {ServerPacksTable},
setup() {
const visible = ref(true);
const showSimulatedReturnData = ref(false);
const filter = ref('');
return {
visible,
showSimulatedReturnData,
filter,
showTextLoading() {
visible.value = true;
showSimulatedReturnData.value = false;
Expand Down
19 changes: 14 additions & 5 deletions serverpackcreator-web-frontend/src/components/ServerPacksTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,17 @@
</q-inner-loading>
</q-card>
<q-table
v-else :rows="rows" :columns="columns" row-key="id" title="Server Packs" id="serverpacktable"
style="max-width: 100%;"
bordered dense no-data-label="No server packs available (yet)..."
v-else :rows="rows" :columns="columns" row-key="id" title="Server Packs" id="serverpacktable" :filter="filter"
style="max-width: 100%;" bordered dense no-data-label="No server packs available (yet)..."
no-results-label="The search didn't uncover any results" :pagination="initialPagination">
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
<template v-slot:append>
<q-icon name="search"/>
</template>
</q-input>
</template>

<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width>
Expand All @@ -37,7 +44,7 @@
</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
<span v-if="col.field==='confirmedWorking'">
<span v-if="props.row.confirmedWorking < 0" class="text-red text-bold">
{{ col.value }}
Expand Down Expand Up @@ -80,7 +87,7 @@
</q-td>
</q-tr>
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%" style="max-width: 90vw;" v-if="props.expand">
<q-td colspan="100%" style="max-width: 90vw;" v-if="props.expand" auto-width>
<div class="row">
<div class="col">
<RunConfigurationCard :id="props.row.runConfiguration.id"/>
Expand Down Expand Up @@ -134,9 +141,11 @@ export default defineComponent({
setup() {
const visible = ref(true);
const showSimulatedReturnData = ref(false);
const filter = ref('');
return {
visible,
showSimulatedReturnData,
filter,
showTextLoading() {
visible.value = true;
showSimulatedReturnData.value = false;
Expand Down

0 comments on commit f189c90

Please sign in to comment.