+ ![]()
+ {{ message }}
+
+ `,
+ styles: ``,
+})
+export class NoTasksComponent {
+ @Input() public alt!: string;
+ @Input() public imageUrl!: string;
+ @Input() public message!: string;
+}
diff --git a/src/app/features/task/components/task-list/task-list.component.ts b/src/app/features/task/components/task-list/task-list.component.ts
new file mode 100644
index 0000000..0d76c6c
--- /dev/null
+++ b/src/app/features/task/components/task-list/task-list.component.ts
@@ -0,0 +1,77 @@
+import { Component, inject } from '@angular/core';
+import { TaskService } from '@features/task/service/task.service';
+import { AsyncPipe } from '@angular/common';
+import { NoTasksComponent } from '../no-tasks/no-tasks.component';
+import { Task } from '@features/task/model/task.model';
+import { CategoryService } from '@features/category/services/category.service';
+import { categoryTextColors } from '@features/category/constants/category-colors';
+
+@Component({
+ selector: 'app-task-list',
+ imports: [AsyncPipe, NoTasksComponent],
+ template: `
+
+ @if(tasks$ | async) { @if(numberOfTasks() > 0) { @for(task of tasks();
+ track task.id) {
+
+ `,
+ styles: ``,
+})
+export class TaskListComponent {
+ private tasksService = inject(TaskService);
+ private categoryService = inject(CategoryService);
+ public tasks$ = this.tasksService.getTasks();
+ public tasks = this.tasksService.tasks;
+ public category = this.categoryService.categories;
+
+ public toggleTaskStatus(task: Task): void {
+ this.tasksService
+ .updateIsCompletedStatus(task.id, !task.isCompleted)
+ .subscribe();
+ }
+
+ // função para buscar cor com base na categoria da task
+ public getColorByTask(task: Task): string {
+ const cat = this.category().find(
+ (cat) => cat.id === task.categoryId
+ )?.color;
+ return cat || '';
+ }
+
+ public numberOfTasks = this.tasksService.numberOfTasks;
+
+ public colorVariants = categoryTextColors;
+ public updateTask = this.tasksService.updateTaskInTheTasksList;
+
+ public deleteTask(taskId: string): void {
+ this.tasksService.deleteTask(taskId).subscribe();
+ }
+}
diff --git a/src/app/features/task/constants/create-task-form.ts b/src/app/features/task/constants/create-task-form.ts
index 0ef621b..6e1ba87 100644
--- a/src/app/features/task/constants/create-task-form.ts
+++ b/src/app/features/task/constants/create-task-form.ts
@@ -1,4 +1,3 @@
-import { Task } from './../model/task.model';
import { inject } from "@angular/core";
import { FormControl, FormGroup, NonNullableFormBuilder, Validators } from "@angular/forms";
diff --git a/src/app/features/task/service/task.service.spec.ts b/src/app/features/task/service/task.service.spec.ts
index 80c7be4..960ff75 100644
--- a/src/app/features/task/service/task.service.spec.ts
+++ b/src/app/features/task/service/task.service.spec.ts
@@ -1,9 +1,9 @@
-import { task, TASK_INTERNAL_SERVER_ERROR_RESPONSE, TASK_UNPROCESSIBLE_ENTITY_RESPONSE, tasks } from './../../../__mocks__/task';
import { TestBed, waitForAsync } from '@angular/core/testing';
import { HttpErrorResponse, provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { TaskService } from './task.service';
import { Task } from '../model/task.model';
+import { task, TASK_INTERNAL_SERVER_ERROR_RESPONSE, TASK_UNPROCESSIBLE_ENTITY_RESPONSE, tasks } from '@mocks/task';
describe('TaskService', () => {
let taskService: TaskService;
diff --git a/src/app/features/task/service/task.service.ts b/src/app/features/task/service/task.service.ts
index 8e07a31..2eac5f3 100644
--- a/src/app/features/task/service/task.service.ts
+++ b/src/app/features/task/service/task.service.ts
@@ -1,9 +1,9 @@
-import { Task } from './../model/task.model';
+
import { HttpClient } from '@angular/common/http';
import { Injectable, computed, inject, signal } from '@angular/core';
-import { environment } from '../../../../env/environment.prod';
import { Observable, tap } from 'rxjs';
-import { setThrowInvalidWriteToSignalError } from '@angular/core/primitives/signals';
+import { environment } from '@env/environment.prod';
+import { Task } from '../model/task.model';
@Injectable({
providedIn: 'root',
diff --git a/src/app/features/task/view/task/task.component.ts b/src/app/features/task/view/task/task.component.ts
index 055279b..e705eed 100644
--- a/src/app/features/task/view/task/task.component.ts
+++ b/src/app/features/task/view/task/task.component.ts
@@ -1,13 +1,14 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { InclusionFormComponent } from '../../components/inclusion-form/inclusion-form.component';
+import { TaskListComponent } from "../../components/task-list/task-list.component";
-const COMPONENTS = [InclusionFormComponent];
+const COMPONENTS = [InclusionFormComponent, TaskListComponent];
@Component({
selector: 'app-task',
standalone: true,
- imports: [...COMPONENTS],
+ imports: [...COMPONENTS ],
template: `
+
+
+
+
+ @if(task.isCompleted) {
+
+ }@else{
+
+ }
+
+
+
+
+ } } @else {
+
Meu quadro de tarefas
@@ -16,6 +17,7 @@ const COMPONENTS = [InclusionFormComponent];
`,
styles: ``,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/layout/main/main.component.ts b/src/app/layout/main/main.component.ts
index 72515d2..aeb5fc2 100644
--- a/src/app/layout/main/main.component.ts
+++ b/src/app/layout/main/main.component.ts
@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CategoryComponent } from '../../features/category/view/category/category.component';
import { MatDivider } from '@angular/material/divider';
-import { TaskComponent } from '../../features/task/view/task/task.component';
+import { CategoryComponent } from '@features/category/view/category/category.component';
+import { TaskComponent } from '@features/task/view/task/task.component';
const COMPONENTS = [CategoryComponent, TaskComponent];
const MODULES = [MatDivider];
@@ -11,15 +11,15 @@ const MODULES = [MatDivider];
standalone: true,
imports: [...COMPONENTS,...MODULES],
template: `
-
+