From 88c04d6aa04400d65eedd833ee4de676b430ca95 Mon Sep 17 00:00:00 2001 From: imelilabourne Date: Tue, 15 Sep 2020 13:35:46 +0800 Subject: [PATCH] added empty list template --- db.json | 4 +- .../todo-empty/todo-empty.component.css | 12 ++++++ .../todo-empty/todo-empty.component.html | 6 +++ .../todo-empty/todo-empty.component.spec.ts | 25 +++++++++++++ .../todo-empty/todo-empty.component.ts | 15 ++++++++ .../TodoList/todo-list.component.html | 7 +++- .../TodoList/todo-list.component.ts | 35 +++++++++++------- .../Todo-List-App/services/todo.service.ts | 1 - src/app/app.module.ts | 4 +- src/assets/to-do.png | Bin 0 -> 3843 bytes 10 files changed, 90 insertions(+), 19 deletions(-) create mode 100644 src/app/Todo-List-App/components/todo-empty/todo-empty.component.css create mode 100644 src/app/Todo-List-App/components/todo-empty/todo-empty.component.html create mode 100644 src/app/Todo-List-App/components/todo-empty/todo-empty.component.spec.ts create mode 100644 src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts create mode 100644 src/assets/to-do.png diff --git a/db.json b/db.json index 9e27176..89d58c3 100644 --- a/db.json +++ b/db.json @@ -1,13 +1,13 @@ { "tasks": [ { - "title": "Study Angular", + "title": "Study Angular 6", "completed": false, "editing": false, "id": 1 }, { - "title": "Workout ", + "title": "Workout", "completed": false, "editing": false, "id": 2 diff --git a/src/app/Todo-List-App/components/todo-empty/todo-empty.component.css b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.css new file mode 100644 index 0000000..17bd207 --- /dev/null +++ b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.css @@ -0,0 +1,12 @@ +h3{ + font-size: 2em; +} + +.img-div, h3{ + display: flex; + justify-content: center; +} + +.img-div img{ + max-width: 10em; +} \ No newline at end of file diff --git a/src/app/Todo-List-App/components/todo-empty/todo-empty.component.html b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.html new file mode 100644 index 0000000..122690d --- /dev/null +++ b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.html @@ -0,0 +1,6 @@ +
+

Your list is Empty 👻

+
+ to-do +
+
diff --git a/src/app/Todo-List-App/components/todo-empty/todo-empty.component.spec.ts b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.spec.ts new file mode 100644 index 0000000..5ee5a5c --- /dev/null +++ b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoEmptyComponent } from './todo-empty.component'; + +describe('TodoEmptyComponent', () => { + let component: TodoEmptyComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TodoEmptyComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoEmptyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts new file mode 100644 index 0000000..66530de --- /dev/null +++ b/src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'todo-empty', + templateUrl: './todo-empty.component.html', + styleUrls: ['./todo-empty.component.css'] +}) +export class TodoEmptyComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/Todo-List-App/containers/TodoList/todo-list.component.html b/src/app/Todo-List-App/containers/TodoList/todo-list.component.html index 5c0f121..ee5e06d 100644 --- a/src/app/Todo-List-App/containers/TodoList/todo-list.component.html +++ b/src/app/Todo-List-App/containers/TodoList/todo-list.component.html @@ -9,6 +9,9 @@
+
+ +
  • @@ -23,12 +26,12 @@
    - +
    - +
diff --git a/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts b/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts index 2d9b903..ab3665e 100644 --- a/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts +++ b/src/app/Todo-List-App/containers/TodoList/todo-list.component.ts @@ -70,25 +70,16 @@ export class TodoList{ // this.taskId++; } - //delete function - deleteTask(tasks: Tasks){ - this.tasks = this.tasks.filter(task => task.id !== tasks.id); - - this.todoService.deleteTask(tasks) - .subscribe(data => this.tasks.filter(task => { - return task.id !== data; - })) - } - toggleEdit(event: Tasks){ event.editing = !event.editing; } - editTask(event: Tasks): void{ + editTask(event: Tasks){ this.beforeEditing = event.title; event.editing = !event.editing; this.todoService.editTodo(event) .subscribe(data => this.tasks = this.tasks.map((task: Tasks )=>{ + if (task.title === event.title){ task = Object.assign({}, task, event); } @@ -96,6 +87,10 @@ export class TodoList{ })); } + console(){ + console.log("try function"); + } + doneEditing(task: Tasks):void{ if(task.title.trim().length === 0){ task.title = this.beforeEditing; @@ -105,7 +100,7 @@ export class TodoList{ cancelEditing(task: Tasks){ task.title = this.beforeEditing; - task.editing = false; + // task.editing = false; } remaining(): number{ @@ -115,9 +110,23 @@ export class TodoList{ atleastOneCompleted(): boolean{ return this.tasks.filter(task => task.completed).length > 0; } + //delete function + deleteTask(tasks: Tasks){ + this.tasks = this.tasks.filter(task => task.id !== tasks.id); - clearCompleted(): void{ + this.todoService.deleteTask(tasks) + .subscribe(data => this.tasks.filter(task => { + return task.id !== data; + })) + } + + clearCompleted(tasks: Tasks){ this.tasks = this.tasks.filter(task => !task.completed); + + this.todoService.deleteTask(tasks) + .subscribe(data => this.tasks.filter(task => { + return task == data; + })) } selectAll():void{ diff --git a/src/app/Todo-List-App/services/todo.service.ts b/src/app/Todo-List-App/services/todo.service.ts index f5441bf..1178731 100644 --- a/src/app/Todo-List-App/services/todo.service.ts +++ b/src/app/Todo-List-App/services/todo.service.ts @@ -18,7 +18,6 @@ export class TodoService{ 'Content-Type': 'application/json' }) }) - } editTodo(task: Tasks):Observable{ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8d05102..184d201 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,11 +7,13 @@ import { AppComponent } from './app.component'; import { TodoList } from './Todo-List-App/containers/TodoList/Todo-list.component'; import { TodoService } from './Todo-List-App/services/todo.service'; import { HttpClientModule } from '@angular/common/http'; +import { TodoEmptyComponent } from './Todo-List-App/components/todo-empty/todo-empty.component'; @NgModule({ declarations: [ AppComponent, - TodoList + TodoList, + TodoEmptyComponent ], imports: [ BrowserModule, diff --git a/src/assets/to-do.png b/src/assets/to-do.png new file mode 100644 index 0000000000000000000000000000000000000000..b55483c942148d2133ffe56e0161b10d246784bf GIT binary patch literal 3843 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 EAFg*AkpKVy literal 0 HcmV?d00001