[Spec Kit] Implementation progress
Implements all 88 tasks for the Reaction Image Board (specs/001-reaction-image-board): - docker-compose.yml: postgres, minio, minio-init, api, ui services with healthchecks - api/: FastAPI app with SQLAlchemy 2.x async, Alembic migrations, S3/MinIO storage, full integration + unit test suite (pytest + pytest-asyncio) - ui/: Angular 19 standalone app (Library, Upload, Detail, NotFound components) - .env.example: all required environment variables - .gitignore: Python, Node, Docker, IDE, .env patterns Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
128
ui/src/app/detail/detail.component.ts
Normal file
128
ui/src/app/detail/detail.component.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { ImageRecord, ImageService } from '../services/image.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="detail-page" *ngIf="image">
|
||||
<button class="back-btn" (click)="goBack()">← Back</button>
|
||||
<h2>{{ image.filename }}</h2>
|
||||
|
||||
<img class="full-image" [src]="imageService.getFileUrl(image.id)" [alt]="image.filename" />
|
||||
|
||||
<section class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="chips">
|
||||
<span *ngFor="let tag of image.tags" class="chip">
|
||||
{{ tag }} <button (click)="removeTag(tag)">×</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="add-tag">
|
||||
<input
|
||||
[(ngModel)]="newTagInput"
|
||||
placeholder="Add tag…"
|
||||
(keydown.enter)="onEnter()"
|
||||
(blur)="onBlur()"
|
||||
/>
|
||||
</div>
|
||||
<p class="tag-error" *ngIf="tagError">{{ tagError }}</p>
|
||||
</section>
|
||||
|
||||
<button class="delete-btn" (click)="showDeleteDialog = true">Delete Image</button>
|
||||
|
||||
<div class="dialog-overlay" *ngIf="showDeleteDialog">
|
||||
<div class="dialog">
|
||||
<p>Permanently delete this image?</p>
|
||||
<button (click)="confirmDelete()">Delete</button>
|
||||
<button (click)="cancelDelete()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p *ngIf="!image && !loading" class="not-found">Image not found.</p>
|
||||
`,
|
||||
styles: [`
|
||||
.detail-page { max-width: 900px; margin: 32px auto; padding: 0 16px; }
|
||||
.back-btn { background: none; border: none; color: #4a9eff; cursor: pointer; font-size: 1rem; margin-bottom: 16px; padding: 0; }
|
||||
.full-image { width: 100%; max-height: 70vh; object-fit: contain; background: #111; border-radius: 8px; display: block; }
|
||||
.tags-section { margin-top: 24px; }
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
|
||||
.chip { background: #333; padding: 4px 12px; border-radius: 14px; display: flex; align-items: center; gap: 6px; }
|
||||
.chip button { background: none; border: none; color: #aaa; cursor: pointer; font-size: 1rem; }
|
||||
.add-tag input { padding: 8px; background: #1a1a1a; border: 1px solid #444; color: #e0e0e0; border-radius: 4px; width: 200px; }
|
||||
.tag-error { color: #ff6b6b; font-size: 0.85rem; margin-top: 6px; }
|
||||
.delete-btn { margin-top: 32px; padding: 10px 24px; background: #c0392b; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
|
||||
.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
|
||||
.dialog { background: #1a1a1a; padding: 32px; border-radius: 10px; text-align: center; }
|
||||
.dialog button { margin: 0 8px; padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; }
|
||||
.dialog button:first-of-type { background: #c0392b; color: #fff; }
|
||||
.dialog button:last-of-type { background: #444; color: #e0e0e0; }
|
||||
.not-found { text-align: center; color: #666; padding: 60px; }
|
||||
`],
|
||||
})
|
||||
export class DetailComponent implements OnInit {
|
||||
image: ImageRecord | null = null;
|
||||
loading = true;
|
||||
newTagInput = '';
|
||||
tagError = '';
|
||||
showDeleteDialog = false;
|
||||
|
||||
constructor(
|
||||
public imageService: ImageService,
|
||||
private route: ActivatedRoute,
|
||||
public router: Router,
|
||||
private cdr: ChangeDetectorRef,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
const id = this.route.snapshot.paramMap.get('id');
|
||||
if (!id) { this.loading = false; return; }
|
||||
this.imageService.get(id).subscribe({
|
||||
next: (img) => { this.image = img; this.loading = false; this.cdr.markForCheck(); },
|
||||
error: () => { this.loading = false; this.cdr.markForCheck(); },
|
||||
});
|
||||
}
|
||||
|
||||
removeTag(tag: string): void {
|
||||
if (!this.image) return;
|
||||
const updated = this.image.tags.filter((t) => t !== tag);
|
||||
this.imageService.updateTags(this.image.id, updated).subscribe({
|
||||
next: (img) => { this.image = img; this.tagError = ''; this.cdr.markForCheck(); },
|
||||
error: (err) => { this.tagError = err?.error?.detail ?? 'Failed to remove tag'; this.cdr.markForCheck(); },
|
||||
});
|
||||
}
|
||||
|
||||
addTag(tag: string): void {
|
||||
if (!this.image || !tag.trim()) return;
|
||||
const normalised = tag.trim().toLowerCase();
|
||||
const updated = [...this.image.tags, normalised];
|
||||
this.imageService.updateTags(this.image.id, updated).subscribe({
|
||||
next: (img) => { this.image = img; this.newTagInput = ''; this.tagError = ''; this.cdr.markForCheck(); },
|
||||
error: (err) => { this.tagError = err?.error?.detail ?? 'Invalid tag'; this.cdr.markForCheck(); },
|
||||
});
|
||||
}
|
||||
|
||||
onEnter(): void { this.addTag(this.newTagInput); }
|
||||
onBlur(): void { if (this.newTagInput.trim()) this.addTag(this.newTagInput); }
|
||||
|
||||
confirmDelete(): void {
|
||||
if (!this.image) return;
|
||||
this.imageService.delete(this.image.id).subscribe({
|
||||
next: () => this.router.navigate(['/']),
|
||||
error: () => { this.showDeleteDialog = false; this.cdr.markForCheck(); },
|
||||
});
|
||||
}
|
||||
|
||||
cancelDelete(): void {
|
||||
this.showDeleteDialog = false;
|
||||
this.cdr.markForCheck();
|
||||
}
|
||||
|
||||
goBack(): void { this.router.navigate(['/']); }
|
||||
}
|
||||
Reference in New Issue
Block a user