Update api/templates/admin/edit_texte.html

api/templates/admin/edit_texte.html

@@ -4,90 +4,44 @@
 
 {% 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 %}
@@ -131,11 +85,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
@@ -144,7 +98,7 @@
                     <i class="fas fa-history"></i> Voir l'historique
                 </a>
             </div>
-
+            
             <!-- Basic Information Form -->
             <div class="card mb-4">
                 <div class="card-header">
@@ -152,14 +106,13 @@
                 </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>
@@ -170,14 +123,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">
@@ -188,15 +141,14 @@
                 </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 riche et une image.
-                        Vous pouvez réorganiser les blocs en les faisant glisser (<i class="fas fa-grip-vertical"></i>).
+                        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.
                     </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 }}">
@@ -206,7 +158,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" title="Supprimer ce bloc">
+                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </div>
@@ -216,16 +168,11 @@
                                     <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="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 '' }}">
+                                    <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>
                                 </div>
                                 <div class="form-group">
-                                    <label>Image (optionnel)</label>
+                                    <label>Image</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
@@ -235,16 +182,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">
-                                        {% 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 %}
+                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt }}" class="image-preview">
                                     </div>
-
-                                    <div class="form-group mt-3 {% if not block.image %}d-none{% endif %} image-position-controls"> {# Hide position if no image #}
+                                    {% else %}
+                                    <img src="" alt="Preview" class="image-preview" style="display:none;">
+                                    {% endif %}
+                                    
+                                    <div class="form-group mt-3">
                                         <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>
@@ -256,51 +203,39 @@
                             </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 blocs
+                                <i class="fas fa-save"></i> Enregistrer les modifications
                             </button>
                         </div>
                     </form>
                 </div>
             </div>
-
+            
             <!-- Image Upload Section -->
             <div class="card mb-4">
                 <div class="card-header">
-                    <h4>Ajouter une nouvelle image (Galerie)</h4>
+                    <h4>Ajouter une nouvelle image</h4>
                 </div>
                 <div class="card-body">
-                    <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 #}
-
+                    <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">
+                        
                         <div class="form-group mb-3">
                             <label for="image">Sélectionner une image</label>
-                            <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
+                            <input type="file" class="form-control" id="image" 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" required>
+                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
                         </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 et ajouter à la galerie
+                            <i class="fas fa-upload"></i> Télécharger l'image
                         </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>
@@ -309,26 +244,24 @@
 
 <!-- Image Gallery Modal -->
 <div class="modal fade" id="image-gallery-modal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl"> {# Larger modal for more images #}
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image de la galerie</h5>
+                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <div id="image-gallery-content" class="row">
-                    {# Images will be loaded here dynamically by JS or initially #}
+                <div class="row">
                     {% for image in images %}
-                    <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 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>
                     </div>
                     {% else %}
                     <div class="col-12">
                         <div class="alert alert-info">
-                            Aucune image disponible dans la galerie. Veuillez en télécharger une via la section ci-dessus ou la page "Images".
+                            Aucune image disponible. Veuillez en télécharger une.
                         </div>
                     </div>
                     {% endfor %}
@@ -344,126 +277,6 @@
 
 {% block scripts %}
 <!-- Include Sortable.js for drag and drop functionality -->
-<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/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
-
-<!-- Your Custom Admin JS -->
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
 <script src="{{ url_for('static', filename='js/admin.js') }}"></script>
-
-<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 %}
+{% endblock %}