Jacek Pyziak
f2f1c44324
Phase 44 complete: - Clickable status badge opens dropdown with grouped statuses - AJAX POST changes status without page reload (optimistic update) - Fixed-position dropdown escapes table overflow:hidden - updateStatus() returns JSON for AJAX, redirect for standard POST Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
124 lines
4.0 KiB
Markdown
124 lines
4.0 KiB
Markdown
---
|
|
phase: 44-inline-status-change
|
|
plan: 01
|
|
subsystem: ui
|
|
tags: [ajax, dropdown, status, orders-list, vanilla-js]
|
|
|
|
requires:
|
|
- phase: none
|
|
provides: existing updateStatus() endpoint and status config
|
|
provides:
|
|
- Inline status change dropdown on orders list
|
|
- AJAX-enabled updateStatus() endpoint
|
|
affects: []
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [fixed-position dropdown to escape overflow:hidden containers]
|
|
|
|
key-files:
|
|
created:
|
|
- public/assets/js/modules/inline-status-change.js
|
|
modified:
|
|
- src/Modules/Orders/OrdersController.php
|
|
- resources/views/orders/list.php
|
|
- resources/scss/app.scss
|
|
- public/assets/css/app.css
|
|
|
|
key-decisions:
|
|
- "Fixed positioning for dropdown to escape table-wrap overflow:hidden"
|
|
- "AJAX with fallback — non-AJAX requests keep redirect behavior"
|
|
|
|
patterns-established:
|
|
- "AJAX endpoint pattern: detect X-Requested-With header, return JSON or redirect"
|
|
|
|
duration: ~15min
|
|
started: 2026-03-27
|
|
completed: 2026-03-27
|
|
---
|
|
|
|
# Phase 44 Plan 01: Inline Status Change Summary
|
|
|
|
**Klikalny dropdown zmiany statusu zamowienia bezposrednio z listy zamowien — AJAX bez przeladowania strony.**
|
|
|
|
## Performance
|
|
|
|
| Metric | Value |
|
|
|--------|-------|
|
|
| Duration | ~15min |
|
|
| Started | 2026-03-27 |
|
|
| Completed | 2026-03-27 |
|
|
| Tasks | 2 completed |
|
|
| Files modified | 5 |
|
|
|
|
## Acceptance Criteria Results
|
|
|
|
| Criterion | Status | Notes |
|
|
|-----------|--------|-------|
|
|
| AC-1: Dropdown statusow po kliknieciu badge | Pass | Dropdown z pogrupowanymi statusami, aktualny wyrozniony |
|
|
| AC-2: Zmiana statusu przez AJAX | Pass | POST z X-Requested-With, badge aktualizowany in-place |
|
|
| AC-3: Obsluga bledow AJAX | Pass | OrderProAlerts.alert przy bledach, badge wraca do poprzedniego stanu |
|
|
|
|
## Accomplishments
|
|
|
|
- updateStatus() obsluguje AJAX (JSON response) i non-AJAX (redirect) w jednej metodzie
|
|
- Dropdown renderowany z position:fixed na document.body — nie ucinany przez overflow:hidden na table-wrap
|
|
- Optimistic update badge z rollback przy bledzie serwera
|
|
|
|
## Files Created/Modified
|
|
|
|
| File | Change | Purpose |
|
|
|------|--------|---------|
|
|
| `src/Modules/Orders/OrdersController.php` | Modified | AJAX w updateStatus(), allStatuses+statusColorMap do widoku, data-* na badge |
|
|
| `resources/views/orders/list.php` | Modified | JSON config block + script tag dla inline-status-change.js |
|
|
| `resources/scss/app.scss` | Modified | Style .orders-status-dropdown (fixed, grupy, hover, color dots) |
|
|
| `public/assets/css/app.css` | Rebuilt | Skompilowane style |
|
|
| `public/assets/js/modules/inline-status-change.js` | Created | Modul JS: dropdown, AJAX fetch, optimistic update, error handling |
|
|
|
|
## Decisions Made
|
|
|
|
| Decision | Rationale | Impact |
|
|
|----------|-----------|--------|
|
|
| Fixed positioning zamiast absolute | table-wrap ma overflow:hidden — absolute dropdown ucinany | Dropdown widoczny niezaleznie od pozycji w tabeli |
|
|
| Dropdown na document.body | Jedyny sposob na unikniecie clip przez rodzicow | Wymaga getBoundingClientRect do pozycjonowania |
|
|
| Optimistic update z rollback | Szybsza percepcja — badge zmienia sie natychmiast | Przy bledzie badge wraca do poprzedniego stanu |
|
|
|
|
## Deviations from Plan
|
|
|
|
### Summary
|
|
|
|
| Type | Count | Impact |
|
|
|------|-------|--------|
|
|
| Auto-fixed | 1 | Niezbedna poprawka UX |
|
|
|
|
**Total impact:** Jedna poprawka pozycjonowania — zero scope creep.
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [UI] Dropdown ucinany przez overflow:hidden**
|
|
- **Found during:** Task 2 (UAT przez usera)
|
|
- **Issue:** `.table-wrap` ma `overflow: hidden` — dropdown renderowany wewnatrz byl ucinany
|
|
- **Fix:** Zmiana z `position: absolute` (wewnatrz wrap) na `position: fixed` (na document.body) z obliczaniem pozycji przez getBoundingClientRect
|
|
- **Files:** app.scss, inline-status-change.js
|
|
- **Verification:** User potwierdził poprawke
|
|
|
|
## Issues Encountered
|
|
|
|
None
|
|
|
|
## Next Phase Readiness
|
|
|
|
**Ready:**
|
|
- Inline status change dziala na liscie zamowien
|
|
- Endpoint updateStatus() gotowy do reuse w innych widokach
|
|
|
|
**Concerns:**
|
|
- None
|
|
|
|
**Blockers:**
|
|
- None
|
|
|
|
---
|
|
*Phase: 44-inline-status-change, Plan: 01*
|
|
*Completed: 2026-03-27*
|