refactor

src/app/todo/table/filter/filter.component.html

@@ -0,0 +1,4 @@
+<select (change)="updateFilter($event)" class="float-end mt-3">
+  <option value="" selected>All</option>
+  <option *ngFor="let category of categories" value="{{category}}">{{ category }}</option>
+</select>

src/app/todo/table/filter/filter.component.ts

@@ -1,22 +1,17 @@
-import {Component, EventEmitter, inject, Output} from "@angular/core";
+import {Component, EventEmitter, inject, Output} from '@angular/core';
-import {TodoService} from "../todo.service";
 import {NgForOf} from "@angular/common";
-
+import {TodoService} from "../../todo.service";
 
 @Component({
-  standalone: true,
   selector: 'app-table-filter',
+  standalone: true,
     imports: [
         NgForOf
     ],
-  template: `
+  templateUrl: './filter.component.html',
-    <select (change)="updateFilter($event)" class="float-end mt-3">
+  styleUrl: './filter.component.css'
-      <option value="" selected>All</option>
-      <option *ngFor="let category of categories" value="{{category}}">{{ category }}</option>
-    </select>
-  `
 })
-export class TableFilterComponent {
+export class FilterComponent {
 
   todoService: TodoService = inject(TodoService);
 

src/app/todo/table/row/row.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

src/app/todo/table/row/row.component.html

@@ -0,0 +1,11 @@
+<td *ngIf="!todo.completed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M6 3a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2v3.5c-.19 2.484-1.823 6.52-7 7.348v2.304c5.177.829 6.81 4.864 7 7.348V28a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2v-3.5c.19-2.484 1.823-6.52 7-7.348v-2.304C8.823 14.02 7.19 9.984 7 7.5V4a1 1 0 0 1-1-1m4.498 25h11.003c.9 0 1.499-1 .899-1.7c-1.1-1.5-2.8-2.6-4.6-3c-.5-.2-.8-.6-.8-1.1v-7.4c0-.5.3-.9.8-1c3.2-.7 5.6-3.3 6.1-6.6c.1-.6-.4-1.2-1-1.2H9.1c-.6 0-1.1.6-1 1.2c.5 3.3 2.9 5.9 6.1 6.6c.5.1.8.5.8 1v7.4c0 .5-.3.9-.8 1c-1.9.4-3.5 1.5-4.6 3c-.6.8 0 1.799.898 1.8"/></svg></td>
+<td *ngIf="todo.completed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg></td>
+<td>{{ todo.id }}</td>
+<td>{{ todo.title }}</td>
+<td>{{ todo.dueDate }}</td>
+<td>{{ todo.category }}</td>
+<td *ngIf="displayDeleteButton">
+  <button class="btn btn-danger" (click)="deleteTodo(todo)">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>
+  </button>
+</td>

src/app/todo/table/row/row.component.ts

@@ -0,0 +1,31 @@
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
+import {NgIf} from "@angular/common";
+import {Todo} from "../../todo";
+import {SettingsService} from "../../../settings/settings.service";
+
+@Component({
+  selector: 'app-row',
+  standalone: true,
+  imports: [
+    NgIf
+  ],
+  templateUrl: './row.component.html',
+  styleUrl: './row.component.css'
+})
+export class RowComponent {
+  @Input()
+  todo!: Todo;
+
+  @Output()
+  _deleteTodo: EventEmitter<Todo> = new EventEmitter;
+
+  settingsService: SettingsService = inject(SettingsService);
+
+  get displayDeleteButton(): boolean {
+    return this.settingsService.settings.displayDeleteButton;
+  }
+
+  deleteTodo(todo: Todo): void {
+    this._deleteTodo.emit(todo);
+  }
+}

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

@@ -19,17 +19,7 @@
       </thead>
       <tbody>
       <tr *ngFor="let todo of _todos" class="align-middle" (click)="toggleCompleted(todo)">
-        <td *ngIf="!todo.completed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M6 3a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2v3.5c-.19 2.484-1.823 6.52-7 7.348v2.304c5.177.829 6.81 4.864 7 7.348V28a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2v-3.5c.19-2.484 1.823-6.52 7-7.348v-2.304C8.823 14.02 7.19 9.984 7 7.5V4a1 1 0 0 1-1-1m4.498 25h11.003c.9 0 1.499-1 .899-1.7c-1.1-1.5-2.8-2.6-4.6-3c-.5-.2-.8-.6-.8-1.1v-7.4c0-.5.3-.9.8-1c3.2-.7 5.6-3.3 6.1-6.6c.1-.6-.4-1.2-1-1.2H9.1c-.6 0-1.1.6-1 1.2c.5 3.3 2.9 5.9 6.1 6.6c.5.1.8.5.8 1v7.4c0 .5-.3.9-.8 1c-1.9.4-3.5 1.5-4.6 3c-.6.8 0 1.799.898 1.8"/></svg></td>
+        <app-row [todo]="todo" (_deleteTodo)="deleteTodo($event)" />
-        <td *ngIf="todo.completed"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg></td>
-        <td>{{ todo.id }}</td>
-        <td>{{ todo.title }}</td>
-        <td>{{ todo.dueDate }}</td>
-        <td>{{ todo.category }}</td>
-        <td *ngIf="displayDeleteButton">
-          <button class="btn btn-danger" (click)="deleteTodo(todo)">
-            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>
-          </button>
-        </td>
       </tr>
       </tbody>
     </table>

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

@@ -2,9 +2,10 @@ import {Component, inject, OnInit} from "@angular/core";
 import {TodoService} from "../todo.service";
 import {Todo} from "../todo";
 import {NgForOf, NgIf} from "@angular/common";
-import {TableFilterComponent} from "./table-filter.component";
 import {SettingsService} from "../../settings/settings.service";
 import {Router} from "@angular/router";
+import {FilterComponent} from "./filter/filter.component";
+import {RowComponent} from "./row/row.component";
 
 
 @Component({
@@ -12,8 +13,9 @@ import {Router} from "@angular/router";
   templateUrl: './todo-table.component.html',
   imports: [
     NgForOf,
-    TableFilterComponent,
     NgIf,
+    FilterComponent,
+    RowComponent,
   ],
   standalone: true
 })