Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

Fixed some TS errors in user settings

This commit is contained in:
Ferdinand Thiessen 2020-10-28 21:28:43 +01:00
parent dc0107bcc9
commit 9992ed6f2b
1 changed files with 102 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
src/plugins/user/components/settings/Main.vue
View File

@ -1,94 +1,90 @@
<template> <template>
<q-card class="col-12"> <q-card class="col-12">
<q-card-section class="fit row justify-start content-center items-center"> <q-form @submit="save" @reset="reset">
<q-input <q-card-section class="fit row justify-start content-center items-center">
class="col-xs-12 col-sm-6 q-pa-sm" <q-input
label="Vorname" class="col-xs-12 col-sm-6 q-pa-sm"
v-model="firstname" label="Vorname"
:rules="[notEmpty]" :rules="[notEmpty]"
ref="ref_firstname" v-model="firstname"
filled filled
/> />
<q-input <q-input
class="col-xs-12 col-sm-6 q-pa-sm" class="col-xs-12 col-sm-6 q-pa-sm"
label="Nachname" label="Nachname"
v-model="lastname" :rules="[notEmpty]"
:rules="[notEmpty]" v-model="lastname"
ref="ref_lastname" filled
filled />
/> <q-input
<q-input class="col-xs-12 col-sm-6 q-pa-sm"
class="col-xs-12 col-sm-6 q-pa-sm" label="Benutzername"
label="Benutzername" readonly
readonly :value="user.userid"
:value="user.userid" filled
filled />
/> <q-input
<q-input class="col-xs-12 col-sm-6 q-pa-sm"
class="col-xs-12 col-sm-6 q-pa-sm" label="E-Mail"
label="E-Mail" :rules="[isEmail, notEmpty]"
v-model="mail" v-model="mail"
:rules="[isEmail, notEmpty]" filled
ref="ref_mail" />
filled <q-input
/> class="col-xs-12 col-sm-6 q-pa-sm"
<q-input label="Display Name"
class="col-xs-12 col-sm-6 q-pa-sm" :rules="[notEmpty]"
label="Display Name" v-model="display_name"
v-model="display_name" filled
:rules="[notEmpty]" />
ref="ref_display_name" <q-select
filled class="col-xs-12 col-sm-6 q-pa-sm"
/> label="Rollen"
<q-select readonly
class="col-xs-12 col-sm-6 q-pa-sm" v-model="user.roles"
label="Rollen" :options="user.roles"
readonly filled
v-model="user.roles" >
:options="user.roles" <template v-slot:selected-item="scope">
filled <q-chip v-for="(item, index) in scope.opt" :key="'item' + index">
> {{ item.name }}
<template v-slot:selected-item="scope"> </q-chip>
<q-chip v-for="(item, index) in scope.opt" :key="'item' + index"> </template>
{{ item.name }} </q-select>
</q-chip> </q-card-section>
</template> <q-separator />
</q-select> <q-card-section class="fit row justify-start content-center items-center">
</q-card-section> <q-input
<q-separator /> class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
<q-card-section class="fit row justify-start content-center items-center"> label="Password"
<q-input type="password"
class="col-xs-12 col-sm-6 col-md-4 q-pa-sm" hint="Password muss immer eingetragen werden"
label="Password" :rules="[notEmpty]"
type="password" v-model="password"
hint="Password muss immer eingetragen werden" filled
v-model="password" />
:rules="[notEmpty]" <q-input
ref="ref_password" class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
filled label="Neues Password"
/> type="password"
<q-input v-model="new_password"
class="col-xs-12 col-sm-6 col-md-4 q-pa-sm" filled
label="Neues Password" />
type="password" <q-input
v-model="new_password" class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
filled label="Wiederhole neues Password"
/> type="password"
<q-input :disable="new_password.length == 0"
class="col-xs-12 col-sm-6 col-md-4 q-pa-sm" :rules="[samePassword]"
label="Wiederhole neues Password" v-model="new_password2"
type="password" filled
v-model="new_password2" />
:disable="new_password.length == 0" </q-card-section>
:rules="[samePassword]" <q-card-actions align="right">
ref="ref_new_password" <q-btn label="Reset" type="reset" />
filled <q-btn color="primary" type="submit" label="Speichern" />
/> </q-card-actions>
</q-card-section> </q-form>
<q-card-actions align="right">
<q-btn label="Reset" @click="reset" />
<q-btn color="primary" label="Speichern" @click="save" />
</q-card-actions>
</q-card> </q-card>
</template> </template>
@ -96,29 +92,31 @@
import { computed, defineComponent, ref } from '@vue/composition-api'; import { computed, defineComponent, ref } from '@vue/composition-api';
export default defineComponent({ export default defineComponent({
name: 'Main', name: 'Main',
setup(_, { root: { $store }, refs }) { setup(_, { root: { $store } }) {
const user = computed<FG.User>(() => { const user = computed<FG.User>(() => {
return <FG.User>$store.getters['user/user']; return <FG.User>$store.getters['user/user'];
}); });
const firstname = ref<string>(user.value.firstname); const firstname = ref(user.value.firstname);
const lastname = ref<string>(user.value.lastname); const lastname = ref(user.value.lastname);
const mail = ref<string>(user.value.mail); const mail = ref(user.value.mail);
const display_name = ref<string>(user.value.display_name); const display_name = ref(user.value.display_name);
const password = ref<string>(''); const password = ref('');
const new_password = ref<string>(''); const new_password = ref('');
const new_password2 = ref<string>(''); const new_password2 = ref('');
function save() { function save() {
let change_values = { let change_values: { [index: string]: string } = {
firstname: firstname.value, firstname: firstname.value,
lastname: lastname.value, lastname: lastname.value,
mail: mail.value, mail: mail.value,
display_name: display_name.value display_name: display_name.value
}; };
Object.keys(change_values).forEach(key => { Object.keys(change_values).forEach(key => {
if (change_values[key] === user.value[key]) { if (
change_values[key] === (<{ [index: string]: any }>user.value)[key]
) {
delete change_values[key]; delete change_values[key];
} }
}); });
@ -130,14 +128,9 @@ export default defineComponent({
new_password: new_password.value new_password: new_password.value
}); });
} }
if ( $store.dispatch('user/updateUser', change_values).catch(error => {
Object.keys(refs).every(key => { console.warn(error);
return refs[key].validate(); });
})
) {
$store.dispatch('user/updateUser', change_values);
resetPassword();
}
} }
function reset() { function reset() {
@ -148,27 +141,9 @@ export default defineComponent({
password.value = ''; password.value = '';
new_password.value = ''; new_password.value = '';
new_password2.value = ''; new_password2.value = '';
setTimeout(() => {
Object.keys(refs).forEach(key => {
refs[key].resetValidation();
});
}, 500);
} }
function resetPassword() { function samePassword(val: string) {
password.value = '';
new_password.value = '';
new_password2.value = '';
console.log(refs);
console.log(refs.ref_password);
console.log(refs.ref_new_password);
setTimeout(() => {
refs.ref_password.resetValidation();
refs.ref_new_password.resetValidation();
}, 1000);
}
function samePassword(val) {
return val == new_password.value || 'Passwörter sind nicht identisch!'; return val == new_password.value || 'Passwörter sind nicht identisch!';
} }
@ -176,7 +151,7 @@ export default defineComponent({
return !!val || 'Feld darf nicht leer sein!'; return !!val || 'Feld darf nicht leer sein!';
} }
function isEmail(val) { function isEmail(val: string | null) {
return ( return (
!val || !val ||
/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) ||