From 813195e3dfb5baae09aa11cddeef12fb0b9fb49b Mon Sep 17 00:00:00 2001
From: Udo Walter
Date: Sun, 24 Feb 2019 01:33:52 +0000
Subject: [webapp/groups] rework old tables to new data table

slightly redesigned the editing of groups and clients
---
 webapp/src/components/GroupModuleClientView.vue | 143 ++++++++++++++++--------
 1 file changed, 94 insertions(+), 49 deletions(-)

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

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

