added CRUD functions

angular.json

@@ -23,9 +23,12 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+            ]
           },
           "configurations": {
             "production": {

db.json

@@ -0,0 +1,16 @@
+{
+  "tasks": [
+    {
+      "title": "Study Angular",
+      "completed": false,
+      "editing": false,
+      "id": 1
+    },
+    {
+      "title": "Workout ",
+      "completed": false,
+      "editing": false,
+      "id": 2
+    }
+  ]
+}

package.json

@@ -11,6 +11,7 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "^0.13.0",
     "@angular/animations": "^6.1.0",
     "@angular/common": "^6.1.0",
     "@angular/compiler": "^6.1.0",
@@ -20,12 +21,16 @@
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "angular-autofocus-fix": "^0.1.2",
+    "bootstrap": "^3.4.1",
     "core-js": "^2.5.4",
+    "font-awesome": "^4.7.0",
+    "json-server": "^0.16.1",
     "rxjs": "~6.2.0",
+    "rxjs-compat": "^6.6.3",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.8.0",
     "@angular/cli": "~6.2.9",
     "@angular/compiler-cli": "^6.1.0",
     "@angular/language-service": "^6.1.0",

src/app/Todo-List-App/containers/TodoList/todo-list.component.css

@@ -0,0 +1,84 @@
+.main{
+    width: 100%;
+    background-color:	#9cb1a033;
+}
+
+.completed{
+    text-decoration-line: line-through;
+}
+
+.addInput{
+    max-width: 500px;
+    line-height: 2em;
+    margin: 10px;
+}
+
+ul > li{
+    display: grid;
+    grid-template-columns: .5fr 2.5fr .5fr .5fr;
+}
+
+li > *{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.listBtn{
+    max-width: 80px;
+}
+
+.main{
+    max-width: 50%;
+    box-shadow: 8px 4px#9cb1a0;
+    border-radius: 20px;
+    padding: 0;
+}
+
+.header, .inputDiv{
+    display: flex;
+    justify-content: center;
+}
+
+.nav{
+    background-color:#bfdbc546;
+    display: block;
+    /* color: white; */
+    line-height: 3em;
+    font-size: 16px;
+    padding-left: 1.5em;
+    margin-top: 1em;
+}
+
+.main-container{
+    margin: 4%;
+}
+
+.main{
+    margin-top: 5em;
+}
+
+li{
+    background-color:	#b9ecc24d;
+    margin: 4px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    font-size: 2rem;
+    line-height: 1.5em;
+}
+
+.info{
+    display: flex;
+    justify-content: flex-end;
+}
+
+input[type="checkbox"]{
+    margin: 0 10px;
+}
+
+.dateClass{
+    font-size: 1.5em;
+    float: right;
+    padding-right: 20px;
+    color: rgb(42, 59, 59);
+}

src/app/Todo-List-App/containers/TodoList/todo-list.component.html

@@ -0,0 +1,45 @@
+<div class="container main">
+    <div class="nav">Hello! <span class="dateClass">{{today | date: 'short'}}</span></div>
+    <div class="main-container">
+        <div class="header">
+            <h1>TODO LIST</h1>
+        </div>
+        <div class="info"><input type="checkbox" (change)="selectAll()">Select All</div>
+        <div class="inputDiv">
+            <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
+        </div>
+        <div class="content">
+            <ul>
+                <li *ngFor= "let task of tasks" @fade>
+                    <input type="checkbox" [(ngModel)]="task.completed">
+
+                    <!-- input to focus -->
+                    <div *ngIf="!task.editing; else editingTask" (dblclick) = "toggleEdit(task)" [ngClass]="{completed: task.completed}">{{task.title}}</div>
+                    <ng-template #editingTask>
+                        <input type="text" [(ngModel)] = "task.title" (blur)="doneEditing(task)"  (keyup.enter)="editTask(task)" (keyup.esc)="cancelEditing(task)" autofocus>
+                    </ng-template>
+
+                    <!-- buttons switching -->
+                    <div *ngIf="!task.editing; else doneBtn" ><button class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div>    
+                    <ng-template #doneBtn>
+                    <div>
+                        <button class="btn btn-success listBtn"(click)="editTask(task)" ><i class="fa fa-edit">   Done</i></button>
+                    </div>
+                    </ng-template>
+                    
+                    <div>
+                        <button class="btn btn-danger listBtn" (click)="deleteTask(task) && doneEditing(task)"><i   class="fa fa-trash"> Del</i></button>
+                    </div>
+                </li>
+            </ul>
+            <div class="info">
+                <div>{{ remaining()}} uncompleted tasks</div>
+            </div>
+            <div *ngIf="atleastOneCompleted()">
+                <button class="btn btn-warning btn-block" (click) ="clearCompleted() && deleteCompleted(task)">Clear Completed</button> 
+                <div class="alert alert-warning">You've selected an item</div>
+            </div>
+            
+        </div>
+    </div>
+</div>

src/app/Todo-List-App/containers/TodoList/todo-list.component.ts

@@ -0,0 +1,127 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Component } from '@angular/core';
+import { Tasks } from 'src/app/Todo-List-App/models/todo-interface';
+import { TodoService } from '../../services/todo.service';
+
+
+@Component({
+    selector: '<todo-list></todo-list>',
+    templateUrl: 'todo-list.component.html',
+    styleUrls: ['todo-list.component.css'],
+    animations: [
+        trigger('fade', [
+            transition(':enter', [
+                style({opacity: 0, transform: 'translateX(-40px)'}),
+                animate(500, style({opacity:1, transform: 'translateY(0px)'}))
+            ]),
+            transition(':leave', [
+                style({opacity: 0, transform: 'translateX(0px)'}),
+                animate(1000, style({opacity:1, transform: 'translateX(-50px)'}))
+            ])
+        ])
+    ]
+})
+
+export class TodoList{
+    taskId: number;
+    taskTitle: string;
+    editing: boolean = false;
+    tasks:Tasks[];
+    beforeEditing: string;
+    today: number = Date.now();
+
+    
+    constructor(private todoService: TodoService){
+    }
+    ngOnInit(){
+        this.beforeEditing = '';
+        this.taskId;
+        this.taskTitle = '';
+        
+    
+        this.todoService
+            .getTodo()
+            .subscribe(data => this.tasks = data);
+    }
+
+    addTask(){
+        //restricting empty string
+        if(this.taskTitle.trim().length === 0){
+            return;
+        }
+        
+        this.todoService.addTask({id:this.taskId,
+            title: this.taskTitle,
+            completed: false,
+            editing: false})
+            .subscribe((data: Tasks) => {
+                console.log(data);
+            })
+        
+        //display 
+        this.tasks.push({
+            id:this.taskId,
+            title: this.taskTitle,
+            completed: false,
+            editing: false
+        })
+        this.taskTitle ='';
+        
+        // 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{
+        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);
+                    }
+                    return task;
+                  }));
+    }
+
+    doneEditing(task: Tasks):void{
+        if(task.title.trim().length === 0){
+            task.title = this.beforeEditing;
+        }
+        task.editing = false;
+    }
+
+    cancelEditing(task: Tasks){
+        task.title = this.beforeEditing;
+        task.editing = false;
+    }
+
+    remaining(): number{
+        return this.tasks.filter(task => !task.completed).length;
+    }
+
+    atleastOneCompleted(): boolean{
+        return this.tasks.filter(task => task.completed).length > 0;
+    }
+
+    clearCompleted(): void{
+        this.tasks = this.tasks.filter(task => !task.completed);
+    }
+
+    selectAll():void{
+        this.tasks.forEach(task => task.completed = 
+            (<HTMLInputElement>event.target).checked);
+    }
+}

src/app/Todo-List-App/models/todo-interface.ts

@@ -0,0 +1,6 @@
+export interface Tasks{
+    id: number,
+    title: string,
+    completed: boolean,
+    editing:boolean
+}

src/app/Todo-List-App/services/todo.service.ts

@@ -0,0 +1,33 @@
+import { HttpClient, HttpHeaders} from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Tasks } from "../models/todo-interface";
+import { map } from "rxjs/operators"; 
+const URL = 'http://localhost:3000/tasks';
+@Injectable()
+export class TodoService{  
+    constructor(private http: HttpClient){}
+
+    getTodo():Observable<Tasks[]>{
+        return this.http.get<Tasks[]>(URL)
+    }
+
+    addTask(task: Tasks):Observable<Tasks>{
+        return this.http.post<Tasks>(URL, task, {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json'
+            })
+        })
+ 
+    }
+
+    editTodo(task: Tasks):Observable<Tasks[]>{
+        return this.http
+            .put(URL + '/' + task.id, task)
+            .pipe(map((response: any) => response.json()));
+    }
+
+    deleteTask(task: Tasks){
+        return this.http.delete(URL + '/' + task.id);
+    }
+}

src/app/app.component.css

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Ruluko&display=swap');
+
+*{
+    font-family: 'Ruluko', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+

src/app/app.component.html

@@ -1,20 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<todo-list></todo-list>
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.module.ts

@@ -1,16 +1,26 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { FormsModule } from '@angular/forms';
+import { AutofocusModule } from 'angular-autofocus-fix';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 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';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    TodoList
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule,
+    AutofocusModule,
+    BrowserAnimationsModule,
+    HttpClientModule
   ],
-  providers: [],
+  providers: [TodoService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/index.html

@@ -2,11 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularAppseptten</title>
+  <title>Todo List App</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
 </head>
 <body>
   <app-root></app-root>

src/to-do-list.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 19.118 19.118" style="enable-background:new 0 0 19.118 19.118;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#030104;" d="M16.981,0H2.137C1.731,0,1.401,0.33,1.401,0.736v17.646c0,0.408,0.33,0.736,0.736,0.736h14.843
+			c0.406,0,0.736-0.328,0.736-0.736V0.736C17.717,0.329,17.386,0,16.981,0z M16.245,17.646H2.873V1.473h13.371V17.646z"/>
+		<path style="fill:#030104;" d="M7.64,4.668H4.946v2.693h2.693V4.668H7.64z M7.312,5.562L6.116,6.758
+			c-0.031,0.032-0.084,0.032-0.115,0L5.272,6.026c-0.031-0.032-0.031-0.084,0-0.117l0.175-0.172c0.031-0.033,0.083-0.033,0.116,0
+			L6.06,6.236l0.963-0.963c0.033-0.032,0.084-0.032,0.117,0l0.173,0.174C7.345,5.478,7.345,5.53,7.312,5.562z"/>
+		<rect x="8.202" y="5.274" style="fill:#030104;" width="6.161" height="1.481"/>
+		<path style="fill:#030104;" d="M7.64,8.18H4.946v2.692h2.693V8.18H7.64z M7.312,9.073l-1.196,1.196
+			c-0.031,0.032-0.084,0.032-0.115,0L5.272,9.537c-0.031-0.032-0.031-0.084,0-0.116l0.175-0.173c0.031-0.032,0.083-0.032,0.116,0
+			L6.06,9.747l0.963-0.963c0.033-0.032,0.084-0.032,0.117,0l0.173,0.173C7.345,8.989,7.345,9.041,7.312,9.073z"/>
+		<rect x="8.202" y="8.785" style="fill:#030104;" width="6.161" height="1.481"/>
+		<rect x="4.947" y="11.769" style="fill:#030104;" width="2.693" height="2.693"/>
+		<rect x="8.202" y="12.376" style="fill:#030104;" width="6.161" height="1.48"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>