summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-01-15 04:05:11 +0100
committerUdo Walter2019-01-15 04:05:11 +0100
commitbaeb62333f34325be89e7eb5578fb1f6d11d0cd4 (patch)
tree33b9902c9dce056500ec0f9ac45d7b7d82961657 /webapp
parent[webapp] add second iteration of the virtual table with more features (diff)
downloadbas-baeb62333f34325be89e7eb5578fb1f6d11d0cd4.tar.gz
bas-baeb62333f34325be89e7eb5578fb1f6d11d0cd4.tar.xz
bas-baeb62333f34325be89e7eb5578fb1f6d11d0cd4.zip
[webapp/datatable] Add search clear + show all selected button
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/DataTable.vue26
1 files changed, 19 insertions, 7 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 74b114a..e843a64 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -7,7 +7,8 @@
"noResult": "No entries.",
"height": "Height",
"regex": "Regular Expressions",
- "caseSensitive": "Case Sensitive"
+ "caseSensitive": "Case Sensitive",
+ "selected": "selected"
},
"de": {
"search": "Suche",
@@ -16,7 +17,8 @@
"noResult": "Keine Einträge.",
"height": "Höhe",
"regex": "Regulärer Ausdruck",
- "caseSensitive": "Groß-/Kleinschreibung beachten"
+ "caseSensitive": "Groß-/Kleinschreibung beachten",
+ "selected": "ausgewählt"
}
}
</i18n>
@@ -35,8 +37,10 @@
:placeholder="$t('search')"
:value="s.text.raw"
@input="prerocessSearch(s, $event)"
+ :clear-icon-cb="() => prerocessSearch(s, '')"
hide-details
prepend-inner-icon="search"
+ clearable
></v-text-field>
<v-select
solo flat
@@ -59,7 +63,7 @@
<v-divider class="hidden-sm-and-up"></v-divider>
<v-divider vertical class="hidden-xs-only"></v-divider>
</v-flex>
- <v-flex style="padding: 6px 16px" class="caption font-weight-thin d-flex align-start" xs12 sm6>
+ <v-flex style="padding: 6px 16px" class="caption font-weight-thin d-flex align-start non-selectable" xs12 sm6>
<div class="d-flex align-center">
<div>
<v-tooltip top open-delay="800">
@@ -77,6 +81,12 @@
</div>
<div class="text-xs-center">
{{ filterdRows.length + ' ' + $t('entries') }}
+ <span
+ @click="onlyShowSelected = !onlyShowSelected"
+ :style="{ cursor: 'pointer', 'font-weight': onlyShowSelected ? 'bold' : '' }"
+ >
+ {{ '(' + selected.length + ' ' + $t('selected') + ')' }}
+ </span>
</div>
<div class="text-xs-right">
{{ $t('height') }}:
@@ -180,12 +190,13 @@ export default {
data () {
return {
selected: [],
- search: [{ text: { raw: '' }, key: null }],
+ search: [{ text: { raw: '', upper: '', regex: new RegExp(), regexCI: new RegExp() }, key: null }],
rowCount: 10,
selectState: 0,
regex: false,
caseSensitive: false,
- headerSortState: {}
+ headerSortState: {},
+ onlyShowSelected: false
}
},
computed: {
@@ -217,11 +228,12 @@ export default {
else if (!this.regex && !this.caseSensitive) return (s, str) => str.toUpperCase().indexOf(s.text.upper) !== -1
},
filterdRows () {
- if (this.search.every(s => s.text.raw === '')) return this.sortedRows
+ if (this.search.every(s => s.text.raw === '') && !this.onlyShowSelected) return this.sortedRows
+ const onlySelected = this.onlyShowSelected
const search = this.search
const dataKeys = this.dataKeys
const test = this.filterFunction
- return this.sortedRows.filter(row => search.every(s => {
+ return this.sortedRows.filter(row => (!onlySelected || (onlySelected && row.selected)) && search.every(s => {
if (s.key === null) {
return dataKeys.some(key => {
return test(s, String(row.data[key]))