changes to edit just single task and refactor

src/app/Task.ts

@@ -1,6 +1,6 @@
 export interface Task {
-    id?: number;
-    text: string;
-    day:string;
-    reminder:boolean;
-}
+  id: number;
+  text: string;
+  day: string;
+  reminder: boolean;
+}

src/app/components/add-task/add-task.component.ts

@@ -10,6 +10,7 @@ import { Subscription } from 'rxjs';
 })
 export class AddTaskComponent implements OnInit {
   @Output() onAddTask: EventEmitter<Task> = new EventEmitter();
+  id: number;
   text: string;
   day: string;
   reminder: boolean = false;
@@ -29,6 +30,7 @@ export class AddTaskComponent implements OnInit {
       return;
     }
     const newTask = {
+      id: this.id++,
       text: this.text,
       day: this.day,
       reminder: this.reminder,

src/app/components/edit-task-form/edit-task-form.component.html

@@ -1,4 +1,4 @@
-<form *ngIf="showEditTask" class="add-form" (ngSubmit)="onSubmit()">
+<form *ngIf="showEditTask && selectedTask === task" class="add-form" (ngSubmit)="onSubmit()">
     <div class="form-control">
         <label for="text">Edit task</label>
         <input type="text" class="text" name="text" placeholder="Edit task..." [(ngModel)]="text">

src/app/components/edit-task-form/edit-task-form.component.ts

@@ -15,23 +15,31 @@ export class EditTaskFormComponent implements OnInit {
   day: string;
   reminder: boolean;
   showEditTask: boolean;
+  selectedTask: Task | null;
   subscriptionEdit: Subscription;
+
   constructor(private uiService: UiService) {
-    this.subscriptionEdit = this.uiService
-      .onToggleEdit()
-      .subscribe((value) => (this.showEditTask = value));
+    this.subscriptionEdit = this.uiService.onToggleEdit$.subscribe(
+      (selectedTask) => {
+        this.selectedTask = selectedTask;
+        this.showEditTask = this.selectedTask !== null;
+      }
+    );
   }
+
   ngOnInit(): void {}
   onSubmit() {
     if (!this.text) {
       return;
     }
     const editedTask = {
+      ...this.task,
       text: (this.task.text = this.text),
       day: this.day,
       reminder: this.reminder,
     };
     this.onEditTask.emit(editedTask);
     this.text = '';
+    this.showEditTask = false;
   }
 }

src/app/components/task-item/task-item.component.html

@@ -1,7 +1,7 @@
 <div [ngClass]="{reminder: task.reminder}" class="task" (dblclick)="onToggle(task)">
     <h3>
         {{task.text}}
-        <div><app-button (btnClick)="onToggleEdit(task)" style="margin: 20px"
+        <div><app-button (btnClick)="onToggleEditForm(task)" style="margin: 20px"
     color="gray"
     text="Edit"
     ></app-button>
@@ -14,5 +14,5 @@ <h3>
     <p>
         {{task.day}}
     </p>
-<app-edit-task-form (onEditTask)="showEditTask"></app-edit-task-form>
+<app-edit-task-form (onEditTask)="showEditTask" [task]="task"></app-edit-task-form>
 </div>

src/app/components/task-item/task-item.component.ts

@@ -2,9 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Task } from 'src/app/Task';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
-import { NgModel } from '@angular/forms';
 import { UiService } from 'src/app/services/ui.service';
-import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-task-item',
@@ -22,21 +20,17 @@ export class TaskItemComponent implements OnInit {
   faPenToSquare = faPenToSquare;
   showEditTask: boolean;
   subscription: Subscription;
-  constructor(private uiService: UiService, private router: Router) {
-    this.subscription = this.uiService
-      .onToggleEdit()
-      .subscribe((value) => (this.showEditTask = value)); //* value to jest przeciwieństwo showEditTask które ustawia się w toggleAddTask w ui.service. Tu sie tez subskrybuje observabla z ui.service
-  } //! tu też łapiemy value
+  constructor(private uiService: UiService) {}
 
   ngOnInit(): void {}
-  //to definicja metody używanej w komponencie task-item
-  onDelete(task: any) {
-    this.onDeleteTask.emit(task); //to leci do tasks.component.html
+
+  onDelete(task: Task) {
+    this.onDeleteTask.emit(task);
   }
-  onToggle(task: any) {
+  onToggle(task: Task) {
     this.onToggleReminder.emit(task); //to leci do tasks.component.html -> trzeba isc do komponentu rodzic "tasks" i tak samo jak onDeleteTask dodajemy onToggleReminder tam
   }
-  onToggleEdit(task: any) {
-    this.uiService.toggleEditTask(); //*wywołujemy metodę napisaną w ui.service.ts
+  onToggleEditForm(task: Task) {
+    this.uiService.toggleEdit(task);
   }
 }

src/app/components/tasks/tasks.component.ts

@@ -18,13 +18,12 @@ export class TasksComponent implements OnInit {
     //osobny obiekt, nie array więc bez []
     this.taskService.deleteTask(task).subscribe(
       //to jest jak then
-      () => (this.tasks = this.tasks.filter((t) => t.id !== task.id)) // !filtruje taski które NIE są o id które usuwamy
+      () => (this.tasks = this.tasks.filter((t) => t.id !== task.id))
     );
   }
   toggleReminder(task: Task) {
-    //!tutaj to jest to co po '=' w task.component.html  (onToggleReminder)="toggleReminder(task)"
     task.reminder = !task.reminder;
-    this.taskService.updateTaskReminder(task).subscribe(); //!wykonanie metody z service która obsługuje aktualizowanie w bazie rekordów
+    this.taskService.updateTaskReminder(task).subscribe();
   }
   addTask(task: Task) {
     this.taskService.addTask(task).subscribe((task) => this.tasks.push(task));

src/app/services/ui.service.ts

@@ -1,13 +1,16 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { Task } from 'src/app/Task';
 @Injectable({
   providedIn: 'root',
 })
 export class UiService {
   private showAddTask: boolean = false; //! ustawienie domyślne, oddziałuje na zmienną prywatną o tej samej nazwie w header.component
   private subjectAdd = new Subject<any>();
-  private subjectEdit = new Subject<any>();
+  private subjectEdit = new Subject<Task | null>();
   private showEditTask: boolean = false;
+  private selectedTask: Task | null;
+  onToggleEdit$ = this.subjectEdit.asObservable();
 
   constructor() {}
 
@@ -18,15 +21,27 @@ export class UiService {
   }
   toggleEditTask(): void {
     this.showEditTask = !this.showEditTask;
-    this.subjectEdit.next(this.showEditTask);
+    this.subjectEdit.next(this.selectedTask);
   }
 
+  toggleEdit(task: Task): void {
+    if (this.selectedTask === task) {
+      this.selectedTask = null;
+    } else {
+      this.selectedTask = task;
+    }
+    this.subjectEdit.next(this.selectedTask);
+  }
   onToggleAdd(): Observable<any> {
     //! żeby zrobić coś kiedy się uruchomi toggleAddTask po kliknieciu Add, trzeba zasubskrybować onToggle -> to się dzieje w header.component
     return this.subjectAdd.asObservable();
   }
-  onToggleEdit(): Observable<any> {
-    //! żeby zrobić coś kiedy się uruchomi toggleAddTask po kliknieciu Add, trzeba zasubskrybować onToggle -> to się dzieje w header.component
+  onToggleEdit(task: Task): Observable<any> {
+    if (this.selectedTask === task) {
+      this.showEditTask = true;
+    } else {
+      this.showEditTask = false;
+    }
     return this.subjectEdit.asObservable();
   }
 }