summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleTable.vue
blob: 9635fe9705513be86c2a16d9f43b1a2ed0056997 (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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<i18n>
{
  "en": {
    "addBackendBtn": "Add Backend",
    "backendId": "id",
    "backendName": "name",
    "backendType": "type",
    "removeBackend": "Remove one backend | Remove {0} backends",
    "checkConnection": "Check one connection | Check {0} connections",
    "name": "Name",
    "type": "Type",
    "id": "ID"
  },
  "de": {
    "addBackendBtn": "Backend hinzufügen",
    "backendId": "id",
    "backendName": "name",
    "backendType": "typ",
    "removeBackend": "Entferne ein Backend | Entferne {0} Backends",
    "checkConnection": "Überprüfe eine Verbindung | Überprüfe {0} Verbindungen",
    "name": "Name",
    "type": "Type",
    "id": "ID"
  }
}
</i18n>

<template>
  <div>
    <v-card>
      <v-data-table
        class="group-table"
        :headers="headers"
        :items="backends"
        item-key="id"
        hide-actions
        select-all
        :value="selected"
        @input="$store.commit('backends/setSelected', $event)"
      >
        <template slot="items" slot-scope="props">
          <tr @click="props.selected = !props.selected">
            <td>
              <v-checkbox
                color="primary"
                v-model="props.selected"
                hide-details
                @click.native.stop
              ></v-checkbox>
            </td>
            <td>{{ props.item.id }}</td>
            <td>{{ props.item.name }}</td>
            <td>{{ props.item.type }}</td>
            <td>
              <v-layout>
                <v-btn
                  flat
                  icon
                  :loading="props.item.loading"
                  :disabled="props.item.loading"
                  :color="props.item.connection"
                  @click.stop="checkConnection(props.item)"
                >
                  <v-icon>cached</v-icon>
                </v-btn>
                <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', props.item.id)">
                  <v-icon>settings_ethernet</v-icon>
                </v-btn>
                <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', props.item.id)">
                  <v-icon>edit</v-icon>
                </v-btn>
              </v-layout>
            </td>
          </tr>
        </template>
      </v-data-table>
    </v-card>
    <div class="text-xs-right">
      <v-btn color="primary" flat @click="checkConnections(selected)" :disabled="selected.length === 0">
        <v-icon left>cached</v-icon>{{ $tc('checkConnection', selected.length, [selected.length]) }}
      </v-btn>
      <v-btn color="error" flat @click="$store.commit('backends/setDialog', { show: true, del: true } )" :disabled="selected.length === 0">
        <v-icon left>remove_circle_outline</v-icon>{{ $tc('removeBackend', selected.length, [selected.length]) }}
      </v-btn>
      <v-btn color="success" flat @click="$store.commit('backends/editBackend', 0)">
        <v-icon left>add_circle_outline</v-icon>{{ $t('addBackendBtn') }}
      </v-btn>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'BackendModuleTable',
  data () {
    return {
      dialog: false,
      backendName: '',
      backendId: '',
      backendType: '',
      test: false,
      edit: false
    }
  },
  methods: {
    checkConnection (item) {
      // Set to start the loading animation.
      item.loading = true
      // Test the credential connection.
      this.$http.post('/api/backends/checkConnection', {
        id: item.id,
        headers: {
          'Cache-Control': 'no-cache'
        }
      }).then(response => {
        if (response.data.success) {
          // Set the button color to green if success.
          item.connection = 'success'
        } else {
          // Set the button color to red if error.
          item.connection = 'error'
          this.$store.commit('newSnackbar', response.data.msg)
        }
        // Set item.loading = false to end the loading animation.
        item.loading = false
      })
    },
    checkConnections (items) {
      const tmp = this
      items.forEach(function (item) {
        tmp.checkConnection(item)
      })
    }
  },
  watch: {
  },
  computed: {
    ...mapState('backends', ['selected', 'backends']),
    headers () {
      return [
        { text: this.$t('id'), value: 'id' },
        { text: this.$t('name'), value: 'name', width: '10000px' },
        { text: this.$t('type'), value: 'type' },
        { sortable: false }
      ]
    }
  },
  created () {
    this.$store.dispatch('backends/loadData')
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>