summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientList.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModuleClientList.vue')
-rw-r--r--webapp/src/components/GroupModuleClientList.vue80
1 files changed, 51 insertions, 29 deletions
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index a1036aa..8f9c306 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -8,35 +8,47 @@
</i18n>
<template>
- <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="props.selected = !props.selected">
- <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 icon @click.stop><v-icon color="primary">edit</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </v-data-table>
+ <div>
+ <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-if="tabIndex > 0" 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 v-else class="text-xs-right">
+ <v-btn flat color="error"><v-icon left>delete</v-icon>Delete selected clients</v-btn>
+ <v-btn flat color="success"><v-icon left>create</v-icon>Create client</v-btn>
+ </div>
+ </div>
</template>
<script>
@@ -61,6 +73,11 @@ export default {
clients () {
return this.$store.state.groups.groupChain[this.tabIndex].clients
}
+ },
+ methods: {
+ loadClient (id) {
+ this.$store.dispatch('groups/loadClientIntoTab', id)
+ }
}
}
</script>
@@ -70,4 +87,9 @@ export default {
.narrow-td {
width: 10px;
}
+
+.next-arrow {
+ margin-left: 20px;
+ margin-right: -10px;
+}
</style>