summaryrefslogblamecommitdiffstats
path: root/webapp/src/components/UserModuleEdit.vue
blob: 77be87982eceb6310c2e815bf727eb980a518d79 (plain) (tree)






























































































                                                                                                                                       
<i18n>
{
  "en": {
    "titleExisting": "Edit user",
    "titleNew": "Create user",
    "userCreated": "User was successfully created."
  },
  "de": {
    "titleExisting": "Benutzer bearbeiten",
    "titleNew": "Benutzer erstellen",
    "userCreated": "Benutzer wurde erfolgreich erstellt."
  }
}
</i18n>

<template>
  <v-card>
    <v-card-title primary-title class="dialog-title elevation-3">
      <div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
    </v-card-title>
    <v-card-text style="height: 100%;">
      <div class="edit-user">
        <signup v-model="user" ref="editComponent" :id="dialog.info.id"></signup>
      </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="dialog.info.id ? 'primary' : 'success'" @click="saveUser">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
import { mapState } from 'vuex'
import signup from '@/components/UserCreateForm'

export default {
  name: 'UserModuleEdit',
  components: {
    signup
  },
  data () {
    return {
      user: { }
    }
  },
  computed: {
    ...mapState('users', ['dialog'])
  },
  methods: {
    setDialog (data) {
      this.$store.commit('users/setDialog', data)
    },
    async saveUser () {
      if (this.$refs.editComponent.validate()) {
        var url = '/api/users'
        if (this.dialog.info.id) {
          url += '/' + this.dialog.info.id
        }
        this.$http.post(url, {
          username: this.user.username,
          password: this.user.password,
          name: this.user.name,
          email: this.user.email
        }).then(response => {
          this.$store.dispatch('users/loadData')
          this.setDialog({ show: false })
          this.$snackbar({ color: 'success', text: this.$t('userCreated') })
        }).catch(error => {
          if (error.response.data.status === 'USER_ALREADY_EXISTS') {
            this.$refs.editComponent.setUsernameTakenError()
          }
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-title {
  z-index: 1;
}
.selected-list {
  padding: 30px;
}
.edit-user {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>