summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-04-12 05:43:59 +0200
committerUdo Walter2019-04-12 05:43:59 +0200
commit6af95ffaae562efc72b8d157ab4f4bc73e02452a (patch)
tree18c4ffb3c532425b06546457d878719b91999c77 /webapp
parent[webapp/groups] small bugfix (diff)
downloadbas-6af95ffaae562efc72b8d157ab4f4bc73e02452a.tar.gz
bas-6af95ffaae562efc72b8d157ab4f4bc73e02452a.tar.xz
bas-6af95ffaae562efc72b8d157ab4f4bc73e02452a.zip
[webapp/groups] performance improvement; tab order fix;
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue12
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue25
2 files changed, 22 insertions, 15 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 76c7a67..e5e3630 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -34,7 +34,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
<div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details></v-text-field>
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details tabindex="1"></v-text-field>
<div v-else>{{ client.name || '-' }}</div>
</div>
</div>
@@ -85,7 +85,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
<div class="info-text">
- <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description"></v-textarea>
+ <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description" tabindex="2"></v-textarea>
<div v-else style="white-space: pre-wrap;">{{ client.description || '-' }}</div>
</div>
</div>
@@ -102,7 +102,7 @@
</div>
<div v-else>
<v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" @click="saveData" class="info-buttons">
+ <v-btn color="primary" @click="saveData" class="info-buttons" tabindex="6">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
</div>
@@ -114,7 +114,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>language</v-icon><span>{{ $t('ip') }}</span></div>
<div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.ip" hide-details></v-text-field>
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.ip" hide-details tabindex="3"></v-text-field>
<div v-else>{{ client.ip || '-' }}</div>
</div>
</div>
@@ -123,7 +123,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>memory</v-icon><span>{{ $t('mac') }}</span></div>
<div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.mac" hide-details></v-text-field>
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.mac" hide-details tabindex="4"></v-text-field>
<div v-else>{{ client.mac || '-' }}</div>
</div>
</div>
@@ -132,7 +132,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>fingerprint</v-icon><span>{{ $t('uuid') }}</span></div>
<div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.uuid" hide-details></v-text-field>
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.uuid" hide-details tabindex="5"></v-text-field>
<div v-else>{{ client.uuid || '-' }}</div>
</div>
</div>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 94e7d6f..d4f404b 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -49,7 +49,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
<div class="info-text">
- <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details></v-text-field>
+ <v-text-field v-if="editMode" class="info-input" color="primary" v-model="info.name" hide-details tabindex="1"></v-text-field>
<div v-else>{{ group.name || '-' }}</div>
</div>
</div>
@@ -99,7 +99,7 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
<div class="info-text">
- <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description"></v-textarea>
+ <v-textarea v-if="editMode" class="info-input" rows="1" auto-grow hide-details color="primary" v-model="info.description" tabindex="2"></v-textarea>
<div v-else style="white-space: pre-wrap;">{{ group.description || '-' }}</div>
</div>
</div>
@@ -146,7 +146,7 @@
</div>
<div v-else>
<v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" @click="saveData" class="info-buttons">
+ <v-btn color="primary" @click="saveData" class="info-buttons" tabindex="3">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
</div>
@@ -154,7 +154,7 @@
</v-flex>
</v-layout>
</v-expansion-panel-content>
- <v-expansion-panel-content v-if="group.id !== 'create'" lazy class="non-selectable">
+ <v-expansion-panel-content v-if="group.id !== 'create'" class="non-selectable">
<template #header>
<div class="panel-header primary--text">
<span>{{ group.subgroups ? group.subgroups.length : 0 }} {{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
@@ -170,9 +170,10 @@
></v-switch>
</div>
</template>
- <group-module-group-list class="selectable" :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
+ <group-module-group-list v-if="isMounted" class="selectable" :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
+ <div v-else></div>
</v-expansion-panel-content>
- <v-expansion-panel-content v-if="group.id !== 'create'" lazy class="non-selectable">
+ <v-expansion-panel-content v-if="group.id !== 'create'" class="non-selectable">
<template #header>
<div class="panel-header primary--text">
<span>{{ group.clients ? group.clients.length : 0 }} {{ $t('clients') }}</span>
@@ -188,7 +189,8 @@
></v-switch>
</div>
</template>
- <group-module-client-list class="selectable" :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
+ <group-module-client-list v-if="isMounted" class="selectable" :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
+ <div v-else></div>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
@@ -218,6 +220,7 @@ export default {
data () {
return {
section: 0,
+ isMounted: false,
editMode: false,
info: {
name: '',
@@ -308,6 +311,11 @@ export default {
},
created () {
if (this.group.id === 'create') this.editInfo()
+ },
+ mounted () {
+ setTimeout(() => {
+ this.isMounted = true
+ }, 10)
}
}
</script>
@@ -322,9 +330,8 @@ export default {
.show-toggle {
padding: 0;
- margin: 0;
+ margin: -2px 16px -2px 0;
flex: initial;
- margin-right: 16px;
}
.info-buttons {