release v2.0.0 #4
			
				
			
		
		
		
	| 
						 | 
					@ -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) ||
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue