mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
refactor: session-based incremental TFE upload via HTMX, drop SortableJS
Replace the client-side FileArray + Sortable drag-to-reorder with a
server-side session-based upload flow:
- New endpoints: /partage/upload-tfe-file, /partage/remove-tfe-file
(and /admin/ variants) — single-file incremental upload via HTMX
multipart/form-data with progress bar support
- Session storage: uploaded files go to STORAGE_ROOT/uploads/{session_id}/
with metadata in $_SESSION['tfe_uploads']
- file-upload-queue.js reduced to single-file previews only (couverture,
note_intention, annexes thumbnails)
- ThesisFileHandler gains handleTfeFilesFromSession + writeTfeFileFromSrc
+ cleanupSessionUploads for final commit from session temp
- Sortable.min.js removed from all script tags; drag handles and ghost
CSS removed
- No file_orders[]/file_labels[] hidden field injection needed
- Upload queue survives page refresh (server-owned list)
This eliminates the SortableJS dependency entirely while keeping the
same UX: pick files, see them in a queue, remove individual files.
This commit is contained in:
@@ -33,7 +33,7 @@ $adminMode = $adminMode ?? false;
|
||||
include APP_ROOT . '/templates/partials/form/file-field.php';
|
||||
?>
|
||||
|
||||
<!-- TFE files — multi-file, sortable, with per-file labels -->
|
||||
<!-- TFE files — multi-file, with per-file labels -->
|
||||
<div class="admin-form-group admin-files-fieldgroup">
|
||||
<label>TFE (obligatoire) :</label>
|
||||
<div class="admin-file-input">
|
||||
@@ -46,9 +46,9 @@ $adminMode = $adminMode ?? false;
|
||||
Les fichiers <code>.vtt</code> sont des sous-titres et seront associés automatiquement à la vidéo précédente.
|
||||
</small>
|
||||
|
||||
<!-- Sortable file queue — populated by JS -->
|
||||
<ul id="tfe-file-queue" class="tfe-file-queue sortable-list" aria-label="Fichiers sélectionnés (réordonnable)">
|
||||
<!-- Items injected by file-upload-queue.js -->
|
||||
<!-- File queue — populated by JS -->
|
||||
<ul id="tfe-file-queue" class="tfe-file-queue" aria-label="Fichiers sélectionnés">
|
||||
<!-- Queue rendered server-side via HTMX (upload-tfe-file) -->
|
||||
</ul>
|
||||
<p id="tfe-file-queue-empty" class="tfe-queue-empty">Aucun fichier sélectionné.</p>
|
||||
</div>
|
||||
|
||||
@@ -31,14 +31,16 @@ if (defined('ADMIN_MODE') && ADMIN_MODE) {
|
||||
?>
|
||||
<div>
|
||||
<label for="<?= htmlspecialchars($id) ?>"><?= htmlspecialchars($label) ?><?= $required ? ' <span class="asterisk">*</span>' : '' ?></label>
|
||||
<div class="admin-file-input"
|
||||
<!-- HTMX validation: scoped to this field -->
|
||||
<form class="admin-file-input file-validation-form"
|
||||
hx-post="<?= htmlspecialchars($validateUrl) ?>"
|
||||
hx-encoding="multipart/form-data"
|
||||
hx-trigger="change from:input[type='file']"
|
||||
hx-target="find .file-validation-msg"
|
||||
hx-swap="innerHTML"
|
||||
hx-include="[name='admin_mode'], [name='edit_mode'], [name='field_name']">
|
||||
hx-sync="replace">
|
||||
<input type="hidden" name="field_name" value="<?= htmlspecialchars($fieldName) ?>">
|
||||
<input type="hidden" name="admin_mode" value="<?= ($adminMode ?? false) ? '1' : '0' ?>">
|
||||
<input type="file"
|
||||
id="<?= htmlspecialchars($id) ?>"
|
||||
name="<?= htmlspecialchars($name) ?><?= $multiple ? '[]' : '' ?>"
|
||||
@@ -51,7 +53,7 @@ if (defined('ADMIN_MODE') && ADMIN_MODE) {
|
||||
<?php if ($hint): ?>
|
||||
<small><?= $hintRaw ? $hint : htmlspecialchars($hint) ?></small>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php
|
||||
unset($accept, $hint, $hintRaw, $required, $multiple, $id, $fieldName, $previewId, $validateUrl);
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
* bool $showFlash — render flash banners (error/warning/success)
|
||||
* bool $showContact — Contact checkbox fieldset
|
||||
* bool $showCoverPreview — cover image preview + remove checkbox
|
||||
* bool $showExistingFiles — existing thesis files list (sortable, deletable)
|
||||
* bool $showExistingFiles — existing thesis files list (deletable)
|
||||
* bool $showBackoffice — Backoffice fieldset (context_note, jury_points, remarks, baiu_link, exemplaires, contact_interne, is_published)
|
||||
* bool $showEmailConfirmation — E-mail de confirmation fieldset
|
||||
|
||||
@@ -340,7 +340,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
|
||||
|
||||
<!-- Edit-only: existing files management -->
|
||||
<div id="edit-existing-files-block">
|
||||
<!-- Existing thesis files — sortable, with labels -->
|
||||
<!-- Existing thesis files — with labels -->
|
||||
<?php $thesisFilesList = array_values(
|
||||
array_filter(
|
||||
$currentFiles,
|
||||
@@ -350,10 +350,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
|
||||
<?php if (!empty($thesisFilesList)): ?>
|
||||
<div class="admin-form-group">
|
||||
<label>Fichiers du TFE existants :</label>
|
||||
<small style="display:block;margin-bottom:var(--space-2xs);color:var(--text-tertiary)">
|
||||
Glissez-déposez les lignes pour réordonner les fichiers sur la page publique.
|
||||
</small>
|
||||
<ul id="existing-files-sortable" class="admin-file-list sortable-list">
|
||||
<ul id="existing-files-sortable" class="admin-file-list">
|
||||
<?php foreach ($thesisFilesList as $f):
|
||||
|
||||
$fExt = strtolower(
|
||||
@@ -400,7 +397,7 @@ $checkedFormatsForSiteWeb = $checkedFormatsForSiteWeb ?? [];
|
||||
<input type="hidden" name="file_sort_order[]" value="<?= (int) $f[
|
||||
"id"
|
||||
] ?>">
|
||||
<span class="admin-file-drag-handle" title="Réordonner">⠿</span>
|
||||
|
||||
<span class="admin-file-icon-col"><?= $fIcon ?></span>
|
||||
<span class="admin-file-info">
|
||||
<a href="<?= $fLinkHref ?>" target="_blank" rel="noopener" class="admin-file-name">
|
||||
|
||||
Reference in New Issue
Block a user