summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/UserModuleDelete.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/UserModuleDelete.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/UserModuleDelete.vue')
-rw-r--r--webapp/src/components/UserModuleDelete.vue73
1 files changed, 73 insertions, 0 deletions
diff --git a/webapp/src/components/UserModuleDelete.vue b/webapp/src/components/UserModuleDelete.vue
new file mode 100644
index 0000000..d35b755
--- /dev/null
+++ b/webapp/src/components/UserModuleDelete.vue
@@ -0,0 +1,73 @@
+<i18n>
+{
+ "en": {
+ "title": "Delete this user? | Delete these {0} users?",
+ "deleteYourself": "You are about to delete yourself!"
+ },
+ "de": {
+ "title": "Diesen Benutzer löschen? | Diese {0} Benutzer löschen?",
+ "deleteYourself": "Du bist dabei dich selber zu löschen!"
+ }
+}
+</i18n>
+
+<template>
+ <v-card :color="doIDeleteMyself ? 'error' : ''">
+ <v-card-title primary-title class="dialog-title elevation-3" >
+ <div class="headline">{{ $tc('title', dialog.info.selected.length, [dialog.info.selected.length]) }}</div>
+ </v-card-title>
+ <v-card-text style="height: 100%">
+ <div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">
+ <div v-if="item.id === dialog.info.id" class="black--text">[{{ item.id }}] {{ item.name }}</div>
+ <div v-else :class="doIDeleteMyself ? 'white--text' : ''">[{{ item.id }}] {{ item.name }}</div>
+ </div>
+ <div v-if="doIDeleteMyself" class="white--text" style="margin-top: 20px;">{{ $t('deleteYourself') }}</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="doIDeleteMyself ? 'white' : 'error'" @click="deleteItems"><div :class="doIDeleteMyself ? 'red--text' : 'white--text'">{{ $t('delete') }}</div></v-btn>
+ </v-card-actions>
+ </v-card>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'UserModuleDelete',
+ data () {
+ return {
+ }
+ },
+ computed: {
+ ...mapState('users', ['dialog']),
+ doIDeleteMyself () {
+ return this.dialog.info.selected.map(x => x.id).includes(this.dialog.info.id)
+ }
+ },
+ methods: {
+ setDialog (data) {
+ this.$store.commit('users/setDialog', data)
+ },
+ async deleteItems () {
+ await this.$http.post('/api/users/?delete', {
+ ids: this.dialog.info.selected.map(x => x.id)
+ })
+ this.$store.dispatch('users/loadData')
+ this.setDialog({ show: false })
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.dialog-title {
+ z-index: 1;
+}
+.selected-list {
+ padding: 30px;
+}
+</style>