summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-03 02:52:00 +0100
committerUdo Walter2019-03-03 02:52:00 +0100
commit0a58b40cca8f86ab6b23749a2d260fa1ba2b5cd8 (patch)
tree157c445b6dbc99d5855039c7273f1d8ea4a7b7e8 /webapp
parent[webapp] small bugfixes + eslint fixes + color fix (diff)
downloadbas-0a58b40cca8f86ab6b23749a2d260fa1ba2b5cd8.tar.gz
bas-0a58b40cca8f86ab6b23749a2d260fa1ba2b5cd8.tar.xz
bas-0a58b40cca8f86ab6b23749a2d260fa1ba2b5cd8.zip
[webapp] add single select to selectbox; eslint fix
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/DataTable.vue22
-rw-r--r--webapp/src/components/GroupModuleDialog.vue1
-rw-r--r--webapp/src/components/SelectBox.vue14
3 files changed, 31 insertions, 6 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 06b0900..03684d1 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -58,7 +58,7 @@
</v-tooltip>
<v-tooltip top open-delay="800">
<v-btn icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected" slot="activator">
- <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">check_box</v-icon>
+ <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">{{ singleSelect ? 'radio_button_checked' : 'check_box' }}</v-icon>
</v-btn>
<span>{{ $t('onlyShowSelected') }}</span>
</v-tooltip>
@@ -104,8 +104,8 @@
<template slot="before">
<div class="table-head-wrapper" :style="{ 'min-width': computedMinWidth }">
<div class="table-head">
- <div class="header-cell">
- <v-icon @click="toggleSelectAll">
+ <div class="header-cell" style="width: 24px">
+ <v-icon v-if="!singleSelect" @click="toggleSelectAll">
{{ selectState === 0 ? 'check_box_outline_blank' : selectState === 1 ? 'indeterminate_check_box' : 'check_box' }}
</v-icon>
</div>
@@ -135,7 +135,7 @@
@dblclick="$emit('dblclick', item.data)"
>
<div class="non-selectable">
- <v-icon style="cursor: pointer" :color="item.selected ? 'primary' : ''">{{ item.selected ? 'check_box' : 'check_box_outline_blank' }}</v-icon>
+ <v-icon style="cursor: pointer" :color="item.selected ? 'primary' : ''">{{ selectedIconMap[item.selected] }}</v-icon>
</div>
<div v-for="header in headers" :key="header.key" :style="{ width: header.width }" :class="{ 'auto-width': header.width === undefined }">
<span style="user-select: text" v-if="$scopedSlots[header.key] === undefined" @dblclick.stop>{{ item.data[header.key] }}</span>
@@ -182,6 +182,10 @@ export default {
},
rowCount: {
type: Number
+ },
+ singleSelect: {
+ type: Boolean,
+ default: false
}
},
data () {
@@ -224,6 +228,10 @@ export default {
if (direction === 'desc') rows.sort((b, a) => String(a.data[key]).localeCompare(String(b.data[key])))
}
return Object.freeze(rows)
+ },
+ selectedIconMap () {
+ if (this.singleSelect) return { 'true': 'radio_button_checked', 'false': 'radio_button_unchecked' }
+ return { 'true': 'check_box', 'false': 'check_box_outline_blank' }
}
},
watch: {
@@ -238,6 +246,7 @@ export default {
}
},
filteredRows () {
+ if (this.singleSelect) return
this.lastSelectIndex = null
this.calcSelectState()
}
@@ -257,6 +266,11 @@ export default {
if (this.$refs.scroller) this.$refs.scroller.$el.scrollTop = 0
},
selectItem (row, index) {
+ if (this.singleSelect) {
+ this.$emit('input', [row.data])
+ return
+ }
+
// Select or deselect this row
const selected = row.selected = !row.selected
if (selected) {
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index d322b5e..3f809e9 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -145,7 +145,6 @@
</template>
<script>
-import ScrollParent from 'scrollparent'
import DataTable from '@/components/DataTable'
import { mapState, mapMutations } from 'vuex'
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 7712201..4fe4593 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -38,7 +38,15 @@
<v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
</div>
<v-card>
- <data-table :value="value" @input="$emit('input', $event)" :headers="headers" :items="items" slim :row-count="6"></data-table>
+ <data-table
+ :value="value"
+ @input="$emit('input', $event)"
+ :headers="headers"
+ :items="items"
+ slim
+ :row-count="6"
+ :single-select="singleSelect"
+ ></data-table>
</v-card>
</v-menu>
</v-input>
@@ -93,6 +101,10 @@ export default {
},
prependIcon: {
type: String
+ },
+ singleSelect: {
+ type: Boolean,
+ default: false
}
},
data () {