Initial

src/app/create-todo/create-todo.ts

@@ -0,0 +1,70 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, input, ResourceRef } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+
+@Component({
+  selector: 'app-create-todo',
+  imports: [ReactiveFormsModule],
+  templateUrl: './create-todo.html',
+  styleUrl: './create-todo.css',
+})
+export class CreateTodo {
+  public form!: FormGroup;
+  private datePipe = new DatePipe('en-US');
+  @Input({ required: true }) tasks!: ResourceRef<any>;
+
+  submit() {
+    if (this.form.valid) {
+      if (this.form.value.id == -1) {
+        this.createTask(this.form.value);
+      } else {
+        this.updateTask(this.form.value);
+      }
+      this.form.controls['id'].setValue(-1);
+    }
+  }
+
+  editTask(task: Task) {
+    this.form.patchValue({ id: task.id });
+  }
+
+  updateTask(task: Task) {
+    fetch('http://localhost:2000/api/tasks/' + task.id, {
+      method: 'PUT',
+      body: JSON.stringify(task),
+      headers: {
+        'content-type': 'application/json',
+      },
+    }).then(() => {
+      this.tasks.reload();
+    });
+  }
+
+  createTask(task: Task) {
+    fetch('http://localhost:2000/api/tasks', {
+      method: 'POST',
+      body: JSON.stringify(task),
+      headers: {
+        'content-type': 'application/json',
+      },
+    }).then(() => {
+      this.tasks.reload();
+    });
+  }
+
+  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'),
+      ),
+    });
+  }
+}