summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2018-08-02 23:03:19 +0200
committerUdo Walter2018-08-02 23:03:19 +0200
commite900dfbf886c147e3499e409d8f44cc1c41fde8c (patch)
treef1a30ed4b1e54aa17ab0234fa2a7cffdd96259fc
parenteslint fixes (diff)
downloadbas-e900dfbf886c147e3499e409d8f44cc1c41fde8c.tar.gz
bas-e900dfbf886c147e3499e409d8f44cc1c41fde8c.tar.xz
bas-e900dfbf886c147e3499e409d8f44cc1c41fde8c.zip
[groups] bugfix + add doubleclick to enter group/client + small design change
-rw-r--r--webapp/src/components/GroupModuleClientList.vue7
-rw-r--r--webapp/src/components/GroupModuleClientView.vue159
-rw-r--r--webapp/src/components/GroupModuleDialog.vue26
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue7
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue133
-rw-r--r--webapp/src/store/groups.js1
6 files changed, 179 insertions, 154 deletions
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index 0b60273..62b0d52 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -26,13 +26,14 @@
:search="search"
>
<template slot="items" slot-scope="props">
- <tr @click="loadClient(props.item.id)">
- <td class="narrow-td" @click.stop="props.selected = !props.selected">
+ <tr @click.stop="props.selected = !props.selected" @dblclick="loadClient(props.item.id)">
+ <td class="narrow-td">
<v-checkbox
color="primary"
v-model="props.selected"
hide-details
@click.native.stop
+ @dblclick.native.stop
></v-checkbox>
</td>
<td class="narrow-td">{{ props.item.id }}</td>
@@ -41,7 +42,7 @@
<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>
+ <v-btn class="next-arrow" icon @click="loadClient(props.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</td>
</tr>
</template>
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 50d5507..2f57fca 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -13,21 +13,69 @@
<v-card>
<v-card-text>
<v-layout wrap>
- <v-flex sm6 xs12 order-xs2 order-sm1>
- <v-text-field box v-if="editMode" hide-details class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
+ <v-flex lg4 md6 xs12 order-lg1 order-xs2>
+ <v-layout column>
+ <v-flex>
+ <v-text-field v-if="editMode" prepend-icon="label" class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>label</v-icon><span>Name</span></div>
+ <div class="info-text">{{ client.name || '-' }}</div>
+ </div>
+ </v-flex>
+ <v-flex>
+ <v-autocomplete
+ prepend-icon="group_work"
+ v-if="editMode"
+ class="info-input"
+ :items="$store.state.groups.groupList"
+ v-model="groupIds"
+ offset-y
+ label="Groups"
+ color="primary"
+ multiple
+ item-value="id"
+ >
+ <template slot="selection" slot-scope="data">
+ <v-chip small :selected="data.selected" @input="removeGroup(data.item.id)" close>
+ {{ data.item.name || data.item.id }}
+ </v-chip>
+ </template>
+ <template slot="item" slot-scope="data">
+ <div class="select-item">
+ <v-checkbox class="select-item-checkbox" color="primary" :value="groupIds.includes(data.item.id)" hide-details></v-checkbox>
+ {{ data.item.name || data.item.id }}
+ </div>
+ </template>
+ </v-autocomplete>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>group_work</v-icon><span>Groups</span></div>
+ <div class="info-text">
+ <template v-if="client.groups && client.groups.length > 0">
+ <v-chip v-for="group in client.groups" :key="group.id" small>
+ {{ group.name || group.id }}
+ </v-chip>
+ </template>
+ <span v-else>-</span>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ <v-flex lg4 md6 xs12 order-lg2 order-xs3>
+ <v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
<div v-else class="info-input">
- <div class="body-2">Name</div>
- {{ client.name || '-' }}
+ <div class="body-2 info-heading"><v-icon>description</v-icon><span>Description</span></div>
+ <pre class="info-text">{{ client.description || '-' }}</pre>
</div>
</v-flex>
- <v-flex sm6 xs12 order-xs1 order-sm2 class="text-xs-right">
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
<div class="info-input">
- <v-btn v-if="!editMode" color="primary" flat @click="editInfo">
+ <v-btn v-if="!editMode" color="primary" flat @click="editInfo" class="info-buttons">
<v-icon left>create</v-icon>Edit
</v-btn>
<div v-else>
- <v-btn color="primary" flat @click="cancelEdit">Cancel</v-btn>
- <v-btn color="primary" @click="saveInfo">
+ <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">Cancel</v-btn>
+ <v-btn color="primary" @click="saveInfo" class="info-buttons">
<v-icon left>save</v-icon>Save
</v-btn>
</div>
@@ -35,72 +83,25 @@
</v-flex>
</v-layout>
<v-layout wrap>
- <v-flex sm6 xs12>
- <v-textarea box v-if="editMode" rows="1" auto-grow hide-details class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
- <div v-else class="info-input">
- <div class="body-2">Description</div>
- <pre>{{ client.description || '-' }}</pre>
- </div>
- </v-flex>
- <v-flex sm6 xs12>
- <v-autocomplete
- box
- v-if="editMode"
- class="info-input"
- :items="$store.state.groups.groupList"
- v-model="groupIds"
- hide-details
- offset-y
- label="Groups"
- color="primary"
- multiple
- item-value="id"
- >
- <template slot="selection" slot-scope="data">
- <v-chip :color="chipColor" :text-color="chipTextColor" small :selected="data.selected" @input="removeGroup(data.item.id)" close>
- {{ data.item.name || data.item.id }}
- </v-chip>
- </template>
- <template slot="item" slot-scope="data">
- <div class="select-item">
- <v-checkbox class="select-item-checkbox" color="primary" :value="groupIds.includes(data.item.id)" hide-details></v-checkbox>
- {{ data.item.name || data.item.id }}
- </div>
- </template>
- </v-autocomplete>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="language" v-if="editMode" class="info-input" label="IP Address" color="primary" v-model="info.ip"></v-text-field>
<div v-else class="info-input">
- <div class="body-2">Groups</div>
- <template v-if="client.groups && client.groups.length > 0">
- <v-chip v-for="group in client.groups" :key="group.id" small>
- {{ group.name || group.id }}
- </v-chip>
- </template>
- <span v-else>-</span>
+ <div class="body-2 info-heading"><v-icon>language</v-icon><span>IP Address</span></div>
+ <div class="info-text">{{ client.ip || '-' }}</div>
</div>
</v-flex>
- </v-layout>
- <v-layout wrap>
- <v-flex sm6 xs12>
- <v-text-field box v-if="editMode" hide-details class="info-input" label="IP Address" color="primary" v-model="info.ip"></v-text-field>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="memory" v-if="editMode" class="info-input" label="MAC Address" color="primary" v-model="info.mac"></v-text-field>
<div v-else class="info-input">
- <div class="body-2">IP Address</div>
- {{ client.ip || '-' }}
+ <div class="body-2 info-heading"><v-icon>memory</v-icon><span>MAC Address</span></div>
+ <div class="info-text">{{ client.mac || '-' }}</div>
</div>
</v-flex>
- <v-flex sm6 xs12>
- <v-text-field box v-if="editMode" hide-details class="info-input" label="MAC Address" color="primary" v-model="info.mac"></v-text-field>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="fingerprint" v-if="editMode" class="info-input" label="UUID" color="primary" v-model="info.uuid"></v-text-field>
<div v-else class="info-input">
- <div class="body-2">MAC Address</div>
- {{ client.mac || '-' }}
- </div>
- </v-flex>
- </v-layout>
- <v-layout wrap>
- <v-flex sm6 xs12>
- <v-text-field box v-if="editMode" hide-details class="info-input" label="UUID" color="primary" v-model="info.uuid"></v-text-field>
- <div v-else class="info-input">
- <div class="body-2">UUID</div>
- {{ client.uuid || '-' }}
+ <div class="body-2 info-heading"><v-icon>fingerprint</v-icon><span>UUID</span></div>
+ <div class="info-text">{{ client.uuid || '-' }}</div>
</div>
</v-flex>
</v-layout>
@@ -135,14 +136,6 @@ export default {
else if (newValue.id !== oldValue.id) this.editMode = false
}
},
- computed: {
- chipColor () {
- return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
- },
- chipTextColor () {
- return this.$store.state.settings.dark ? 'white' : 'black'
- }
- },
methods: {
removeGroup (id) {
this.groupIds.splice(this.groupIds.indexOf(id), 1)
@@ -174,8 +167,11 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.info-buttons {
+ margin: 0;
+}
.info-input {
- margin: 10px;
+ margin: 20px;
}
.select-item {
display: flex;
@@ -184,4 +180,15 @@ export default {
.select-item-checkbox {
margin-right: 20px;
}
+.info-heading {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.info-heading > span {
+ margin-left: 10px;
+}
+.info-text {
+ margin-left: 34px;
+}
</style>
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 92cb16b..97a3d20 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -7,6 +7,8 @@
"title-remove-client": "Remove this client? | Remove these {0} clients?",
"title-add-group": "Add groups | Add this group? | Add these {0} groups?",
"title-add-client": "Add clients | Add this client? | Add these {0} clients?",
+ "delete-instead-remove-group": "Permanently delete group | Permanently delete groups",
+ "delete-instead-remove-client": "Permanently delete client | Permanently delete clients",
"new": "New"
},
"de": {
@@ -16,7 +18,8 @@
"title-remove-client": "Diesen Clienten entfernen? | Diese {0} Clienten entfernen?",
"title-add-group": "Gruppen hinzufügen | Diese Gruppe hinzufügen? | Diese {0} Gruppen hinzufügen?",
"title-add-client": "Clienten hinzufügen | Diesen Clienten hinzufügen? | Diese {0} Clienten hinzufügen?",
- "delete-instead-remove": "Gruppen komplett löschen",
+ "delete-instead-remove-group": "Gruppe dauerhaft löschen | Gruppen dauerhaft löschen",
+ "delete-instead-remove-client": "Client dauerhaft löschen | Clienten dauerhaft löschen",
"new": "Neu"
}
}
@@ -33,7 +36,7 @@
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ title }}</div>
</v-card-title>
- <v-card-text v-if="dialog.info.action === 'add'" class="table-container">
+ <v-card-text v-if="action === 'add'" class="table-container">
<v-layout justify-space-between align-center>
<v-btn flat color="success" @click="newItem"><v-icon left>create</v-icon>{{ $t('new') }}</v-btn>
<v-text-field class="search-field" v-model="search" hide-details prepend-inner-icon="search"></v-text-field>
@@ -64,11 +67,11 @@
</template>
</v-data-table>
</v-card-text>
- <v-card-text v-else style="margin: 10px">
+ <v-card-text v-else class="selected-list">
<v-checkbox
class="delete-checkbox"
v-if="dialog.info.action === 'remove'"
- :label="$t('delete-instead-remove')"
+ :label="$tc('delete-instead-remove-' + dialog.info.type, selectedCount)"
color="error"
v-model="deleteInsteadOfRemove"
hide-details
@@ -79,7 +82,7 @@
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
- <v-btn :color="dialog.info.action === 'add' ? 'success' : 'error'" @click="submitAction">{{ $t(action) }}</v-btn>
+ <v-btn :color="action === 'add' ? 'success' : 'error'" @click="submitAction">{{ $t(action) }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -106,9 +109,11 @@ export default {
action () {
return this.dialog.info.action === 'remove' && this.deleteInsteadOfRemove ? 'delete' : this.dialog.info.action
},
+ selectedCount () {
+ return this.action === 'add' ? this.selected.length : (this.dialog.info.selected ? this.dialog.info.selected.length : 0)
+ },
title () {
- const count = this.dialog.info.action === 'add' ? this.selected.length : this.dialog.info.selected.length
- return this.$tc('title-' + this.action + '-' + this.dialog.info.type, count, [count])
+ return this.$tc('title-' + this.action + '-' + this.dialog.info.type, this.selectedCount, [this.selectedCount])
},
items () {
if (this.dialog.info.type === 'group') return this.$store.state.groups.groupList
@@ -132,8 +137,8 @@ export default {
'add': { 'group': 'addSubgroups', 'client': 'addClients' }
}
var data = { ...this.dialog.info }
- if (this.dialog.info.action === 'add') data.selected = this.selected
- this.$store.dispatch('groups/' + actionMap[this.dialog.info.action][this.dialog.info.type], data)
+ if (this.action === 'add') data.selected = this.selected
+ this.$store.dispatch('groups/' + actionMap[this.action][this.dialog.info.type], data)
this.setDialog({ show: false })
},
newItem () {
@@ -164,4 +169,7 @@ export default {
margin-top: 0;
margin-bottom: 20px;
}
+.selected-list {
+ padding: 30px;
+}
</style>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 7d559b6..f66bcbc 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -26,20 +26,21 @@
:search="search"
>
<template slot="items" slot-scope="props">
- <tr @click="loadGroup(props.item.id)">
- <td @click.stop="props.selected = !props.selected">
+ <tr @click.stop="props.selected = !props.selected" @dblclick="loadGroup(props.item.id)">
+ <td>
<v-checkbox
color="primary"
v-model="props.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><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn class="next-arrow" icon @click="loadGroup(props.item.id)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</td>
</tr>
</template>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index f20aff7..602e05d 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -13,72 +13,75 @@
<v-card>
<v-card-text>
<v-layout wrap>
- <v-flex sm6 xs12 order-xs2 order-sm1>
- <v-text-field box v-if="editMode" hide-details class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
+ <v-flex lg4 md6 xs12 order-lg1 order-xs2>
+ <v-layout column>
+ <v-flex>
+ <v-text-field prepend-icon="label" v-if="editMode" class="info-input" label="Name" color="primary" v-model="info.name"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>label</v-icon><span>Name</span></div>
+ <div class="info-text">{{ group.name || '-' }}</div>
+ </div>
+ </v-flex>
+ <v-flex>
+ <v-autocomplete
+ prepend-icon="group_work"
+ v-if="editMode"
+ class="info-input"
+ :items="$store.state.groups.groupList"
+ v-model="parentIds"
+ offset-y
+ label="Parents"
+ color="primary"
+ multiple
+ item-value="id"
+ >
+ <template slot="selection" slot-scope="data">
+ <v-chip small :selected="data.selected" @input="removeParent(data.item.id)" close>
+ {{ data.item.name || data.item.id }}
+ </v-chip>
+ </template>
+ <template slot="item" slot-scope="data">
+ <div class="select-item">
+ <v-checkbox class="select-item-checkbox" color="primary" :value="parentIds.includes(data.item.id)" hide-details></v-checkbox>
+ {{ data.item.name || data.item.id }}
+ </div>
+ </template>
+ </v-autocomplete>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>description</v-icon><span>Parents</span></div>
+ <div class="info-text">
+ <template v-if="group.parents && group.parents.length > 0">
+ <v-chip v-for="parent in group.parents" :key="parent.id" small>
+ {{ parent.name || parent.id }}
+ </v-chip>
+ </template>
+ <span v-else>-</span>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ <v-flex lg4 md6 xs12 order-lg2 order-xs3>
+ <v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
<div v-else class="info-input">
- <div class="body-2">Name</div>
- {{ group.name || '-' }}
+ <div class="body-2 info-heading"><v-icon>description</v-icon><span>Description</span></div>
+ <pre class="info-text">{{ group.description || '-' }}</pre>
</div>
</v-flex>
- <v-flex sm6 xs12 order-xs1 order-sm2 class="text-xs-right">
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
<div class="info-input">
- <v-btn v-if="!editMode" color="primary" flat @click="editInfo">
+ <v-btn v-if="!editMode" color="primary" flat @click="editInfo" class="info-buttons">
<v-icon left>create</v-icon>Edit
</v-btn>
<div v-else>
- <v-btn color="primary" flat @click="cancelEdit">Cancel</v-btn>
- <v-btn color="primary" @click="saveInfo">
+ <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">Cancel</v-btn>
+ <v-btn color="primary" @click="saveInfo" class="info-buttons">
<v-icon left>save</v-icon>Save
</v-btn>
</div>
</div>
</v-flex>
</v-layout>
- <v-layout wrap>
- <v-flex sm6 xs12>
- <v-textarea box v-if="editMode" rows="1" auto-grow hide-details class="info-input" label="Description" color="primary" v-model="info.description"></v-textarea>
- <div v-else class="info-input">
- <div class="body-2">Description</div>
- <pre>{{ group.description || '-' }}</pre>
- </div>
- </v-flex>
- <v-flex sm6 xs12>
- <v-autocomplete
- box
- v-if="editMode"
- class="info-input"
- :items="$store.state.groups.groupList"
- v-model="parentIds"
- hide-details
- offset-y
- label="Parents"
- color="primary"
- multiple
- item-value="id"
- >
- <template slot="selection" slot-scope="data">
- <v-chip :color="chipColor" :text-color="chipTextColor" small :selected="data.selected" @input="removeParent(data.item.id)" close>
- {{ data.item.name || data.item.id }}
- </v-chip>
- </template>
- <template slot="item" slot-scope="data">
- <div class="select-item">
- <v-checkbox class="select-item-checkbox" color="primary" :value="parentIds.includes(data.item.id)" hide-details></v-checkbox>
- {{ data.item.name || data.item.id }}
- </div>
- </template>
- </v-autocomplete>
- <div v-else class="info-input">
- <div class="body-2">Parents</div>
- <template v-if="group.parents && group.parents.length > 0">
- <v-chip v-for="parent in group.parents" :key="parent.id" small>
- {{ parent.name || parent.id }}
- </v-chip>
- </template>
- <span v-else>-</span>
- </div>
- </v-flex>
- </v-layout>
</v-card-text>
</v-card>
<template v-if="group.id">
@@ -120,14 +123,6 @@ export default {
else if (newValue.id !== oldValue.id) this.editMode = false
}
},
- computed: {
- chipColor () {
- return this.$store.state.settings.dark ? 'grey darken-1' : 'white'
- },
- chipTextColor () {
- return this.$store.state.settings.dark ? 'white' : 'black'
- }
- },
methods: {
removeParent (id) {
this.parentIds.splice(this.parentIds.indexOf(id), 1)
@@ -159,8 +154,11 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.info-buttons {
+ margin: 0;
+}
.info-input {
- margin: 10px;
+ margin: 20px;
}
.select-item {
display: flex;
@@ -169,4 +167,15 @@ export default {
.select-item-checkbox {
margin-right: 20px;
}
+.info-heading {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.info-heading > span {
+ margin-left: 10px;
+}
+.info-text {
+ margin-left: 34px;
+}
</style>
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index d11f9fe..0a55924 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -143,7 +143,6 @@ export default {
addSubgroups (context, { tabIndex, selected }) {
const id = context.state.tabChain[tabIndex].id
const ids = selected.map(x => x.id)
- console.log(ids)
axios.post('/api/groups/addSubgroups', { id, ids }).then(() => {
context.dispatch('reload')
})