feat: add edit functionality for todo items
This commit is contained in:
1486
frontend/bun.lock
1486
frontend/bun.lock
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,4 @@
|
|||||||
import {Routes} from '@angular/router';
|
import {Routes} from '@angular/router';
|
||||||
|
|
||||||
export const routes: Routes = [];
|
export const routes: Routes = [
|
||||||
|
];
|
||||||
|
@ -24,7 +24,9 @@ export class CreateComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public create(): void {
|
public create(): void {
|
||||||
console.log(this.form.value);
|
this.todoService.create(this.form.value).subscribe(() => {
|
||||||
this.todoService.create(this.form.value).subscribe(() => {this.todoService.todos.reload()})
|
this.todoService.todos.reload();
|
||||||
|
this.form.reset();
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
0
frontend/src/app/edit/edit.component.css
Normal file
0
frontend/src/app/edit/edit.component.css
Normal file
6
frontend/src/app/edit/edit.component.html
Normal file
6
frontend/src/app/edit/edit.component.html
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<form [formGroup]="form">
|
||||||
|
<input type="text" formControlName="title">
|
||||||
|
<input type="date" formControlName="dueDate">
|
||||||
|
|
||||||
|
<button type="submit" (click)="edit()">Save</button>
|
||||||
|
</form>
|
44
frontend/src/app/edit/edit.component.ts
Normal file
44
frontend/src/app/edit/edit.component.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import {Component, inject, OnInit} from '@angular/core';
|
||||||
|
import {ActivatedRoute, Router} from "@angular/router";
|
||||||
|
import {TodoService} from "../service/todo.service";
|
||||||
|
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-edit',
|
||||||
|
imports: [
|
||||||
|
ReactiveFormsModule
|
||||||
|
],
|
||||||
|
templateUrl: './edit.component.html',
|
||||||
|
styleUrl: './edit.component.css'
|
||||||
|
})
|
||||||
|
export default class EditComponent implements OnInit{
|
||||||
|
private id!: number;
|
||||||
|
private todoService: TodoService = inject(TodoService);
|
||||||
|
private route: ActivatedRoute = inject(ActivatedRoute);
|
||||||
|
private fb: FormBuilder = inject(FormBuilder);
|
||||||
|
public form!: FormGroup;
|
||||||
|
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.id = parseInt(this.route.snapshot.paramMap.get('id') ?? '', 10);
|
||||||
|
|
||||||
|
const old = this.todoService.getOne(this.id);
|
||||||
|
this.form = this.fb.group({
|
||||||
|
title: ['', Validators.required],
|
||||||
|
dueDate: ['', Validators.required],
|
||||||
|
});
|
||||||
|
|
||||||
|
old.subscribe((old => {
|
||||||
|
this.form.patchValue({
|
||||||
|
title: old.title,
|
||||||
|
dueDate: old.dueDate,
|
||||||
|
})
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
edit() {
|
||||||
|
const edited = this.form.value as { title: string, dueDate: Date };
|
||||||
|
|
||||||
|
this.todoService.edit(edited, this.id).subscribe(() => this.todoService.todos.reload());
|
||||||
|
}
|
||||||
|
}
|
@ -40,4 +40,12 @@ export class TodoService {
|
|||||||
public delete(id: number) {
|
public delete(id: number) {
|
||||||
return this.http.delete(`http://localhost:2000/api/tasks/${id}`);
|
return this.http.delete(`http://localhost:2000/api/tasks/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
edit(edited: { title: string; dueDate: Date }, id: number) {
|
||||||
|
return this.http.put(`http://localhost:2000/api/tasks/${id}`, edited);
|
||||||
|
}
|
||||||
|
|
||||||
|
getOne(id: number) {
|
||||||
|
return this.http.get<GetTask>(`http://localhost:2000/api/tasks/${id}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
<td>{{todo.dueDate | date}}</td>
|
<td>{{todo.dueDate | date}}</td>
|
||||||
<td>
|
<td>
|
||||||
<button (click)="markAsDone(todo)">Done</button>
|
<button (click)="markAsDone(todo)">Done</button>
|
||||||
<button>Edit</button>
|
<button (click)="edit(todo)">Edit</button>
|
||||||
<button (click)="delete(todo.id)">Delete</button>
|
<button (click)="delete(todo.id)">Delete</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -1,14 +1,13 @@
|
|||||||
import {Component, inject, Signal} from '@angular/core';
|
import {Component, inject} from '@angular/core';
|
||||||
import {TodoService} from "../service/todo.service";
|
import {TodoService} from "../service/todo.service";
|
||||||
import {DatePipe} from "@angular/common";
|
import {DatePipe} from "@angular/common";
|
||||||
import {GetTask} from "../dto/models";
|
import {GetTask} from "../dto/models";
|
||||||
import {toSignal} from "@angular/core/rxjs-interop";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-table',
|
selector: 'app-table',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [
|
imports: [
|
||||||
DatePipe
|
DatePipe,
|
||||||
],
|
],
|
||||||
templateUrl: './table.component.html',
|
templateUrl: './table.component.html',
|
||||||
styleUrl: './table.component.css'
|
styleUrl: './table.component.css'
|
||||||
@ -17,11 +16,16 @@ export class TableComponent {
|
|||||||
todoService: TodoService = inject(TodoService);
|
todoService: TodoService = inject(TodoService);
|
||||||
todos = this.todoService.todos;
|
todos = this.todoService.todos;
|
||||||
|
|
||||||
|
|
||||||
markAsDone(todo: GetTask) {
|
markAsDone(todo: GetTask) {
|
||||||
this.todoService.markAsDone(todo).subscribe(() => {this.todos.reload()});
|
this.todoService.markAsDone(todo).subscribe(() => this.todos.reload());
|
||||||
}
|
}
|
||||||
|
|
||||||
delete(id: number) {
|
delete(id: number) {
|
||||||
this.todoService.delete(id).subscribe(() => {this.todos.reload()});
|
this.todoService.delete(id).subscribe(() => this.todos.reload());
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(todo: GetTask) {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user