mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
<template>
|
|
<W-loadable :content="user ? true : false">
|
|
<div v-if="user">
|
|
<div class="border-bottom py-5 px-5">
|
|
<h1>Všeobecné informácie</h1>
|
|
<v-text-field
|
|
class="w-75"
|
|
variant="solo"
|
|
label="Meno"
|
|
v-model="user.name"
|
|
:class="{ error: v$.user.name.$errors.length }"
|
|
:hint="
|
|
v$.user.name.$errors
|
|
? errorUtils.parseErrors(v$.user.name.$errors)
|
|
: null
|
|
"
|
|
></v-text-field>
|
|
<v-text-field
|
|
class="w-75"
|
|
variant="solo"
|
|
label="Priezvisko"
|
|
v-model="user.surname"
|
|
:class="{ error: v$.user.surname.$errors.length }"
|
|
:hint="
|
|
v$.user.surname.$errors
|
|
? errorUtils.parseErrors(v$.user.surname.$errors)
|
|
: null
|
|
"
|
|
></v-text-field>
|
|
</div>
|
|
<div class="py-5 px-5 border-bottom">
|
|
<h1>Pracovná doba</h1>
|
|
<v-text-field
|
|
class="w-75"
|
|
variant="solo"
|
|
label="Začiatok"
|
|
v-model="user.work_hours_from"
|
|
append-inner-icon="mdi-clock-outline"
|
|
type="time"
|
|
:class="{ error: v$.user.work_hours_from.$errors.length }"
|
|
:hint="
|
|
v$.user.work_hours_from.$errors
|
|
? errorUtils.parseErrors(v$.user.work_hours_from.$errors)
|
|
: null
|
|
"
|
|
></v-text-field>
|
|
<v-text-field
|
|
class="w-75"
|
|
variant="solo"
|
|
label="Koniec"
|
|
v-model="user.work_hours_to"
|
|
append-inner-icon="mdi-clock-outline"
|
|
:class="{ error: v$.user.work_hours_to.$errors.length }"
|
|
:hint="
|
|
v$.user.work_hours_to.$errors
|
|
? errorUtils.parseErrors(v$.user.work_hours_to.$errors)
|
|
: null
|
|
"
|
|
type="time"
|
|
></v-text-field>
|
|
</div>
|
|
<div class="py-5 px-5">
|
|
<v-btn class="z-btn" @click="updateUserInfo()">ULOŽIŤ ZMENY</v-btn>
|
|
</div>
|
|
</div>
|
|
</W-loadable>
|
|
</template>
|
|
|
|
<script>
|
|
import useVuelidate from '@vuelidate/core'
|
|
import { required } from '@vuelidate/validators'
|
|
import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
errorUtils,
|
|
v$: useVuelidate(),
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters('auth', ['user']),
|
|
},
|
|
|
|
validations() {
|
|
return {
|
|
user: {
|
|
name: { required },
|
|
surname: { required },
|
|
work_hours_from: { required },
|
|
work_hours_to: { required },
|
|
},
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async updateUserInfo() {
|
|
if (!(await this.v$.$validate())) return
|
|
try {
|
|
await this.$store.dispatch('auth/updateUserInfo', this.user)
|
|
|
|
this.$toast.success('Profil bol úspešne zmenený')
|
|
} catch (error) {
|
|
this.$toast.error(error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.border-bottom
|
|
border-bottom: 1px solid #EDEDED
|
|
</style>
|