rename parseCarte → parseMap, fix marker icon size, remove testing checklist
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
41fbe71a1f
commit
0c682c78c0
4 changed files with 31 additions and 303 deletions
|
|
@ -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
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,13 +76,12 @@
|
|||
v-if="marker.icon"
|
||||
:src="marker.icon"
|
||||
class="marker-icon"
|
||||
:style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="/assets/svg/marker-pin.svg"
|
||||
class="marker-icon marker-icon--default"
|
||||
class="marker-icon"
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div v-if="content.template === 'carte'" class="block-map">
|
||||
<div
|
||||
v-if="content.template === 'carte'"
|
||||
class="block-map"
|
||||
:data-slug="content.slug"
|
||||
>
|
||||
<h4>{{ content.title }}</h4>
|
||||
<img v-if="content.image" :src="content.image" class="carte-image" alt="" />
|
||||
<div v-if="content.tags && content.tags.length" class="tags">
|
||||
|
|
@ -13,18 +17,22 @@
|
|||
v-if="marker.icon"
|
||||
:src="marker.icon"
|
||||
class="marker-icon"
|
||||
:style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="/assets/svg/marker-pin.svg"
|
||||
class="marker-icon marker-icon--default"
|
||||
class="marker-icon"
|
||||
alt=""
|
||||
/>
|
||||
{{ marker.title }}
|
||||
</h5>
|
||||
<img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
|
||||
<img
|
||||
v-if="marker.cover"
|
||||
:src="marker.cover"
|
||||
class="marker-cover"
|
||||
alt=""
|
||||
/>
|
||||
<template v-if="marker.blocks">
|
||||
<component
|
||||
v-for="block in visibleBlocks(marker.blocks)"
|
||||
|
|
@ -51,8 +59,8 @@ import QuoteBlock from './QuoteBlock.vue';
|
|||
defineProps({
|
||||
content: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const visibleBlocks = (blocks) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue