summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModule.vue
blob: 32fef5733926a9fff208b1c1f2ec4b558fd3ff5f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<i18n>
{
  "en": {
    "delete-are-you-sure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
    "delete-backend": "Delete {0} backend | Delete {0} 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?",
    "delete-backend": "Lösche {0} Backend | Delete {0} Backends"
  }
}
</i18n>

<template>
  <!--
  <component :is="component" @edit-backend="setEditComponent" @cancel-edit="setTableComponent" :backend-id="backendId"></component>
  -->
  <v-container>
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <backend-module-table ref="backendTable" @edit-backend="editBackend" @delete-dialog="openDeleteDialog"/>
      </v-flex>
    </v-layout>

    <v-dialog v-model="dialog" max-width="50%">
      <backend-module-edit v-if="editDialog" :backendId="backendId" @cancel-edit="dialog = false; backendId = 0" @reload-table="$refs.backendTable.loadData()"/>

      <v-card v-if="deleteDialog">
        <v-card-title primary-title>
          <div>
            <div class="headline">{{ $tc('delete-backend', backendsDelete.length, [backendsDelete.length]) }}</div>
            <template v-for="item in backendsDelete">
              <span class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</span><br :key="item.id">
            </template>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', backendsDelete.length) }}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="dialog = false; delDialog = false">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="dialog = false; delDialog = false; $refs.backendTable.deleteBackends()">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>

    </v-dialog>

  </v-container>
</template>

<script>
import BackendModuleTable from '@/components/BackendModuleTable'
import BackendModuleEdit from '@/components/BackendModuleEdit'

export default {
  name: 'BackendModule',
  components: {
    BackendModuleTable,
    BackendModuleEdit
  },
  data () {
    return {
      component: 'BackendModuleTable',
      backendId: 0,
      dialog: false,
      delDialog: false,
      backendsDelete: []
    }
  },
  methods: {
    editBackend (id) {
      this.backendId = id
      this.dialog = true
    },
    openDeleteDialog (selected) {
      this.dialog = true
      this.delDialog = true
      this.backendsDelete = selected
    }
  },
  computed: {
    deleteDialog: function () {
      return this.dialog && this.delDialog
    },
    editDialog: function () {
      return this.dialog && !this.delDialog
    }
  },
  beforeMount () {
  }
}

</script>

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