summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientList.vue
diff options
context:
space:
mode:
authorUdo Walter2018-08-02 06:38:41 +0200
committerUdo Walter2018-08-02 06:38:41 +0200
commit6d7ca39adac324246b6862ed1299384ef998b8ec (patch)
tree82de9db2ece4396a9fdf4d98d9e55b5c32c2391c /webapp/src/components/GroupModuleClientList.vue
parent[groups] add ability to show all groups and clients (diff)
downloadbas-6d7ca39adac324246b6862ed1299384ef998b8ec.tar.gz
bas-6d7ca39adac324246b6862ed1299384ef998b8ec.tar.xz
bas-6d7ca39adac324246b6862ed1299384ef998b8ec.zip
[groups] add delete client/group functionality
Diffstat (limited to 'webapp/src/components/GroupModuleClientList.vue')
-rw-r--r--webapp/src/components/GroupModuleClientList.vue114
1 files changed, 82 insertions, 32 deletions
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index c5bc312..ec1a774 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -8,40 +8,59 @@
</i18n>
<template>
- <v-card>
- <v-data-table stlye="width: 100px"
- :headers="headers"
- :items="clients"
- item-key="id"
- hide-actions
- select-all
- v-model="selected"
- >
- <template slot="items" slot-scope="props">
- <tr @click="loadClient(props.item.id)">
- <td class="narrow-td">
- <v-checkbox
- color="primary"
- v-model="props.selected"
- hide-details
- @click.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">
- <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </v-data-table>
- </v-card>
+ <div>
+ <v-card>
+ <v-card-title v-if="tabIndex === 0 && showAll" class="search-container">
+ <div>
+ <v-text-field class="search-field" v-model="search" hide-details prepend-inner-icon="search"></v-text-field>
+ </div>
+ </v-card-title>
+ <v-divider></v-divider>
+ <v-data-table
+ :headers="headers"
+ :items="clients"
+ item-key="id"
+ select-all
+ :hide-actions="tabIndex > 0 || !showAll"
+ v-model="selected"
+ :search="search"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="loadClient(props.item.id)">
+ <td class="narrow-td">
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.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">
+ <v-btn class="next-arrow" icon><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
+ <div v-if="tabIndex === 0" class="text-xs-right">
+ <v-btn flat color="error" @click="deleteSelected" :disabled="selected.length === 0"><v-icon left>delete</v-icon>Delete selected clients</v-btn>
+ <v-btn flat color="success" @click="newClient"><v-icon left>create</v-icon>Create client</v-btn>
+ </div>
+ <div v-else class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>remove_circle_outline</v-icon>Remove selected clients</v-btn>
+ <v-btn flat color="success"><v-icon left>add_circle_outline</v-icon>Add clients</v-btn>
+ </div>
+ </div>
</template>
<script>
+import { mapState, mapMutations } from 'vuex'
+
export default {
name: 'GroupModuleClientList',
props: ['tabIndex', 'clients'],
@@ -55,12 +74,32 @@ export default {
{ text: 'UUID', value: 'uuid' },
{ sortable: false }
],
- selected: []
+ selected: [],
+ search: ''
+ }
+ },
+ computed: {
+ ...mapState('groups', ['showAll'])
+ },
+ watch: {
+ showAll (value) {
+ if (!value) this.search = ''
+ },
+ clients () {
+ this.selected = []
}
},
methods: {
+ ...mapMutations('groups', ['setActiveTab', 'setTab', 'setDialog']),
loadClient (id) {
this.$store.dispatch('groups/loadClient', { id, tabIndex: this.tabIndex + 1, switchTab: true })
+ },
+ newClient () {
+ this.setTab({ index: 1, item: { tabType: 'client' } })
+ this.setActiveTab(1)
+ },
+ deleteSelected () {
+ this.setDialog({ show: true, type: 'deleteClients', selected: this.selected })
}
}
}
@@ -76,4 +115,15 @@ export default {
margin-left: 20px;
margin-right: -10px;
}
+
+.search-container {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.search-field {
+ margin-top: 0;
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
</style>