From 0dcbc17552e4f99692ad9daa793b78909e497b32 Mon Sep 17 00:00:00 2001
From: Udo Walter
Date: Thu, 24 Oct 2019 14:40:41 +0000
Subject: [groups] Add first implementation of the new config path ui

---
 webapp/src/components/GroupModuleClientView.vue | 86 ++++++++++++++++++-------
 1 file changed, 64 insertions(+), 22 deletions(-)

(limited to 'webapp/src/components/GroupModuleClientView.vue')

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 {
-- 
cgit v1.2.3-55-g7522

