todo-app-angular/src/app/tasks/tasks.component.ts
Maxime Delporte 97d8a8ebc3
All checks were successful
Deploying Website / build (push) Successful in 1m6s
Adding 'Add Task' feature. Create a task-content model for better understanding.
2025-04-22 06:13:12 -03:00

75 lines
1.9 KiB
TypeScript

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {User} from '../user/user.model';
import {Task} from '../task/task.model';
import {TaskComponent} from '../task/task.component';
import {NewTaskComponent} from './new-task/new-task.component';
import {TaskContent} from './new-task/task-content.model';
@Component({
selector: 'app-tasks',
imports: [TaskComponent, NewTaskComponent],
templateUrl: './tasks.component.html',
styleUrl: './tasks.component.css'
})
export class TasksComponent {
@Input({ required: true }) user!: User;
isAddingTask = false;
tasks: Task[] = [
{
id: 't1',
userId: 'u1',
title: 'Master Angular',
summary: 'Learn all the basic and advanced features of Angular & how to apply them.',
dueDate: '2025-12-31',
},
{
id: 't2',
userId: 'u3',
title: 'Build first prototype',
summary: 'Build a first prototype of the online shop website',
dueDate: '2024-05-31',
},
{
id: 't3',
userId: 'u3',
title: 'Prepare issue template',
summary: 'Prepare and describe an issue template which will help with project management',
dueDate: '2024-06-15',
},
];
get selectedUserTasks() {
return this.tasks.filter((task) => task.userId === this.user.id);
}
onCompleteTask(taskId: string) {
this.tasks = this.tasks.filter((task) => task.id !== taskId);
}
onStartAddTask() {
this.isAddingTask = true;
}
onCancelAddTask() {
this.isAddingTask = false;
}
onAddTask(taskContent: TaskContent) {
let nextTaskId = this.tasks.length + 1;
let taskId = 't' + (nextTaskId).toString();
let task: Task = {
id: taskId,
userId: this.user.id,
title: taskContent.title,
summary: taskContent.summary,
dueDate: taskContent.date,
};
this.tasks.push(task);
this.onCancelAddTask()
}
}