summaryrefslogtreecommitdiffstats
path: root/webapp/src
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
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')
-rw-r--r--webapp/src/components/ConfiguratorModuleDelete.vue2
-rw-r--r--webapp/src/components/DataTable.vue53
-rw-r--r--webapp/src/components/GroupModuleClientView.vue2
-rw-r--r--webapp/src/components/GroupModuleDialog.vue2
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue2
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue2
6 files changed, 31 insertions, 32 deletions
diff --git a/webapp/src/components/ConfiguratorModuleDelete.vue b/webapp/src/components/ConfiguratorModuleDelete.vue
index d630524..4ef59ec 100644
--- a/webapp/src/components/ConfiguratorModuleDelete.vue
+++ b/webapp/src/components/ConfiguratorModuleDelete.vue
@@ -14,7 +14,7 @@
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ $tc('title', dialog.info.selected.length, [dialog.info.selected.length]) }}</div>
</v-card-title>
- <v-card-text>
+ <v-card-text style="height: 100%">
<div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
</v-card-text>
<v-divider></v-divider>
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;
}
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index c9e7355..a1aa846 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -45,7 +45,7 @@
<v-menu v-if="editMode" offset-y :close-on-content-click="false" :max-width="400" lazy>
<v-btn slot="activator" small icon class="info-heading-button"><v-icon>edit</v-icon></v-btn>
<v-card>
- <data-table ref="datatable" v-model="groups" :headers="headers" :items="groupList" menu-mode></data-table>
+ <data-table ref="datatable" v-model="groups" :headers="headers" :items="groupList" slim row-count="6"></data-table>
</v-card>
</v-menu>
</div>
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 5dcab77..1cf89e3 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -108,7 +108,7 @@
</v-card-title>
<v-card-text v-if="action === 'add' || action === 'select'" class="table-container">
- <data-table ref="datatable" v-model="selected" :headers="headers" :items="items" :page-mode="$vuetify.breakpoint.smAndDown"></data-table>
+ <data-table ref="datatable" v-model="selected" :headers="headers" :items="items" :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
</v-card-text>
<v-card-text v-else-if="action === 'remove' || action === 'delete'" class="selected-list">
<v-checkbox
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index b53abeb..00ecc86 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -57,7 +57,7 @@
<v-menu v-if="editMode" offset-y :close-on-content-click="false" :max-width="400" lazy>
<v-btn slot="activator" small icon class="info-heading-button"><v-icon>edit</v-icon></v-btn>
<v-card>
- <data-table v-model="parents" :headers="headers" :items="groupList" menu-mode min-width="200px"></data-table>
+ <data-table v-model="parents" :headers="headers" :items="groupList" slim row-count="6"></data-table>
</v-card>
</v-menu>
</div>
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index 4822dc9..0d8bab4 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -40,7 +40,7 @@
<v-icon :left="groups.length > 0">device_hub</v-icon>{{ groups.length > 0 ? groups.length : '' }}
</v-btn>
<v-card>
- <data-table v-model="groups" :headers="headers" :items="groupList" menu-mode min-width="200px"></data-table>
+ <data-table v-model="groups" :headers="headers" :items="groupList" slim row-count="6"></data-table>
</v-card>
</v-menu>
<span>{{ $t('groupRestricted') }}</span>