summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupList.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModuleGroupList.vue')
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue63
1 files changed, 28 insertions, 35 deletions
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 2adfcaf..24cd325 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -24,40 +24,27 @@
<template>
<div>
<v-card>
- <v-card-title v-if="groups.length > 10" class="search-container">
- <component-table-actions :pagination.sync="pagination" :search.sync="search" :item-count="groups.length" />
- </v-card-title>
- <v-divider></v-divider>
- <v-data-table
- :headers="headers"
- :items="groups"
- 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="loadGroup(props.item.id)">
- <td>
+ <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="loadGroup(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>{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.description }}</td>
- <td>
- <v-btn class="next-arrow" icon @click="loadGroup(props.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <td class="narrow-td">{{ table.data.item.id }}</td>
+ <td>{{ table.data.item.name }}</td>
+ <td>{{ table.data.item.description }}</td>
+ <td class="narrow-td">
+ <v-btn class="next-arrow" icon @click="loadGroup(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">
@@ -75,37 +62,39 @@
</template>
<script>
-import ComponentTableActions from '@/components/ComponentTableActions'
-import { mapState, mapMutations } from 'vuex'
+import ComponentSearchTable from '@/components/ComponentSearchTable'
+import { mapMutations } from 'vuex'
export default {
name: 'GroupModuleGroupList',
props: ['tabIndex', 'groupId', 'groups'],
components: {
- ComponentTableActions
+ ComponentSearchTable
},
data () {
return {
- selected: [],
- search: '',
- pagination: {}
+ selected: []
}
},
computed: {
- ...mapState('groups', ['showAll']),
headers () {
return [
{ text: this.$t('id'), value: 'id' },
{ text: this.$t('name'), value: 'name' },
- { text: this.$t('description'), value: 'description', width: '100000px' },
+ { text: this.$t('description'), value: 'description' },
{ sortable: false }
]
+ },
+ dataTableProps () {
+ return {
+ headers: this.headers,
+ items: this.groups,
+ selectAll: true,
+ itemKey: 'id'
+ }
}
},
watch: {
- showAll (value) {
- if (!value) this.search = ''
- },
groups () {
this.selected = []
}
@@ -134,6 +123,10 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.narrow-td {
+ width: 10px;
+}
+
.next-arrow {
margin-left: 20px;
margin-right: -10px;