feat(24-shipment-presets-ui): kolorowe przyciski presetów, popup tworzenia, autofill formularza

Phase 24 complete: - SCSS moduł _shipment-presets.scss (przyciski, popup, color picker) - Sekcja presetów nad formularzem przesyłki z przyciskiem "Dodaj" - Popup tworzenia presetu z nazwą i wyborem koloru (8 opcji) - JS autofill: carrier, usługa dostawy, wymiary, waga, label format - Obsługa 3 paneli: Allegro searchable, InPost select, Apaczka select Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 23:42:56 +01:00
parent 03a237e7d2
commit e379557533
8 changed files with 740 additions and 2874 deletions
--- a/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
+++ b/.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
@@ -0,0 +1,254 @@
+---
+phase: 24-shipment-presets-ui
+plan: 01
+type: execute
+wave: 1
+depends_on: ["23-01"]
+files_modified:
+  - resources/views/shipments/prepare.php
+  - resources/scss/modules/_shipment-presets.scss
+  - resources/scss/main.scss
+autonomous: false
+---
+
+<objective>
+## Goal
+Dodać sekcję presetów przesyłek nad formularzem przygotowania przesyłki: kolorowe przyciski, popup tworzenia presetu (nazwa + kolor), JS autofill formularza po kliknięciu.
+
+## Purpose
+Użytkownik chce jednym kliknięciem wypełnić formularz przesyłki zapisanymi parametrami — bez ręcznego wybierania przewoźnika, usługi, wymiarów za każdym razem.
+
+## Output
+- Sekcja presetów z kolorowymi przyciskami nad formularzem
+- Popup do tworzenia presetu (nazwa + kolor) z bieżących wartości formularza
+- JS: autofill formularza po kliknięciu przycisku presetu
+- SCSS style dla presetów
+</objective>
+
+<context>
+## Project Context
+@.paul/PROJECT.md
+@.paul/ROADMAP.md
+@.paul/STATE.md
+
+## Prior Work
+@.paul/phases/23-shipment-presets-backend/23-01-SUMMARY.md
+
+## Source Files
+@resources/views/shipments/prepare.php
+@src/Modules/Shipments/ShipmentPresetController.php
+@routes/web.php
+</context>
+
+<skills>
+No specialized flows required for this plan (sonar-scanner required post-APPLY).
+</skills>
+
+<acceptance_criteria>
+
+## AC-1: Przyciski presetów widoczne nad formularzem
+```gherkin
+Given użytkownik otwiera stronę przygotowania przesyłki
+When w bazie istnieją presety
+Then nad formularzem wyświetlają się kolorowe przyciski z nazwami presetów
+And wyświetla się przycisk "Dodaj przycisk dostawy"
+```
+
+## AC-2: Kliknięcie presetu wypełnia formularz
+```gherkin
+Given preset ma zapisane: carrier=inpost, package_type=PACKAGE, weight=2kg, wymiary 30x25x10
+When użytkownik klika przycisk tego presetu
+Then formularz automatycznie wypełnia się tymi wartościami
+And odpowiedni panel przewoźnika staje się widoczny
+And usługa dostawy zostaje wybrana
+```
+
+## AC-3: Przycisk "Dodaj przycisk dostawy" tworzy preset z bieżących wartości
+```gherkin
+Given użytkownik wypełnił formularz (wybrał przewoźnika, usługę, wymiary itp.)
+When klika "Dodaj przycisk dostawy"
+Then pojawia się popup z polem nazwy i wyborem koloru
+When wpisuje nazwę i klika Zapisz
+Then preset zostaje zapisany przez API i przycisk pojawia się w sekcji
+```
+
+</acceptance_criteria>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: SCSS style dla presetów</name>
+  <files>resources/scss/modules/_shipment-presets.scss, resources/scss/main.scss</files>
+  <action>
+    1. Utworzyć `resources/scss/modules/_shipment-presets.scss`:
+       - `.shipment-presets` — kontener sekcji (flex, wrap, gap: 8px, margin-bottom: 16px)
+       - `.shipment-presets__btn` — przycisk presetu:
+         - Inline-flex, border-radius: 6px, padding: 6px 14px
+         - Biały tekst, tło z custom property `--preset-color`
+         - Hover: opacity 0.85, cursor pointer
+         - Font-size: 13px, font-weight: 500
+       - `.shipment-presets__add` — przycisk dodawania:
+         - Border: 1px dashed #ccc, background transparent
+         - Color: #666, hover: border-color #999
+       - `.preset-modal` — overlay popup:
+         - Position fixed, inset 0, background rgba(0,0,0,0.4), z-index 1000
+         - Display flex, align-items center, justify-content center
+       - `.preset-modal__content` — zawartość popup:
+         - Background white, border-radius 8px, padding 24px, min-width 360px, max-width 420px
+       - `.preset-modal__colors` — grid kolorów:
+         - Display flex, gap 8px, flex-wrap wrap
+       - `.preset-modal__color-swatch` — próbka koloru:
+         - Width 28px, height 28px, border-radius 50%, cursor pointer
+         - Border: 2px solid transparent
+         - `&.is-selected` — border-color: #333
+
+    2. Dodać `@import 'modules/shipment-presets';` w `resources/scss/main.scss`
+  </action>
+  <verify>Sprawdzić że plik SCSS istnieje i import dodany do main.scss</verify>
+  <done>AC-1 partially: style gotowe</done>
+</task>
+
+<task type="auto">
+  <name>Task 2: HTML sekcja presetów + popup + JavaScript</name>
+  <files>resources/views/shipments/prepare.php</files>
+  <action>
+    1. **Sekcja presetów** — wstawić PRZED `<form>` (po zamknięciu sekcji flash messages, linia ~63):
+
+       ```html
+       <section class="shipment-presets" id="shipment-presets">
+         <!-- Buttons rendered by JS -->
+         <button type="button" class="shipment-presets__add" id="preset-add-btn">+ Dodaj przycisk dostawy</button>
+       </section>
+       ```
+
+    2. **Popup modal** — wstawić na końcu pliku (przed zamykającym `</script>` lub po ostatnim `</section>`):
+
+       ```html
+       <div class="preset-modal" id="preset-modal" style="display:none">
+         <div class="preset-modal__content">
+           <h3>Nowy przycisk dostawy</h3>
+           <label class="form-field mt-12">
+             <span class="field-label">Nazwa</span>
+             <input class="form-control" type="text" id="preset-name-input" maxlength="100" placeholder="np. InPost Paczkomat Standard">
+           </label>
+           <div class="form-field mt-12">
+             <span class="field-label">Kolor</span>
+             <div class="preset-modal__colors" id="preset-color-picker">
+               <!-- 8 kolorów do wyboru -->
+             </div>
+           </div>
+           <div class="form-actions mt-16">
+             <button type="button" class="btn btn--primary" id="preset-save-btn">Zapisz</button>
+             <button type="button" class="btn btn--secondary" id="preset-cancel-btn">Anuluj</button>
+           </div>
+         </div>
+       </div>
+       ```
+
+    3. **JavaScript** — dodać w istniejącym bloku `<script>` na końcu prepare.php:
+
+       Logika JS (dodać jako IIFE):
+
+       a) **Konfiguracja kolorów:**
+          ```javascript
+          const PRESET_COLORS = [
+            '#3b82f6', '#ef4444', '#10b981', '#f59e0b',
+            '#8b5cf6', '#ec4899', '#06b6d4', '#6b7280'
+          ];
+          ```
+
+       b) **Ładowanie presetów:** fetch GET /api/shipment-presets → renderowanie przycisków
+          - Dla każdego presetu: `<button class="shipment-presets__btn" style="--preset-color: {color}; background: {color}" data-preset-id="{id}">{name}</button>`
+          - Wstawić PRZED przyciskiem "Dodaj"
+
+       c) **Kliknięcie presetu → autofill:**
+          - Ustawić select `#shipment-carrier-select` na preset.carrier i wystrzelić event 'change'
+          - Po 100ms (żeby panel się pokazał):
+            - Ustawić ukryte pola: delivery_method_id, credentials_id, carrier_id, provider_code
+            - Ustawić package_type, length_cm, width_cm, height_cm, weight_kg
+            - Ustawić sender_point_id, label_format
+            - Dla odpowiedniego panelu przewoźnika:
+              - Allegro: znaleźć opcję w searchable dropdown po data-value === delivery_method_id, kliknąć ją
+              - InPost: ustawić select[name="inpost_service"] na delivery_method_id
+              - Apaczka: ustawić select[name="apaczka_service"] na delivery_method_id
+
+       d) **Przycisk "Dodaj" → popup:**
+          - Pokazać modal
+          - Wygenerować swatche kolorów (PRESET_COLORS)
+          - Zaznaczenie koloru → is-selected
+          - Input nazwy focus
+
+       e) **Zapisanie presetu:**
+          - Zebrać bieżące wartości formularza:
+            carrier (z #shipment-carrier-select), provider_code, delivery_method_id, credentials_id, carrier_id,
+            package_type, length_cm, width_cm, height_cm, weight_kg, sender_point_id, label_format
+          - POST /api/shipment-presets z name, color i zebranymi danymi (JSON, Content-Type: application/json)
+          - Po sukcesie: zamknąć modal, przeładować listę presetów
+
+       f) **Anuluj:** zamknąć modal, wyczyścić input
+
+    Ważne:
+    - Nie modyfikować istniejącego JS (carrier selection, status polling itp.)
+    - fetch() z credentials: 'same-origin' (sesja PHP)
+    - Autofill musi obsłużyć 3 różne panele przewoźników (allegro searchable dropdown, inpost select, apaczka select)
+  </action>
+  <verify>php -l resources/views/shipments/prepare.php — brak błędów składni PHP</verify>
+  <done>AC-1, AC-2, AC-3 satisfied</done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>Sekcja presetów przesyłek nad formularzem: kolorowe przyciski, popup tworzenia, autofill formularza</what-built>
+  <how-to-verify>
+    1. Uruchomić migrację: wykonaj SQL z database/migrations/20260322_000059_create_shipment_presets_table.sql na bazie
+    2. Zbudować SCSS: npm run build (lub odpowiedni skrypt)
+    3. Odwiedź: /orders/{dowolne-id}/shipment/prepare
+    4. Powinien być widoczny przycisk "+ Dodaj przycisk dostawy"
+    5. Wypełnij formularz: wybierz przewoźnika, usługę, wymiary
+    6. Kliknij "Dodaj przycisk dostawy" — popup z nazwą i kolorem
+    7. Wpisz nazwę, wybierz kolor, kliknij Zapisz
+    8. Przycisk powinien się pojawić w sekcji
+    9. Odśwież stronę — przycisk nadal widoczny
+    10. Kliknij przycisk — formularz powinien się wypełnić zapisanymi wartościami
+  </how-to-verify>
+  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
+</task>
+
+</tasks>
+
+<boundaries>
+
+## DO NOT CHANGE
+- src/Modules/Shipments/ShipmentController.php (nie modyfikować kontrolera)
+- src/Modules/Shipments/ShipmentPresetController.php (gotowy z fazy 23)
+- src/Modules/Shipments/ShipmentPresetRepository.php (gotowy z fazy 23)
+- routes/web.php (routing gotowy z fazy 23)
+- Istniejący JS w prepare.php (carrier selection, status polling, print)
+
+## SCOPE LIMITS
+- Tylko tworzenie presetów i autofill — edycja/usuwanie w fazie 25
+- Brak auto-submit formularza po kliknięciu presetu (na razie)
+- Brak drag & drop sortowania (faza 25)
+
+</boundaries>
+
+<verification>
+Before declaring plan complete:
+- [ ] Sekcja presetów widoczna nad formularzem
+- [ ] Przyciski ładują się z API
+- [ ] Popup tworzenia działa (nazwa + kolor)
+- [ ] Autofill wypełnia formularz po kliknięciu presetu
+- [ ] php -l na prepare.php — OK
+- [ ] SCSS zbudowany
+- [ ] Human verification checkpoint passed
+</verification>
+
+<success_criteria>
+- Kolorowe przyciski presetów widoczne nad formularzem
+- Kliknięcie presetu wypełnia formularz
+- Popup tworzenia presetu z nazwą i kolorem działa
+- Brak regresji w istniejącej funkcjonalności przesyłek
+</success_criteria>
+
+<output>
+After completion, create `.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md`
+</output>
--- a/.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
+++ b/.paul/phases/24-shipment-presets-ui/24-01-SUMMARY.md
@@ -0,0 +1,123 @@
+---
+phase: 24-shipment-presets-ui
+plan: 01
+subsystem: shipments
+tags: [shipment-presets, ui, autofill, javascript]
+
+requires:
+  - phase: 23-shipment-presets-backend
+    provides: JSON API endpoints for presets CRUD
+provides:
+  - Kolorowe przyciski presetów nad formularzem przesyłki
+  - Popup tworzenia presetu (nazwa + kolor)
+  - JS autofill formularza po kliknięciu presetu
+affects: [25-shipment-presets-management]
+
+tech-stack:
+  added: []
+  patterns:
+    - URLSearchParams dla fetch POST (Request::input() nie parsuje JSON)
+    - _syncTrigger() na enhanced selectach po programowym ustawieniu value
+
+key-files:
+  created:
+    - resources/scss/modules/_shipment-presets.scss
+  modified:
+    - resources/scss/app.scss
+    - public/assets/css/app.css
+    - resources/views/shipments/prepare.php
+
+key-decisions:
+  - "URLSearchParams zamiast JSON.stringify — Request::input() czyta z $_POST"
+  - "Autofill: _syncTrigger() + bezpośrednie ustawianie hidden fields i search input"
+
+patterns-established:
+  - "Preset autofill musi wywoływać _syncTrigger() na enhanced selectach"
+  - "Allegro searchable dropdown: ustawić is-selected + searchInput.value + hidden fields z data-attributes"
+
+duration: 15min
+started: 2026-03-22T00:00:00Z
+completed: 2026-03-22T00:15:00Z
+---
+
+# Phase 24 Plan 01: Shipment Presets UI Summary
+
+**Kolorowe przyciski presetów nad formularzem przesyłki z popup tworzenia i JS autofill — użytkownik jednym kliknięciem wypełnia formularz zapisanymi parametrami.**
+
+## Performance
+
+| Metric | Value |
+|--------|-------|
+| Duration | ~15 min |
+| Tasks | 3 completed (2 auto + 1 checkpoint) |
+| Files created | 1 |
+| Files modified | 3 |
+
+## Acceptance Criteria Results
+
+| Criterion | Status | Notes |
+|-----------|--------|-------|
+| AC-1: Przyciski widoczne nad formularzem | Pass | Sekcja z kolorowymi przyciskami + "Dodaj przycisk dostawy" |
+| AC-2: Kliknięcie presetu wypełnia formularz | Pass | Carrier, usługa, wymiary, waga, label format — potwierdzone przez użytkownika |
+| AC-3: Popup tworzy preset z bieżących wartości | Pass | Nazwa + kolor, zapis przez API, przycisk pojawia się natychmiast |
+
+## Accomplishments
+
+- SCSS moduł `_shipment-presets.scss` z stylami przycisków, popupu i color picker
+- Sekcja presetów wstawiona nad `<form>` w prepare.php
+- Popup z nazwą i 8 kolorami do wyboru
+- JS: fetch presetów z API, renderowanie przycisków, autofill 3 typów paneli (Allegro searchable, InPost select, Apaczka select)
+- SonarQube: 0 nowych issues
+
+## Files Created/Modified
+
+| File | Change | Purpose |
+|------|--------|---------|
+| `resources/scss/modules/_shipment-presets.scss` | Created | Style przycisków, popupu, color picker |
+| `resources/scss/app.scss` | Modified | Dodany @use shipment-presets |
+| `public/assets/css/app.css` | Modified | Przebudowany CSS |
+| `resources/views/shipments/prepare.php` | Modified | Sekcja presetów, popup, ~180 linii JS |
+
+## Decisions Made
+
+| Decision | Rationale | Impact |
+|----------|-----------|--------|
+| URLSearchParams zamiast JSON | Request::input() czyta z $_POST, nie parsuje JSON body | Spójne z resztą projektu |
+| _syncTrigger() po value change | enhanceSelect() ukrywa natywny select — trzeba sync custom UI | Wzorzec do reuse w fazie 25 |
+| Bezpośrednie ustawianie hidden fields dla Allegro | opt.click() nie działał niezawodnie w searchable dropdown | Bardziej deterministyczne |
+
+## Deviations from Plan
+
+### Summary
+
+| Type | Count | Impact |
+|------|-------|--------|
+| Auto-fixed | 2 | Zmiana content-type + autofill fix |
+
+**1. JSON → URLSearchParams**
+- Found during: Task 2 (checkpoint testing — 422 error)
+- Fix: Zmieniono Content-Type na form-urlencoded, użyto URLSearchParams
+
+**2. Autofill nie zmieniał carrier/usługi**
+- Found during: Checkpoint (user report)
+- Fix: Dodano _syncTrigger() na carrier select, bezpośrednie ustawianie hidden fields i search input text dla Allegro, _syncTrigger() dla InPost/Apaczka
+
+## Issues Encountered
+
+None remaining — oba issues naprawione podczas checkpointu.
+
+## Next Phase Readiness
+
+**Ready:**
+- Presety tworzą się i wypełniają formularz
+- Faza 25 może dodać edycję/usuwanie/sortowanie
+
+**Concerns:**
+- Brak
+
+**Blockers:**
+- None
+
+---
+*Phase: 24-shipment-presets-ui, Plan: 01*
+*Completed: 2026-03-22*