summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/GroupModuleDialog.vue
blob: 7c0905deb861e87ed4660ed3e4ca2ec705a5ddc6 (plain) (tree)
1
2
3


         

















                                                                           


                  

         

















                                                                                                         


                  





           

                                        
                                                      
              
                                  

            

                                                                   



                                                                                                
                     
                                                                                          
                               


                                                                                                


                                 
                                             
                              

                              

                                               

                     
                                 
                    
                                                


                                                
                                                                              




                                                                                                                         




                                                                                         
                                                                                                             





                       
                                                                    



                                             


                        

            
                   
                                  


             
                                                  





                                                                   


                                                                                                                    


                                                                                                                              
              
                                                                                                                     




                                                                                        

            









                                                          



                                                                           

                                        

                                                                                           


                                     
                                     
                                                                 

                                                                                                           
                                                                 
                                                      






                                                                   


                  


               



                   


                      
 


                
        
<i18n>
{
  "en": {
    "title": {
      "delete": {
        "group": "Delete this group? | Delete these {0} groups?",
        "client": "Delete this client? | Delete these {0} clients?"
      },
      "remove": {
        "group": "Remove this subgroup? | Remove these {0} subgroups?",
        "client": "Remove this client? | Remove these {0} clients?"
      },
      "add": {
        "group": "Add groups | Add this group? | Add these {0} groups?",
        "client": "Add clients | Add this client? | Add these {0} clients?"
      }
    },
    "deletePermanently": {
      "group": "Permanently delete group | Permanently delete groups",
      "client": "Permanently delete client | Permanently delete clients"
    },
    "new": "New",
    "id": "ID",
    "name": "Name"
  },
  "de": {
    "title": {
      "delete": {
        "group": "Diese Gruppe löschen? | Diese {0} Gruppen löschen?",
        "client": "Diesen Clienten löschen? | Diese {0} Clienten löschen?"
      },
      "remove": {
        "group": "Diese Untergruppe entfernen? | Diese {0} Untergruppen entfernen?",
        "client": "Diesen Clienten entfernen? | Diese {0} Clienten entfernen?"
      },
      "add": {
        "group": "Gruppen hinzufügen | Diese Gruppe hinzufügen? | Diese {0} Gruppen hinzufügen?",
        "client": "Clienten hinzufügen | Diesen Clienten hinzufügen? | Diese {0} Clienten hinzufügen?"
      }
    },
    "deletePermanently": {
      "group": "Gruppe dauerhaft löschen | Gruppen dauerhaft löschen",
      "client": "Client dauerhaft löschen | Clienten dauerhaft löschen"
    },
    "new": "Neu",
    "id": "ID",
    "name": "Name"
  }
}
</i18n>

<template>
  <v-dialog
    :value="dialog.show"
    @input="setDialog({ show: $event })"
    :max-width="action === 'add' ? '1000px' : '500px'"
    scrollable
    :persistent="action === 'add'"
  >
    <v-card>
      <v-card-title primary-title class="dialog-title elevation-3">
        <div class="headline">{{ title }}</div>
        <v-spacer></v-spacer>
        <v-btn v-if="action === 'add'" class="new-button" flat color="success" @click="newItem">
          <v-icon left>create</v-icon>{{ $t('new') }}
        </v-btn>
      </v-card-title>
      <v-card-text  style="height: 616px" v-if="action === 'add'" class="table-container">
        <v-divider></v-divider>
        <component-search-table v-model="selected" :headers="headers" :items="items" select-all>
          <template slot="items" slot-scope="row">
            <tr :style="row.color" @click="row.data.selected = !row.data.selected">
              <td>
                <v-checkbox
                  color="primary"
                  v-model="row.data.selected"
                  hide-details
                ></v-checkbox>
              </td>
              <td>{{ row.data.item.id }}</td>
              <td>{{ row.data.item.name }}</td>
            </tr>
          </template>
        </component-search-table>
      </v-card-text>
      <v-card-text v-else class="selected-list">
        <v-checkbox
          class="delete-checkbox"
          v-if="dialog.info.action === 'remove'"
          :label="$tc('deletePermanently.' + dialog.info.type, selectedCount)"
          color="error"
          v-model="deleteInsteadOfRemove"
          hide-details
        ></v-checkbox>
        <div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
        <v-btn :color="action === 'add' ? 'success' : 'error'" @click="submitAction">{{ $t(action) }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import ComponentSearchTable from '@/components/ComponentSearchTable'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'GroupModuleDialog',
  components: {
    ComponentSearchTable
  },
  data () {
    return {
      selected: [],
      deleteInsteadOfRemove: false
    }
  },
  computed: {
    ...mapState('groups', ['dialog', 'tabChain']),
    headers () {
      return [
        { text: this.$t('id'), value: 'id' },
        { text: this.$t('name'), value: 'name', width: '100000px' }
      ]
    },
    action () {
      return this.dialog.info.action === 'remove' && this.deleteInsteadOfRemove ? 'delete' : this.dialog.info.action
    },
    selectedCount () {
      return this.action === 'add' ? this.selected.length : (this.dialog.info.selected ? this.dialog.info.selected.length : 0)
    },
    title () {
      return this.$tc('title.' + this.action + '.' + this.dialog.info.type, this.selectedCount, [this.selectedCount])
    },
    items () {
      if (this.dialog.info.type === 'group') return this.$store.state.groups.groupList
      if (this.dialog.info.type === 'client') return this.$store.state.groups.clientList
    }
  },
  methods: {
    ...mapMutations('groups', ['setActiveTab', 'setTab']),
    setDialog (data) {
      this.$store.commit('groups/setDialog', data)
      if (data.show === false) {
        this.selected = []
        this.search = ''
        this.deleteInsteadOfRemove = false
      }
    },
    submitAction () {
      const actionMap = {
        'delete': { 'group': 'deleteGroups', 'client': 'deleteClients' },
        'remove': { 'group': 'removeSubroups', 'client': 'removeClients' },
        'add': { 'group': 'addSubgroups', 'client': 'addClients' }
      }
      var data = { ...this.dialog.info }
      if (this.action === 'add') data.selected = this.selected
      this.$store.dispatch('groups/' + actionMap[this.action][this.dialog.info.type], data)
      this.setDialog({ show: false })
    },
    newItem () {
      this.setDialog({ show: false })
      var item = { id: 'create', tabType: this.dialog.info.type }
      if (this.dialog.info.type === 'group') item.parents = [this.tabChain[this.dialog.info.tabIndex]]
      else if (this.dialog.info.type === 'client') item.groups = [this.tabChain[this.dialog.info.tabIndex]]
      this.setTab({ index: this.dialog.info.tabIndex + 1, item })
      this.setActiveTab(this.dialog.info.tabIndex + 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-container {
  padding: 0;
}
.dialog-title {
  z-index: 1;
}
.new-button {
  margin-top: 0;
  margin-bottom: 0;
}
.delete-checkbox {
  margin-top: 0;
  margin-bottom: 20px;
}
.selected-list {
  padding: 30px;
}
</style>