Jacek Pyziak
e379557533
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>
255 lines
10 KiB
Markdown
255 lines
10 KiB
Markdown
---
|
|
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>
|