summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientList.vue
diff options
context:
space:
mode:
authorUdo Walter2018-08-05 08:48:58 +0200
committerUdo Walter2018-08-05 08:48:58 +0200
commite69d7c23102dbdc1b9f91a97d9e6db519694d961 (patch)
treee031dfb3080f7e73681198a73aa39aa6d3b17bc3 /webapp/src/components/GroupModuleClientList.vue
parent[external-backends] Added comments for the API functions and in the external-... (diff)
downloadbas-e69d7c23102dbdc1b9f91a97d9e6db519694d961.tar.gz
bas-e69d7c23102dbdc1b9f91a97d9e6db519694d961.tar.xz
bas-e69d7c23102dbdc1b9f91a97d9e6db519694d961.zip
[webapp] improved data table with search and pagination;
Diffstat (limited to 'webapp/src/components/GroupModuleClientList.vue')
-rw-r--r--webapp/src/components/GroupModuleClientList.vue57
1 files changed, 23 insertions, 34 deletions
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index c491b63..101de5a 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -28,42 +28,29 @@
<template>
<div>
<v-card>
- <v-card-title v-if="clients.length > 10">
- <component-table-actions :pagination.sync="pagination" :search.sync="search" :item-count="clients.length" />
- </v-card-title>
- <v-divider></v-divider>
- <v-data-table
- :headers="headers"
- :items="clients"
- item-key="id"
- select-all
- hide-actions
- v-model="selected"
- :search="search"
- :pagination.sync="pagination"
- >
- <template slot="items" slot-scope="props">
- <tr @click.stop="props.selected = !props.selected" @dblclick="loadClient(props.item.id)">
+ <component-search-table v-model="selected" :data-table-props="dataTableProps">
+ <template slot="items" slot-scope="table">
+ <tr @click.stop="table.data.selected = !table.data.selected" @dblclick="loadClient(table.data.item.id)">
<td class="narrow-td">
<v-checkbox
color="primary"
- v-model="props.selected"
+ v-model="table.data.selected"
hide-details
@click.native.stop
@dblclick.native.stop
></v-checkbox>
</td>
- <td class="narrow-td">{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.ip }}</td>
- <td>{{ props.item.mac }}</td>
- <td>{{ props.item.uuid }}</td>
+ <td class="narrow-td">{{ table.data.item.id }}</td>
+ <td>{{ table.data.item.name }}</td>
+ <td>{{ table.data.item.ip }}</td>
+ <td>{{ table.data.item.mac }}</td>
+ <td>{{ table.data.item.uuid }}</td>
<td class="narrow-td">
- <v-btn class="next-arrow" icon @click="loadClient(props.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn class="next-arrow" icon @click="loadClient(table.data.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</td>
</tr>
</template>
- </v-data-table>
+ </component-search-table>
</v-card>
<div v-if="tabIndex === 0" class="text-xs-right">
<v-btn flat color="error" @click="deleteSelected" :disabled="selected.length === 0">
@@ -81,24 +68,21 @@
</template>
<script>
-import ComponentTableActions from '@/components/ComponentTableActions'
-import { mapState, mapMutations } from 'vuex'
+import ComponentSearchTable from '@/components/ComponentSearchTable'
+import { mapMutations } from 'vuex'
export default {
name: 'GroupModuleClientList',
props: ['tabIndex', 'groupId', 'clients'],
components: {
- ComponentTableActions
+ ComponentSearchTable
},
data () {
return {
- selected: [],
- search: '',
- pagination: {}
+ selected: []
}
},
computed: {
- ...mapState('groups', ['showAll']),
headers () {
return [
{ text: this.$t('id'), value: 'id' },
@@ -108,12 +92,17 @@ export default {
{ text: this.$t('uuid'), value: 'uuid' },
{ sortable: false }
]
+ },
+ dataTableProps () {
+ return {
+ headers: this.headers,
+ items: this.clients,
+ selectAll: true,
+ itemKey: 'id'
+ }
}
},
watch: {
- showAll (value) {
- if (!value) this.search = ''
- },
clients () {
this.selected = []
}