summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTableSearch.vue
diff options
context:
space:
mode:
authorUdo Walter2019-03-04 06:17:17 +0100
committerUdo Walter2019-03-04 06:17:17 +0100
commiteff95f0a279aabe5b3ae0d9ee20cccd46da6554b (patch)
tree251f2af21b346bb4822c7390b0ead3cc07cc5c63 /webapp/src/components/DataTableSearch.vue
parentForgot to remove the console log. -.- (diff)
downloadbas-eff95f0a279aabe5b3ae0d9ee20cccd46da6554b.tar.gz
bas-eff95f0a279aabe5b3ae0d9ee20cccd46da6554b.tar.xz
bas-eff95f0a279aabe5b3ae0d9ee20cccd46da6554b.zip
[webapp/log] first system log implementation (wip, frontend only atm)
Diffstat (limited to 'webapp/src/components/DataTableSearch.vue')
-rw-r--r--webapp/src/components/DataTableSearch.vue66
1 files changed, 37 insertions, 29 deletions
diff --git a/webapp/src/components/DataTableSearch.vue b/webapp/src/components/DataTableSearch.vue
index 4e75d7d..c971835 100644
--- a/webapp/src/components/DataTableSearch.vue
+++ b/webapp/src/components/DataTableSearch.vue
@@ -31,7 +31,7 @@
solo flat
class="column-select"
v-model="s.key"
- :items="[ { text: $t('all'), key: null }, ...searchableHeaders ]"
+ :items="[ { text: $t('all'), key: null }, ...dataKeys ]"
item-text="text"
item-value="key"
color="primary"
@@ -55,12 +55,17 @@ import ScrollParent from 'scrollparent'
export default {
name: 'DataTableSearch',
props: {
- rows: {
- type: Array
+ items: {
+ type: Array,
+ required: true
},
- headers: {
+ dataKeys: {
type: Array,
- default: () => []
+ required: true
+ },
+ nestedData: {
+ type: Boolean,
+ default: false
},
regex: {
type: Boolean,
@@ -90,34 +95,37 @@ export default {
}
},
computed: {
- searchableHeaders () {
- return this.headers.filter(h => h.text !== undefined)
+ dataSearchKeys () {
+ return this.dataKeys.map(x => x.searchKey || x.key || x)
},
- dataKeys () { return this.headers.map(x => x.key) },
filterFunction () {
- if (this.regex && this.caseSensitive) return (s, str) => s.text.regex.test(str)
- else if (this.regex && !this.caseSensitive) return (s, str) => s.text.regexCI.test(str)
- else if (!this.regex && this.caseSensitive) return (s, str) => str.indexOf(s.text.raw) !== -1
- else if (!this.regex && !this.caseSensitive) return (s, str) => str.toUpperCase().indexOf(s.text.upper) !== -1
+ var str
+ if (this.nestedData) str = (item, key) => String(item.data[key])
+ else str = (item, key) => String(item[key])
+
+ if (this.regex && this.caseSensitive) return (s, item, key) => s.text.regex.test(str(item, key))
+ else if (this.regex && !this.caseSensitive) return (s, item, key) => s.text.regexCI.test(str(item, key))
+ else if (!this.regex && this.caseSensitive) return (s, item, key) => str(item, key).indexOf(s.text.raw) !== -1
+ else if (!this.regex && !this.caseSensitive) return (s, item, key) => str(item, key).toUpperCase().indexOf(s.text.upper) !== -1
}
},
watch: {
- rows () {
- this.filterRows()
+ items () {
+ this.filterItems()
},
regex () {
- this.filterRows()
+ this.filterItems()
},
caseSensitive () {
- this.filterRows()
+ this.filterItems()
},
onlyShowSelected () {
- this.filterRows()
+ this.filterItems()
},
search: {
deep: true,
handler () {
- this.filterRows()
+ this.filterItems()
}
}
},
@@ -150,37 +158,37 @@ export default {
this.search.splice(this.search.indexOf(s), 1)
if (this.dispatchScroll) ScrollParent(this.$el).dispatchEvent(new Event('scroll'))
},
- filterRows () {
+ filterItems () {
// Cancel the last filtering loop
this.filteringLoop.cancel()
// Skip filtering if all search strings are empty
if (this.search.every(s => s.text.raw === '') && !this.onlyShowSelected) {
- this.$emit('filter', Object.freeze(this.rows))
+ this.$emit('filter', Object.freeze(this.items))
return
}
- // Filter rows using a time slicing loop
+ // Filter items using a time slicing loop
const result = []
- this.filteringLoop = this.$loop(this.rows.length, 1000,
+ this.filteringLoop = this.$loop(this.items.length, 1000,
i => {
- const row = this.rows[i]
- if ((!this.onlyShowSelected || (this.onlyShowSelected && row.selected)) && this.search.every(s => {
+ const item = this.items[i]
+ if ((!this.onlyShowSelected || (this.onlyShowSelected && item.selected)) && this.search.every(s => {
if (s.key === null) {
- return this.dataKeys.some(key => {
- return this.filterFunction(s, String(row.data[key]))
+ return this.dataSearchKeys.some(key => {
+ return this.filterFunction(s, item, key)
})
} else {
- return this.filterFunction(s, String(row.data[s.key]))
+ return this.filterFunction(s, item, s.key)
}
- })) result.push(row)
+ })) result.push(item)
},
() => { this.$emit('filter', Object.freeze(result)) }
)
}
},
created () {
- this.filterRows()
+ this.filterItems()
}
}
</script>