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


         
                                                                                                                             
                                                                 
                          

         

                                                                                                                                                   
                          




          
                           
              
















                                                                                   


               
             

                                                                    
                       
                
     

                                                        
               
                                                                                                       


                       
                                                           


                                                                                                            
                      
                               

                               
                                                                                                                     
                                                                                                                                                                           

                         
               

                                                                       
                


           

                                                                
                                                              
                                           


                        
               
                       

                      
    

            
                                      
             


            

             

                                                                

                  






                                                                   
        
<i18n>
{
  "en": {
    "delete-are-you-sure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
    "remove-backend": "Remove one backend | Remove {0} backends",
    "backends": "Backends"
  },
  "de": {
    "delete-are-you-sure": "Sind Sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
    "remove-backend": "Entferne ein Backend | Entferne {0} Backends",
    "backends": "Backends"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
      <v-card>
        <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
          v-model="tab"
          centered
        >
          <v-tab>
            {{ $t('backends') }}
          </v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <v-subheader>{{ $t('backends') }}</v-subheader>
          <backend-module-table/>
        </v-tab-item>
      </v-tabs-items>
      </v-flex>
    </v-layout>

    <v-dialog
      :value="$store.state.backends.dialog"
      @input="$store.commit('backends/setDialog', { show: $event })"
      max-width="500px"
      scrollable
    >
      <v-card>
        <v-card-title primary-title class="elevation-3">
          <div>
            <div class="headline">{{ $tc('remove-backend', selected.length, [selected.length]) }}</div>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', selected.length) }}
            <template v-for="item in selected">
              <div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</div>
            </template>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('backends/setDialog', { show: false })">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('backends/setDialog', { show: false }); $store.dispatch('backends/deleteSelectedBackends')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <backend-module-edit :backendId="$store.state.backends.backendId"/>
    <backend-module-sync :backendId="$store.state.backends.backendId"/>
  </v-container>
</template>

<script>
import BackendModuleTable from '@/components/BackendModuleTable'
import BackendModuleEdit from '@/components/BackendModuleEdit'
import BackendModuleSync from '@/components/BackendModuleSync'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'BackendModule',
  components: {
    BackendModuleTable,
    BackendModuleEdit,
    BackendModuleSync
  },
  data () {
    return {
      component: 'BackendModuleTable',
      tab: ''
    }
  },
  methods: {
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('backends', ['selected'])
  },
  beforeMount () {
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>