feat: proof of concept single restaurant comopnent

This commit is contained in:
Krzysztof Rudnicki 2024-05-31 00:00:07 +02:00
parent bfc24cce21
commit 3d3c45e048
5 changed files with 85 additions and 4 deletions

View File

@ -9,6 +9,7 @@ export class RestauracjaController {
@Get()
async findAll(): Promise<Restauracja[]> {
console.log(`restauracja all`);
return this.restauracjaService.findAll();
}

View File

@ -10,6 +10,7 @@ import { AppModule } from './app/app.module';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors();
const globalPrefix = 'api';
app.setGlobalPrefix(globalPrefix);
const port = process.env.PORT || 3000;

View File

@ -1,3 +1,6 @@
import { Route } from '@angular/router';
import { RestauracjaComponent } from './restauracja/restauracja.component';
export const appRoutes: Route[] = [];
export const appRoutes: Route[] = [
{path: 'restauracja', component: RestauracjaComponent}
];

View File

@ -1 +1,23 @@
<p>restauracja works!</p>
<!-- src/app/restauracja/restauracja.component.html -->
<div>
<h2>Restauracja List</h2>
<ul>
<li *ngFor="let restauracja of restauracje">
{{ restauracja.adres }}
<button (click)="startEdit(restauracja)">Edit</button>
<button (click)="deleteRestauracja(restauracja.id!)">Delete</button>
</li>
</ul>
<h2>Create Restauracja</h2>
<input [(ngModel)]="newRestauracja.adres" placeholder="Adres">
<button (click)="createRestauracja()">Create</button>
<div *ngIf="editRestauracja">
<h2>Edit Restauracja</h2>
<input [(ngModel)]="editRestauracja.adres" placeholder="Adres">
<button (click)="updateRestauracja()">Update</button>
<button (click)="cancelEdit()">Cancel</button>
</div>
</div>

View File

@ -1,11 +1,65 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
interface Restauracja {
id?: number;
adres: string;
}
@Component({
selector: 'app-restauracja',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, FormsModule, HttpClientModule],
templateUrl: './restauracja.component.html',
styleUrl: './restauracja.component.css',
})
export class RestauracjaComponent {}
export class RestauracjaComponent {
restauracje: Restauracja[] = [];
newRestauracja: Restauracja = { adres: '' };
editRestauracja: Restauracja | null = null;
private apiUrl = 'http://localhost:3000/api/restauracja';
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.loadRestauracje();
}
loadRestauracje(): void {
this.http.get<Restauracja[]>(this.apiUrl).subscribe(data => {
this.restauracje = data;
});
}
createRestauracja(): void {
this.http.post<Restauracja>(this.apiUrl, this.newRestauracja).subscribe(data => {
this.restauracje.push(data);
this.newRestauracja = { adres: '' };
});
}
updateRestauracja(): void {
if (this.editRestauracja && this.editRestauracja.id) {
this.http.put<Restauracja>(`${this.apiUrl}/${this.editRestauracja.id}`, this.editRestauracja).subscribe(data => {
this.loadRestauracje();
this.editRestauracja = null;
});
}
}
deleteRestauracja(id: number): void {
this.http.delete<Restauracja>(`${this.apiUrl}/${id}`).subscribe(() => {
this.restauracje = this.restauracje.filter(r => r.id !== id);
});
}
startEdit(restauracja: Restauracja): void {
this.editRestauracja = { ...restauracja };
}
cancelEdit(): void {
this.editRestauracja = null;
}
}