summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/GroupModuleClientView.vue
blob: 7a7a4a875a0ea9fdfe77e1248e6ac4bc42f3dad0 (plain) (tree)
1
2
3
4
5
6
7
8
9


         





                                 

         





                                  







                                   

                       


                                                   
                                                                                                                                                             
                                               
                                                                                                            




                                                                       
                                           




                                                        
                                       
















                                                                                                                                                  
                                                                                                                   












                                                                                   
                                                                                                                                                                                            
                                           
                                                                                                                     
                                                                          

                   
                                                                     
                                    
                                                                                                  
                                                            

                          
                                                                                                               
                                                                              
                                                            





                        
                               
                                                                                                                                                        
                                           
                                                                                                         
                                                                 

                   
                               
                                                                                                                                                        
                                           
                                                                                                        
                                                                  

                   
                               
                                                                                                                                                               
                                           
                                                                                                              
                                                                   



                    






                                
                                

            





                        











                                                                 









                                                        
                                                                                 


                           
                                

                                                                                         








                                                 






                                                                   


               
             
               
 






                       










                      
        
<i18n>
{
  "en": {
    "name": "Name",
    "description": "Description",
    "groups": "Groups",
    "ip": "IP Address",
    "mac": "MAC Address",
    "uuid": "UUID"
  },
  "de": {
    "name": "Name",
    "description": "Beschreibung",
    "groups": "Gruppen",
    "ip": "IP Adresse",
    "mac": "MAC Adresse",
    "uuid": "UUID"
  }
}
</i18n>

<template>
  <div>
    <v-subheader>Info</v-subheader>
    <v-card>
      <v-card-text>
        <v-layout wrap>
          <v-flex lg4 md6 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="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
                  <div class="info-text">{{ client.name || '-' }}</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="groupIds"
                  offset-y
                  :label="$t('groups')"
                  color="primary"
                  multiple
                  item-value="id"
                >
                  <template slot="selection" slot-scope="data">
                    <v-chip small :selected="data.selected" @input="removeGroup(data.item.id)"  close>
                      {{ data.item.name || data.item.id }}
                    </v-chip>
                  </template>
                  <template slot="item" slot-scope="data">
                    <div class="select-item">
                      <v-checkbox class="select-item-checkbox" color="primary" :value="groupIds.includes(data.item.id)" hide-details></v-checkbox>
                      {{ data.item.name || data.item.id }}
                    </div>
                  </template>
                </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-text">
                    <template v-if="client.groups && client.groups.length > 0">
                      <v-chip v-for="group in client.groups" :key="group.id" small>
                        {{ group.name || group.id }}
                      </v-chip>
                    </template>
                    <span v-else>-</span>
                  </div>
                </div>
              </v-flex>
            </v-layout>
          </v-flex>
          <v-flex lg4 md6 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="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
              <pre class="info-text">{{ client.description || '-' }}</pre>
            </div>
          </v-flex>
          <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
            <div class="info-input">
              <v-btn v-if="!editMode" color="primary" flat @click="editInfo" class="info-buttons">
                <v-icon left>create</v-icon>{{ $t('edit') }}
              </v-btn>
              <div v-else>
                <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
                <v-btn color="primary" @click="saveInfo" class="info-buttons">
                  <v-icon left>save</v-icon>{{ $t('save') }}
                </v-btn>
              </div>
            </div>
          </v-flex>
        </v-layout>
        <v-layout wrap>
          <v-flex lg4 md6 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="body-2 info-heading"><v-icon>language</v-icon><span>{{ $t('ip') }}</span></div>
              <div class="info-text">{{ client.ip || '-' }}</div>
            </div>
          </v-flex>
          <v-flex lg4 md6 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="body-2 info-heading"><v-icon>memory</v-icon><span>{{ $t('mac') }}</span></div>
              <div class="info-text">{{ client.mac || '-' }}</div>
            </div>
          </v-flex>
          <v-flex lg4 md6 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="body-2 info-heading"><v-icon>fingerprint</v-icon><span>{{ $t('uuid') }}</span></div>
              <div class="info-text">{{ client.uuid || '-' }}</div>
            </div>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'GroupModuleClientView',
  props: ['tabIndex', 'client'],
  data () {
    return {
      editMode: false,
      info: {
        name: '',
        description: '',
        ip: '',
        mac: '',
        uuid: ''
      },
      groupIds: []
    }
  },
  created () {
    if (!this.client.id) this.editInfo()
  },
  watch: {
    client (newValue, oldValue) {
      if (!newValue.id) this.editInfo()
      else if (newValue.id !== oldValue.id) this.editMode = false
    }
  },
  methods: {
    removeGroup (id) {
      this.groupIds.splice(this.groupIds.indexOf(id), 1)
    },
    editInfo () {
      this.editMode = true
      this.info.name = this.client.name
      this.info.description = this.client.description
      this.groupIds = this.client.groups ? this.client.groups.map(x => x.id) : []
    },
    cancelEdit () {
      this.editMode = false
      if (this.client.id) return
      this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
      this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
    },
    saveInfo () {
      this.$store.dispatch('groups/saveClient', {
        id: this.client.id,
        info: this.info,
        groupIds: this.groupIds,
        tabIndex: this.tabIndex
      })
      this.editMode = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info-buttons {
  margin: 0;
}
.info-input {
  margin: 20px;
}
.select-item {
  display: flex;
  align-items: center;
}
.select-item-checkbox {
  margin-right: 20px;
}
.info-heading {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.info-heading > span {
  margin-left: 10px;
}
.info-text {
  margin-left: 34px;
}
</style>