summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientView.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 02:33:52 +0100
committerUdo Walter2019-02-24 02:33:52 +0100
commit813195e3dfb5baae09aa11cddeef12fb0b9fb49b (patch)
tree58562c85d76efdad41afcd0664c5a8cdc8cb4a55 /webapp/src/components/GroupModuleClientView.vue
parent[webapp/alerts] Remove unnecessary code which produced vue warnings (diff)
downloadbas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.tar.gz
bas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.tar.xz
bas-813195e3dfb5baae09aa11cddeef12fb0b9fb49b.zip
[webapp/groups] rework old tables to new data table
slightly redesigned the editing of groups and clients
Diffstat (limited to 'webapp/src/components/GroupModuleClientView.vue')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue143
1 files changed, 94 insertions, 49 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 03d9642..e47273b 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -30,60 +30,75 @@
<v-flex lg4 sm6 xs12 order-lg1 order-xs2>
<v-layout column>
<v-flex>
- <v-text-field v-if="editMode" prepend-icon="label" class="info-input" :label="$t('name')" color="primary" v-model="info.name"></v-text-field>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
- <div class="info-text">{{ client.name || '-' }}</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>
+ <div v-else>{{ client.name || '-' }}</div>
+ </div>
</div>
</v-flex>
<v-flex>
- <v-autocomplete
- prepend-icon="device_hub"
- v-if="editMode"
- class="info-input"
- :items="$store.state.groups.groupList"
- v-model="groups"
- :menu-props="{ offsetY: '' }"
- :label="$t('groups')"
- color="primary"
- multiple
- item-value="id"
- item-text="name"
- return-object
- small-chips
- deletable-chips
- >
- </v-autocomplete>
- <div v-else class="info-input">
- <div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('groups') }}</span></div>
+ <div class="info-box">
+ <div class="body-2 info-heading">
+ <v-icon>device_hub</v-icon><span>{{ $t('groups') }}</span>
+ <v-menu v-if="editMode" offset-y :close-on-content-click="false" :max-width="400" lazy>
+ <v-btn slot="activator" small icon class="info-heading-button"><v-icon>edit</v-icon></v-btn>
+ <v-card>
+ <data-table ref="datatable" v-model="groups" :headers="headers" :items="groupList" menu-mode></data-table>
+ </v-card>
+ </v-menu>
+ </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>
+ <div>
+ <v-chip
+ v-for="(group, index) in groupChips"
+ :key="group.id"
+ v-if="index <= 5"
+ small
+ :close="editMode"
+ @input="removeGroupChip(index)"
+ >
{{ group.name || group.id }}
</v-chip>
- </template>
- <span v-else>-</span>
+ <span v-if="groupChips.length > 5" class="and-more-chip">...</span>
+ <span v-if="groupChips && groupChips.length === 0">-</span>
+ </div>
</div>
</div>
</v-flex>
<v-flex>
- <v-select v-if="editMode" class="info-input" prepend-icon="list" clearable item-text="name" item-value="id" :menu-props="{ offsetY: '' }" :label="$t('config')" color="primary" v-model="info.configId" :items="configList"></v-select>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>list</v-icon><span>{{ $t('config') }}</span></div>
- <div class="info-text">{{ configName || '-' }}</div>
+ <div class="info-text">
+ <v-select v-if="editMode"
+ class="info-input"
+ clearable
+ item-text="name"
+ item-value="id"
+ :menu-props="{ offsetY: '' }"
+ hide-details
+ color="primary"
+ v-model="info.configId"
+ :items="configList"
+ ></v-select>
+ <div v-else>{{ configName || '-' }}</div>
+ </div>
</div>
</v-flex>
</v-layout>
</v-flex>
<v-flex lg4 sm6 xs12 order-lg2 order-xs3>
- <v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" :label="$t('description')" color="primary" v-model="info.description"></v-textarea>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
- <div class="info-text">{{ client.description || '-' }}</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>
+ <div v-else style="white-space: pre-wrap;">{{ client.description || '-' }}</div>
+ </div>
</div>
</v-flex>
<v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
- <div class="info-input">
+ <div class="info-box">
<div v-if="!editMode">
<v-btn color="error" flat @click="deleteClient" class="info-buttons">
<v-icon left>delete</v-icon>{{ $t('delete') }}
@@ -103,24 +118,30 @@
</v-layout>
<v-layout wrap>
<v-flex lg4 sm6 xs12>
- <v-text-field prepend-icon="language" v-if="editMode" class="info-input" :label="$t('ip')" color="primary" v-model="info.ip"></v-text-field>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>language</v-icon><span>{{ $t('ip') }}</span></div>
- <div class="info-text">{{ client.ip || '-' }}</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>
+ <div v-else>{{ client.ip || '-' }}</div>
+ </div>
</div>
</v-flex>
<v-flex lg4 sm6 xs12>
- <v-text-field prepend-icon="memory" v-if="editMode" class="info-input" :label="$t('mac')" color="primary" v-model="info.mac"></v-text-field>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>memory</v-icon><span>{{ $t('mac') }}</span></div>
- <div class="info-text">{{ client.mac || '-' }}</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>
+ <div v-else>{{ client.mac || '-' }}</div>
+ </div>
</div>
</v-flex>
<v-flex lg4 sm6 xs12>
- <v-text-field prepend-icon="fingerprint" v-if="editMode" class="info-input" :label="$t('uuid')" color="primary" v-model="info.uuid"></v-text-field>
- <div v-else class="info-input">
+ <div class="info-box">
<div class="body-2 info-heading"><v-icon>fingerprint</v-icon><span>{{ $t('uuid') }}</span></div>
- <div class="info-text">{{ client.uuid || '-' }}</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>
+ <div v-else>{{ client.uuid || '-' }}</div>
+ </div>
</div>
</v-flex>
</v-layout>
@@ -130,11 +151,15 @@
</template>
<script>
-import { mapMutations } from 'vuex'
+import DataTable from '@/components/DataTable'
+import { mapState, mapMutations } from 'vuex'
export default {
name: 'GroupModuleClientView',
props: ['tabIndex', 'client'],
+ components: {
+ DataTable
+ },
data () {
return {
editMode: false,
@@ -150,11 +175,18 @@ export default {
}
},
computed: {
- configList () {
- return this.$store.state.groups.configList
- },
+ ...mapState('groups', ['groupList', 'configList']),
configName () {
return this.$store.state.groups.configNames[this.client.configId]
+ },
+ groupChips () {
+ if (this.editMode) return this.groups
+ else return this.client.groups
+ },
+ headers () {
+ return [
+ { key: 'name', text: this.$t('name') }
+ ]
}
},
watch: {
@@ -165,6 +197,9 @@ export default {
},
methods: {
...mapMutations('groups', ['setDialog']),
+ removeGroupChip (index) {
+ this.groups.splice(index, 1)
+ },
editInfo () {
this.editMode = true
this.info.name = this.client.name
@@ -215,12 +250,14 @@ export default {
margin: 0;
}
-.info-input {
+.info-box {
padding: 20px;
}
-.info-input >>> input, .info-input >>> textarea {
- font-family: 'Roboto Mono';
+.info-input {
+ margin: 0;
+ padding: 0 0 1px 0;
+ overflow: hidden;
}
.info-heading {
@@ -229,12 +266,20 @@ export default {
margin-bottom: 10px;
}
+.info-heading-button {
+ margin: -2px 0 -2px 10px;
+}
+
.info-heading > span {
margin-left: 10px;
}
.info-text {
+ overflow-x: auto;
margin-left: 34px;
font-family: 'Roboto Mono';
+ min-height: 34px;
+ display: flex;
+ align-items: center;
}
</style>