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>
This commit is contained in:
254
.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
Normal file
254
.paul/phases/24-shipment-presets-ui/24-01-PLAN.md
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user