todo/src/app/create-todo/create-todo.ts
2025-06-24 07:54:48 +02:00

66 lines
1.7 KiB
TypeScript

import { DatePipe } from '@angular/common';
import { Component, inject, Input, ResourceRef, signal } from '@angular/core';
import {
FormControl,
FormGroup,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { TaskService } from '../service/task-service';
@Component({
selector: 'app-create-todo',
imports: [ReactiveFormsModule],
templateUrl: './create-todo.html',
styleUrl: './create-todo.css',
})
export class CreateTodo {
public form!: FormGroup;
public isEditing = signal(false);
private datePipe = new DatePipe('en-US');
private taskService: TaskService = inject(TaskService);
@Input({ required: true }) tasks!: ResourceRef<any>;
@Input() editTodo: number = -1;
ngOnInit() {
this.form = new FormGroup({
id: new FormControl(-1),
title: new FormControl('', Validators.required),
dueDate: new FormControl(
this.datePipe.transform(new Date(), 'yyyy-MM-dd'),
),
done: new FormControl(false),
});
}
submit() {
if (this.form.valid) {
if (this.form.value.id == -1) {
this.taskService
.createTask(this.form.value)
.then(() => this.tasks.reload());
} else {
this.taskService
.updateTask(this.form.value)
.then(() => this.tasks.reload());
this.isEditing.set(false);
}
this.form.controls['id'].setValue(-1);
}
}
stopEdit() {
this.isEditing.set(false);
this.form.controls['id'].setValue(-1);
}
editTask(task: Task) {
this.form.controls['id'].setValue(task.id);
this.form.controls['title'].setValue(task.title);
this.form.controls['dueDate'].setValue(
this.datePipe.transform(task.dueDate, 'yyyy-MM-dd'),
);
this.isEditing.set(true);
}
}