bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement shopping cart functionality with UI components and API integration

Browse Source 
- Added CartItem, CartSummary, CartEmpty, CartSidebar, and CartSheet components for managing cart display and interactions.
- Integrated useCart and useCartUI composables for cart state management and UI control.
- Implemented API endpoints for cart operations, including fetching, adding, updating, and removing items.
- Enhanced user experience with loading states and notifications using vue-sonner for cart actions.
- Configured session management for guest and authenticated users, ensuring cart persistence across sessions.

This commit completes the shopping cart feature, enabling users to add items, view their cart, and proceed to checkout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Bastian Masanek
2025-11-03 12:43:13 +01:00
parent 9d0e77fc98
commit b372e2cf78
44 changed files with 2209 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
tasks/00-PROGRESS.md
View File

@@ -3,8 +3,8 @@
## my.experimenta.science
**Last Updated:** 2025-11-03
**Overall Progress:** 39/137 tasks (28.5%)
**Current Phase:** ✅ Phase 3 - Authentication (Completed) | Database Schema Refinement Completed
**Overall Progress:** 51/137 tasks (37.2%)
**Current Phase:** ✅ Phase 4 - Cart (Completed)
---
@@ -15,7 +15,7 @@
| **01** Foundation | ✅ Done | 9/10 (90%) | 2025-10-29 | 2025-10-29 |
| **02** Database | ✅ Done | 12/12 (100%) | 2025-10-30 | 2025-10-30 |
| **03** Authentication | ✅ Done | 18/18 (100%) | 2025-10-30 | 2025-10-30 |
| **04** Cart (PRIORITY) | ⏳ Todo | 0/12 (0%) | - | - |
| **04** Cart (PRIORITY) | ✅ Done | 12/12 (100%) | 2025-11-03 | 2025-11-03 |
| **05** Checkout (PRIORITY) | ⏳ Todo | 0/15 (0%) | - | - |
| **06** Products | ⏳ Todo | 0/10 (0%) | - | - |
| **07** Payment | ⏳ Todo | 0/12 (0%) | - | - |
@@ -30,26 +30,52 @@
## 🚀 Current Work
**Phase:** Database Schema Refinement ✅ **COMPLETED** (2025-11-03)
**Phase:** Phase 4 - Cart (Shopping Cart) ✅ **COMPLETED** (2025-11-03)
**Recent Work: Roles Table Refactoring**
**Deliverables Summary:**
Completed a major database schema refinement to improve code readability and performance:
Completed comprehensive shopping cart implementation with both desktop and mobile-optimized UI:
- ✅ **Refactored `roles` table**: Changed Primary Key from `id` (UUID) to `code` (enum: 'private' | 'educator' | 'company')
- ✅ **Updated junction tables**: `user_roles.roleCode` and `product_role_visibility.roleCode` now reference `roles.code` directly
- ✅ **Simplified code**: Removed all UUID lookup queries for roles - direct enum usage throughout
- ✅ **Maintained functionality**: Many-to-Many relationships fully preserved
- ✅ **Migration**: Successfully applied, database reseeded with 3 roles, 3 products, 7 role assignments
- ✅ **Auto-assignment**: Confirmed that new users automatically receive `'private'` role on first login
- ✅ **Product visibility**: Verified role-based product filtering works correctly
- ✅ **Documentation**: Updated CLAUDE.md and ARCHITECTURE.md to reflect new schema
**API Endpoints (4):**
- ✅ `GET /api/cart` - Fetch user/guest cart with calculated totals
- ✅ `POST /api/cart/items` - Add products to cart with validation
- ✅ `PATCH /api/cart/items/[id]` - Update item quantities with stock checking
- ✅ `DELETE /api/cart/items/[id]` - Remove items from cart
**Benefits:**
- Better readability: `roleCode: 'private'` instead of `roleId: 'uuid...'`
- Simpler code: No role lookups needed
- Better performance: Fewer joins in queries
- Type safety: Direct enum type usage
**State Management:**
- ✅ **useCart composable**: Full CRUD operations for cart management
- Functions: `fetchCart()`, `addItem()`, `updateItem()`, `removeItem()`, `clearCart()`
- Computed properties: `items`, `total`, `itemCount`
- Reactive state management with automatic API calls
**UI Components (2):**
- ✅ **CartItem.vue**: Display product with quantity controls and remove option
- ✅ **CartSummary.vue**: Show subtotal, VAT, total with "Zur Kasse" button
**Pages:**
- ✅ **pages/warenkorb.vue**: Full cart display page with empty state handling
**Key Features Implemented:**
- ✅ Session-based cart for guests (session_id storage)
- ✅ Database-persistent cart for authenticated users (user_id storage)
- ✅ 30-day cart persistence with automatic cleanup
- ✅ Real-time total calculation (subtotal, 7% VAT, final total)
- ✅ Product availability validation
- ✅ Role-based visibility enforcement
- ✅ Responsive design (desktop + mobile)
**Design Implementation:**
- ✅ **Desktop**: Right-side sidebar (400px) with sticky header/footer
- ✅ **Mobile**: Floating Action Button (FAB) with Bottom Sheet integration
- ✅ **Conditional FAB**: Only renders on product pages when cart not empty
- ✅ Badge display: Shows cart item count in real-time
**Quality Assurance:**
- ✅ Full CRUD operation testing
- ✅ Cart persistence validation across page reloads
- ✅ Stock validation and error handling
- ✅ Performance optimization (efficient queries, no N+1 issues)
- ✅ Documentation of cart logic and data flow
---
@@ -91,20 +117,21 @@ Actual implementation uses **Password Grant Flow** (not Authorization Code Flow
**Next Steps:**
1. **⚡ PRIORITY: Begin Phase 4 - Cart (Shopping Cart):**
- Read `tasks/04-cart.md`
- Create cart API endpoints (/api/cart/index, /api/cart/items)
- Build useCart composable for state management
- Create CartItem and CartSummary components
- Implement cart persistence (session/database)
- Test cart operations (add, update, remove items)
2. **⚡ PRIORITY: Then Phase 5 - Checkout (Forms & Flow):**
1. **⚡ PRIORITY: Begin Phase 5 - Checkout (Forms & Flow):**
- Read `tasks/05-checkout.md`
- Create checkout schema (Zod) and CheckoutForm component
- Create checkout schema (Zod) with billing address validation
- Build CheckoutForm and AddressForm components
- Implement address pre-fill from user profile
- Add form validation (VeeValidate)
- Test checkout flow end-to-end
- Add form validation with VeeValidate
- Test complete checkout flow
2. **⚡ PRIORITY: Then Phase 6 - Products (Display & List):**
- Read `tasks/06-products.md`
- Create product API endpoints (/api/products)
- Build ProductCard and ProductList components
- Implement product detail pages
- Add product images handling
- Test product display and filtering
---
@@ -118,7 +145,7 @@ Actual implementation uses **Password Grant Flow** (not Authorization Code Flow
### Week 2 (Target)
- [ ] Phase 4: Cart ⚡ **PRIORITY**
- [x] Phase 4: Cart ⚡ **COMPLETED 2025-11-03**
- [ ] Phase 5: Checkout ⚡ **PRIORITY**
- [ ] Phase 6: Products
@@ -269,22 +296,24 @@ Tasks:
### Phase 4: Cart (Shopping Cart) ⚡ PRIORITY
**Status:** ⏳ Todo | **Progress:** 0/12 (0%)
**Status:** ✅ Done | **Progress:** 12/12 (100%)
Tasks:
- [ ] Create /api/cart/index.get.ts endpoint
- [ ] Create /api/cart/items.post.ts endpoint
- [ ] Create /api/cart/items/[id].patch.ts endpoint
- [ ] Create /api/cart/items/[id].delete.ts endpoint
- [ ] Create useCart composable
- [ ] Create CartItem component
- [ ] Create CartSummary component
- [ ] Create cart page
- [ ] Test cart operations
- [ ] Add cart persistence
- [ ] Optimize cart queries
- [ ] Document cart logic
- [x] Create /api/cart/index.get.ts endpoint
- [x] Create /api/cart/items.post.ts endpoint
- [x] Create /api/cart/items/[id].patch.ts endpoint
- [x] Create /api/cart/items/[id].delete.ts endpoint
- [x] Create useCart composable
- [x] Create CartItem component
- [x] Create CartSummary component
- [x] Create cart page
- [x] Test cart operations
- [x] Add cart persistence
- [x] Optimize cart queries
- [x] Document cart logic
**Completed:** 2025-11-03
[Details: tasks/04-cart.md](./04-cart.md)
@@ -454,43 +483,43 @@ Tasks:
## 📈 Progress Over Time
| Date | Overall Progress | Phase | Notes |
| ---------- | ---------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------- |
| 2025-01-29 | 0% | Planning | Task system created |
| 2025-10-29 | 6.6% | Phase 1 - MVP | ✅ Foundation completed: Nuxt 4, shadcn-nuxt, Tailwind CSS, ESLint, Prettier all configured |
| 2025-10-30 | 15.3% | Phase 2 - MVP | ✅ Database completed: Drizzle ORM, all tables defined, migrations applied, Studio working, schema documented |
| 2025-10-30 | 28.5% | Phase 3 - MVP | ✅ Authentication completed: Password Grant Flow, JWT validation, auth endpoints, UI components, middleware |
| 2025-11-01 | 28.5% | Phase 3 - Validation | ✅ Authentication validated: Login tested with Playwright, DB user creation verified, docs updated |
| 2025-11-03 | 28.5% | DB Refinement | ✅ Roles table refactored: `code` as PK, simplified junction tables, maintained Many-to-Many functionality |
| Date | Overall Progress | Phase | Notes |
| ---------- | ---------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 2025-01-29 | 0% | Planning | Task system created |
| 2025-10-29 | 6.6% | Phase 1 - MVP | ✅ Foundation completed: Nuxt 4, shadcn-nuxt, Tailwind CSS, ESLint, Prettier all configured |
| 2025-10-30 | 15.3% | Phase 2 - MVP | ✅ Database completed: Drizzle ORM, all tables defined, migrations applied, Studio working, schema documented |
| 2025-10-30 | 28.5% | Phase 3 - MVP | ✅ Authentication completed: Password Grant Flow, JWT validation, auth endpoints, UI components, middleware |
| 2025-11-01 | 28.5% | Phase 3 - Validation | ✅ Authentication validated: Login tested with Playwright, DB user creation verified, docs updated |
| 2025-11-03 | 28.5% | DB Refinement | ✅ Roles table refactored: `code` as PK, simplified junction tables, maintained Many-to-Many functionality |
| 2025-11-03 | 37.2% | Phase 4 - Cart | ✅ Cart completed: 4 API endpoints, useCart composable, CartItem & CartSummary components, responsive UI (desktop sidebar + mobile FAB), 30-day persistence, full CRUD operations tested |
---
## 🎉 Next Steps
1. **⚡ PRIORITY: Start Phase 4 - Cart (Shopping Cart)**
- Read `tasks/04-cart.md` for detailed tasks
- Create /api/cart/index.get.ts endpoint (get user's cart)
- Create /api/cart/items.post.ts endpoint (add item to cart)
- Create /api/cart/items/[id].patch.ts endpoint (update quantity)
- Create /api/cart/items/[id].delete.ts endpoint (remove item)
- Build useCart composable with cart state management
- Create CartItem component (display item with quantity controls)
- Create CartSummary component (total, subtotal, VAT)
- Build cart page with responsive design
- Implement cart persistence (session for guests, DB for authenticated users)
- Test all cart operations
- Optimize cart queries and add proper error handling
2. **⚡ PRIORITY: Then Phase 5 - Checkout (Forms & Flow)**
1. **⚡ PRIORITY: Start Phase 5 - Checkout (Forms & Flow)**
- Read `tasks/05-checkout.md` for detailed tasks
- Create checkout schema (Zod) with billing address validation
- Build CheckoutForm and AddressForm components
- Implement address pre-fill from user profile
- Add form validation with VeeValidate
- Test complete checkout flow
- Create checkout page with multi-step form
- Create /api/checkout/validate endpoint
- Test complete checkout flow end-to-end
**Rationale for Priority Change:**
The shopping cart and checkout are critical features for the e-commerce flow. Implementing them early and sequentially allows us to test the complete purchase workflow (add to cart → checkout → payment) more effectively. Products can be seeded manually for testing in the MVP phase.
2. **⚡ PRIORITY: Then Phase 6 - Products (Display & List)**
- Read `tasks/06-products.md` for detailed tasks
- Create /api/products/index.get.ts endpoint (list all products with role filtering)
- Create /api/products/[id].get.ts endpoint (product details)
- Build ProductCard component for product listings
- Build ProductList component for product grid
- Create ProductDetail page for individual product pages
- Implement product image handling
- Test product display with role-based visibility
- Add product filtering and sorting
**Rationale:**
The cart functionality is now complete. Next, we complete the checkout flow to finalize the purchase workflow, then implement product display to ensure users can see and select products. This sequence (cart → checkout → products) allows for incremental testing of the complete e-commerce flow.
---

34
tasks/04-cart.md
View File

@@ -1,10 +1,10 @@
# Phase 4: Cart (Shopping Cart) ⚡ PRIORITY
**Status:** ⏳ Todo
**Progress:** 0/12 tasks (0%)
**Started:** -
**Completed:** -
**Assigned to:** -
**Status:** ✅ Done
**Progress:** 12/12 tasks (100%)
**Started:** 2025-11-03
**Completed:** 2025-11-03
**Assigned to:** Bastian
---
@@ -28,33 +28,33 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### API Endpoints
- [ ] Create /api/cart/index.get.ts endpoint
- [x] Create /api/cart/index.get.ts endpoint
- Get current user's cart (or session cart for guests)
- Include cart items with product details (join)
- Calculate total price
- Return: { cart, items: [{product, quantity, subtotal}], total }
- [ ] Create /api/cart/items.post.ts endpoint
- [x] Create /api/cart/items.post.ts endpoint
- Add item to cart (body: {productId, quantity})
- Validate product exists and has stock
- Create cart if doesn't exist
- Upsert cart_item (update quantity if already exists)
- Return: Updated cart
- [ ] Create /api/cart/items/[id].patch.ts endpoint
- [x] Create /api/cart/items/[id].patch.ts endpoint
- Update cart item quantity (body: {quantity})
- Validate quantity > 0
- Validate stock availability
- Return: Updated cart item
- [ ] Create /api/cart/items/[id].delete.ts endpoint
- [x] Create /api/cart/items/[id].delete.ts endpoint
- Remove item from cart
- Delete cart_item record
- Return: 204 No Content
### Composables
- [ ] Create useCart composable
- [x] Create useCart composable
- File: `composables/useCart.ts`
- State: cart (ref), items (computed), total (computed), itemCount (computed)
- Functions:
@@ -68,14 +68,14 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### UI Components
- [ ] Create CartItem component
- [x] Create CartItem component
- File: `components/Cart/CartItem.vue`
- Props: item (object with product, quantity, subtotal)
- Display: Product image, name, price, quantity input, subtotal
- Actions: Update quantity, Remove button
- Emits: @update, @remove
- [ ] Create CartSummary component
- [x] Create CartSummary component
- File: `components/Cart/CartSummary.vue`
- Props: items (array), total (number)
- Display: Items count, subtotal, VAT, total
@@ -84,7 +84,7 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### Pages
- [ ] Create cart page
- [x] Create cart page
- File: `pages/warenkorb.vue` (German route)
- Uses: useCart composable
- Shows: List of CartItem components + CartSummary
@@ -93,7 +93,7 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
### Testing
- [ ] Test cart operations
- [x] Test cart operations
- Add product to cart from product page
- Verify cart count updates (header badge)
- Visit /warenkorb page
@@ -101,18 +101,18 @@ Implement shopping cart functionality: API endpoints for cart operations, cart c
- Remove item via button
- Verify total updates correctly
- [ ] Add cart persistence
- [x] Add cart persistence
- For logged-in users: cart stored in DB (user_id)
- For guests: cart stored in DB (session_id)
- Test cart persists across page reloads
- Test cart merges when guest logs in (optional, can defer)
- [ ] Optimize cart queries
- [x] Optimize cart queries
- Ensure product details are fetched efficiently (join, not N+1)
- Test with 10+ items in cart
- Add indexes if needed
- [ ] Document cart logic
- [x] Document cart logic
- Document cart/session relationship
- Document cart item uniqueness (cart_id + product_id)
- Document cart cleanup strategy (old carts)