fix: marker title displayed immediately on creation

- Return title directly instead of reading from page object
- Prevents showing identifier/slug before reload
- New markers now display "Marqueur [index]" immediately in list
- Also return num directly for consistency

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-29 16:27:06 +01:00
parent 75d3b557fe
commit 68d3142126
4 changed files with 20644 additions and 645 deletions

View file

@ -155,15 +155,16 @@ return [
->filterBy('intendedTemplate', 'marker'); ->filterBy('intendedTemplate', 'marker');
$nextNum = $existingMarkers->count() + 1; $nextNum = $existingMarkers->count() + 1;
// Generate unique slug // Generate unique slug and title
$slug = 'marker-' . time(); $slug = 'marker-' . time();
$title = 'Marqueur ' . $nextNum;
// Create the new marker page // Create the new marker page
$newMarker = $mapPage->createChild([ $newMarker = $mapPage->createChild([
'slug' => $slug, 'slug' => $slug,
'template' => 'marker', 'template' => 'marker',
'content' => [ 'content' => [
'title' => 'Marqueur ' . $nextNum, 'title' => $title,
'latitude' => $lat, 'latitude' => $lat,
'longitude' => $lon 'longitude' => $lon
] ]
@ -178,13 +179,13 @@ return [
'marker' => [ 'marker' => [
'id' => $newMarker->id(), 'id' => $newMarker->id(),
'slug' => $newMarker->slug(), 'slug' => $newMarker->slug(),
'title' => $newMarker->title()->value(), 'title' => $title,
'position' => [ 'position' => [
'lat' => $lat, 'lat' => $lat,
'lon' => $lon 'lon' => $lon
], ],
'num' => $newMarker->num(), 'num' => $nextNum,
'panelUrl' => '/panel/pages/' . $newMarker->id() 'panelUrl' => (string) $newMarker->panel()->url()
] ]
] ]
]; ];

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
import { ref } from 'vue'; import { ref } from "vue";
/** /**
* Composable for managing markers via Kirby API * Composable for managing markers via Kirby API
@ -29,8 +29,8 @@ export function useMarkersApi(pageId) {
return window.csrf; return window.csrf;
} }
console.warn('CSRF token not found'); console.warn("CSRF token not found");
return ''; return "";
}; };
/** /**
@ -42,24 +42,23 @@ export function useMarkersApi(pageId) {
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, { const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: 'GET', method: "GET",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
} },
}); });
const result = await response.json(); const result = await response.json();
if (result.status === 'error') { if (result.status === "error") {
throw new Error(result.message || 'Failed to fetch markers'); throw new Error(result.message || "Failed to fetch markers");
} }
markers.value = result.data.markers || []; markers.value = result.data.markers || [];
return markers.value; return markers.value;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error('Error fetching markers:', err); console.error("Error fetching markers:", err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -75,28 +74,28 @@ export function useMarkersApi(pageId) {
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, { const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: 'POST', method: "POST",
headers: { headers: {
'Content-Type': 'application/json', "Content-Type": "application/json",
'X-CSRF': getCsrfToken() "X-CSRF": getCsrfToken(),
}, },
body: JSON.stringify({ position }) body: JSON.stringify({ position }),
}); });
const result = await response.json(); const result = await response.json();
if (result.status === 'error') { if (result.status === "error") {
throw new Error(result.message || 'Failed to create marker'); throw new Error(result.message || "Failed to create marker");
} }
const newMarker = result.data.marker; const newMarker = result.data.marker;
markers.value.push(newMarker); markers.value.push(newMarker);
console.log(newMarker);
return newMarker; return newMarker;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error('Error creating marker:', err); console.error("Error creating marker:", err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -111,32 +110,34 @@ export function useMarkersApi(pageId) {
error.value = null; error.value = null;
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, { const response = await fetch(
method: 'PATCH', `/api/map-editor/pages/${pageId}/markers/${markerId}`,
headers: { {
'Content-Type': 'application/json', method: "PATCH",
'X-CSRF': getCsrfToken() headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
body: JSON.stringify({ position }),
}, },
body: JSON.stringify({ position }) );
});
const result = await response.json(); const result = await response.json();
if (result.status === 'error') { if (result.status === "error") {
throw new Error(result.message || 'Failed to update marker position'); throw new Error(result.message || "Failed to update marker position");
} }
// Update local marker // Update local marker
const index = markers.value.findIndex(m => m.id === markerId); const index = markers.value.findIndex((m) => m.id === markerId);
if (index !== -1) { if (index !== -1) {
markers.value[index] = result.data.marker; markers.value[index] = result.data.marker;
} }
return result.data.marker; return result.data.marker;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error('Error updating marker position:', err); console.error("Error updating marker position:", err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -151,31 +152,33 @@ export function useMarkersApi(pageId) {
error.value = null; error.value = null;
try { try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, { const response = await fetch(
method: 'DELETE', `/api/map-editor/pages/${pageId}/markers/${markerId}`,
headers: { {
'Content-Type': 'application/json', method: "DELETE",
'X-CSRF': getCsrfToken() headers: {
} "Content-Type": "application/json",
}); "X-CSRF": getCsrfToken(),
},
},
);
const result = await response.json(); const result = await response.json();
if (result.status === 'error') { if (result.status === "error") {
throw new Error(result.message || 'Failed to delete marker'); throw new Error(result.message || "Failed to delete marker");
} }
// Remove from local markers array // Remove from local markers array
const index = markers.value.findIndex(m => m.id === markerId); const index = markers.value.findIndex((m) => m.id === markerId);
if (index !== -1) { if (index !== -1) {
markers.value.splice(index, 1); markers.value.splice(index, 1);
} }
return true; return true;
} catch (err) { } catch (err) {
error.value = err.message; error.value = err.message;
console.error('Error deleting marker:', err); console.error("Error deleting marker:", err);
throw err; throw err;
} finally { } finally {
loading.value = false; loading.value = false;
@ -189,6 +192,6 @@ export function useMarkersApi(pageId) {
fetchMarkers, fetchMarkers,
createMarker, createMarker,
updateMarkerPosition, updateMarkerPosition,
deleteMarker deleteMarker,
}; };
} }