cd C:\webdev\booklab\apps\web
npm exec -- ng generate component books/book-detail --skip-tests

import { Component, signal, inject, OnInit } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { BookService } from '../book.service';
import { Book } from '../book';

@Component({
  selector: 'app-book-detail',
  imports: [RouterLink],
  templateUrl: './book-detail.html',
  styleUrl: './book-detail.css',
})
export class BookDetail implements OnInit {
  private route = inject(ActivatedRoute);
  private bookService = inject(BookService);

  book = signal<Book | null>(null);
  loading = signal(false);
  error = signal('');

  async ngOnInit() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.loading.set(true);
    try {
      this.book.set(await this.bookService.getById(id));
    } catch {
      this.error.set('ไม่พบหนังสือเล่มนี้');
    } finally {
      this.loading.set(false);
    }
  }
}

<div class="p-6 max-w-3xl mx-auto">
  <a routerLink="/" class="text-blue-600 hover:underline">← กลับหน้ารายการ</a>

  @if (loading()) {
    <p class="mt-4 text-gray-500">กำลังโหลด...</p>
  } @else if (error()) {
    <p class="mt-4 text-red-600">{{ error() }}</p>
  } @else if (book(); as b) {
    <div class="mt-4 border rounded-lg p-6">
      <h1 class="text-2xl font-bold">{{ b.title }}</h1>
      <p class="text-gray-600 mt-1">{{ b.author }}</p>
      <p class="mt-2">ปีที่พิมพ์: {{ b.year }}</p>
      <p class="mt-1">หมวดหมู่: {{ b.category?.name }}</p>

      <div class="mt-6 flex gap-2">
        <a [routerLink]="['/books', b.id, 'edit']"
           class="px-4 py-2 bg-amber-500 text-white rounded">แก้ไข</a>
      </div>
    </div>
  }
</div>

import { Routes } from '@angular/router';
import { BookList } from './books/book-list/book-list';
import { BookDetail } from './books/book-detail/book-detail';

export const routes: Routes = [
  { path: '', component: BookList },
  { path: 'books/:id', component: BookDetail },
];

import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { Book } from '../book';

@Component({
  selector: 'app-book-card',
  imports: [RouterLink],
  templateUrl: './book-card.html',
  styleUrl: './book-card.css',
})
export class BookCard {
  book = input.required<Book>();
}

<a [routerLink]="['/books', book().id]" class="block">
  <div class="border rounded-lg p-4 hover:shadow-md transition">
    <!-- เนื้อหาเดิมทั้งหมด -->
  </div>
</a>

cd C:\webdev\booklab
npm install class-validator class-transformer --workspace api

import { IsInt, IsNotEmpty, IsString, Max, Min } from 'class-validator';

export class CreateBookDto {
  @IsString()
  @IsNotEmpty({ message: 'กรุณากรอกชื่อหนังสือ' })
  title: string;

  @IsString()
  @IsNotEmpty({ message: 'กรุณากรอกชื่อผู้แต่ง' })
  author: string;

  @IsInt({ message: 'ปีต้องเป็นตัวเลข' })
  @Min(1000)
  @Max(2100)
  year: number;

  @IsInt()
  categoryId: number;
}

import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  app.setGlobalPrefix('api');
  app.useGlobalPipes(
    new ValidationPipe({ whitelist: true, transform: true }),
  );
  await app.listen(process.env.PORT ?? 3000);
}
bootstrap();

  create(data: CreateBookDto) {
    return this.prisma.book.create({ data });
  }

  update(id: number, data: CreateBookDto) {
    return this.prisma.book.update({ where: { id }, data });
  }

  remove(id: number) {
    return this.prisma.book.delete({ where: { id } });
  }

import { CreateBookDto } from './dto/create-book.dto';

import {
  Controller, Get, Post, Put, Delete,
  Body, Param, Query, ParseIntPipe,
} from '@nestjs/common';
import { BooksService } from './books.service';
import { CreateBookDto } from './dto/create-book.dto';

@Controller('books')
export class BooksController {
  constructor(private booksService: BooksService) {}

  @Get()
  findAll(@Query('q') q?: string) {
    return this.booksService.findAll(q);
  }

  @Post()
  create(@Body() dto: CreateBookDto) {
    return this.booksService.create(dto);
  }

  @Get(':id')
  findOne(@Param('id', ParseIntPipe) id: number) {
    return this.booksService.findOne(id);
  }

  @Put(':id')
  update(@Param('id', ParseIntPipe) id: number, @Body() dto: CreateBookDto) {
    return this.booksService.update(id, dto);
  }

  @Delete(':id')
  remove(@Param('id', ParseIntPipe) id: number) {
    return this.booksService.remove(id);
  }
}

  create(data: Partial<Book>): Promise<Book> {
    return firstValueFrom(this.http.post<Book>(this.apiUrl, data));
  }

  update(id: number, data: Partial<Book>): Promise<Book> {
    return firstValueFrom(this.http.put<Book>(`${this.apiUrl}/${id}`, data));
  }

  remove(id: number): Promise<void> {
    return firstValueFrom(this.http.delete<void>(`${this.apiUrl}/${id}`));
  }

npm exec -- ng generate component books/book-form --skip-tests

import { Component, signal, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { BookService } from '../book.service';

@Component({
  selector: 'app-book-form',
  imports: [ReactiveFormsModule],
  templateUrl: './book-form.html',
  styleUrl: './book-form.css',
})
export class BookForm implements OnInit {
  private fb = inject(FormBuilder);
  private bookService = inject(BookService);
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  editingId = signal<number | null>(null);
  saving = signal(false);
  error = signal('');

  form = this.fb.group({
    title: ['', Validators.required],
    author: ['', Validators.required],
    year: [2024, [Validators.required, Validators.min(1000)]],
    categoryId: [1, Validators.required],
  });

  async ngOnInit() {
    const idParam = this.route.snapshot.paramMap.get('id');
    if (idParam) {
      const id = Number(idParam);
      this.editingId.set(id);
      const book = await this.bookService.getById(id);
      this.form.patchValue({
        title: book.title,
        author: book.author,
        year: book.year,
        categoryId: book.category?.id ?? 1,
      });
    }
  }

  async save() {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    this.saving.set(true);
    this.error.set('');
    try {
      const value = this.form.getRawValue() as any;
      if (this.editingId()) {
        await this.bookService.update(this.editingId()!, value);
      } else {
        await this.bookService.create(value);
      }
      this.router.navigate(['/']);
    } catch {
      this.error.set('บันทึกไม่สำเร็จ');
    } finally {
      this.saving.set(false);
    }
  }
}

<div class="p-6 max-w-lg mx-auto">
  <h1 class="text-2xl font-bold mb-4">
    {{ editingId() ? 'แก้ไขหนังสือ' : 'เพิ่มหนังสือ' }}
  </h1>

  <div class="grid gap-3">
    <div>
      <label class="block text-sm mb-1">ชื่อหนังสือ</label>
      <input [formControl]="form.controls.title" class="border rounded px-3 py-2 w-full" />
      @if (form.controls.title.touched && form.controls.title.invalid) {
        <p class="text-red-600 text-sm mt-1">กรุณากรอกชื่อหนังสือ</p>
      }
    </div>

    <div>
      <label class="block text-sm mb-1">ผู้แต่ง</label>
      <input [formControl]="form.controls.author" class="border rounded px-3 py-2 w-full" />
      @if (form.controls.author.touched && form.controls.author.invalid) {
        <p class="text-red-600 text-sm mt-1">กรุณากรอกชื่อผู้แต่ง</p>
      }
    </div>

    <div>
      <label class="block text-sm mb-1">ปีที่พิมพ์</label>
      <input type="number" [formControl]="form.controls.year" class="border rounded px-3 py-2 w-full" />
    </div>

    <div>
      <label class="block text-sm mb-1">หมวดหมู่ (1=Programming, 2=Design)</label>
      <input type="number" [formControl]="form.controls.categoryId" class="border rounded px-3 py-2 w-full" />
    </div>

    @if (error()) {
      <p class="text-red-600">{{ error() }}</p>
    }

    <div class="flex gap-2 mt-2">
      <button (click)="save()" [disabled]="saving()"
        class="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50">
        {{ saving() ? 'กำลังบันทึก...' : 'บันทึก' }}
      </button>
      <a routerLink="/" class="px-4 py-2 border rounded">ยกเลิก</a>
    </div>
  </div>
</div>

export const routes: Routes = [
  { path: '', component: BookList },
  { path: 'books/new', component: BookForm },
  { path: 'books/:id', component: BookDetail },
  { path: 'books/:id/edit', component: BookForm },
];

<a routerLink="/books/new" class="inline-block mb-4 px-4 py-2 bg-green-600 text-white rounded">
  + เพิ่มหนังสือ
</a>

  private router = inject(Router);
  deleting = signal(false);

  async onDelete(id: number) {
    if (!confirm('ยืนยันการลบหนังสือเล่มนี้?')) return;
    this.deleting.set(true);
    try {
      await this.bookService.remove(id);
      this.router.navigate(['/']);
    } catch {
      this.error.set('ลบไม่สำเร็จ');
    } finally {
      this.deleting.set(false);
    }
  }

import { ActivatedRoute, Router, RouterLink } from '@angular/router';

<button (click)="onDelete(b.id)" [disabled]="deleting()"
  class="px-4 py-2 bg-red-600 text-white rounded disabled:opacity-50">
  {{ deleting() ? 'กำลังลบ...' : 'ลบ' }}
</button>