---
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*