xref: /webtrees/resources/views/edit/reorder-children.phtml (revision f4c767fd89cdb62ee54edec032285924cd767af7)
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 my-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                    <?= view('edit/reorder-card-header', ['title' => $fact->target()->fullName()]) ?>
21                </div>
22
23                <div class="card-body">
24                    <?= $fact->target()->formatFirstMajorFact(Gedcom::BIRTH_EVENTS, 2) ?>
25                    <?= $fact->target()->formatFirstMajorFact(Gedcom::DEATH_EVENTS, 2) ?>
26                </div>
27            </div>
28        <?php endforeach ?>
29    </div>
30
31    <p>
32        <button class="btn btn-primary" type="submit">
33            <?= view('icons/save') ?>
34            <?= /* I18N: A button label. */ I18N::translate('save') ?>
35        </button>
36
37        <button class="btn btn-secondary" id="btn-default-order" type="button">
38            <?= view('icons/sort') ?>
39            <?= /* I18N: A button label. */ I18N::translate('sort by date of birth') ?>
40        </button>
41
42        <a class="btn btn-secondary" href="<?= e($family->url()) ?>">
43            <?= view('icons/cancel') ?>
44            <?= /* I18N: A button label. */ I18N::translate('cancel') ?>
45        </a>
46    </p>
47</form>
48
49<?php View::push('javascript') ?>
50<script>
51    new Sortable(document.querySelector(".wt-sortable-list"), {
52        handle: ".card-header",
53    });
54
55    $("#btn-default-order").on("click", function () {
56        $(".wt-sortable-list .wt-sortable-item").sort(function (x, y) {
57            return Math.sign(x.dataset.sortbydate - y.dataset.sortbydate);
58        }).appendTo(".wt-sortable-list");
59    });
60</script>
61<?php View::endpush() ?>
62