angular/todo-signal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add edit functionality for todo items

Browse Source
This commit is contained in:
Constantin Simonis
2025-06-17 09:51:50 +02:00
parent b8fd37f3e0
commit 534f10f65c
11 changed files with 657 additions and 1432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
frontend/angular.json
View File

@ -1,125 +1,125 @@
{ {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1, "version": 1,
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
"todo": { "todo": {
"projectType": "application", "projectType": "application",
"schematics": {}, "schematics": {},
"root": "", "root": "",
"sourceRoot": "src", "sourceRoot": "src",
"prefix": "app", "prefix": "app",
"architect": { "architect": {
"build": { "build": {
"builder": "@angular/build:application", "builder": "@angular/build:application",
"options": { "options": {
"outputPath": "dist/todo", "outputPath": "dist/todo",
"index": "src/index.html", "index": "src/index.html",
"browser": "src/main.ts", "browser": "src/main.ts",
"polyfills": [ "polyfills": [
"zone.js" "zone.js"
], ],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"assets": [ "assets": [
{ {
"glob": "**/*", "glob": "**/*",
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": [
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
"production": { "production": {
"budgets": [ "budgets": [
{ {
"type": "initial", "type": "initial",
"maximumWarning": "500kB", "maximumWarning": "500kB",
"maximumError": "1MB" "maximumError": "1MB"
}, },
{ {
"type": "anyComponentStyle", "type": "anyComponentStyle",
"maximumWarning": "2kB", "maximumWarning": "2kB",
"maximumError": "4kB" "maximumError": "4kB"
} }
], ],
"outputHashing": "all" "outputHashing": "all"
}, },
"development": { "development": {
"optimization": false, "optimization": false,
"extractLicenses": false, "extractLicenses": false,
"sourceMap": true "sourceMap": true
} }
}, },
"defaultConfiguration": "production" "defaultConfiguration": "production"
}, },
"serve": { "serve": {
"builder": "@angular/build:dev-server", "builder": "@angular/build:dev-server",
"configurations": { "configurations": {
"production": { "production": {
"buildTarget": "todo:build:production" "buildTarget": "todo:build:production"
}, },
"development": { "development": {
"buildTarget": "todo:build:development" "buildTarget": "todo:build:development"
} }
}, },
"defaultConfiguration": "development" "defaultConfiguration": "development"
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular/build:extract-i18n" "builder": "@angular/build:extract-i18n"
}, },
"test": { "test": {
"builder": "@angular/build:karma", "builder": "@angular/build:karma",
"options": { "options": {
"polyfills": [ "polyfills": [
"zone.js", "zone.js",
"zone.js/testing" "zone.js/testing"
], ],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"assets": [ "assets": [
{ {
"glob": "**/*", "glob": "**/*",
"input": "public" "input": "public"
} }
], ],
"styles": [ "styles": [
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
} }
} }
} }
} }
}, },
"cli": { "cli": {
"analytics": "4b15b216-5855-4376-b6a8-53304c9e623a" "analytics": "4b15b216-5855-4376-b6a8-53304c9e623a"
}, },
"schematics": { "schematics": {
"@schematics/angular:component": { "@schematics/angular:component": {
"type": "component" "type": "component"
}, },
"@schematics/angular:directive": { "@schematics/angular:directive": {
"type": "directive" "type": "directive"
}, },
"@schematics/angular:service": { "@schematics/angular:service": {
"type": "service" "type": "service"
}, },
"@schematics/angular:guard": { "@schematics/angular:guard": {
"typeSeparator": "." "typeSeparator": "."
}, },
"@schematics/angular:interceptor": { "@schematics/angular:interceptor": {
"typeSeparator": "." "typeSeparator": "."
}, },
"@schematics/angular:module": { "@schematics/angular:module": {
"typeSeparator": "." "typeSeparator": "."
}, },
"@schematics/angular:pipe": { "@schematics/angular:pipe": {
"typeSeparator": "." "typeSeparator": "."
}, },
"@schematics/angular:resolver": { "@schematics/angular:resolver": {
"typeSeparator": "." "typeSeparator": "."
} }
} }
} }

1486
frontend/bun.lock
View File

File diff suppressed because it is too large Load Diff

30
frontend/src/app/app.component.ts
View File

@ -1,15 +1,15 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router'; import {RouterOutlet} from '@angular/router';
import {TableComponent} from "./table/table.component"; import {TableComponent} from "./table/table.component";
import {CreateComponent} from "./create/create.component"; import {CreateComponent} from "./create/create.component";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
imports: [RouterOutlet, TableComponent, CreateComponent], imports: [RouterOutlet, TableComponent, CreateComponent],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.css', styleUrl: './app.component.css',
standalone: true, standalone: true,
}) })
export class AppComponent { export class AppComponent {
title = 'todo'; title = 'todo';
} }

5
frontend/src/app/app.routes.ts
View File

@ -1,3 +1,4 @@
import { Routes } from '@angular/router'; import {Routes} from '@angular/router';
export const routes: Routes = []; export const routes: Routes = [
];

62
frontend/src/app/create/create.component.ts
View File

@ -1,30 +1,32 @@
import {Component, inject, OnInit} from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import {TodoService} from "../service/todo.service"; import {TodoService} from "../service/todo.service";
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms"; import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
@Component({ @Component({
selector: 'app-create', selector: 'app-create',
standalone: true, standalone: true,
imports: [ imports: [
ReactiveFormsModule ReactiveFormsModule
], ],
templateUrl: './create.component.html', templateUrl: './create.component.html',
styleUrl: './create.component.css' styleUrl: './create.component.css'
}) })
export class CreateComponent implements OnInit { export class CreateComponent implements OnInit {
todoService: TodoService = inject(TodoService); todoService: TodoService = inject(TodoService);
formBuilder: FormBuilder = inject(FormBuilder); formBuilder: FormBuilder = inject(FormBuilder);
form!: FormGroup; form!: FormGroup;
ngOnInit(): void { ngOnInit(): void {
this.form = this.formBuilder.group({ this.form = this.formBuilder.group({
title: ['', Validators.required], title: ['', Validators.required],
dueDate: ['', Validators.required], dueDate: ['', Validators.required],
}) })
} }
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
View File

6
frontend/src/app/edit/edit.component.html Normal file
View 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
View 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());
}
}

94
frontend/src/app/service/todo.service.ts
View File

@ -1,43 +1,51 @@
import {inject, Injectable} from "@angular/core"; import {inject, Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs"; import {Observable} from "rxjs";
import {GetTask, PutTask} from "../dto/models"; import {GetTask, PutTask} from "../dto/models";
import {rxResource} from "@angular/core/rxjs-interop"; import {rxResource} from "@angular/core/rxjs-interop";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class TodoService { export class TodoService {
http: HttpClient = inject(HttpClient); http: HttpClient = inject(HttpClient);
_todos = rxResource({ _todos = rxResource({
stream: () => this.getTodos(), stream: () => this.getTodos(),
}) })
public get todos() { public get todos() {
return this._todos; return this._todos;
} }
public getTodos(): Observable<GetTask[]> { public getTodos(): Observable<GetTask[]> {
return this.http.get<GetTask[]>('http://localhost:2000/api/tasks'); return this.http.get<GetTask[]>('http://localhost:2000/api/tasks');
} }
public create(todo: {title: string, dueDate: Date}) { public create(todo: {title: string, dueDate: Date}) {
return this.http.post('http://localhost:2000/api/tasks', todo); return this.http.post('http://localhost:2000/api/tasks', todo);
} }
public markAsDone(todo: GetTask) { public markAsDone(todo: GetTask) {
const putTask: PutTask = { const putTask: PutTask = {
title: todo.title, title: todo.title,
dueDate: todo.dueDate, dueDate: todo.dueDate,
done: true, done: true,
} }
return this.http.put(`http://localhost:2000/api/tasks/${todo.id}`, putTask); return this.http.put(`http://localhost:2000/api/tasks/${todo.id}`, putTask);
} }
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}`);
}
}

54
frontend/src/app/table/table.component.html
View File

@ -1,27 +1,27 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Title</th> <th>Title</th>
<th>Due Date</th> <th>Due Date</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@for (todo of todos.value(); track todo.id) { @for (todo of todos.value(); track todo.id) {
<tr> <tr>
<td> <td>
{{todo.title}} {{todo.title}}
@if (todo.done) { @if (todo.done) {
&checkmark; &checkmark;
} }
</td> </td>
<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>
} }
</tbody> </tbody>
</table> </table>

58
frontend/src/app/table/table.component.ts
View File

@ -1,27 +1,31 @@
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' })
}) export class TableComponent {
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) {
}
}