Commit 6b8f564b authored by Guillaume Jimenez's avatar Guillaume Jimenez

Fixed filtering and more responsive quick search

parent cc77ce9c
......@@ -15,7 +15,7 @@
<link rel="shortcut icon" type="image/x-icon" href="https://www.utsouthwestern.net/favicon.ico" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"></script>
......
......@@ -168,7 +168,7 @@ Vue.component('data-table', {
Quick Filter
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field clearable ref="search" append-icon="search" label="Search" single-line hide-details v-model="search"></v-text-field>
<v-text-field clearable ref="search" append-icon="search" label="Search" single-line hide-details v-model="pendingSearch"></v-text-field>
</v-toolbar>
</v-slide-y-transition>
......@@ -309,7 +309,7 @@ Vue.component('data-table', {
<v-data-table :id="tableId" v-model="selected" v-bind:headers="headers" v-bind:items="items" v-bind:search="search" hide-actions
v-bind:pagination.sync="pagination" :item-key="uniqueIdField" :no-data-text="noDataText" :loading="loading" :class="['elevation-1', toolbarVisible ? 'mt-1' : '']"
:custom-sort="customSort" ref="dataTable">
:custom-sort="customSort" ref="dataTable" >
<template slot="headers" slot-scope="props">
<tr>
<th v-if="enableSelection" class="primary white--text" style="width:50px">
......@@ -472,7 +472,11 @@ Vue.component('data-table', {
doExport: false, //if true, the table will be exported as a CSV
csvContent: "",
headerOptionsVisible: false, //work in progress
newRow: {}
newRow: {},
previousFilteredItems: [],
lastSearchKeyStrokeMillis: null,
currentSeachTimeout: null,
pendingSearch: null
}
},
methods: {
......@@ -860,8 +864,12 @@ Vue.component('data-table', {
}
))
},
//returns the page number (base 0) for the highlighted row
//Can be used to jump to the page the highlighted row is on
delaySearch() {
clearTimeout(this.currentSeachTimeout);
this.currentSeachTimeout = setTimeout(() => {
this.search = this.pendingSearch;
}, 501);
},
findPageForHiglightedItem() {
var sortedItems = this.items.sort((a,b) => {return this.customSort(this.items, this.pagination.sortBy, this.pagination.descending)});
var index = sortedItems.map(i => i[this.uniqueIdField]).indexOf(this.highlight);
......@@ -1119,7 +1127,10 @@ Vue.component('data-table', {
} else {
this.loading = false;
}
}
},
watch: {
pendingSearch: "delaySearch"
},
......
......@@ -62,6 +62,7 @@ public class DataTableFilter {
//Alignment
sampleDetailsFieldToColumnName.put("totalReads", "al.total_reads");
sampleDetailsFieldToColumnName.put("mapRate", "rdal.map_rate");
sampleDetailsFieldToColumnName.put("alignDate", "al.align_date");
sampleDetailsDnaFieldToColumnName.put("dinValue", "dna_ex.extract_din");
sampleDetailsDnaFieldToColumnName.put("dnaExtractYieldValue", "dna_ex.dna_yield_ng");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment