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');
$nextNum = $existingMarkers->count() + 1;
// Generate unique slug
// Generate unique slug and title
$slug = 'marker-' . time();
$title = 'Marqueur ' . $nextNum;
// Create the new marker page
$newMarker = $mapPage->createChild([
'slug' => $slug,
'template' => 'marker',
'content' => [
'title' => 'Marqueur ' . $nextNum,
'title' => $title,
'latitude' => $lat,
'longitude' => $lon
]
@ -178,13 +179,13 @@ return [
'marker' => [
'id' => $newMarker->id(),
'slug' => $newMarker->slug(),
'title' => $newMarker->title()->value(),
'title' => $title,
'position' => [
'lat' => $lat,
'lon' => $lon
],
'num' => $newMarker->num(),
'panelUrl' => '/panel/pages/' . $newMarker->id()
'num' => $nextNum,
'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
@ -29,8 +29,8 @@ export function useMarkersApi(pageId) {
return window.csrf;
}
console.warn('CSRF token not found');
return '';
console.warn("CSRF token not found");
return "";
};
/**
@ -42,24 +42,23 @@ export function useMarkersApi(pageId) {
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: 'GET',
method: "GET",
headers: {
'Content-Type': 'application/json'
}
"Content-Type": "application/json",
},
});
const result = await response.json();
if (result.status === 'error') {
throw new Error(result.message || 'Failed to fetch markers');
if (result.status === "error") {
throw new Error(result.message || "Failed to fetch markers");
}
markers.value = result.data.markers || [];
return markers.value;
} catch (err) {
error.value = err.message;
console.error('Error fetching markers:', err);
console.error("Error fetching markers:", err);
throw err;
} finally {
loading.value = false;
@ -75,28 +74,28 @@ export function useMarkersApi(pageId) {
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers`, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
body: JSON.stringify({ position })
body: JSON.stringify({ position }),
});
const result = await response.json();
if (result.status === 'error') {
throw new Error(result.message || 'Failed to create marker');
if (result.status === "error") {
throw new Error(result.message || "Failed to create marker");
}
const newMarker = result.data.marker;
markers.value.push(newMarker);
console.log(newMarker);
return newMarker;
} catch (err) {
error.value = err.message;
console.error('Error creating marker:', err);
console.error("Error creating marker:", err);
throw err;
} finally {
loading.value = false;
@ -111,32 +110,34 @@ export function useMarkersApi(pageId) {
error.value = null;
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
const response = await fetch(
`/api/map-editor/pages/${pageId}/markers/${markerId}`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
body: JSON.stringify({ position }),
},
body: JSON.stringify({ position })
});
);
const result = await response.json();
if (result.status === 'error') {
throw new Error(result.message || 'Failed to update marker position');
if (result.status === "error") {
throw new Error(result.message || "Failed to update marker position");
}
// Update local marker
const index = markers.value.findIndex(m => m.id === markerId);
const index = markers.value.findIndex((m) => m.id === markerId);
if (index !== -1) {
markers.value[index] = result.data.marker;
}
return result.data.marker;
} catch (err) {
error.value = err.message;
console.error('Error updating marker position:', err);
console.error("Error updating marker position:", err);
throw err;
} finally {
loading.value = false;
@ -151,31 +152,33 @@ export function useMarkersApi(pageId) {
error.value = null;
try {
const response = await fetch(`/api/map-editor/pages/${pageId}/markers/${markerId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF': getCsrfToken()
}
});
const response = await fetch(
`/api/map-editor/pages/${pageId}/markers/${markerId}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-CSRF": getCsrfToken(),
},
},
);
const result = await response.json();
if (result.status === 'error') {
throw new Error(result.message || 'Failed to delete marker');
if (result.status === "error") {
throw new Error(result.message || "Failed to delete marker");
}
// 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) {
markers.value.splice(index, 1);
}
return true;
} catch (err) {
error.value = err.message;
console.error('Error deleting marker:', err);
console.error("Error deleting marker:", err);
throw err;
} finally {
loading.value = false;
@ -189,6 +192,6 @@ export function useMarkersApi(pageId) {
fetchMarkers,
createMarker,
updateMarkerPosition,
deleteMarker
deleteMarker,
};
}