From 373054d97ef552c6941fe5d33648aecdcb84970b Mon Sep 17 00:00:00 2001 From: Juan Frontons Date: Tue, 25 May 2021 20:07:04 -0300 Subject: [PATCH] ejercicio no terminado --- src/app/app-routing.module.ts | 3 +- src/app/app.component.html | 6 +--- src/app/app.component.scss | 4 +++ src/app/app.component.spec.ts | 14 ++++----- src/app/app.component.ts | 2 +- src/app/app.module.ts | 12 ++++---- src/app/model/todo-item.ts | 9 ------ src/app/todo-app/todo-app.component.html | 14 ++++----- src/app/todo-app/todo-app.component.spec.ts | 8 ++--- src/app/todo-app/todo-app.component.ts | 29 +++++++++++++++---- .../todo-footer/todo-footer.component.html | 1 + .../todo-footer/todo-footer.component.scss | 0 .../todo-footer/todo-footer.component.spec.ts | 25 ++++++++++++++++ src/app/todo-footer/todo-footer.component.ts | 15 ++++++++++ src/app/todo-form/todo-form.component.html | 4 ++- src/app/todo-form/todo-form.component.spec.ts | 8 ++--- src/app/todo-form/todo-form.component.ts | 14 +++++++-- src/app/todo-list/todo-list.component.html | 7 +++++ src/app/todo-list/todo-list.component.scss | 0 src/app/todo-list/todo-list.component.spec.ts | 25 ++++++++++++++++ src/app/todo-list/todo-list.component.ts | 28 ++++++++++++++++++ src/environments/environment.ts | 4 +-- src/index.html | 2 +- src/polyfills.ts | 6 ++-- src/test.ts | 2 +- 25 files changed, 184 insertions(+), 58 deletions(-) delete mode 100644 src/app/model/todo-item.ts create mode 100644 src/app/todo-footer/todo-footer.component.html create mode 100644 src/app/todo-footer/todo-footer.component.scss create mode 100644 src/app/todo-footer/todo-footer.component.spec.ts create mode 100644 src/app/todo-footer/todo-footer.component.ts create mode 100644 src/app/todo-list/todo-list.component.html create mode 100644 src/app/todo-list/todo-list.component.scss create mode 100644 src/app/todo-list/todo-list.component.spec.ts create mode 100644 src/app/todo-list/todo-list.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..0297262 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - +import { RouterModule, Routes } from '@angular/router'; const routes: Routes = []; diff --git a/src/app/app.component.html b/src/app/app.component.html index cebf745..71f0695 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..f21605c 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,4 @@ +:host{ + font-size: x-large; + font-family: Arial, Helvetica, sans-serif; +} \ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 56a385e..3126c68 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,10 +1,10 @@ -import { TestBed, async } from '@angular/core/testing'; +import { TestBed } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ imports: [ RouterTestingModule ], @@ -12,7 +12,7 @@ describe('AppComponent', () => { AppComponent ], }).compileComponents(); - })); + }); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); @@ -20,16 +20,16 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'ng-peti'`, () => { + it(`should have as title 'Ejercicio-in-out'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('ng-peti'); + expect(app.title).toEqual('Ejercicio-in-out'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('ng-peti app is running!'); + expect(compiled.querySelector('.content span').textContent).toContain('Ejercicio-in-out app is running!'); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6a08b74..8bdd2b6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'] }) export class AppComponent { - title = 'ng-peti'; + title = 'Ejercicio-in-out'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1e49a4a..f85b14a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,22 +1,24 @@ -import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TodoAppComponent } from './todo-app/todo-app.component'; import { TodoFormComponent } from './todo-form/todo-form.component'; +import { TodoListComponent } from './todo-list/todo-list.component'; +import { TodoFooterComponent } from './todo-footer/todo-footer.component'; @NgModule({ declarations: [ AppComponent, TodoAppComponent, - TodoFormComponent + TodoFormComponent, + TodoListComponent, + TodoFooterComponent ], imports: [ BrowserModule, - AppRoutingModule, - BrowserAnimationsModule + AppRoutingModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts deleted file mode 100644 index bdb4f8b..0000000 --- a/src/app/model/todo-item.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class TodoItem { - id: number; - description: string; - isCompleted: boolean = false; - - toggleCompleted() { - this.isCompleted = !this.isCompleted; - } -} diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html index 5d907a2..f500142 100644 --- a/src/app/todo-app/todo-app.component.html +++ b/src/app/todo-app/todo-app.component.html @@ -1,8 +1,8 @@ - - + + - + \ No newline at end of file diff --git a/src/app/todo-app/todo-app.component.spec.ts b/src/app/todo-app/todo-app.component.spec.ts index 070f2ac..c832938 100644 --- a/src/app/todo-app/todo-app.component.spec.ts +++ b/src/app/todo-app/todo-app.component.spec.ts @@ -1,4 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TodoAppComponent } from './todo-app.component'; @@ -6,12 +6,12 @@ describe('TodoAppComponent', () => { let component: TodoAppComponent; let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ declarations: [ TodoAppComponent ] }) .compileComponents(); - })); + }); beforeEach(() => { fixture = TestBed.createComponent(TodoAppComponent); diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts index 700530b..246a76d 100644 --- a/src/app/todo-app/todo-app.component.ts +++ b/src/app/todo-app/todo-app.component.ts @@ -1,20 +1,39 @@ -import { Component, OnInit } from '@angular/core'; -import {TodoItem} from '../model/todo-item'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; @Component({ - selector: 'app-todo', + selector: 'todo-app', templateUrl: './todo-app.component.html', styleUrls: ['./todo-app.component.scss'] }) export class TodoAppComponent implements OnInit { list = []; lastItemId = 0; + + + constructor() { } ngOnInit(): void { + + } + + onItemStateChanged(item: any){ + item.completed = !item.completed } - onItemStateChanged(item: TodoItem) { - item.toggleCompleted(); + onTodoItemRemoved(item : any){ + const index = this.list.findIndex(each => each.desc === this.item.desc) + this.list.splice(index,1); } + + onTodoItemCreated(description : string){ + + this.lastItemId+=1; + this.list.push({id: this.lastItemId , desc: description, completed: false}); + + + } + + + } diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html new file mode 100644 index 0000000..35cf2dc --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.html @@ -0,0 +1 @@ +

todo-footer works!

diff --git a/src/app/todo-footer/todo-footer.component.scss b/src/app/todo-footer/todo-footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/todo-footer/todo-footer.component.spec.ts b/src/app/todo-footer/todo-footer.component.spec.ts new file mode 100644 index 0000000..10e7952 --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoFooterComponent } from './todo-footer.component'; + +describe('TodoFooterComponent', () => { + let component: TodoFooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TodoFooterComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/todo-footer/todo-footer.component.ts b/src/app/todo-footer/todo-footer.component.ts new file mode 100644 index 0000000..bf0e5f9 --- /dev/null +++ b/src/app/todo-footer/todo-footer.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-todo-footer', + templateUrl: './todo-footer.component.html', + styleUrls: ['./todo-footer.component.scss'] +}) +export class TodoFooterComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html index 69e81bd..d42e6b5 100644 --- a/src/app/todo-form/todo-form.component.html +++ b/src/app/todo-form/todo-form.component.html @@ -1 +1,3 @@ -

todo-form works!

+ + + diff --git a/src/app/todo-form/todo-form.component.spec.ts b/src/app/todo-form/todo-form.component.spec.ts index 6f823ef..2280503 100644 --- a/src/app/todo-form/todo-form.component.spec.ts +++ b/src/app/todo-form/todo-form.component.spec.ts @@ -1,4 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TodoFormComponent } from './todo-form.component'; @@ -6,12 +6,12 @@ describe('TodoFormComponent', () => { let component: TodoFormComponent; let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ declarations: [ TodoFormComponent ] }) .compileComponents(); - })); + }); beforeEach(() => { fixture = TestBed.createComponent(TodoFormComponent); diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts index 78dc6ab..93d8e3d 100644 --- a/src/app/todo-form/todo-form.component.ts +++ b/src/app/todo-form/todo-form.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Output, EventEmitter} from '@angular/core'; +import { Component, OnInit, Output , EventEmitter } from '@angular/core'; @Component({ selector: 'app-todo-form', @@ -7,10 +7,20 @@ import { Component, OnInit, Output, EventEmitter} from '@angular/core'; }) export class TodoFormComponent implements OnInit { - @Output() add = new EventEmitter(); + @Output() addst = new EventEmitter(); + constructor() { } ngOnInit(): void { } + add(inputControl: { value: string | String | undefined; }){ + + if(inputControl.value === ''){ + return; + } + this.addst.emit(inputControl.value); + inputControl.value = ''; + } + } diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html new file mode 100644 index 0000000..433a639 --- /dev/null +++ b/src/app/todo-list/todo-list.component.html @@ -0,0 +1,7 @@ +
    +
  • {{item.desc}} + + +
    • +
diff --git a/src/app/todo-list/todo-list.component.scss b/src/app/todo-list/todo-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/todo-list/todo-list.component.spec.ts b/src/app/todo-list/todo-list.component.spec.ts new file mode 100644 index 0000000..f5ca307 --- /dev/null +++ b/src/app/todo-list/todo-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoListComponent } from './todo-list.component'; + +describe('TodoListComponent', () => { + let component: TodoListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TodoListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts new file mode 100644 index 0000000..7727b17 --- /dev/null +++ b/src/app/todo-list/todo-list.component.ts @@ -0,0 +1,28 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +@Component({ + selector: 'app-todo-list', + templateUrl: './todo-list.component.html', + styleUrls: ['./todo-list.component.scss'] +}) +export class TodoListComponent implements OnInit { + + @Output() itemRemoved = new EventEmitter(); + @Output() itemStateChanged = new EventEmitter(); + @Input() list = []; + + constructor() { } + + ngOnInit(): void { + } + + onItemRemoved(item: any){ + this.itemRemoved.emit(item); + } + + toggle(item: any){ + this.itemStateChanged.emit(item); + } + + +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817..f56ff47 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,5 +1,5 @@ // This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. export const environment = { @@ -13,4 +13,4 @@ export const environment = { * 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/dist/zone-error'; // Included with Angular CLI. +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/src/index.html b/src/index.html index 62a7817..c4682ae 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - NgPeti + EjercicioInOut diff --git a/src/polyfills.ts b/src/polyfills.ts index 03711e5..373f538 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -18,7 +18,9 @@ * BROWSER POLYFILLS */ -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +/** + * IE11 requires the following for NgClass support on SVG elements + */ // import 'classlist.js'; // Run `npm install --save classlist.js`. /** @@ -55,7 +57,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** diff --git a/src/test.ts b/src/test.ts index 50193eb..2042356 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,6 +1,6 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; +import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule,