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