Fi: #4338 - allow media files to be re-ordered

2 files changed, 63 insertions, 0 deletions

diff --git a/resources/views/edit/reorder-media-files.phtml b/resources/views/edit/reorder-media-files.phtml
new file mode 100644
index 0000000000..927432cf31
--- /dev/null
+++ b/resources/views/edit/reorder-media-files.phtml
@@ -0,0 +1,55 @@
+<?php
+
+use Fisharebest\Webtrees\Http\RequestHandlers\ReorderMediaFilesAction;
+use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\Media;
+use Fisharebest\Webtrees\View;
+
+/**
+ * @var Media  $media
+ * @var string $title
+ */
+
+?>
+
+<h2 class="wt-page-title"><?= $title ?></h2>
+
+<form method="post" action="<?= e(route(ReorderMediaFilesAction::class, ['tree' => $media->tree()->name(), 'xref' => $media->xref()])) ?>" class="wt-page-content">
+    <?= csrf_field() ?>
+
+    <div class="wt-sortable-list">
+        <?php foreach ($media->mediaFiles() as $media_file) : ?>
+            <div class="card my-2 wt-sortable-item">
+                <input type="hidden" name="order[]" value="<?= $media_file->factId() ?>">
+                <div class="card-header">
+                    <?= view('edit/reorder-card-header', ['title' => e($media_file->filename())]) ?>
+                </div>
+
+                <div class="card-body d-flex">
+                    <?= $media_file->displayImage(100, 100, 'contain') ?>
+                    <?= e($media_file->title()) ?>
+                </div>
+            </div>
+        <?php endforeach ?>
+    </div>
+
+    <p>
+        <button class="btn btn-primary" type="submit">
+            <?= view('icons/save') ?>
+            <?= /* I18N: A button label. */ I18N::translate('save') ?>
+        </button>
+
+        <a class="btn btn-secondary" href="<?= e($media->url()) ?>">
+            <?= view('icons/cancel') ?>
+            <?= /* I18N: A button label. */ I18N::translate('cancel') ?>
+        </a>
+    </p>
+</form>
+
+<?php View::push('javascript') ?>
+<script>
+    new Sortable(document.querySelector(".wt-sortable-list"), {
+        handle: ".card-header",
+    });
+</script>
+<?php View::endpush() ?>
diff --git a/resources/views/media-page-menu.phtml b/resources/views/media-page-menu.phtml
index 7a24e5b7cc..a4b25701f4 100644
--- a/resources/views/media-page-menu.phtml
+++ b/resources/views/media-page-menu.phtml
@@ -7,6 +7,7 @@ use Fisharebest\Webtrees\Http\RequestHandlers\EditRecordPage;
 use Fisharebest\Webtrees\Http\RequestHandlers\LinkMediaToFamilyModal;
 use Fisharebest\Webtrees\Http\RequestHandlers\LinkMediaToIndividualModal;
 use Fisharebest\Webtrees\Http\RequestHandlers\LinkMediaToSourceModal;
+use Fisharebest\Webtrees\Http\RequestHandlers\ReorderMediaFilesPage;
 use Fisharebest\Webtrees\I18N;
 use Fisharebest\Webtrees\Media;
 use Illuminate\Support\Collection;
@@ -37,6 +38,13 @@ use Illuminate\Support\Collection;
             <?= I18N::translate('Add a media file') ?>
         </a>
 
+        <?php if ($record->mediaFiles()->count() >= 2) : ?>
+            <a class="dropdown-item" href="<?= route(ReorderMediaFilesPage::class, ['xref' => $record->xref(), 'tree' => $record->tree()->name()]) ?>">
+                <?= view('icons/reorder') ?>
+                <?= I18N::translate('Re-order media files') ?>
+            </a>
+        <?php endif ?>
+
         <?php if ($record->missingFacts() !== []) : ?>
             <div class="dropdown-divider"></div>