[Tasks] WIP

app/src/plugins/tm@modal/task/z-task-add-time-modal.vue

@@ -1,73 +1,77 @@
 <template>
-	<v-dialog v-model="show" max-width="750">
+	<v-dialog max-width="750" v-model="visible">
 		<v-card>
 			<div class="d-flex justify-space-between align-center">
-				<h1>Prosím zadajte odpracovaný čas</h1>
+				<h1>Pridať odpracovaný čas</h1>
 
-				<v-icon
-					@click.stop="closeModal()"
-					icon="mdi-close"
-					size="large"
-				></v-icon>
+				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-text-field
-					class="modal-input"
-					label="Odpracovaný čas"
-					variant="solo"
-					type="number"
-					placeholder="h"
-					append-inner-icon="mdi-timer-outline"
-				></v-text-field>
+				<v-text-field v-model="form.hours" variant="solo" bg-color="white" type="number" :hint="v$.form.hours.$errors ? errorUtils.parseErrors(v$.form.hours.$errors) : null" :class="{ error: v$.form.hours.$errors.length }" class="mb-2" label="Odpracovaný čas" />
 			</v-card-actions>
-			<v-btn class="button primary mt-5">Potvrdiť</v-btn>
+			<v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
 		</v-card>
 	</v-dialog>
 </template>
 
 <script>
+import errorUtils 	from '@/plugins/lib@auth/_utils/error.utils'
+import useVuelidate from '@vuelidate/core'
+import { required, numeric, minValue } 	from '@vuelidate/validators'
+
 export default {
-	emits: ['close'],
+	emits: ['close', 'on-subtask-edited'],
 
 	data() {
 		return {
-			visible: false
+			v$: useVuelidate(),
+			errorUtils,
+			visible: false,
+			subtask: null,
+			form: {
+				hours: null
+			}
 		}
 	},
 
-	computed: {
-		show: {
-			get() {
-				return this.visible
-			},
-
-			set(value) {
-				if (!value) this.$emit('close')
+	validations() {
+		return {
+			form: {
+				hours: {required, numeric, minValue: minValue(1)}
 			}
-		},
+		}
 	},
 
 	methods: {
-		showModal() {
-			// Kravarik: Dorobit logiku
-			// 1. Save na be
-			// 2. this.$events.emit('task-time-updated', task)
+		async showModal({ subtask }) {
+			this.subtask = subtask
 			this.visible = true
 		},
 
+		async submit() {
+			if (!await this.v$.$validate())
+				return
+
+			this.subtask.timesheets.push({
+				id: null,
+				employee_id: this.subtask.employee_id,
+				time: typeof this.form.hours == 'string' ? parseInt(this.form.hours) : this.form.hours
+			})
+
+			try {
+				const { subtask } = await this.$axios.put_auth(`v1/subtasks/${this.subtask.id}`, this.subtask)
+
+				this.closeModal()
+				this.$events.emit('on-subtask-edited', subtask)
+			} catch (error) {
+				this.$toast.error(error.message || error)
+			}
+		},
+
 		closeModal() {
 			this.visible = false
-			this.$emit('close', this.blocker)
-			this.blocker = null
-		},
+			this.v$.$reset()
+		}
 	}
 }
-</script>
-
-<style lang="sass" scoped>
-.button primary
-	height: 48px !important
-
-h1
-	font-size: 34px
-</style>
+</script>