summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue166
1 files changed, 93 insertions, 73 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index c011353..4643d54 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -35,78 +35,81 @@
<template>
<div>
- <v-layout wrap :class="{ 'd-block': slim }">
- <v-flex xs12 :md6="!slim" class="d-flex align-center search-wrapper" :class="{ 'slim-search-wrapper': slim }">
- <data-table-search
- ref="search"
- @filter="filteredRows = $event"
- :selected="value"
- :items="sortedRows"
- :data-keys="headersWithText"
- nested-data
- :regex="regex"
- :case-sensitive="caseSensitive"
- :only-show-selected="onlyShowSelected"
- :slim="slim"
- :dispatch-scroll="computedRowCount <= 0"
- ></data-table-search>
+
+ <v-row no-gutters>
+ <v-col cols="12" :md="slim ? 12 : 6" class="search-wrapper" :class="{ 'slim-search-wrapper': slim }">
+ <div class="d-flex" style="flex: 1">
+ <data-table-search
+ ref="search"
+ @filter="filteredRows = $event"
+ :selected="value"
+ :items="sortedRows"
+ :data-keys="headersWithText"
+ nested-data
+ :regex="regex"
+ :case-sensitive="caseSensitive"
+ :only-show-selected="onlyShowSelected"
+ :slim="slim"
+ :dispatch-scroll="computedRowCount <= 0"
+ ></data-table-search>
+ <slot name="after-search"></slot>
+ </div>
<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="!slim">
- <div class="d-flex align-center" style="font-size: 12px">
- <div class="nowrap">
- <v-tooltip top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="regex = !regex">
- <span :class="regex ? 'primary--text' : ''">.*?</span>
- </v-btn>
- </template>
- <span>{{ $t('regex') }}</span>
- </v-tooltip>
- <v-tooltip top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="caseSensitive = !caseSensitive">
- <span :class="caseSensitive ? 'primary--text' : ''">Aa</span>
- </v-btn>
- </template>
- <span>{{ $t('caseSensitive') }}</span>
- </v-tooltip>
- <v-tooltip v-if="!noSelect" top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected">
- <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">{{ singleSelect ? 'radio_button_checked' : 'check_box' }}</v-icon>
- </v-btn>
- </template>
- <span>{{ $t('onlyShowSelected') }}</span>
- </v-tooltip>
- </div>
+ </v-col>
+
+ <v-col cols="12" :md="slim ? 12 : 6" class="px-4 table-controls non-selectable">
+ <div class="nowrap">
+ <v-tooltip top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="regex = !regex">
+ <span :class="regex ? 'primary--text' : ''">.*?</span>
+ </v-btn>
+ </template>
+ <span>{{ $t('regex') }}</span>
+ </v-tooltip>
+ <v-tooltip top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="caseSensitive = !caseSensitive">
+ <span :class="caseSensitive ? 'primary--text' : ''">Aa</span>
+ </v-btn>
+ </template>
+ <span>{{ $t('caseSensitive') }}</span>
+ </v-tooltip>
+ <v-tooltip v-if="!noSelect" top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected">
+ <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">{{ singleSelect ? 'radio_button_checked' : 'check_box' }}</v-icon>
+ </v-btn>
+ </template>
+ <span>{{ $t('onlyShowSelected') }}</span>
+ </v-tooltip>
+ </div>
- <div class="entry-count" :style=" { 'justify-content': rowCount === undefined ? 'center' : 'flex-end' }">
- <span class="nowrap" :style="{ 'margin': noSelect ? '0' : '0 4px' }">{{ filteredRows.length + ' ' + $t('entries') }}</span>
- <span v-if="!noSelect" class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
- </div>
+ <div class="entry-count" :style=" { 'justify-content': rowCount === undefined ? 'center' : 'flex-end' }">
+ <span class="nowrap" :style="{ 'margin': noSelect ? '0' : '0 4px' }">{{ filteredRows.length + ' ' + $t('entries') }}</span>
+ <span v-if="!noSelect" class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
+ </div>
- <div v-if="rowCount === undefined" class="text-xs-right hidden-xs-only">
- {{ $t('height') }}:
- </div>
- <v-select
- v-if="rowCount === undefined"
- solo flat
- class="rowcount-select"
- v-model="internalRowCount"
- :items="[ 5, 10, 20, 50, { text: $t('all'), value: '-1' }]"
- color="primary"
- hide-details
- :menu-props="{
- offsetY: true,
- left: true,
- contentClass: 'data-table-rowcount-select-content'
- }"
- ></v-select>
+ <div v-if="rowCount === undefined" class="text-right hidden-xs-only">
+ {{ $t('height') }}:
</div>
- </v-flex>
- </v-layout>
+ <v-select
+ v-if="rowCount === undefined"
+ solo flat
+ class="rowcount-select"
+ v-model="internalRowCount"
+ :items="[ 5, 10, 20, 50, { text: $t('all'), value: '-1' }]"
+ color="primary"
+ hide-details
+ :menu-props="{
+ offsetY: true,
+ left: true,
+ contentClass: 'data-table-rowcount-select-content'
+ }"
+ ></v-select>
+ </v-col>
+ </v-row>
<v-divider></v-divider>
@@ -154,7 +157,7 @@
</template>
<template #default="{ item, index }">
<div class="table-row"
- :style="item.selected && { backgroundColor: $vuetify.theme.primary + '11' }"
+ :style="item.selected && { backgroundColor: $vuetify.theme.currentTheme.primary + '11' }"
@click="selectItem(item, index)"
@dblclick="$emit('dblclick', item.data)"
>
@@ -176,11 +179,10 @@
v-model="copyDialog"
scrollable
:max-width="300"
- lazy
>
<v-card class="non-selectable">
<v-card-title class="elevation-3">
- <div class="subheading">{{ $t('copyHeading') }}</div>
+ <div class="subtitle-1">{{ $t('copyHeading') }}</div>
<v-spacer></v-spacer>
<v-btn-toggle v-model="copyFormat" mandatory class="copy-format-toggle">
<v-btn small :color="copyFormat === 0 ? 'primary' : ''">CSV</v-btn>
@@ -202,7 +204,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn small flat @click="copyDialog = false">{{ $t('close') }}</v-btn>
+ <v-btn small text @click="copyDialog = false">{{ $t('close') }}</v-btn>
<v-btn small color="primary" @click="copyToClipboard">{{ $t('copy') }}</v-btn>
</v-card-actions>
</v-card>
@@ -558,6 +560,11 @@ export default {
font-weight: 600;
}
+.search-wrapper {
+ display: flex;
+ align-items: center;
+}
+
@media (max-width: 959px) {
.search-wrapper {
flex-direction: column;
@@ -570,6 +577,17 @@ export default {
align-items: stretch;
}
+.table-controls {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ min-height: 48px;
+}
+
+.table-controls > * {
+ flex: 1 1 auto;
+}
+
.entry-count {
display: flex;
flex-wrap: wrap;
@@ -723,11 +741,13 @@ export default {
</style>
<style>
-.data-table-rowcount-select-content .v-list__tile {
+.data-table-search-select-content .v-list-item,
+.data-table-rowcount-select-content .v-list-item {
height: 36px;
+ min-height: 36px;
}
-.data-table-rowcount-select-content .v-list__tile__title {
+.data-table-rowcount-select-content .v-list-item__title {
text-align: right;
}
</style>