[FIX] JE dois pouvoir modifier les nomes des parties d'un morceau

complexe #6
This commit is contained in:
NADAL Jean-Baptiste
2026-02-26 18:25:54 +01:00
parent 96628ef4b8
commit 5275acc4ff
5 changed files with 138 additions and 2 deletions

View File

@@ -136,6 +136,15 @@ export const apiService = {
return response.data;
},
async updatePieces(id: string, pieces: { id: string; name: string }[]): Promise<{ success: boolean; error?: string }> {
const formattedPieces = pieces.map((p, i) => ({
number: i + 1,
name: p.name || `Partie ${i + 1}`
}));
const response = await api.put(`/admin/scores/${id}/pieces`, { pieces: formattedPieces });
return response.data;
},
async deleteScore(id: string): Promise<{ success: boolean; error?: string }> {
const response = await api.delete(`/admin/scores/${id}`);
return response.data;

View File

@@ -61,6 +61,29 @@
let uploadWatermark = $state(false);
let uploadWatermarkPosition = $state<'left' | 'right'>('left');
// Edit pieces
let editingPieces = $state(false);
let piecesEdit = $state<{id: string; name: string}[]>([]);
let savingPieces = $state(false);
async function savePieces() {
savingPieces = true;
try {
const result = await apiService.updatePieces(scoreId, piecesEdit);
if (result.success) {
selectedScorePieces = [...piecesEdit];
editingPieces = false;
} else {
alert('Erreur: ' + result.error);
}
} catch (err) {
console.error(err);
alert('Erreur lors de la sauvegarde');
} finally {
savingPieces = false;
}
}
// Auto-set default key when instrument changes
$effect(() => {
if (uploadInstrument) {
@@ -375,6 +398,53 @@
</div>
</div>
</div>
<!-- Parties -->
<div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden mb-6">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
<h2 class="text-lg font-semibold text-ohmj-primary">Parties ({selectedScorePieceCount})</h2>
{#if !editingPieces}
<button onclick={() => { piecesEdit = [...selectedScorePieces]; editingPieces = true; }} class="text-ohmj-primary hover:text-ohmj-secondary text-sm font-medium">
Modifier
</button>
{/if}
</div>
<div class="p-4">
{#if editingPieces}
<div class="space-y-3">
{#each piecesEdit as piece, i}
<div class="flex items-center gap-2">
<span class="text-sm text-gray-500 w-8">#{i + 1}</span>
<input
type="text"
bind:value={piece.name}
class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
placeholder="Nom de la partie"
/>
<button onclick={() => piecesEdit = piecesEdit.filter((_, idx) => idx !== i)} class="text-red-500 hover:text-red-700 p-2" title="Supprimer">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</div>
{/each}
<button onclick={() => piecesEdit = [...piecesEdit, {id: String(piecesEdit.length + 1), name: ''}]} class="text-ohmj-primary hover:text-ohmj-secondary text-sm font-medium">
+ Ajouter une partie
</button>
<div class="flex gap-2 pt-3 border-t">
<button onclick={() => { piecesEdit = [...selectedScorePieces]; editingPieces = false; }} class="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm">Annuler</button>
<button onclick={savePieces} disabled={savingPieces} class="px-4 py-2 bg-ohmj-primary text-white rounded hover:bg-ohmj-secondary text-sm disabled:opacity-50">
{savingPieces ? 'Enregistrement...' : 'Enregistrer'}
</button>
</div>
</div>
{:else}
<div class="flex flex-wrap gap-2">
{#each selectedScorePieces as piece}
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm">{piece.name || `Partie ${piece.id}`}</span>
{/each}
</div>
{/if}
</div>
</div>
</div>
{#if error}