diff --git a/TESTING_CHECKLIST.md b/TESTING_CHECKLIST.md deleted file mode 100644 index 27d7db1..0000000 --- a/TESTING_CHECKLIST.md +++ /dev/null @@ -1,276 +0,0 @@ -# Map Editor Plugin - Testing Checklist - -## Pre-Testing Setup - -1. [ ] Build the frontend: `npm run build` -2. [ ] Ensure Kirby is running (PHP server) -3. [ ] Log into Kirby Panel -4. [ ] Navigate to the map page (e.g., `/panel/pages/map+carte`) - -## Phase 1: Multi-Mode Testing (Map Page) - -### Basic Marker Operations - -1. [ ] **View existing markers** - - Open map page in Panel - - Verify markers are loaded and displayed on map - - Verify markers appear in sidebar list - -2. [ ] **Create marker via button** - - Click "Add Marker" button in sidebar - - Verify marker appears at map center - - Verify marker appears in sidebar - - Check browser console for errors - -3. [ ] **Create marker via map click** - - Click anywhere on the map - - Verify marker appears at clicked location - - Verify marker appears in sidebar - -4. [ ] **Select marker** - - Click marker in sidebar - - Verify map centers on marker - - Verify marker is highlighted - -5. [ ] **Drag marker** - - Drag a marker to new position - - Verify position updates in real-time - - Reload page and verify position persisted - -6. [ ] **Edit marker** - - Click "Edit" button for a marker in sidebar - - Verify redirect to marker page in Panel - - Verify marker page loads correctly - -7. [ ] **Delete marker** - - Click "Delete" button for a marker - - Verify confirmation dialog appears - - Confirm deletion - - Verify marker removed from map and sidebar - - Reload page and verify deletion persisted - -### Map Data Persistence - -8. [ ] **Map view changes** - - Pan and zoom the map - - Reload the page - - Verify map returns to same view - -9. [ ] **Check YAML data** - - View the mapdata field source - - Verify it contains: background, center, zoom - - Verify it does NOT contain markers array - -### Edge Cases - -10. [ ] **Max markers limit** - - Create markers up to the limit (default 50) - - Verify "Add Marker" button becomes disabled - - Verify map clicks don't create new markers - -11. [ ] **Geocode search** - - Use the address search in sidebar - - Search for an address - - Verify map centers on result - -12. [ ] **Error handling** - - Open browser DevTools Network tab - - Try operations with network offline (simulate) - - Verify errors are logged to console - -## Phase 2: Single-Mode Testing (Marker Page) - -### Marker Page Structure - -1. [ ] **Create test marker** - - In map page sidebar, click "Add Marker" - - Click "Edit" to open the marker page - -2. [ ] **Content tab** - - Verify "Contenu" tab exists - - Edit title field - - Add blocks (heading, text, image, etc.) - - Save and verify content persists - -3. [ ] **Position tab** - - Switch to "Position" tab - - Verify latitude/longitude fields on left - - Verify map preview on right - -### Single-Mode Map Functionality - -4. [ ] **View marker position** - - Verify single marker appears on map - - Verify marker is at coordinates shown in fields - -5. [ ] **Drag marker in single mode** - - Drag the marker to a new position - - Check browser console for API call - - Reload page - - Verify new position persisted - -6. [ ] **Update coordinates via fields** - - Edit latitude field (e.g., 43.8) - - Edit longitude field (e.g., 4.3) - - Save the page - - Verify marker moved on map preview - -7. [ ] **Geocode search in single mode** - - Use address search (if available) - - Verify map centers on result - - Drag marker to searched location - -### Single-Mode Restrictions - -8. [ ] **No CRUD buttons** - - Verify no "Add Marker" button - - Verify no "Delete" button - - Verify no marker list sidebar - -9. [ ] **Map size** - - Verify map height is smaller (400px) than multi-mode - -## Phase 3: Integration Testing - -### Subpage Management - -1. [ ] **View markers as subpages** - - In map page, check sidebar "Marqueurs" section - - Verify all markers listed as subpages - - Verify ordering by num - -2. [ ] **Reorder markers** - - Drag markers in Panel pages section - - Verify order updates - - View map editor - - Verify sidebar reflects new order - -3. [ ] **Delete marker via Panel** - - Delete a marker subpage via Panel (not map editor) - - View map page - - Verify marker removed from map - -4. [ ] **Create marker manually** - - Create a new marker subpage via Panel - - Set template to "marker" - - Add title, latitude, longitude - - View map page - - Verify marker appears on map - -### Multi-Marker Performance - -5. [ ] **Create 10 markers** - - Create 10 markers via map - - Verify performance is acceptable - - Check load time - -6. [ ] **Create 50 markers** (optional stress test) - - Create markers up to limit - - Verify UI remains responsive - - Check browser memory usage - -## Phase 4: Security & API Testing - -### Authentication - -1. [ ] **Logged out access** - - Log out of Panel - - Try accessing API directly (e.g., via curl) - - Verify 401 Unauthorized response - -### CSRF Protection - -2. [ ] **Invalid CSRF token** - - Use browser DevTools to modify X-CSRF header - - Try creating/updating/deleting marker - - Verify 403 Forbidden response - -### Permissions - -3. [ ] **Create restricted user** (optional) - - Create user with limited permissions - - Log in as that user - - Try marker operations - - Verify permission checks work - -### API Responses - -4. [ ] **Check API responses** - - Open DevTools Network tab - - Perform marker operations - - Verify responses match expected format: - ```json - { - "status": "success", - "data": { ... } - } - ``` - -5. [ ] **Test error responses** - - Try invalid coordinates (e.g., lat: 200) - - Verify 400 Bad Request response - - Verify error message is descriptive - -## Phase 5: Build & Deployment - -### Build Verification - -1. [ ] **Clean build** - - Run `npm run build` - - Verify no errors or warnings (except font warnings) - - Check dist folder created - -2. [ ] **Production test** - - Test on production server (if available) - - Verify all functionality works - -### Browser Compatibility - -3. [ ] **Test in Chrome** -4. [ ] **Test in Firefox** -5. [ ] **Test in Safari** -6. [ ] **Test in Edge** (optional) - -## Common Issues & Solutions - -### Issue: Markers not loading -- **Check**: Browser console for API errors -- **Check**: Network tab for 401/403 errors -- **Solution**: Verify user is logged in, CSRF token is valid - -### Issue: Drag doesn't update position -- **Check**: Console for API errors -- **Check**: Network tab for PATCH request -- **Solution**: Verify page permissions, CSRF token - -### Issue: Redirect to Panel doesn't work -- **Check**: Console for errors -- **Check**: panelUrl in API response -- **Solution**: Verify page ID format is correct - -### Issue: Single mode shows multiple markers -- **Check**: MapEditor component mode prop -- **Check**: Blueprint field configuration -- **Solution**: Verify `mode: single` in blueprint - -## Test Results Summary - -Date: __________ -Tester: __________ - -| Phase | Tests Passed | Tests Failed | Notes | -|-------|-------------|--------------|-------| -| Phase 1: Multi-Mode | __ / 12 | __ | | -| Phase 2: Single-Mode | __ / 9 | __ | | -| Phase 3: Integration | __ / 6 | __ | | -| Phase 4: Security | __ / 5 | __ | | -| Phase 5: Build | __ / 6 | __ | | -| **Total** | __ / 38 | __ | | - -## Next Steps After Testing - -- [ ] Document any bugs found -- [ ] Create GitHub issues for bugs -- [ ] Update README with usage instructions -- [ ] Add user documentation -- [ ] Consider implementing suggested improvements diff --git a/public/site/templates/narrative.json.php b/public/site/templates/narrative.json.php index 08b067a..e4ab738 100644 --- a/public/site/templates/narrative.json.php +++ b/public/site/templates/narrative.json.php @@ -108,7 +108,7 @@ function parseBlocks($blocksField, $page) { case 'map': $mapPage = $block->map()->toPages()->first(); if ($mapPage) { - $blockData['content'] = parseCarte($mapPage); + $blockData['content'] = parseMap($mapPage); } else { $blockData['content'] = [ 'map' => $block->map()->value() @@ -141,7 +141,7 @@ function parseChapter($chapter) { } /** - * Parse un marqueur + * Parse a marker */ function parseMarker($marker) { return [ @@ -154,25 +154,25 @@ function parseMarker($marker) { } /** - * Parse une carte + * Parse a map */ -function parseCarte($carte) { +function parseMap($map) { $markers = []; - foreach ($carte->children()->listed() as $child) { + foreach ($map->children()->listed() as $child) { if ($child->intendedTemplate()->name() === 'marker') { $markers[] = parseMarker($child); } } - $staticImage = $carte->file('map-static.png'); + $staticImage = $map->file('map-static.png'); return [ - 'id' => $carte->id(), - 'uuid' => $carte->uuid()->toString(), + 'id' => $map->id(), + 'uuid' => $map->uuid()->toString(), 'template' => 'carte', - 'title' => $carte->title()->value(), - 'slug' => $carte->slug(), - 'tags' => $carte->tags()->isNotEmpty() ? $carte->tags()->split() : [], + 'title' => $map->title()->value(), + 'slug' => $map->slug(), + 'tags' => $map->tags()->isNotEmpty() ? $map->tags()->split() : [], 'image' => $staticImage ? $staticImage->url() : null, - 'intro' => resolveImagesInHtml($carte->text()->value(), $carte), + 'intro' => resolveImagesInHtml($map->text()->value(), $map), 'markers' => $markers ]; } @@ -187,7 +187,7 @@ function parseGeoformat($geoformat) { if ($template === 'chapter') { $children[] = parseChapter($child); } elseif ($template === 'map') { - $children[] = parseCarte($child); + $children[] = parseMap($child); } } @@ -228,7 +228,7 @@ foreach ($page->children()->listed() as $child) { if ($template === 'geoformat') { $data['children'][] = parseGeoformat($child); } elseif ($template === 'map') { - $data['children'][] = parseCarte($child); + $data['children'][] = parseMap($child); } } diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue index b7ef613..24c82d3 100644 --- a/src/components/PagedJsWrapper.vue +++ b/src/components/PagedJsWrapper.vue @@ -76,13 +76,12 @@ v-if="marker.icon" :src="marker.icon" class="marker-icon" - :style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }" alt="" /> {{ marker.title }} @@ -235,13 +234,10 @@ const getBlockComponent = (type) => { } .marker-icon { - flex-shrink: 0; - object-fit: contain; -} - -.marker-icon--default { width: 24px; height: 24px; + flex-shrink: 0; + object-fit: contain; } .marker-cover { diff --git a/src/components/blocks/MapBlock.vue b/src/components/blocks/MapBlock.vue index e674ac2..e8ce9b9 100644 --- a/src/components/blocks/MapBlock.vue +++ b/src/components/blocks/MapBlock.vue @@ -1,5 +1,9 @@