xref: /webtrees/resources/views/edit/reorder-children.phtml (revision 52bcc40297e06e51c5cc74d5ddd66c750aefef51)
1<?php use Fisharebest\Webtrees\Gedcom; ?>
2<?php use Fisharebest\Webtrees\I18N; ?>
3<?php use Fisharebest\Webtrees\View; ?>
4
5<h2 class="wt-page-title"><?= $title ?></h2>
6
7<form class="wt-page-content" method="post">
8    <?= csrf_field() ?>
9    <div class="wt-sortable-list">
10        <?php foreach ($family->facts(['CHIL']) as $fact) : ?>
11            <div class="card mb-2 wt-sortable-item" data-sortbydate="<?= $fact->target()->getBirthDate()->julianDay() ?>">
12                <input type="hidden" name="order[]" value="<?= $fact->id() ?>">
13                <h3 class="card-header">
14                    <?= view('icons/drag-handle') ?>
15                    <?= $fact->target()->getFullName() ?>
16                </h3>
17                <div class="card-body">
18                    <?= $fact->target()->formatFirstMajorFact(Gedcom::BIRTH_EVENTS, 2) ?>
19                    <?= $fact->target()->formatFirstMajorFact(Gedcom::DEATH_EVENTS, 2) ?>
20                </div>
21            </div>
22        <?php endforeach ?>
23    </div>
24
25    <p>
26        <button class="btn btn-primary" type="submit">
27            <?= view('icons/save') ?>
28            <?= /* I18N: A button label. */ I18N::translate('save') ?>
29        </button>
30
31        <button class="btn btn-secondary" id="btn-default-order" type="button">
32            <?= view('icons/sort') ?>
33            <?= /* I18N: A button label. */ I18N::translate('sort by date of birth') ?>
34        </button>
35
36        <a class="btn btn-secondary" href="<?= e($family->url()) ?>">
37            <?= view('icons/cancel') ?>
38            <?= /* I18N: A button label. */ I18N::translate('cancel') ?>
39        </a>
40    </p>
41</form>
42
43<?php View::push('javascript') ?>
44<script>
45  new Sortable(document.querySelector(".wt-sortable-list"), {});
46
47  $("#btn-default-order").on("click", function() {
48    $(".wt-sortable-list .wt-sortable-item").sort(function(x, y) {
49      return Math.sign(x.dataset.sortbydate - y.dataset.sortbydate);
50    }).appendTo(".wt-sortable-list");
51  });
52</script>
53<?php View::endpush() ?>
54