summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 22:25:55 +0100
committerUdo Walter2019-02-24 22:25:55 +0100
commite0257813e6016ba8b4d2f56bc7aec9f4d9f7f2ba (patch)
tree7edf944318b8b039406cf28502c295ef5010ed0c /webapp/src/components/DataTable.vue
parent[webapp/datatable] small design fixes (diff)
downloadbas-e0257813e6016ba8b4d2f56bc7aec9f4d9f7f2ba.tar.gz
bas-e0257813e6016ba8b4d2f56bc7aec9f4d9f7f2ba.tar.xz
bas-e0257813e6016ba8b4d2f56bc7aec9f4d9f7f2ba.zip
[webapp/datatable] add rowcount prop
Diffstat (limited to 'webapp/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue53
1 files changed, 26 insertions, 27 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 94631ff..27a630a 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -28,7 +28,7 @@
<template>
<div>
<v-layout wrap>
- <v-flex xs12 :md6="!menuMode" class="d-flex align-center search-wrapper" :class="{ 'menu-mode-search-wrapper': menuMode }">
+ <v-flex xs12 :md6="!slim" class="d-flex align-center search-wrapper" :class="{ 'slim-search-wrapper': slim }">
<div class="search-field-wrapper">
<div v-for="(s, index) in search" :key="index">
<v-text-field
@@ -61,10 +61,10 @@
<v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
</div>
</div>
- <v-divider :class="{ 'hidden-md-and-up': !menuMode }"></v-divider>
- <v-divider v-if="!menuMode" vertical class="hidden-sm-and-down"></v-divider>
+ <v-divider :class="{ 'hidden-md-and-up': !slim }"></v-divider>
+ <v-divider v-if="!slim" vertical class="hidden-sm-and-down"></v-divider>
</v-flex>
- <v-flex style="padding: 6px 16px" class="non-selectable" xs12 :md6="!menuMode">
+ <v-flex style="padding: 6px 16px" class="non-selectable" xs12 :md6="!slim">
<div class="d-flex align-center" style="font-size: 12px">
<div class="nowrap">
<v-tooltip top open-delay="800">
@@ -87,19 +87,19 @@
</v-tooltip>
</div>
- <div :class="{ 'text-xs-center': !pageMode && !menuMode, 'text-xs-right': pageMode || menuMode }">
+ <div :class="{ 'text-xs-center': rowCount === undefined, 'text-xs-right': rowCount !== undefined }">
<span class="nowrap">{{ filteredRows.length + ' ' + $t('entries') }}</span>
<span class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
</div>
- <div v-if="!pageMode && !menuMode" class="text-xs-right hidden-xs-only">
+ <div v-if="rowCount === undefined" class="text-xs-right hidden-xs-only">
{{ $t('height') }}:
</div>
<v-select
- v-if="!pageMode && !menuMode"
+ v-if="rowCount === undefined"
solo flat
class="rowcount-select"
- v-model="rowCount"
+ v-model="internalRowCount"
:items="[ 5, 10, 20, 50, 100, { text: $t('all'), value: '-1' }]"
color="primary"
hide-details
@@ -121,11 +121,11 @@
:style="scrollerStyle"
:items="filteredRows"
:item-height="48"
- :page-mode="(rowCount <= 0 || pageMode) && !menuMode"
+ :page-mode="computedRowCount <= 0"
@click.native.capture.passive="setShiftState"
>
<template slot="before-container">
- <div class="table-head-wrapper non-selectable" :style="{ 'min-width': minWidth }">
+ <div class="table-head-wrapper non-selectable" :style="{ 'min-width': computedMinWith }">
<div class="table-head">
<div class="non-selectable header-cell">
<v-icon @click="toggleSelectAll">
@@ -190,27 +190,21 @@ export default {
default: () => []
},
minWidth: {
- type: String,
- default: '600px'
+ type: String
},
- pageMode: {
+ slim: {
type: Boolean,
default: false
},
- menuMode: {
- type: Boolean,
- default: false
- },
- menuModeRowCount: {
- type: Number,
- default: 6
+ rowCount: {
+ type: Number
}
},
data () {
return {
selected: [],
search: [{ text: { raw: '', upper: '', regex: new RegExp(), regexCI: new RegExp() }, key: null }],
- rowCount: 10,
+ internalRowCount: 10,
selectState: 0,
headerSortState: {},
regex: false,
@@ -226,12 +220,17 @@ export default {
searchableHeaders () {
return this.headers.filter(h => h.text !== undefined)
},
+ computedMinWith () {
+ if (this.minWith) return this.minWith
+ if (this.slim) return '300px'
+ return '600px'
+ },
+ computedRowCount () {
+ return this.rowCount === undefined ? this.internalRowCount : this.rowCount
+ },
scrollerStyle () {
- const style = { '--min-table-width': this.minWidth }
- var rowCount = this.rowCount
- if (this.pageMode) rowCount = -1
- else if (this.menuMode) rowCount = this.menuModeRowCount
- if (rowCount > 0) style.height = (Math.max(Math.min(rowCount, this.filteredRows.length), 1) * 48 + 58) + 'px'
+ const style = { '--min-table-width': this.computedMinWith }
+ if (this.computedRowCount > 0) style.height = (Math.max(Math.min(this.computedRowCount, this.filteredRows.length), 1) * 48 + 58) + 'px'
return style
},
dataKeys () { return this.headers.map(x => x.key) },
@@ -476,7 +475,7 @@ export default {
}
}
-.menu-mode-search-wrapper {
+.slim-search-wrapper {
flex-direction: column;
align-items: stretch;
}