Files
xamxam/app/templates/partials/form/fichiers-fragment.php
Pontoporeia 8bb0b3a1f2 refactor: unify FilePond edit previews + clean upload UI and shared fragments
* Move shared `fichiers-fragment.php` from `partage/` to `templates/partials/form/`
  and update all include/require references
* `.gitignore`: exclude SQLite WAL/SHM journal files
* FilePond UI:

  * change uploaded file block border state from yellow to green
  * restyle image previews to use site light-theme colors
* Edit mode:

  * remove custom existing-file preview list implementation
  * preload existing files directly into FilePond pools
  * include `cover` and `note_intention` assets in FilePond-managed state
* Remove obsolete upload progress bar UI and related JS includes
* Remove deprecated `Écriture` + `Image` format types from upload flow/configuration
2026-05-19 00:08:06 +02:00

157 lines
7.4 KiB
PHP

<?php
/**
* fichiers-fragment.php
*
* Shared HTMX fragment: returns the combined Format(s) + Fichiers block.
* Used by both the partage and admin forms.
*
* All slots (Couverture, Note d'intention, TFE, Annexes, Site web) are
* always visible — decorelated from the format checkboxes. The checkboxes
* serve only as metadata selectors; they no longer trigger HTMX swaps.
*
* Expected POST:
* formats[] — array of selected format_type IDs
* website_url — current value (repopulation)
* website_label — current value (repopulation)
* admin_mode — '1' for admin context (removes required attrs)
* edit_mode — '1' for edit context (preloads existing files)
*/
require_once APP_ROOT . '/src/PeerTubeService.php';
$_ptDb = Database::getInstance();
$peerTubeEnabled = PeerTubeService::isEnabled($_ptDb);
$peerTubeSettings = PeerTubeService::getSettings($_ptDb);
$db = $_ptDb->getConnection();
// Exclude removed format types (Écriture, Image)
$allFormats = $db->query("SELECT id, name FROM format_types WHERE name NOT IN ('Écriture', 'Image') ORDER BY sort_order, id")
->fetchAll(PDO::FETCH_ASSOC);
$selectedFormats = isset($_POST['formats']) && is_array($_POST['formats'])
? array_map('intval', $_POST['formats'])
: [];
$adminMode = ($_POST['admin_mode'] ?? '0') === '1';
$editMode = ($_POST['edit_mode'] ?? '0') === '1';
$websiteUrl = htmlspecialchars($_POST['website_url'] ?? '');
$websiteLabel = htmlspecialchars($_POST['website_label'] ?? '');
?>
<!-- ═══════════════════ Format(s) + Fichiers ═══════════════════ -->
<div id="format-fichiers-block">
<input type="hidden" name="admin_mode" value="<?= $adminMode ? '1' : '0' ?>">
<input type="hidden" name="edit_mode" value="<?= $editMode ? '1' : '0' ?>">
<!-- ═══════════════════ Format(s) — sticky ═══════════════════ -->
<fieldset id="fieldset-formats">
<legend>Format(s)</legend>
<div>
<span class="admin-row-label">Format(s) du TFE :<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></span>
<fieldset class="admin-checkbox-group"
<?= !$adminMode ? 'required aria-required="true"' : '' ?> >
<legend class="sr-only">Format(s) du TFE</legend>
<ul>
<?php foreach ($allFormats as $opt): ?>
<li>
<label class="admin-checkbox-label">
<input type="checkbox"
name="formats[]"
value="<?= htmlspecialchars((string)$opt['id']) ?>"
<?= in_array((int)$opt['id'], $selectedFormats, true) ? 'checked' : '' ?>>
<?= htmlspecialchars($opt['name']) ?>
</label>
</li>
<?php endforeach; ?>
</ul>
</fieldset>
</div>
</fieldset>
<!-- ═══════════════════ Fichiers ═══════════════════ -->
<fieldset>
<legend>Fichiers</legend>
<!-- ── 1. Couverture ── -->
<div class="admin-form-group">
<label for="couverture">Image de couverture (optionnel)</label>
<div class="admin-file-input">
<input type="file" id="couverture"
name="queue_file[cover][]"
class="tfe-file-picker tfe-file-picker--single"
data-queue-type="cover"
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForCover ?? []), ENT_QUOTES) ?>'>
<small>JPG, PNG ou WEBP. Format 4:3 recommandé. Max 20 MB.</small>
</div>
</div>
<!-- ── 2. Note d'intention ── -->
<div class="admin-form-group">
<label for="note_intention">Note d'intention<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
<div class="admin-file-input">
<input type="file" id="note_intention"
name="queue_file[note_intention][]"
class="tfe-file-picker tfe-file-picker--single"
data-queue-type="note_intention"
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForNoteIntention ?? []), ENT_QUOTES) ?>'
<?= !$adminMode ? 'required' : '' ?>>
<small>PDF uniquement. Max 100 MB. Si votre fichier est trop lourd, compressez-le avec <a href="https://www.bentopdf.com" target="_blank" rel="noopener">bentopdf.com</a>.</small>
</div>
</div>
<!-- ── 3. TFE (all files: PDF, images, video, audio, VTT, archives) ── -->
<div class="admin-form-group admin-files-fieldgroup">
<label for="tfe-files-input">TFE<?= !$adminMode ? ' <span class="asterisk">*</span>' : '' ?></label>
<div class="admin-file-input">
<input type="file" id="tfe-files-input"
name="queue_file[tfe][]"
multiple
class="tfe-file-picker"
data-queue-type="tfe"
<?= !$adminMode ? 'required' : '' ?>
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForTfe ?? []), ENT_QUOTES) ?>'>
<small class="admin-file-hint">
Glissez pour réordonner.
<br>
<br>
PDF (max 100 MB) · Images (max 500 MB) · Vidéo &amp; Audio (max 2 GB) · VTT · Archives (max 500 MB).
<br>→ PDFs trop lourds ? <a href="https://www.bentopdf.com" target="_blank" rel="noopener">https://bentopdf.com/</a>
<?php if ($peerTubeEnabled): ?>
<br><br>Vidéos et audio hébergés sur <a href="<?= htmlspecialchars($peerTubeSettings['instance_url']) ?>" target="_blank" rel="noopener">PeerTube</a>.
<?php endif; ?>
</small>
</div>
</div>
<!-- ── 4. Annexes ── -->
<div id="annexes-input-block">
<input type="hidden" name="has_annexes" value="0">
<div class="admin-form-group admin-files-fieldgroup">
<label for="annexe-files-input">Annexes (optionnel)</label>
<div class="admin-file-input">
<input type="file" id="annexe-files-input"
name="queue_file[annexe][]"
multiple
class="tfe-file-picker"
data-queue-type="annexe"
data-existing-files='<?= htmlspecialchars(json_encode($existingFilesJsonForAnnexe ?? []), ENT_QUOTES) ?>'>
<small class="admin-file-hint">PDF ou archives ZIP/TAR. Max 500 MB. Glissez pour réordonner.</small>
</div>
</div>
</div>
<!-- ── 5. Site web url ── -->
<div id="slot-siteweb" class="admin-form-group">
<label for="website_url">URL du site (optionnel)</label>
<div class="admin-file-input">
<input type="url" id="website_url" name="website_url"
value="<?= $websiteUrl ?>"
placeholder="https://mon-tfe.erg.be">
<small>Le TFE sera affiché comme un site embarqué sur sa page publique.</small>
</div>
</div>
</fieldset><!-- /Fichiers -->
</div><!-- #format-fichiers-block -->