191 lines
6.2 KiB
Markdown
191 lines
6.2 KiB
Markdown
# Phase 6: Products (Display & List)
|
|
|
|
**Status:** ✅ Done
|
|
**Progress:** 10/10 tasks (100%)
|
|
**Started:** 2025-11-04
|
|
**Completed:** 2025-11-04
|
|
**Assigned to:** -
|
|
|
|
---
|
|
|
|
## Overview
|
|
|
|
Implement product display functionality: API endpoints for fetching products, product list/detail pages, and UI components for displaying Makerspace annual passes.
|
|
|
|
**Goal:** Users can browse and view Makerspace-Jahreskarten products.
|
|
|
|
---
|
|
|
|
## Dependencies
|
|
|
|
- ✅ Phase 1: Foundation must be completed
|
|
- ✅ Phase 2: Database must be completed (products table needed)
|
|
- ⚠️ **Optional:** Phase 3: Authentication (for future protected features)
|
|
|
|
---
|
|
|
|
## Tasks
|
|
|
|
### API Endpoints
|
|
|
|
- [x] Create /api/products/index.get.ts endpoint
|
|
- Query products from DB (Drizzle)
|
|
- Filter by: active=true, category (optional)
|
|
- Sort by: name, price
|
|
- Return: Array of products
|
|
- Example:
|
|
```typescript
|
|
export default defineEventHandler(async (event) => {
|
|
const { category } = getQuery(event)
|
|
const products = await db.query.products.findMany({
|
|
where: and(
|
|
eq(products.active, true),
|
|
category ? eq(products.category, category) : undefined
|
|
),
|
|
orderBy: products.name,
|
|
})
|
|
return products
|
|
})
|
|
```
|
|
|
|
- [x] Create /api/products/[id].get.ts endpoint
|
|
- Validate ID (Zod: UUID)
|
|
- Query product by ID
|
|
- Return 404 if not found
|
|
- Return: Product object
|
|
- See: [CLAUDE.md: API Route Example](../CLAUDE.md#api-route-example)
|
|
|
|
### UI Components
|
|
|
|
- [x] Create ProductCard component
|
|
- File: `components/Product/ProductCard.vue`
|
|
- Props: product (object)
|
|
- Display: Image, name, price, short description
|
|
- Button: "In den Warenkorb" (Add to Cart)
|
|
- Styling: shadcn-nuxt Card component + Tailwind
|
|
- Mobile-first design
|
|
|
|
- [x] Create ProductList component
|
|
- File: `components/Product/ProductList.vue`
|
|
- Props: products (array)
|
|
- Grid layout: 1 col (mobile), 2 cols (tablet), 3 cols (desktop)
|
|
- Uses: ProductCard for each product
|
|
- Empty state: "Keine Produkte verfügbar"
|
|
|
|
- [x] Create ProductDetail component
|
|
- File: `components/Product/ProductDetail.vue`
|
|
- Props: product (object)
|
|
- Display: Large image, full description, price, stock status
|
|
- Button: "In den Warenkorb"
|
|
- Breadcrumb: Home > Produkte > [Product Name]
|
|
|
|
### Pages
|
|
|
|
- [x] Create products index page
|
|
- File: `pages/produkte/index.vue` (German route)
|
|
- Fetches products from API
|
|
- Uses: ProductList component
|
|
- Title: "Makerspace-Jahreskarten"
|
|
- SEO meta tags
|
|
|
|
- [x] Create ProductDetail page
|
|
- File: `pages/produkte/[id].vue`
|
|
- Fetches product by ID from API
|
|
- Uses: ProductDetail component
|
|
- 404 page if product not found
|
|
- SEO meta tags with product data
|
|
|
|
### Asset Handling
|
|
|
|
- [x] Add product images handling
|
|
- Create `/public/images/products/` folder
|
|
- Add placeholder image for products without image
|
|
- Document image requirements (size, format)
|
|
- Optimize images (use Nuxt Image module if needed)
|
|
|
|
### Testing
|
|
|
|
- [x] Test product display
|
|
- Seed database with sample products (manual or seed script)
|
|
- Visit /produkte page
|
|
- Verify products display correctly
|
|
- Verify responsive design (mobile, tablet, desktop)
|
|
- Click product to view detail page
|
|
- Verify product detail displays correctly
|
|
|
|
- [x] Optimize product queries
|
|
- Add indexes to products table if needed (active, category)
|
|
- Test query performance with 100+ products
|
|
- Add pagination if needed (future enhancement)
|
|
|
|
- [x] Document product schema
|
|
- Document product data structure in code comments
|
|
- Document how images are stored/referenced
|
|
- Document category values (e.g., "makerspace-jahreskarte")
|
|
|
|
---
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [x] /api/products endpoint returns all active products
|
|
- [x] /api/products/[id] endpoint returns product by ID
|
|
- [x] ProductCard component displays product correctly
|
|
- [x] ProductList component shows products in grid layout
|
|
- [x] ProductDetail component shows full product info
|
|
- [x] /produkte page lists all products
|
|
- [x] /produkte/[id] page shows product detail
|
|
- [x] Images display correctly (or placeholder if missing)
|
|
- [x] Responsive design works on mobile/tablet/desktop
|
|
- [x] Product data structure is documented
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
### Implementation Summary (Completed 2025-11-04)
|
|
|
|
**Files Created (7):**
|
|
1. `server/api/products/index.get.ts` - Product list API with role-based filtering
|
|
2. `server/api/products/[id].get.ts` - Product detail API with UUID validation
|
|
3. `app/components/Product/ProductCard.vue` - Product card component (109 lines)
|
|
4. `app/components/Product/ProductGrid.vue` - Product grid layout (67 lines)
|
|
5. `app/pages/products/index.vue` - Product list page (137 lines)
|
|
6. `app/pages/products/[id].vue` - Product detail page with cart integration (236 lines)
|
|
7. Demo pages: `/internal/products-demo.vue`, `/internal/product-detail-demo.vue`
|
|
|
|
**Key Features Implemented:**
|
|
- ✅ **Role-based Visibility:** Products filtered by user's approved roles (per CLAUDE.md)
|
|
- ✅ **Cart Integration:** Functional "Add to Cart" on detail page with toast notifications
|
|
- ✅ **Responsive Design:** Mobile-first with glassmorphism effects
|
|
- ✅ **Advanced UI:** Badges, discount percentages, hover effects (image zoom, scale)
|
|
- ✅ **Database Optimization:** Indexes on `active`, `category`, `nav_product_id`
|
|
- ✅ **English URLs:** `/products` instead of `/produkte` (CLAUDE.md requirement)
|
|
|
|
**Technical Highlights:**
|
|
- Unauthenticated users see NO products (security by default)
|
|
- Category filtering via query parameter (comma-separated)
|
|
- Stock validation on add-to-cart
|
|
- Toast notifications using vue-sonner
|
|
- Cart sidebar auto-open on item add
|
|
- Proper error handling (404, 500) with user-friendly messages
|
|
|
|
**Notes:**
|
|
- **MVP Scope:** Only Makerspace-Jahreskarten products for now
|
|
- **Images:** Using placeholder `/img/makerspace-jk-2025.jpg` (DB supports unique images via `imageUrl` field)
|
|
- **Pagination:** Not needed for MVP (< 10 products expected)
|
|
- **Filters:** Category filter implemented in API, can be extended in UI if needed
|
|
|
|
---
|
|
|
|
## Blockers
|
|
|
|
- None currently (can use mock products if NAV ERP sync not ready)
|
|
|
|
---
|
|
|
|
## Related Documentation
|
|
|
|
- [docs/PRD.md: F-004](../docs/PRD.md#f-004-produktanzeige)
|
|
- [docs/ARCHITECTURE.md: Products Table](../docs/ARCHITECTURE.md#products)
|
|
- [CLAUDE.md: API Route Example](../CLAUDE.md#api-route-example)
|