flaschengeist-frontend/src/components/user/Config.vue

<template>
  <div>
    <v-card v-if="user" :loading="loading" style="margin-top: 3px">
      <v-card-title>{{ user.firstname }} {{ user.lastname }}</v-card-title>
      <v-card-text>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Vornamen"
              :placeholder="user.firstname"
              v-model="firstname"
              readonly
            />
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Nachname"
              :placeholder="user.lastname"
              v-model="lastname"
              readonly
            />
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Benutzername"
              :placeholder="user.username"
              v-model="username"
              readonly
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              ref="mail"
              outlined
              label="E-Mail"
              :placeholder="user.mail"
              v-model="mail"
              readonly
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12" sm="6">
            <v-text-field
              outlined
              label="Password"
              type="password"
              v-model="password"
            />
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              ref="password"
              outlined
              label="Password bestätigen"
              type="password"
              :disabled="!password"
              :rules="[equal_password]"
            />
          </v-col>
        </v-row>
        <v-divider />
        <v-row>
          <v-col cols="12" sm="4">
            <v-text-field
              outlined
              label="Sperrlimit"
              readonly
              :value="(user.limit / 100).toFixed(2).toString() + '€'"
            />
          </v-col>
          <v-col cols="12" sm="4">
            <v-combobox
              outlined
              label="Sperrstatus"
              v-model="lock"
              append-icon
              readonly
            >
              <template v-slot:selection="data">
                <v-chip :color="lockColor">
                  {{ data.item }}
                </v-chip>
              </template>
            </v-combobox>
          </v-col>
          <v-col cols="12" sm="4">
            <v-combobox
              outlined
              label="Autosperre"
              v-model="autoLock"
              readonly
              append-icon
            >
              <template v-slot:selection="data">
                <v-chip :color="autoLockColor">
                  {{ data.item }}
                </v-chip>
              </template>
            </v-combobox>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-combobox
              outlined
              multiple
              label="Gruppen"
              readonly
              v-model="user.group"
              append-icon
            >
              <template v-slot:selection="data">
                <v-icon>{{
                  data.item === 'user'
                    ? person
                    : data.item === 'bar'
                    ? bar
                    : data.item === 'moneymaster'
                    ? finanzer
                    : false
                }}</v-icon>
              </template>
            </v-combobox>
          </v-col>
        </v-row>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="save">Save</v-btn>
      </v-card-actions>
      <v-expand-transition>
        <v-alert type="error" v-if="error">{{error}}</v-alert>
      </v-expand-transition>
    </v-card>
  </div>
</template>

<script>
import { mdiAccount, mdiGlassCocktail, mdiCurrencyEur } from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Config',
  data() {
    return {
      person: mdiAccount,
      bar: mdiGlassCocktail,
      finanzer: mdiCurrencyEur,
      username: null,
      mail: null,
      firstname: null,
      lastname: null,
      password: null,
      equal_password: value =>
        this.password === value || 'Passwörter sind nicht identisch.',
      email: value => {
        if(value.length > 0) {
          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return pattern.test(value) || 'keine gültige E-Mail';
        }
        return true
      }
    }
  },
  methods: {
    ...mapActions({
      saveConfig: 'user/saveConfig'
    }),
    save() {
      let user = {}
      if (this.firstname) user.firstname = this.firstname
      if (this.lastname) user.lastname = this.lastname
      if (this.username) user.username = this.username
      if (this.$refs.mail.validate()) {
        if (this.mail) user.mail = this.mail
      }
      if (this.$refs.password.validate()) {
        if (this.password) user.password = this.password
      }
      this.saveConfig({oldUsername: user.username, ...user})
    }
  },
  computed: {
    ...mapGetters({
      user: 'user/user',
      error: 'user/error',
      loading: 'user/loading'
    }),
    lock() {
      return this.user.lock ? 'gesperrt' : 'nicht gesperrt'
    },
    lockColor() {
      return this.user.lock ? 'red' : 'green'
    },
    autoLock() {
      return this.user.autoLock ? 'aktiviert' : 'deaktiviert'
    },
    autoLockColor() {
      return this.user.autoLock ? 'green' : 'red'
    }
  }
}
</script>

<style scoped></style>