summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/UserModule.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-25 07:52:15 +0100
committerJannik Schönartz2019-02-25 07:52:15 +0100
commitf42e850ad0778c147bead82a91d3805c81b66150 (patch)
tree2b5189a7f8a96ca4a15777a06a71581cd1b93ce3 /webapp/src/components/UserModule.vue
parent[webapp/datatable] small design fixes (diff)
downloadbas-f42e850ad0778c147bead82a91d3805c81b66150.tar.gz
bas-f42e850ad0778c147bead82a91d3805c81b66150.tar.xz
bas-f42e850ad0778c147bead82a91d3805c81b66150.zip
[webapp/user] Add user management module for creating / deleting user accounts
Diffstat (limited to 'webapp/src/components/UserModule.vue')
-rw-r--r--webapp/src/components/UserModule.vue128
1 files changed, 128 insertions, 0 deletions
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
new file mode 100644
index 0000000..bee7607
--- /dev/null
+++ b/webapp/src/components/UserModule.vue
@@ -0,0 +1,128 @@
+<i18n>
+{
+ "en": {
+ "createUser": "Create user",
+ "deleteUsers": "Delete one user | Delete {0} user",
+ "email": "E-Mail",
+ "id": "ID",
+ "name": "Name",
+ "username": "Username",
+ "users": "Users"
+ },
+ "de": {
+ "createUser": "Benutzer erstellen",
+ "deleteUsers": "Lösche einen Benutzer | Lösche {0} Benutzer",
+ "email": "E-Mail",
+ "id": "ID",
+ "name": "Name",
+ "username": "Benutzername",
+ "users": "Benutzer"
+ }
+}
+</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"
+ centered
+ v-model="tab"
+ >
+ <v-tab>{{ $t('users') }}</v-tab>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="tab">
+ <v-tab-item>
+ <v-subheader>{{ $t('users') }}</v-subheader>
+
+ <v-card>
+ <data-table v-model="selectedUsers" :headers="headers" :items="users" @dblclick="editUser($event.id)">
+ <div slot="action" slot-scope="row" style="text-align: right">
+ <v-btn flat icon color="primary" @click.stop="editUser(row.item.id)"><v-icon>edit</v-icon></v-btn>
+ </div>
+ </data-table>
+ </v-card>
+ <div class="text-xs-right">
+ <v-btn color="error" flat @click="deleteUsers" :disabled="selectedUsers.length === 0">
+ <v-icon left>delete</v-icon>{{ $tc('deleteUsers', selectedUsers.length, [selectedUsers.length]) }}
+ </v-btn>
+ <v-btn color="success" flat @click="editUser(0)">
+ <v-icon left>edit</v-icon>{{ $t('createUser') }}
+ </v-btn>
+ </div>
+
+ </v-tab-item>
+ </v-tabs-items>
+ </v-flex>
+ </v-layout>
+
+ <v-dialog
+ :value="dialog.show"
+ @input="setDialog({ show: $event })"
+ :max-width="dialog.type === 'delete' ? '500px' : '500px'"
+ scrollable
+ :persistent="dialog.type !== 'delete'"
+ :fullscreen="$vuetify.breakpoint.smAndDown"
+ >
+ <user-module-delete v-if="dialog.type === 'delete'" />
+ <user-module-edit v-else-if="dialog.type === 'edit'"/>
+ </v-dialog>
+
+ </v-container>
+</template>
+
+<script>
+import { mapGetters, mapState, mapMutations } from 'vuex'
+import DataTable from '@/components/DataTable'
+import UserModuleDelete from '@/components/UserModuleDelete'
+import UserModuleEdit from '@/components/UserModuleEdit'
+
+export default {
+ name: 'UserModule',
+ components: {
+ UserModuleDelete,
+ UserModuleEdit,
+ DataTable
+ },
+ data () {
+ return {
+ tab: 0,
+ headers: [
+ { text: this.$t('id'), key: 'id' },
+ { text: this.$t('username'), key: 'username' },
+ { text: this.$t('name'), key: 'name' },
+ { text: this.$t('email'), key: 'email' },
+ { key: 'action' }
+ ],
+ selectedUsers: [],
+ user: ''
+ }
+ },
+ methods: {
+ ...mapMutations('users', ['setDialog']),
+ deleteUsers () {
+ this.setDialog({ show: true, type: 'delete', info: { id: this.user.id, selected: this.selectedUsers } })
+ },
+ editUser (id) {
+ this.setDialog({ show: true, type: 'edit', info: { id: id } })
+ }
+ },
+ computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
+ ...mapState('users', ['users', 'dialog'])
+ },
+ created () {
+ this.$store.dispatch('users/loadData')
+ this.$http('/api/users/current').then(response => {
+ this.user = response.data
+ })
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>