Files
jandl-taskmanager-app/app/src/plugins/tm@profile/profile/my-profile.vue
T
2023-03-13 21:54:14 +01:00

88 lines
2.4 KiB
Vue

<template>
<div class="border-bottom py-5 px-5">
<h1>Všeobecné informácie</h1>
<v-text-field class="w-75" variant="solo" label="Meno" :disabled="true" v-model="user.name"></v-text-field>
<v-text-field class="w-75" variant="solo" label="Priezvisko" v-model="user.surname" :disabled="true"></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="form.work_start" append-inner-icon="mdi-clock-outline" type="time" :class="{ error: v$.form.work_start.$errors.length }" :hint="v$.form.work_start.$errors ? errorUtils.parseErrors(v$.form.work_start.$errors) : null"></v-text-field>
<v-text-field class="w-75" variant="solo" label="Koniec" v-model="form.work_end" append-inner-icon="mdi-clock-outline" type="time" :class="{ error: v$.form.work_end.$errors.length }" :hint="v$.form.work_end.$errors ? errorUtils.parseErrors(v$.form.work_end.$errors) : null"></v-text-field>
</div>
<div class="py-5 px-5">
<v-btn class="button primary" @click="updateUserInfo()">ULOŽIŤ ZMENY</v-btn>
</div>
</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(),
form: {}
}
},
computed: {
...mapGetters("auth", ["user"])
},
validations() {
return {
form: {
work_start: { required },
work_end: { required }
}
}
},
mounted() {
this._setDates()
},
methods: {
async updateUserInfo() {
if (!(await this.v$.$validate())) return
const data = {
id: this.user.id,
work_start: parseInt(this.form.work_start.split(':')[0]),
work_end: parseInt(this.form.work_end.split(':')[0])
}
try {
await this.$store.dispatch('auth/updateUserInfo', data)
this.$toast.success('Profil bol úspešne zmenený')
this.$events.emit('on-user-updated', this.user)
} catch (error) {
this.$toast.error(error)
}
},
_setDates() {
this.form = {
work_start: this.user.work_start < 10 ? `0${this.user.work_start}:00` : `${this.user.work_start}:00`,
work_end: this.user.work_end < 10 ? `0${this.user.work_end}:00` : `${this.user.work_end}:00`
}
}
},
watch: {
user() {
this._setDates()
}
}
}
</script>
<style lang="sass" scoped>
.border-bottom
border-bottom: 1px solid #EDEDED
</style>