Update api/templates/admin/edit_texte.html

api/templates/admin/edit_texte.html

@@ -4,44 +4,90 @@
 
 {% block styles %}
 <style>
+    /* Quill editor needs some height */
+    .ql-container { min-height: 150px; }
+
     .block-editor {
         position: relative;
         transition: all 0.3s ease;
     }
-    
+
     .block-ghost {
         opacity: 0.5;
         background: var(--primary-color);
     }
-    
+
     .block-handle {
         cursor: move;
         color: var(--muted-color);
+        padding-right: 10px; /* Add some space next to handle */
     }
-    
+
     .image-position-example {
         padding: 10px;
         border: 1px dashed var(--border-color);
         margin-top: 10px;
         border-radius: 4px;
     }
-    
+
     .block-image-container {
         margin-bottom: 15px;
     }
-    
+
     .image-preview {
         max-height: 150px;
         object-fit: contain;
+        border-radius: 4px;
+        border: 1px solid var(--border-color);
+        background-color: var(--background-color);
     }
-    
+
     .gallery-image {
         transition: transform 0.2s;
         cursor: pointer;
+        border: 1px solid var(--border-color);
+        padding: 5px;
+        border-radius: 4px;
     }
-    
+
     .gallery-image:hover {
         transform: scale(1.05);
+        border-color: var(--primary-color);
+    }
+
+    /* Style adjustments for Quill within the block */
+    .block-content-editor {
+        background-color: var(--input-bg); /* Match theme */
+        border-radius: 4px; /* Match form controls */
+        margin-bottom: 5px; /* Space between editor and hidden input if needed */
+    }
+
+    /* Style the block editor structure */
+    .block-editor {
+        background-color: var(--card-bg);
+        padding: 20px;
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        box-shadow: var(--shadow);
+    }
+    .block-editor-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 15px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid var(--border-color);
+    }
+    .block-editor-title {
+        margin: 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+    .delete-block-btn i {
+        pointer-events: none; /* Ensure clicking icon triggers button */
+    }
+    .ml-2 { /* Simple margin helper */
+        margin-left: 0.5rem !important;
     }
 </style>
 {% endblock %}
@@ -85,11 +131,11 @@
             </ul>
         </div>
     </div>
-    
+
     <div class="col-md-9">
         <div class="admin-container">
             <h2 class="admin-title">Éditer la méthodologie : {{ texte.titre }}</h2>
-            
+
             <div class="mb-4">
                 <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary mb-3">
                     <i class="fas fa-arrow-left"></i> Retour à la liste
@@ -98,7 +144,7 @@
                     <i class="fas fa-history"></i> Voir l'historique
                 </a>
             </div>
-            
+
             <!-- Basic Information Form -->
             <div class="card mb-4">
                 <div class="card-header">
@@ -106,13 +152,14 @@
                 </div>
                 <div class="card-body">
                     <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
                         <input type="hidden" name="action" value="update_basic">
-                        
+
                         <div class="form-group mb-3">
                             <label for="titre">Titre</label>
                             <input type="text" class="form-control" id="titre" name="titre" value="{{ texte.titre }}" required>
                         </div>
-                        
+
                         <div class="form-group mb-3">
                             <label for="sous_categorie_id">Sous-catégorie</label>
                             <select class="form-control" id="sous_categorie_id" name="sous_categorie_id" required>
@@ -123,14 +170,14 @@
                                 {% endfor %}
                             </select>
                         </div>
-                        
+
                         <button type="submit" class="btn btn-primary">
                             <i class="fas fa-save"></i> Mettre à jour les informations
                         </button>
                     </form>
                 </div>
             </div>
-            
+
             <!-- Content Blocks Editor -->
             <div class="card mb-4">
                 <div class="card-header d-flex justify-content-between align-items-center">
@@ -141,14 +188,15 @@
                 </div>
                 <div class="card-body">
                     <p class="text-muted mb-4">
-                        Organisez votre contenu en blocs distincts. Chaque bloc peut contenir un titre, du texte et une image.
-                        Vous pouvez réorganiser les blocs en les faisant glisser.
+                        Organisez votre contenu en blocs distincts. Chaque bloc peut contenir un titre, du texte riche et une image.
+                        Vous pouvez réorganiser les blocs en les faisant glisser (<i class="fas fa-grip-vertical"></i>).
                     </p>
-                    
+
                     <form id="blocks-form" method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
                         <input type="hidden" name="action" value="update_blocks">
                         <input type="hidden" id="blocks-data" name="blocks_data" value="">
-                        
+
                         <div id="blocks-container">
                             {% for block in blocks %}
                             <div class="block-editor mb-4" data-block-id="{{ block.id }}">
@@ -158,7 +206,7 @@
                                         <h3 class="block-editor-title">Bloc #{{ loop.index }}</h3>
                                     </div>
                                     <div class="block-editor-actions">
-                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn">
+                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn" title="Supprimer ce bloc">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </div>
@@ -168,11 +216,16 @@
                                     <input type="text" class="form-control block-title" id="block-{{ block.id }}-title" value="{{ block.title or '' }}">
                                 </div>
                                 <div class="form-group mb-3">
-                                    <label for="block-{{ block.id }}-content">Contenu du bloc</label>
-                                    <textarea class="form-control block-content" id="block-{{ block.id }}-content" rows="5">{{ block.content or '' }}</textarea>
+                                    <label for="quill-editor-{{ block.id }}">Contenu du bloc</label>
+                                    <!-- Quill editor container -->
+                                    <div id="quill-editor-{{ block.id }}" class="block-content-editor">
+                                        {{ block.content|safe if block.content else '' }}
+                                    </div>
+                                    <!-- Hidden input to store Quill's HTML content -->
+                                    <input type="hidden" class="block-content-hidden" id="block-{{ block.id }}-content" value="{{ block.content or '' }}">
                                 </div>
                                 <div class="form-group">
-                                    <label>Image</label>
+                                    <label>Image (optionnel)</label>
                                     <div class="d-flex align-items-center mb-2">
                                         <button type="button" class="btn btn-primary btn-sm select-image-btn" {% if block.image %}style="display:none;"{% endif %}>
                                             <i class="fas fa-image"></i> Sélectionner une image
@@ -182,16 +235,16 @@
                                         </button>
                                     </div>
                                     <input type="hidden" class="block-image-id" value="{{ block.image.id if block.image else '' }}">
-                                    
-                                    {% if block.image %}
+
                                     <div class="block-image-container">
-                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt }}" class="image-preview">
+                                        {% if block.image %}
+                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt or 'Prévisualisation' }}" class="image-preview">
+                                        {% else %}
+                                        <img src="" alt="Preview" class="image-preview" style="display:none;">
+                                        {% endif %}
                                     </div>
-                                    {% else %}
-                                    <img src="" alt="Preview" class="image-preview" style="display:none;">
-                                    {% endif %}
-                                    
-                                    <div class="form-group mt-3">
+
+                                    <div class="form-group mt-3 {% if not block.image %}d-none{% endif %} image-position-controls"> {# Hide position if no image #}
                                         <label for="block-{{ block.id }}-image-position">Position de l'image</label>
                                         <select class="form-control image-position-select" id="block-{{ block.id }}-image-position">
                                             <option value="left" {% if block.image_position == 'left' %}selected{% endif %}>Gauche</option>
@@ -203,39 +256,51 @@
                             </div>
                             {% endfor %}
                         </div>
-                        
+
                         <div class="mt-4 text-center">
                             <button type="button" id="save-blocks-button" class="btn btn-primary btn-lg">
-                                <i class="fas fa-save"></i> Enregistrer les modifications
+                                <i class="fas fa-save"></i> Enregistrer les blocs
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
-            
+
             <!-- Image Upload Section -->
             <div class="card mb-4">
                 <div class="card-header">
-                    <h4>Ajouter une nouvelle image</h4>
+                    <h4>Ajouter une nouvelle image (Galerie)</h4>
                 </div>
                 <div class="card-body">
-                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" enctype="multipart/form-data">
-                        <input type="hidden" name="action" value="upload_image">
-                        
+                    <form method="POST" action="{{ url_for('admin_bp.upload_image_action') }}" enctype="multipart/form-data" id="image-upload-form"> {# Action points to a dedicated route #}
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/> {# Add CSRF token if using Flask-WTF #}
+                        {# Removed 'action' hidden input, handled by route #}
+                        {# Removed texte_id hidden input, not needed for general upload #}
+
                         <div class="form-group mb-3">
                             <label for="image">Sélectionner une image</label>
-                            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
+                            <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
                         </div>
-                        
+
                         <div class="form-group mb-3">
                             <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
-                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
+                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image" required>
                         </div>
-                        
+
+                         <img id="upload-image-preview" src="#" alt="Image Preview" style="display: none; max-height: 100px; margin-bottom: 10px;"/>
+
+
                         <button type="submit" class="btn btn-success">
-                            <i class="fas fa-upload"></i> Télécharger l'image
+                            <i class="fas fa-upload"></i> Télécharger et ajouter à la galerie
                         </button>
                     </form>
+                    <div id="upload-status" class="mt-3"></div> {# For AJAX feedback #}
+
+                    <div class="mt-3">
+                        <a href="{{ url_for('admin_bp.images') }}" class="btn btn-info">
+                            <i class="fas fa-images"></i> Gérer la galerie d'images
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
@@ -244,24 +309,26 @@
 
 <!-- Image Gallery Modal -->
 <div class="modal fade" id="image-gallery-modal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-xl"> {# Larger modal for more images #}
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image</h5>
+                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image de la galerie</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <div class="row">
+                <div id="image-gallery-content" class="row">
+                    {# Images will be loaded here dynamically by JS or initially #}
                     {% for image in images %}
-                    <div class="col-md-3 col-sm-4 col-6 mb-3">
-                        <div class="gallery-item" data-image-id="{{ image.id }}">
-                            <img src="{{ image.src }}" alt="{{ image.alt }}" class="gallery-image img-fluid">
+                    <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-3">
+                        <div class="gallery-item text-center" data-image-id="{{ image.id }}">
+                            <img src="{{ image.src }}" alt="{{ image.alt or 'Image galerie' }}" class="gallery-image img-fluid">
+                            <small class="d-block mt-1 text-muted" style="word-wrap: break-word;">{{ image.alt or '(Sans description)'}}</small>
                         </div>
                     </div>
                     {% else %}
                     <div class="col-12">
                         <div class="alert alert-info">
-                            Aucune image disponible. Veuillez en télécharger une.
+                            Aucune image disponible dans la galerie. Veuillez en télécharger une via la section ci-dessus ou la page "Images".
                         </div>
                     </div>
                     {% endfor %}
@@ -277,6 +344,126 @@
 
 {% block scripts %}
 <!-- Include Sortable.js for drag and drop functionality -->
-<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
+
+<!-- Include Quill.js -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
+
+<!-- Your Custom Admin JS -->
 <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-{% endblock %}
+
+<script>
+// Add specific JS for this page if needed,
+// for example, handling the image upload AJAX response.
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Show/Hide image position controls based on image presence
+    function toggleImagePositionControls(blockEditor) {
+        const imageIdInput = blockEditor.querySelector('.block-image-id');
+        const positionControls = blockEditor.querySelector('.image-position-controls');
+        if (positionControls) {
+            if (imageIdInput && imageIdInput.value) {
+                positionControls.classList.remove('d-none');
+            } else {
+                positionControls.classList.add('d-none');
+            }
+        }
+    }
+
+    // Initial check for all blocks
+    document.querySelectorAll('.block-editor').forEach(toggleImagePositionControls);
+
+    // Add event listeners to image selection/removal buttons to update controls
+    document.querySelectorAll('.select-image-btn, .remove-image-btn').forEach(button => {
+        button.addEventListener('click', function() {
+            // Need a small delay for the image ID value to potentially update
+            setTimeout(() => {
+                toggleImagePositionControls(this.closest('.block-editor'));
+            }, 50);
+        });
+    });
+
+    // Update position controls when an image is selected from the gallery
+    const galleryModal = document.getElementById('image-gallery-modal');
+    if (galleryModal) {
+        galleryModal.addEventListener('click', function(event) {
+            const galleryItem = event.target.closest('.gallery-item');
+            if (galleryItem) {
+                 const targetBlockId = galleryModal.getAttribute('data-target-block');
+                 const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
+                 if(blockEditor) {
+                     // Delay necessary as the image selection logic in admin.js runs first
+                     setTimeout(() => {
+                         toggleImagePositionControls(blockEditor);
+                     }, 100);
+                 }
+            }
+        });
+    }
+
+     // Image Upload Preview
+    const imageFileInput = document.getElementById('image-file');
+    const imagePreview = document.getElementById('upload-image-preview');
+
+    if(imageFileInput && imagePreview) {
+        imageFileInput.addEventListener('change', function() {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    imagePreview.src = e.target.result;
+                    imagePreview.style.display = 'block';
+                }
+                reader.readAsDataURL(this.files[0]);
+            } else {
+                imagePreview.src = '#';
+                imagePreview.style.display = 'none';
+            }
+        });
+    }
+
+    // Optional: AJAX Image Upload Handling (Example)
+    const imageUploadForm = document.getElementById('image-upload-form');
+    const uploadStatusDiv = document.getElementById('upload-status');
+
+    if (imageUploadForm && uploadStatusDiv) {
+        imageUploadForm.addEventListener('submit', function(e) {
+            e.preventDefault(); // Prevent default form submission
+            uploadStatusDiv.innerHTML = '<div class="alert alert-info">Téléchargement en cours...</div>';
+            const formData = new FormData(this);
+
+            fetch(this.action, { // Use the form's action URL
+                method: 'POST',
+                body: formData,
+                headers: {
+                    // No 'Content-Type': browser sets it correctly for FormData
+                    'X-CSRFToken': this.querySelector('input[name="csrf_token"]').value // Send CSRF token if needed
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    uploadStatusDiv.innerHTML = `<div class="alert alert-success">Image "${data.alt}" ajoutée avec succès !</div>`;
+                    // Optionally: Clear the form
+                    imageUploadForm.reset();
+                    if(imagePreview) imagePreview.style.display = 'none';
+                    // Optionally: Refresh the image gallery modal content (more complex)
+                    // You might need another fetch call to get updated gallery HTML
+                    // or just add the new image data to the modal dynamically.
+                    // For simplicity, we'll just notify the user.
+                    alert('Image ajoutée à la galerie. Vous pouvez maintenant la sélectionner pour un bloc.');
+                } else {
+                    uploadStatusDiv.innerHTML = `<div class="alert alert-danger">Erreur: ${data.error || 'Impossible de télécharger l\'image.'}</div>`;
+                }
+            })
+            .catch(error => {
+                console.error('Upload error:', error);
+                uploadStatusDiv.innerHTML = '<div class="alert alert-danger">Erreur lors du téléchargement. Vérifiez la console.</div>';
+            });
+        });
+    }
+
+
+});
+</script>
+{% endblock %}