summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientView.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModuleClientView.vue')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue86
1 files changed, 64 insertions, 22 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index fae52fe..db8a2c6 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -26,6 +26,13 @@
<template>
<div>
<v-card style="margin-top: 24px">
+ <div class="header-div">
+ <div class="header-div-text">
+ <v-icon class="mr-2">list_alt</v-icon>
+ <span>Info</span>
+ </div>
+ </div>
+ <v-divider></v-divider>
<v-card-text>
<v-layout wrap>
<v-flex lg4 sm6 xs12 order-lg1 order-xs2>
@@ -60,27 +67,10 @@
</div>
</div>
</v-flex>
- <v-flex>
- <div class="info-box">
- <div class="body-2 info-heading"><v-icon>list</v-icon><span>{{ $t('config') }}</span></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>{{ client.config ? (client.config.name || client.config.id) : '-' }}</div>
- </div>
- </div>
- </v-flex>
+
</v-layout>
</v-flex>
+
<v-flex lg4 sm6 xs12 order-lg2 order-xs3>
<div class="info-box">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
@@ -109,6 +99,39 @@
</div>
</v-flex>
</v-layout>
+
+ <v-layout>
+ <v-flex :lg4="editMode" :sm6="editMode" :xs12="editMode">
+ <div class="info-box">
+ <div class="body-2 info-heading"><v-icon>list</v-icon><span>{{ $t('config') }}</span></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 style="display: flex">
+ <template v-for="(config, index) in client.configPath">
+ <v-icon :key="index + 'icon'" v-if="index" style="margin: 0 -6px">keyboard_arrow_left</v-icon>
+ <config-chip
+ :key="index"
+ :config="config"
+ :assigned="config.source && config.source.type === 'CLIENT' && config.source.id === client.id"
+ :active="index === 0"
+ ></config-chip>
+ </template>
+ </div>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+
<v-layout wrap>
<v-flex lg4 sm6 xs12>
<div class="info-box">
@@ -145,6 +168,7 @@
<script>
import SelectBox from '@/components/SelectBox'
+import ConfigChip from '@/components/ConfigChip'
import { mapState, mapMutations } from 'vuex'
export default {
@@ -159,7 +183,8 @@ export default {
}
},
components: {
- SelectBox
+ SelectBox,
+ ConfigChip
},
data () {
return {
@@ -234,6 +259,10 @@ export default {
},
openGroup (group) {
this.$store.dispatch('groups/loadGroup', { id: group.id, name: group.name, tabIndex: this.tabIndex, asParent: true, switchTab: true })
+ },
+ getConfigChipColor (index, config) {
+ if (config.source && config.source.type === 'CLIENT' && config.source.id === this.client.id) return 'primary'
+ if (index === 0) return 'success'
}
},
created () {
@@ -244,8 +273,21 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.info-buttons {
- margin: 0;
+.header-div {
+ user-select: none;
+ padding-left: 16px;
+ height: 48px;
+ font-weight: bold;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.header-div > .header-div-text {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
.chip-container {