Add first validation fields

Author: fdodino

src/lib/components/ValidationField.svelte

@@ -0,0 +1,27 @@
+<script lang='ts'>
+  import type { ValidationMessage } from '$lib/domain/tarea'
+
+  const errorsFrom = (errors: ValidationMessage[], field: string) => errors
+    .filter((_) => _.field === field)
+    .map((_) => _.message)
+    .join('. ')
+
+  let { field, errors } = $props()
+
+  let errorMessage = $derived(errorsFrom(errors, field))
+</script>
+<style>
+.error {
+  border: 1px solid darkred;
+  background-color: rgb(236, 35, 35);
+  color: white;
+  margin: 0.25rem 0;
+  padding: 0.5rem;
+}
+</style>
+{#if !!errorMessage}
+  <div></div>
+  <div class="error" data-testid={"error-field-" + field}>
+    {errorMessage}
+  </div>
+{/if}

src/lib/domain/tarea.ts

@@ -125,17 +125,6 @@ export class Tarea {
     return this.errors.length > 0
   }
 
-  hasErrors(field: string): boolean {
-    return this.errors.some((_) => _.field == field)
-  }
-
-  errorsFrom(field: string) {
-    return this.errors
-      .filter((_) => _.field == field)
-      .map((_) => _.message)
-      .join('. ')
-  }
-
   addError(field: string, message: string) {
     this.errors.push(new ValidationMessage(field, message))
   }

src/routes/tarea/[tareaId]/+page.svelte

@@ -2,32 +2,35 @@
   import './edit.css'
   import { goto } from '$app/navigation'
   import { tareaService } from '$lib/services/tareaService'
-  import { Tarea } from '$lib/domain/tarea'
+  import { Tarea, ValidationMessage, type TareaJSON } from '$lib/domain/tarea'
   import { DateTime } from 'luxon'
   import { showError } from '$lib/domain/errorHandler'
+  import ValidationField from '$lib/components/ValidationField.svelte'
+
+  const volver = () => {
+    goto('/')
+  }
+
+  let { data } = $props()
+  const { tarea, asignatarios } = data
+  if (!tarea) volver()
+
+  let errors: ValidationMessage[] = $state([])
 
   const actualizar = async () => {
     try {
       const tareaActual: Tarea = Tarea.fromJson(tareaEdit)
       tareaActual.fecha = DateTime.fromFormat(fecha, 'yyyy-MM-dd').toJSDate()
-      // TODO: generar un componente para mostrar los errores de una tarea
       tareaActual.validar()
-      if (!tareaActual.invalid) {
+      errors = tareaActual.errors
+      if (!tareaActual.invalid()) {
         await tareaService.actualizarTarea(tareaActual)
         volver()
       }
     } catch (error) {
       showError('Error al actualizar la tarea', error)
     }
   }
-
-  const volver = () => {
-    goto('/')
-  }
-
-  let { data } = $props()
-  const { tarea, asignatarios } = data
-  if (!tarea) volver()
   
   let tareaEdit = $state(tarea!.toJSON())
   let fecha = $state(DateTime.fromJSDate(tarea!.fecha!).toUTC().toFormat('yyyy-MM-dd'))
@@ -39,6 +42,7 @@
 <div class="row-edit">
   <label for="descripcion">Descripción:</label>
   <input type="text" name="descripcion" bind:value={tareaEdit.descripcion} />
+  <ValidationField errors={errors} field="descripcion"/>
 </div>
 <div class="row-edit">
   <label for="iteracion">Iteración:</label>
@@ -60,6 +64,7 @@
 <div class="row-edit">
   <label for="porcentaje">% cumplimiento:</label>
   <input type="number" name="porcentaje" bind:value={tareaEdit.porcentajeCumplimiento} />
+  <ValidationField errors={errors} field="porcentajeCumplimiento"/>
 </div>
 <div class="button-group-edit">
   <button onclick={actualizar} class="primary-edit">Actualizar</button>

src/routes/tarea/[tareaId]/edit.css

@@ -5,9 +5,9 @@ html {
 .row-edit {
   font-size: 1.1rem;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 2fr;
   gap: 10px;
-  margin: 2rem 0;
+  margin: 2rem 5rem;
 }
 
 .row-edit label {