jandl-taskmanager-app/app/src/plugins/tm@profile/profile/my-profile.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']),
	},

	created() {
		// TEMP
		// Kravarik: Vyhodit
		this.$store.dispatch('auth/login', {
			email: 'xx@asdasd.asd',
			password: 'sdfsdfsdf'
		})
	},

	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('wAuth/updateUserInfo', this.user)

				this.$toast.success('Profil bol úspešne zmenený')
			} catch (error) {
				// Kravarik: Posli iba errror
				this.$toast.error(error.response.data.error)
			}
		},
	},
}
</script>

<style lang="sass" scoped>
.border-bottom
	border-bottom: 1px solid #EDEDED
</style>