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


         
                   
                     
                       
                             
                        

         
                   
                      
                       
                                
                        




          







































































































                                                                                                                                         


           
                                                                    

                                                                      
                                             


                               


                   
                       




                  
               
                         
                         
                         


            
                   
                           

     
             
                                                                  
    

                                
                                         



                                                                                      

     
            
                                                                                                                          
                        
                                
                                                                              
                                                                                              
      


                                                         
     





                                                                   

                       
                    


              

                  
                

                      

 




                     
                
                      
                      
 
 

                                
                
                      
                      
 
        
<i18n>
{
  "en": {
    "info": "Info",
    "showall": "All",
    "groups": "Groups",
    "subgroups": "Subgroups",
    "clients": "Clients"
  },
  "de": {
    "info": "Info",
    "showall": "Alle",
    "groups": "Groups",
    "subgroups": "Untergruppen",
    "clients": "Clients"
  }
}
</i18n>

<template>
  <div>
    <div v-if="!settings.collapsedView">

      <v-card v-if="group.id !== 0" 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>
          <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }">
            <v-icon>expand_less</v-icon>
          </v-btn>
          <v-switch
            v-if="group.id !== 'create'"
            :input-value="group.tabShowAll"
            @change="setShowAll"
            class="show-toggle"
            :label="$t('showall')"
            hide-details
            color="primary"
          ></v-switch>
        </div>
        <group-module-group-info :tabIndex="tabIndex" :group="group" />
      </v-card>

      <v-card v-if="group.id !== 'create'" style="margin-top: 24px">
        <div class="header-div">
          <div class="header-div-text">
            <v-icon class="mr-2">category</v-icon>
            {{ group.subgroups ? group.subgroups.length : 0 }}
            <span class="ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
          </div>
          <v-btn v-if="group.id === 0" icon @click="toggleCollapsedView" :class="{ 'upside-down': settings.collapsedView }">
            <v-icon>expand_less</v-icon>
          </v-btn>
          <v-switch
            v-if="group.id === 0"
            :input-value="group.tabShowAll"
            @change="setShowAll"
            class="show-toggle"
            :label="$t('showall')"
            hide-details
            color="primary"
          ></v-switch>
        </div>
        <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
      </v-card>

      <v-card v-if="group.id !== 'create'" style="margin-top: 24px">
        <div class="header-div">
          <div class="header-div-text">
            <v-icon class="mr-2">computer</v-icon>
            {{ group.clients ? group.clients.length : 0 }}
            <span class="ml-1">{{ $t('clients') }}</span>
          </div>
        </div>
        <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
      </v-card>
    </div>

    <v-card v-else style="margin-top: 24px">
      <v-tabs v-model="activeTab" grow hide-slider>
        <v-tab v-if="group.id !== 0" class="groupview-tab" :class="(group.id !== 0 && activeTab === 0) ? 'primary--text' : ''">
          <v-icon :color="(group.id !== 0 && activeTab === 0) ? 'primary' : ''">list_alt</v-icon>
          <span class="hidden-xs-only ml-2">Info</span>
        </v-tab>
        <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 0 : 1) ? 'primary--text' : ''">
          <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 0 : 1) ? 'primary' : ''">category</v-icon>
          {{ group.subgroups ? group.subgroups.length : 0 }}
          <span class="hidden-xs-only ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
        </v-tab>
        <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 1 : 2) ? 'primary--text' : ''">
          <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 1 : 2) ? 'primary' : ''">computer</v-icon>
          {{ group.clients ? group.clients.length : 0 }}
          <span class="hidden-xs-only ml-1">{{ $t('clients') }}</span>
        </v-tab>

        <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView">
          <v-icon>expand_more</v-icon>
        </v-btn>
        <v-switch
          v-if="group.id !== 'create'"
          :input-value="group.tabShowAll"
          @change="setShowAll"
          class="show-toggle"
          :label="$t('showall')"
          hide-details
          color="primary"
        ></v-switch>

        <v-tabs-items touchless>
          <v-tab-item v-if="group.id !== 0" lazy :transition="false" :reverse-transition="false">
            <group-module-group-info :tabIndex="tabIndex" :group="group" />
          </v-tab-item>
          <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
            <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
          </v-tab-item>
          <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
            <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
          </v-tab-item>
        </v-tabs-items>
      </v-tabs>
    </v-card>
  </div>
</template>

<script>
import GroupModuleGroupInfo from '@/components/GroupModuleGroupInfo'
import GroupModuleGroupList from '@/components/GroupModuleGroupList'
import GroupModuleClientList from '@/components/GroupModuleClientList'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'GroupModuleGroupView',
  props: {
    group: {
      type: Object,
      default: () => {}
    },
    tabIndex: {
      type: Number
    }
  },
  components: {
    GroupModuleGroupInfo,
    GroupModuleGroupList,
    GroupModuleClientList
  },
  data () {
    return {
      activeTab: 0,
      showAllClicked: false
    }
  },
  computed: {
    ...mapState('groups', ['groupList', 'configList', 'settings'])
  },
  watch: {
    group (newValue, oldValue) {
      if (!oldValue.isPlaceholder) return

      if (newValue.subgroups.length) this.activeTab = (this.group.id === 0 ? 0 : 1)
      else if (newValue.clients.length) this.activeTab = (this.group.id === 0 ? 1 : 2)
      else this.activeTab = 0
    }
  },
  methods: {
    ...mapMutations('groups', ['setDialog', 'setActiveTab', 'adjustTabSlider', 'deleteFromTabChain', 'setCollapsedView']),
    setShowAll (value) {
      this.showAllClicked = true
      this.$store.commit('groups/setShowAll', { index: this.tabIndex, value })
      this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex })
    },
    toggleCollapsedView () {
      this.setCollapsedView(!this.settings.collapsedView)
      console.log(this.settings)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.groupview-tab {
  text-transform: none;
  font-weight: bold;
}

.show-toggle {
  padding: 0 16px;
  margin: 0;
  flex: initial;
  display: flex;
  align-items: center;
}

.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;
}
</style>