- | {{tarea.descripcion}} |
- {{tarea.iteracion}} |
- {{tarea.asignatario?.nombre}} |
- {{tarea.fechaString()}} |
-
+
+ {{tarea.descripcion}}
+ {{tarea.asignatario ? ' - ' + tarea.asignatario.nombre : ''}} - % {{tarea.porcentajeCumplimiento | number:'1.2-2':'es' }}
+
+ |
+ {{tarea.descripcion}} |
+ {{tarea.iteracion}} |
+ {{tarea.asignatario?.nombre}} |
+ {{tarea.fechaString()}} |
+
diff --git a/src/app/tareas/tareas.component.spec.ts b/src/app/tareas/tareas.component.spec.ts
new file mode 100644
index 0000000..a09f52e
--- /dev/null
+++ b/src/app/tareas/tareas.component.spec.ts
@@ -0,0 +1,23 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+// import { TareasComponent } from './tareas.component'
+
+// describe('TareasComponent', () => {
+// let component: TareasComponent
+// let fixture: ComponentFixture
+
+// beforeEach(async () => {
+// await TestBed.configureTestingModule({
+// imports: [TareasComponent]
+// })
+// .compileComponents()
+
+// fixture = TestBed.createComponent(TareasComponent)
+// component = fixture.componentInstance
+// fixture.detectChanges()
+// })
+
+// it('should create', () => {
+// expect(component).toBeTruthy()
+// })
+// })
diff --git a/src/components/tareas/tareas.component.ts b/src/app/tareas/tareas.component.ts
similarity index 60%
rename from src/components/tareas/tareas.component.ts
rename to src/app/tareas/tareas.component.ts
index f31ecf0..872cede 100644
--- a/src/components/tareas/tareas.component.ts
+++ b/src/app/tareas/tareas.component.ts
@@ -1,23 +1,20 @@
+import { CommonModule } from '@angular/common'
import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
-import { mostrarError } from 'src/util/errorHandler'
-
-import { Tarea } from '../../domain/tarea'
-import { TareasService } from '../../services/tareas.service'
-
-
-export const errorHandler = (component: TareasComponent) => ({
- error: async (error: Error) => {
- component.tareas = await component.tareasService.todasLasTareas()
- mostrarError(component, error)
- }
-})
+import { FormsModule } from '@angular/forms'
+import { Router, RouterModule } from '@angular/router'
+import { IconsModule } from 'app/icons.module'
+import { Tarea } from 'domain/tarea'
+import { FilterTareas } from 'pipes/filterTareas.pipe'
+import { OrderTareas } from 'pipes/orderTareas.pipe'
+import { TareasService } from 'services/tareas.service'
+import { mostrarError } from 'util/errorHandler'
@Component({
selector: 'app-tareas',
+ standalone: true,
+ imports: [CommonModule, FormsModule, RouterModule, FilterTareas, OrderTareas, IconsModule],
templateUrl: './tareas.component.html',
- styleUrls: ['./tareas.component.css'],
- providers: []
+ styleUrl: './tareas.component.css'
})
export class TareasComponent implements OnInit {
tareaBuscada = ''
@@ -30,9 +27,13 @@ export class TareasComponent implements OnInit {
await this.obtenerTodasLasTareas()
}
- actualizarTarea(callbackActualizacion: (tarea: Tarea) => void, tarea: Tarea) {
+ async actualizarTarea(callbackActualizacion: (tarea: Tarea) => void, tarea: Tarea) {
callbackActualizacion(tarea)
- this.tareasService.actualizarTarea(tarea).subscribe(errorHandler(this))
+ try {
+ await this.tareasService.actualizarTarea(tarea)
+ } catch (e) {
+ errorHandler(this)
+ }
}
async cumplir(tarea: Tarea) {
@@ -58,5 +59,11 @@ export class TareasComponent implements OnInit {
mostrarError(this, error)
}
}
-
}
+
+export const errorHandler = (component: TareasComponent) => ({
+ error: async (error: Error) => {
+ component.tareas = await component.tareasService.todasLasTareas()
+ mostrarError(component, error)
+ }
+})
diff --git a/src/components/validationField/validationField.component.css b/src/app/validation-field/validation-field.component.css
similarity index 100%
rename from src/components/validationField/validationField.component.css
rename to src/app/validation-field/validation-field.component.css
diff --git a/src/app/validation-field/validation-field.component.html b/src/app/validation-field/validation-field.component.html
new file mode 100644
index 0000000..897f0f6
--- /dev/null
+++ b/src/app/validation-field/validation-field.component.html
@@ -0,0 +1,7 @@
+@if (tarea.hasErrors(field)) {
+
+}
diff --git a/src/app/validation-field/validation-field.component.spec.ts b/src/app/validation-field/validation-field.component.spec.ts
new file mode 100644
index 0000000..c15bafa
--- /dev/null
+++ b/src/app/validation-field/validation-field.component.spec.ts
@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ValidationFieldComponent } from './validation-field.component'
+import { tareaPrincipal } from 'services/httpClientSpy'
+import { Tarea } from 'domain/tarea'
+
+describe('ValidationFieldComponent', () => {
+ let component: ValidationFieldComponent
+ let fixture: ComponentFixture
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ValidationFieldComponent]
+ })
+ .compileComponents()
+
+ fixture = TestBed.createComponent(ValidationFieldComponent)
+ component = fixture.componentInstance
+ component.tarea = Object.assign(new Tarea(), { ...tareaPrincipal })
+ component.field = 'descripcion'
+ fixture.detectChanges()
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+
+ it('should not show if field has no error', () => {
+ const compiled = fixture.debugElement.nativeElement
+ expect(compiled.querySelector('[data-testid="error-message-descripcion"]')).toBeNull()
+ })
+
+ it('should not show if field has no error', () => {
+ component.tarea.descripcion = ''
+ component.tarea.validar()
+ fixture.detectChanges()
+ const compiled = fixture.debugElement.nativeElement
+ expect(compiled.querySelector('[data-testid="error-message-descripcion"]')).toBeTruthy()
+ })
+
+})
diff --git a/src/components/validationField/validationField.component.ts b/src/app/validation-field/validation-field.component.ts
similarity index 52%
rename from src/components/validationField/validationField.component.ts
rename to src/app/validation-field/validation-field.component.ts
index 00cf5e6..92d0109 100644
--- a/src/components/validationField/validationField.component.ts
+++ b/src/app/validation-field/validation-field.component.ts
@@ -1,10 +1,12 @@
-import { Tarea } from 'src/domain/tarea'
import { Component, Input } from '@angular/core'
+import { Tarea } from 'domain/tarea'
@Component({
selector: 'validation-field',
- templateUrl: './validationField.component.html',
- styleUrls: ['./validationField.component.css']
+ standalone: true,
+ imports: [],
+ templateUrl: './validation-field.component.html',
+ styleUrl: './validation-field.component.css'
})
export class ValidationFieldComponent {
@Input() tarea!: Tarea
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/nuevaTarea/nuevaTarea.component.spec.ts b/src/components/nuevaTarea/nuevaTarea.component.spec.ts
deleted file mode 100644
index 12995d5..0000000
--- a/src/components/nuevaTarea/nuevaTarea.component.spec.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http'
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { FormsModule } from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser'
-import { Router } from '@angular/router'
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
-import { Usuario } from 'src/domain/usuario'
-import { httpClientSpy } from 'src/services/httpClientSpy'
-
-import { ValidationFieldComponent } from './../validationField/validationField.component'
-import { NuevaTareaComponent } from './nuevaTarea.component'
-import { DpDatePickerModule, ISelectionEvent } from 'ng2-date-picker'
-
-describe('NuevaTareaComponent', () => {
- let component: NuevaTareaComponent
- let fixture: ComponentFixture
- let routerSpy: jasmine.SpyObj
-
- beforeEach(async () => {
- routerSpy = jasmine.createSpyObj('Router', ['navigate', 'navigateByUrl'])
-
- TestBed.configureTestingModule({
- declarations: [
- NuevaTareaComponent,
- ValidationFieldComponent,
- ],
- imports: [
- BrowserModule,
- FormsModule,
- FontAwesomeModule,
- HttpClientModule,
- DpDatePickerModule,
- ],
- providers: [
- { provide: HttpClient, useValue: httpClientSpy },
- { provide: Router, useValue: routerSpy },
- ]
- })
- .compileComponents()
-
- })
-
- beforeEach(async () => {
- fixture = TestBed.createComponent(NuevaTareaComponent)
- component = fixture.componentInstance
- fixture.detectChanges()
- })
-
- it('should create', () => {
- expect(component).toBeTruthy()
- })
- it('should create a new task', async () => {
- // Arrange
- await sendInput('descripcion', 'Aprender Angular')
- await sendInput('iteracion', 'Iteracion 1')
- component.asignatario = new Usuario('Nahuel Palumbo')
- component.fechaSeleccionada({
- date: new Date()
- } as unknown as ISelectionEvent)
- await sendInput('porcentaje-cumplimiento', '20')
-
- // Act
- getByTestId('guardar').click()
- fixture.detectChanges()
- await fixture.whenStable()
-
- // Assert
- const route = routerSpy.navigateByUrl.calls.first().args[0]
- expect(route).toBe('/')
- })
-
- it('an invalid task cannot be created', async () => {
- await sendInput('porcentaje-cumplimiento', '101')
- getByTestId('guardar').click()
- fixture.detectChanges()
- await fixture.whenStable()
- expect(routerSpy.navigateByUrl).toHaveBeenCalledTimes(0)
- expect(component.tarea.hasErrors).toBeTruthy()
- expect(component.tarea.errors.length).toBe(4)
- validateErrorField('descripcion')
- validateErrorField('iteracion')
- validateErrorField('fecha')
- validateErrorField('porcentajeCumplimiento')
- })
-
- function getByTestId(testId: string) {
- const resultHtml = fixture.debugElement.nativeElement
- return resultHtml.querySelector(`[data-testid="${testId}"`)
- }
-
- async function sendInput(testId: string, text: string) {
- const inputElement = getByTestId(testId)
- inputElement.value = text
- inputElement.dispatchEvent(new Event('input'))
- fixture.detectChanges()
- return fixture.whenStable()
- }
-
- function validateErrorField(field: string) {
- expect(getByTestId(`error-message-${field}`).innerHTML).toBeTruthy()
- }
-})
diff --git a/src/components/tareas/tareas.component.css b/src/components/tareas/tareas.component.css
deleted file mode 100644
index 67dba91..0000000
--- a/src/components/tareas/tareas.component.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.filtro {
- margin-bottom: 1em;
-}
-
-.nuevaTarea {
- width: 20%;
-}
diff --git a/src/components/tareas/tareas.component.spec.ts b/src/components/tareas/tareas.component.spec.ts
deleted file mode 100644
index a0b5fdd..0000000
--- a/src/components/tareas/tareas.component.spec.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { registerLocaleData } from '@angular/common'
-import { HttpClient, HttpClientModule } from '@angular/common/http'
-import localeEs from '@angular/common/locales/es'
-import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'
-import { FormsModule } from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser'
-import { Router } from '@angular/router'
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
-import { throwError } from 'rxjs'
-import { AppRoutingModule, routingComponents } from 'src/app/app-routing.module'
-import { httpClientSpy } from 'src/services/httpClientSpy'
-
-import { IconsModule } from '../../app/icons.module'
-import { FilterTareas } from '../../pipes/filterTareas.pipe'
-import { OrderTareas } from '../../pipes/orderTareas.pipe'
-import { TareasComponent } from './tareas.component'
-
-//
-/** Registramos el locale ES para formatear números */
-// Font Awesome para los íconos
-//
-// routing
-// componentes propios
-
-registerLocaleData(localeEs)
-
-
-describe('TareasComponent', () => {
- let component: TareasComponent
- let fixture: ComponentFixture
- let routerSpy: jasmine.SpyObj
-
- beforeEach(async () => {
- routerSpy = jasmine.createSpyObj('Router', ['navigate', 'navigateByUrl'])
-
- TestBed.configureTestingModule({
- declarations: [
- FilterTareas,
- OrderTareas,
- routingComponents
- ],
- imports: [
- BrowserModule,
- FormsModule,
- AppRoutingModule,
- FontAwesomeModule,
- IconsModule,
- // Super importante -> para poder mockear el service hay que importar el módulo HttpClient
- HttpClientModule,
- ],
- providers: [
- { provide: HttpClient, useValue: httpClientSpy, }
- ]
- }).compileComponents()
-
- TestBed.overrideComponent(TareasComponent, {
- set: {
- providers: [
- { provide: Router, useValue: routerSpy, },
- ]
- }
- })
-
- fixture = TestBed.createComponent(TareasComponent)
- // Estas tres líneas activan el envío de mensajes necesario
- fixture.detectChanges()
- await fixture.whenStable()
- fixture.detectChanges()
-
- component = fixture.componentInstance
- })
-
- it('should create', () => {
- expect(component).toBeTruthy()
- })
-
- it('should initially show 2 pending tasks', () => {
- expect(2).toBe(component.tareas.length)
- })
-
- it('first task can be marked as done', () => {
- expect(getByTestId('cumplir_1')).toBeTruthy()
- })
-
- it('when a task is done, it has 100% of completion', () => {
- getByTestId('cumplir_1').click()
- fixture.detectChanges()
- // Chequeamos que el objeto de dominio tarea responde correctamente,
- // pero también el binding entre componente y vista
- expect(getByTestId('porcentaje_1').textContent).toBe('100,00')
- // https://daveceddia.com/jasmine-2-spy-cheat-sheet/
- // Chequeamos que se haya enviado la información correctamente al backend
- const tareaActualizada = httpClientSpy.put.calls.mostRecent().args[1]
- expect(tareaActualizada.porcentajeCumplimiento).toBe(100)
- })
-
- it('unassign first task', async () => {
- getByTestId('desasignar_1').click()
- fixture.detectChanges()
- expect(getByTestId('asignatario_1').textContent).toBe('')
- })
-
- it('searching for second task should have one tr in tasks list', () => {
- component.tareaBuscada = 'e2e'
- fixture.detectChanges()
- const resultHtml = fixture.debugElement.nativeElement
- expect(resultHtml.querySelectorAll('[data-testid="fila-tarea"]').length).toBe(1)
- })
-
- it('unassign - should catch error gracefully', fakeAsync(() => {
- // En lugar de callFake podemos usar returnValue como se muestra abajo
- spyOn(component.tareasService, 'actualizarTarea').and.callFake(
- () => throwError(() => new Error('Fake Error'))
- )
- getByTestId('desasignar_1').click()
- tick(1000)
- fixture.detectChanges()
-
- expect(getByTestId('error-message')?.innerHTML).toBeTruthy()
- // Importante para que no falle con "Error: 1 timer(s) still in the queue"
- // tick(2000)
- // o mejor...
- flush()
- }))
-
- it('finish - should catch error gracefully', fakeAsync(() => {
- spyOn(component.tareasService, 'actualizarTarea').and.returnValue(
- throwError(() => new Error('Fake Error'))
- )
- getByTestId('cumplir_1').click()
- tick(1000)
- fixture.detectChanges()
- expect(getByTestId('error-message')?.innerHTML).toBeTruthy()
- flush()
- }))
-
- it('create new task should navigate', async () => {
- getByTestId('nueva-tarea').click()
-
- fixture.detectChanges()
-
- const route = routerSpy.navigateByUrl.calls.first().args[0]
- expect(route).toBe('/nuevaTarea')
- })
-
- it('assign task should navigate', () => {
- getByTestId('asignar_2').click()
-
- fixture.detectChanges()
-
- // const route = routerSpy.navigate.calls.first().args[0]
- // expect(route).toEqual(['/asignarTarea', 2])
-
- // Con destructuring
- const [ url, tareaId ] = routerSpy.navigate.calls.first().args[0]
- expect(url).toBe('/asignarTarea')
- expect(tareaId).toBe(2)
- })
-
- function getByTestId(testId: string) {
- const resultHtml = fixture.debugElement.nativeElement
- return resultHtml.querySelector(`[data-testid="${testId}"]`)
- }
-})
diff --git a/src/components/validationField/validationField.component.html b/src/components/validationField/validationField.component.html
deleted file mode 100644
index 5c02098..0000000
--- a/src/components/validationField/validationField.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/src/domain/tarea.ts b/src/domain/tarea.ts
index 414419b..8df0d6a 100644
--- a/src/domain/tarea.ts
+++ b/src/domain/tarea.ts
@@ -1,134 +1,159 @@
-import { Dayjs } from 'dayjs'
+import { format, parse } from 'date-fns'
import { Usuario } from './usuario'
-import { FORMATO_FECHA } from 'src/services/configuration'
-import * as dayjs from 'dayjs'
+import { FORMATO_FECHA } from 'services/configuration'
const CUMPLIDA = 100
export type TareaJSON = {
- id?: number,
- descripcion: string,
- iteracion: string,
- asignadoA?: string,
- fecha?: string,
- porcentajeCumplimiento: number
+ id?: number
+ descripcion: string
+ iteracion: string
+ asignadoA?: string
+ fecha?: string
+ porcentajeCumplimiento: number
}
export class ValidationMessage {
- constructor(public field: string, public message: string) {}
+ constructor(
+ public field: string,
+ public message: string
+ ) {}
}
export class Tarea {
- errors: ValidationMessage[] = []
-
- constructor(public id?: number, public descripcion: string = '', public iteracion: string = '', public asignatario?: Usuario, public fecha?: Dayjs, public porcentajeCumplimiento: number = 0) { }
-
- static fromJson(tareaJSON: TareaJSON): Tarea {
- return Object.assign(new Tarea(), tareaJSON, {
- asignatario: tareaJSON.asignadoA ? Usuario.fromJSON(tareaJSON.asignadoA) : undefined,
- fecha: dayjs(tareaJSON.fecha, FORMATO_FECHA)
- })
- }
-
- contiene(palabra: string): boolean {
- return (this.descripcion.toUpperCase() || '').includes(palabra.toUpperCase()) || (!!this.asignatario && (this.asignatario.nombre.toUpperCase() || '').includes(palabra.toUpperCase()))
- }
-
- cumplio(porcentaje: number): boolean {
- return this.porcentajeCumplimiento === porcentaje
- }
-
- cumplioMenosDe(porcentaje: number): boolean {
- return this.porcentajeCumplimiento < porcentaje
- }
-
- sePuedeCumplir(): boolean {
- return this.porcentajeCumplimiento < CUMPLIDA && this.estaAsignada()
- }
-
- cumplir() {
- this.porcentajeCumplimiento = CUMPLIDA
- }
-
- desasignar() {
- this.asignatario = undefined
- }
-
- sePuedeDesasignar() {
- return this.sePuedeCumplir()
- }
-
- asignarA(asignatario?: Usuario) {
- this.asignatario = asignatario
- }
-
- estaAsignadoA(asignatario: Usuario) {
- return this.asignatario && this.asignatario.equals(asignatario)
- }
-
- sePuedeAsignar(): boolean {
- return !this.estaCumplida()
- }
-
- estaCumplida(): boolean {
- return this.porcentajeCumplimiento === CUMPLIDA
- }
-
- estaAsignada(): boolean {
- return !!this.asignatario
- }
-
- toJSON(): TareaJSON {
- return {
- id: this.id,
- descripcion: this.descripcion,
- iteracion: this.iteracion,
- fecha: this.fechaString(),
- porcentajeCumplimiento: this.porcentajeCumplimiento,
- asignadoA: this.asignatario?.nombre,
- }
- }
-
- fechaString(): string | undefined {
- return this.fecha?.format(FORMATO_FECHA)
- }
-
- key(): number {
- return this.id || 0
- }
-
- invalid(): boolean {
- 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))
- }
-
- validar() {
- this.errors = []
- if (!this.descripcion) {
- this.addError('descripcion', 'Debe ingresar descripción')
- }
- if (!this.iteracion) {
- this.addError('iteracion', 'Debe ingresar iteración')
- }
- if (!this.fecha) {
- this.addError('fecha', 'Debe ingresar fecha')
- }
- if (this.porcentajeCumplimiento < 0) {
- this.addError('porcentajeCumplimiento', 'El porcentaje debe ser positivo')
- }
- if (this.porcentajeCumplimiento > 100) {
- this.addError('porcentajeCumplimiento', 'El porcentaje no puede ser superior a 100')
- }
- }
+ errors: ValidationMessage[] = []
+
+ constructor(
+ public id?: number,
+ public descripcion: string = '',
+ public iteracion: string = '',
+ public asignatario?: Usuario,
+ public fecha?: Date,
+ public porcentajeCumplimiento: number = 0
+ ) {}
+
+ static fromJson(tareaJSON: TareaJSON): Tarea {
+ return Object.assign(new Tarea(), tareaJSON, {
+ asignatario: tareaJSON.asignadoA
+ ? Usuario.fromJSON(tareaJSON.asignadoA)
+ : undefined,
+ fecha: tareaJSON.fecha
+ ? parse(tareaJSON.fecha, FORMATO_FECHA, new Date())
+ : undefined
+ })
+ }
+
+ contiene(palabra: string): boolean {
+ return (
+ (this.descripcion.toUpperCase() || '').includes(palabra.toUpperCase()) ||
+ (!!this.asignatario &&
+ (this.asignatario.nombre.toUpperCase() || '').includes(
+ palabra.toUpperCase()
+ ))
+ )
+ }
+
+ cumplio(porcentaje: number): boolean {
+ return this.porcentajeCumplimiento === porcentaje
+ }
+
+ cumplioMenosDe(porcentaje: number): boolean {
+ return this.porcentajeCumplimiento < porcentaje
+ }
+
+ sePuedeCumplir(): boolean {
+ return this.porcentajeCumplimiento < CUMPLIDA && this.estaAsignada()
+ }
+
+ cumplir() {
+ this.porcentajeCumplimiento = CUMPLIDA
+ }
+
+ desasignar() {
+ this.asignatario = undefined
+ }
+
+ sePuedeDesasignar() {
+ return this.sePuedeCumplir()
+ }
+
+ asignarA(asignatario?: Usuario) {
+ this.asignatario = asignatario
+ }
+
+ estaAsignadoA(asignatario: Usuario) {
+ return this.asignatario && this.asignatario.equals(asignatario)
+ }
+
+ sePuedeAsignar(): boolean {
+ return !this.estaCumplida()
+ }
+
+ estaCumplida(): boolean {
+ return this.porcentajeCumplimiento === CUMPLIDA
+ }
+
+ estaAsignada(): boolean {
+ return !!this.asignatario
+ }
+
+ toJSON(): TareaJSON {
+ return {
+ id: this.id,
+ descripcion: this.descripcion,
+ iteracion: this.iteracion,
+ fecha: this.fechaString(),
+ porcentajeCumplimiento: this.porcentajeCumplimiento,
+ asignadoA: this.asignatario?.nombre
+ }
+ }
+
+ fechaString(): string | undefined {
+ return this.fecha ? format(this.fecha, FORMATO_FECHA) : ''
+ }
+
+ key(): number {
+ return this.id || 0
+ }
+
+ invalid(): boolean {
+ 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))
+ }
+
+ validar() {
+ this.errors = []
+ if (!this.descripcion) {
+ this.addError('descripcion', 'Debe ingresar descripción')
+ }
+ if (!this.iteracion) {
+ this.addError('iteracion', 'Debe ingresar iteración')
+ }
+ if (!this.fecha) {
+ this.addError('fecha', 'Debe ingresar fecha')
+ }
+ if (this.porcentajeCumplimiento < 0) {
+ this.addError('porcentajeCumplimiento', 'El porcentaje debe ser positivo')
+ }
+ if (this.porcentajeCumplimiento > 100) {
+ this.addError(
+ 'porcentajeCumplimiento',
+ 'El porcentaje no puede ser superior a 100'
+ )
+ }
+ }
}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index bc0327d..0000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
deleted file mode 100644
index bc79a5b..0000000
--- a/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
- production: false
-}
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
diff --git a/src/icons.module.ts b/src/icons.module.ts
deleted file mode 100644
index 40c2515..0000000
--- a/src/icons.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from "@angular/core"
-import {
- FontAwesomeModule,
- FaIconLibrary,
-} from "@fortawesome/angular-fontawesome"
-import {
- faUserCheck,
- faUserMinus,
- faCalendarCheck,
- faTasks,
-} from "@fortawesome/free-solid-svg-icons"
-
-@NgModule({
- imports: [FontAwesomeModule],
- exports: [FontAwesomeModule],
-})
-export class IconsModule {
- constructor(library: FaIconLibrary) {
- library.addIcons(faUserCheck, faUserMinus, faCalendarCheck, faTasks)
- }
-}
diff --git a/src/index.html b/src/index.html
index 5db1afd..6dab894 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
- Tareas en Angular
+ Tareas
diff --git a/src/main.ts b/src/main.ts
index 3d8855b..129db78 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,11 @@
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import '@angular/common/locales/global/es'
+import { bootstrapApplication } from '@angular/platform-browser'
+import { appConfig } from './app/app.config'
+import { AppComponent } from './app/app.component'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
-import { AppModule } from './app/app.module'
-import { environment } from './environments/environment'
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err))
-if (environment.production) {
- enableProdMode()
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
- .catch(err => console.error(err))
+dayjs.extend(customParseFormat)
\ No newline at end of file
diff --git a/src/pipes/filterTareas.pipe.ts b/src/pipes/filterTareas.pipe.ts
index 7b84501..56d7c13 100644
--- a/src/pipes/filterTareas.pipe.ts
+++ b/src/pipes/filterTareas.pipe.ts
@@ -1,8 +1,9 @@
import { PipeTransform, Pipe } from '@angular/core'
-import { Tarea } from '../domain/tarea'
+import { Tarea } from 'domain/tarea'
@Pipe({
- name: 'filterTareas'
+ name: 'filterTareas',
+ standalone: true,
})
export class FilterTareas implements PipeTransform {
diff --git a/src/pipes/orderTareas.pipe.ts b/src/pipes/orderTareas.pipe.ts
index c9fab34..fc8b0ca 100644
--- a/src/pipes/orderTareas.pipe.ts
+++ b/src/pipes/orderTareas.pipe.ts
@@ -1,8 +1,9 @@
import { Pipe, PipeTransform } from '@angular/core'
-import { Tarea } from 'src/domain/tarea'
+import { Tarea } from 'domain/tarea'
@Pipe({
- name: 'orderTareas'
+ name: 'orderTareas',
+ standalone: true,
})
export class OrderTareas implements PipeTransform {
diff --git a/src/polyfills.ts b/src/polyfills.ts
deleted file mode 100644
index ef3c7e2..0000000
--- a/src/polyfills.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js'; // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js' // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/src/services/configuration.ts b/src/services/configuration.ts
index 61fcb56..7e5d90a 100644
--- a/src/services/configuration.ts
+++ b/src/services/configuration.ts
@@ -1,2 +1,2 @@
export const REST_SERVER_URL = 'http://localhost:9000'
-export const FORMATO_FECHA = "DD/MM/YYYY"
+export const FORMATO_FECHA = 'dd/MM/yyyy'
diff --git a/src/services/httpClientSpy.ts b/src/services/httpClientSpy.ts
index f41a5ff..9458078 100644
--- a/src/services/httpClientSpy.ts
+++ b/src/services/httpClientSpy.ts
@@ -1,15 +1,14 @@
import { of } from 'rxjs'
-import { Tarea } from 'src/domain/tarea'
-import { Usuario } from 'src/domain/usuario'
+import { Tarea } from 'domain/tarea'
+import { Usuario } from 'domain/usuario'
import { REST_SERVER_URL } from './configuration'
-import * as dayjs from 'dayjs'
export const usuarioAsignatario = new Usuario('Gabriel Pérez')
-export const tareaPrincipal = new Tarea(1, 'Testear httpClient con stubs', 'Iteración 1', usuarioAsignatario, dayjs('2020-05-02'), 50)
+export const tareaPrincipal = new Tarea(1, 'Testear httpClient con stubs', 'Iteración 1', usuarioAsignatario, new Date('2020-05-02'), 50)
const tareasStub = [
tareaPrincipal,
- new Tarea(2, 'Desarrollar testeo e2e', 'Iteración 2', undefined, dayjs('2020-11-12'), 0),
+ new Tarea(2, 'Desarrollar testeo e2e', 'Iteración 2', undefined, new Date('2020-11-12'), 0),
].map((tarea) => tarea.toJSON())
const usuariosStub = [
diff --git a/src/services/tareas.service.ts b/src/services/tareas.service.ts
index 557ede6..7e3ff8a 100644
--- a/src/services/tareas.service.ts
+++ b/src/services/tareas.service.ts
@@ -25,7 +25,7 @@ export class TareasService {
}
actualizarTarea(tarea: Tarea) {
- return this.httpClient.put(REST_SERVER_URL + '/tareas/' + tarea.id, tarea.toJSON())
+ return lastValueFrom(this.httpClient.put(REST_SERVER_URL + '/tareas/' + tarea.id, tarea.toJSON()))
}
async crearTarea(tarea: Tarea) {
diff --git a/src/services/usuarios.service.ts b/src/services/usuarios.service.ts
index 11b4a81..d50f27c 100644
--- a/src/services/usuarios.service.ts
+++ b/src/services/usuarios.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { REST_SERVER_URL } from './configuration'
-import { Usuario } from 'src/domain/usuario'
+import { Usuario } from 'domain/usuario'
import { lastValueFrom } from 'rxjs'
diff --git a/src/styles.css b/src/styles.css
index b8f006a..90d4ee0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,24 +1 @@
/* You can add global styles to this file, and also import other style files */
-* {
- font-family: 'Inter', sans-serif;
-}
-
-.fila {
- display: flex;
- flex-direction: row;
-}
-
-.dp-calendar-nav-left, .dp-calendar-nav-right {
- border: 0;
- background-color: white;
-}
-
-/* Customizaciones para el date picker */
-.dp-calendar-weekday, .dp-calendar-day {
- width: 10em;
-}
-
-.dp-input-container > input {
- border-color: var(--bs-border-color);
- border-style: 1px solid;
-}
\ No newline at end of file
diff --git a/src/test.ts b/src/test.ts
deleted file mode 100644
index de1a1c7..0000000
--- a/src/test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing'
-import { getTestBed } from '@angular/core/testing'
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing'
-
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- keys(): string[];
- (id: string): T;
- };
-}
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
-)
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/)
-// And load the modules.
-context.keys().map(context)
diff --git a/tsconfig.json b/tsconfig.json
index ed966d4..c44e3be 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,19 +2,19 @@
{
"compileOnSave": false,
"compilerOptions": {
- "baseUrl": "./",
+ "baseUrl": "./src",
"outDir": "./dist/out-tsc",
- "forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
"sourceMap": true,
"declaration": false,
- "downlevelIteration": true,
"experimentalDecorators": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
diff --git a/video/demo.gif b/video/demo.gif
new file mode 100644
index 0000000..4c10a65
Binary files /dev/null and b/video/demo.gif differ
|