Feat/extract components

src/app/app.module.ts

@@ -17,14 +17,16 @@ import { AppComponent } from './app.component';
 import { TaskFormComponent } from './task-form/task-form.component';
 import { TodosListComponent } from './todos-list/todos-list.component';
 import { TodoItemComponent } from './todo-item/todo-item.component';
+import { TodoEditComponent } from './todo-edit/todo-edit.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     TaskFormComponent,
     TodosListComponent,
-    TodoItemComponent
+    TodoItemComponent,
+    TodoEditComponent
   ],
   imports: [
     BrowserModule,

src/app/todo-edit/todo-edit.component.css

@@ -0,0 +1,16 @@
+.textDeprecated {
+  color: grey;
+  text-decoration: line-through;
+}
+
+.high {
+  background-color: red;
+}
+
+.medium {
+  background-color: yellow;
+}
+
+.low {
+  background-color: green;
+}

src/app/todo-edit/todo-edit.component.html

@@ -0,0 +1,15 @@
+<form>
+  <mat-form-field>
+    <mat-label>Edit Todo</mat-label>
+    <input
+      matInput
+      [ngClass]="setClasses()"
+      type="text"
+      #inputRef
+      (change)="onChildInputChange(todoItemChild, inputRef.value)"
+      [formControl]="formControlChild"
+      [attr.disabled]="isDisabledChild"
+    >
+    <mat-error *ngIf="formControlChild.invalid">{{getErrorMessage()}}</mat-error>
+  </mat-form-field>
+</form>

src/app/todo-edit/todo-edit.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoEditComponent } from './todo-edit.component';
+
+describe('TodoEditComponent', () => {
+  let component: TodoEditComponent;
+  let fixture: ComponentFixture<TodoEditComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TodoEditComponent]
+    });
+    fixture = TestBed.createComponent(TodoEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/todo-edit/todo-edit.component.ts

@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Todo} from "../todo";
+import {FormControl, FormGroup, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-todo-edit',
+  templateUrl: './todo-edit.component.html',
+  styleUrls: ['./todo-edit.component.css']
+})
+export class TodoEditComponent implements OnInit {
+  @Output() updateTodoChildEvent = new EventEmitter();
+
+  @Input() todoItemChild!: Todo;
+
+  @Input() isDisabledChild!: true | null;
+  @Input() tasksStatusChild: string = 'low';
+  @Input() isCheckedChild: boolean = false;
+
+  formControlChild = new FormControl('', [Validators.required, Validators.minLength(3)])
+
+  ngOnInit() {
+    this.formControlChild.setValue(this.todoItemChild.name);
+  }
+
+  onChildInputChange(todo: Todo, val: string) {
+    this.updateTodoChildEvent.emit({id: todo.id, name: val});
+  }
+
+  setInputBackground() {
+    switch(this.tasksStatusChild) {
+      case 'high':
+        return 'high';
+      case 'medium':
+        return 'medium';
+      case 'low':
+        return 'low';
+      default:
+        return '';
+    }
+  }
+
+  setInputDecorations() {
+    return this.isCheckedChild ? 'textDeprecated' : '';
+  }
+
+  setClasses() {
+    return {
+      [this.setInputDecorations()]: true,
+      [this.setInputBackground()]: true
+    };
+  }
+
+  getErrorMessage() {
+    if (this.formControlChild.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    return this.formControlChild.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
+  }
+}

src/app/todo-item/todo-item.component.css

@@ -1,16 +1,7 @@
-.textDepricated {
-  color: grey;
-  text-decoration: line-through;
+.formContainer {
+  display: flex;
 }
 
-.high {
-  background-color: red;
-}
-
-.medium {
-  background-color: yellow;
-}
-
-.low {
-  background-color: green;
+.wrapper {
+  display: flex;
 }

src/app/todo-item/todo-item.component.html

@@ -1,20 +1,14 @@
-<mat-card>
-  <mat-card-content>
-    <form [formGroup]="todoForm">
+<div [ngClass]="'wrapper'">
+    <form [ngClass]="'formContainer'">
       <mat-checkbox [checked]="isChecked" (click)="onCheckboxChange()" color="primary">Done</mat-checkbox>
-      <mat-form-field>
-        <mat-label>Input</mat-label>
-        <input
-          matInput
-          [ngClass]="setClasses()"
-          type="text"
-          #inputRef
-          (change)="updateTodo(todoItem, inputRef.value)"
-          formControlName="todoItemForm"
-          [attr.disabled]="isDisabled"
-        >
-        <mat-error *ngIf="todoForm.invalid">{{getErrorMessage()}}</mat-error>
-      </mat-form-field>
+      <app-todo-edit
+        [isDisabledChild]="isDisabled"
+        [todoItemChild]="todoItem"
+        (updateTodoChildEvent)="updateTodo($event)"
+        [tasksStatusChild]="taskStatus"
+        [isCheckedChild]="isChecked"
+      >
+      </app-todo-edit>
       <mat-form-field>
         <mat-label>Priorities</mat-label>
         <select matNativeControl required (change)="onSelectChange($event)" [disabled]="isChecked">
@@ -24,6 +18,5 @@
         </select>
       </mat-form-field>
     </form>
-  </mat-card-content>
-</mat-card>
 <button mat-raised-button color="warn" (click)="deleteTodo(todoItem)">Delete Todo</button>
+</div>

src/app/todo-item/todo-item.component.ts

@@ -8,7 +8,7 @@ import {TodoService} from "../todo.service";
   templateUrl: './todo-item.component.html',
   styleUrls: ['./todo-item.component.css']
 })
-export class TodoItemComponent implements OnInit {
+export class TodoItemComponent {
   @Input() todoItemsList: Todo[] = [];
   @Input() todoItem!: Todo;
   @Output() deleteTodoEvent = new EventEmitter<Todo>();
@@ -18,47 +18,15 @@ export class TodoItemComponent implements OnInit {
   isDisabled: true | null =  null;
   taskStatus: string = 'low';
 
-  todoForm: FormGroup = new FormGroup({
-    todoItemForm: new FormControl('', [Validators.required, Validators.minLength(3)])
-  });
-
-  ngOnInit() {
-    this.todoForm.setValue({todoItemForm: this.todoItem.name});
-  }
-
   constructor(private todoService: TodoService) {
   }
 
   deleteTodo(todo: Todo) {
     this.deleteTodoEvent.emit(todo);
   }
 
-  updateTodo(todo: Todo, val: string) {
-    this.updateTodoEvent.emit({id: todo.id, name: val});
-  }
-
-  setInputBackground() {
-    switch(this.taskStatus) {
-      case 'high':
-        return 'high';
-      case 'medium':
-        return 'medium';
-      case 'low':
-        return 'low';
-      default:
-        return '';
-    }
-  }
-
-  setInputDecorations() {
-    return this.isChecked ? 'textDepricated' : '';
-  }
-
-  setClasses() {
-    return {
-      [this.setInputDecorations()]: true,
-      [this.setInputBackground()]: true
-    };
+  updateTodo(todo: Todo) {
+    this.updateTodoEvent.emit(todo);
   }
 
   onCheckboxChange() {
@@ -69,12 +37,4 @@ export class TodoItemComponent implements OnInit {
   onSelectChange(event: Event) {
     this.taskStatus = (event.target as unknown as HTMLInputElement).value;
   }
-
-  getErrorMessage() {
-    if (this.todoForm.hasError('required')) {
-      return 'You must enter a value';
-    }
-
-    return this.todoForm.hasError('minlength') ? 'Too short, should be at least 3 symbols' : '';
-  }
 }

src/app/todo.service.ts

@@ -29,9 +29,7 @@ export class TodoService {
   }
 
   updateTodo(todoItem: Todo): void {
-    // debugger
     this.todos = this.todos.map((todo) => {
-      console.log(todo.id === todoItem.id, todo.id, todoItem.id)
       if (todo.id === todoItem.id) {
         return todoItem;
       }

src/app/todos-list/todos-list.component.html

@@ -1,5 +1,5 @@
 <app-task-form (newItemEvent)="addTodo($event)"></app-task-form>
-<mat-grid-list cols="1" rowHeight="200px">
+<mat-grid-list cols="1" rowHeight="150px">
   <mat-grid-tile *ngFor="let todo of todosList">
     <app-todo-item
       [todoItem]="todo"