xref: /webtrees/resources/views/modules/census-assistant.phtml (revision 1821c9e596679be8717c51394b448df204b1f577) 
1<?php
2
3declare(strict_types=1);
4
5use Fisharebest\Webtrees\I18N;
6use Fisharebest\Webtrees\Individual;
7use Fisharebest\Webtrees\View;
8
9/**
10 * @var Individual|null $individual
11 */
12
13?>
14
15<div class="census-assistant-link" hidden>
16    <a href="#">
17        <?= I18N::translate('Create a shared note using the census assistant') ?>
18    </a>
19</div>
20
21<div id="census-assistant" hidden>
22    <input type="hidden" name="ca_census" class="census-assistant-class">
23    <div class="mb-3">
24        <div class="input-group">
25            <label class="input-group-text" for="census-assistant-title">
26                <?= I18N::translate('Title') ?>
27            </label>
28
29            <input class="form-control" id="census-assistant-title" name="ca_title" value="">
30        </div>
31    </div>
32
33    <div class="row mb-3">
34        <div class="col-sm-6">
35            <div class="input-group">
36                <label class="input-group-text" for="census-assistant-citation">
37                    <?= I18N::translate('Citation') ?>
38                </label>
39
40                <input class="form-control" id="census-assistant-citation" name="ca_citation">
41            </div>
42        </div>
43
44        <div class="col-sm-6">
45            <div class="input-group">
46                <label class="input-group-text" for="census-assistant-place">
47                    <?= I18N::translate('Place') ?>
48                </label>
49
50                <input class="form-control" id="census-assistant-place" name="ca_place">
51            </div>
52        </div>
53    </div>
54
55    <div class="mb-3">
56        <div class="input-group">
57            <span class="input-group-text">
58                <?= I18N::translate('Individuals') ?>
59            </span>
60
61            <?= view('components/select-individual', ['name' => 'census-assistant-individual', 'individual' => $individual, 'tree' => $individual->tree()]) ?>
62
63            <button type="button" class="btn btn-primary census-assistant-add" title="<?= I18N::translate('add') ?>">
64                <?= view('icons/add') ?>
65            </button>
66        </div>
67    </div>
68
69    <div class="table-responsive">
70        <table class="table table-sm table-borderless small wt-census-assistant-table" id="census-assistant-table">
71            <thead class="wt-census-assistant-header"></thead>
72            <tbody class="wt-census-assistant-body"></tbody>
73        </table>
74    </div>
75
76    <div class="mb-3">
77        <div class="input-group">
78            <label class="input-group-text" for="census-assistant-notes">
79                <?= I18N::translate('Comments') ?>
80            </label>
81
82            <textarea class="form-control" id="census-assistant-notes" name="ca_notes" rows="3"></textarea>
83        </div>
84    </div>
85</div>
86
87<?php View::push('javascript') ?>
88<script>
89  // When a census date/place is selected, activate the census-assistant
90  function censusAssistantSelect () {
91    const select = this;
92    const option = select.options[select.selectedIndex];
93    const form = select.closest('form');
94
95    form.querySelector('.census-assistant-class').value = option.dataset.wtCensus;
96
97    var censusAssistantLink = document.querySelector('.census-assistant-link');
98    var censusAssistant = document.querySelector('#census-assistant');
99    var censusOption = this.options[this.selectedIndex];
100    var census = censusOption.dataset.wtCensus;
101    var censusPlace = censusOption.dataset.wtPlace;
102    var censusYear = censusOption.dataset.wtDate.substr(-4);
103
104    if (censusOption.value !== '') {
105      censusAssistantLink.removeAttribute('hidden');
106    } else {
107      censusAssistantLink.setAttribute('hidden', '');
108    }
109
110    censusAssistant.setAttribute('hidden', '');
111    document.querySelector('.census-assistant-class').value = census;
112    document.querySelector('#census-assistant-title').value = censusYear + ' ' + censusPlace + ' - <?= I18N::translate('Census transcript') ?> - <?= strip_tags($individual->fullName()) ?> - <?= I18N::translate('Household') ?>';
113
114    let formData = new FormData();
115    formData.append('census', census);
116    formData.append('_csrf', document.querySelector('meta[name=csrf]').content);
117
118    const url = <?= json_encode(route('module', ['module' => 'GEDFact_assistant', 'action' => 'CensusHeader', 'tree' => $individual->tree()->name()]), JSON_THROW_ON_ERROR) ?>;
119    webtrees.httpPost(url, formData)
120      .then(response => response.text())
121      .then(function (text) {
122        document.querySelector('#census-assistant-table thead').innerHTML = text;
123        document.querySelector('#census-assistant-table tbody').innerHTML = '';
124      });
125  }
126
127  // When the census assistant is activated, show the input fields
128  function censusAssistantLink () {
129    document.querySelector('.census-selector').setAttribute('hidden', '');
130    this.setAttribute('hidden', '');
131    document.getElementById('census-assistant').removeAttribute('hidden');
132    // Set the current individual as the head of household.
133    censusAssistantAdd();
134
135    return false;
136  }
137
138  // Add the currently selected individual to the census
139  function censusAssistantAdd () {
140    var censusSelector = document.querySelector('.census-selector');
141    var census = censusSelector.options[censusSelector.selectedIndex].dataset.wtCensus;
142    var indi_selector = document.querySelector('#census-assistant-individual');
143    var xref = indi_selector.options[indi_selector.selectedIndex].value;
144    var headInput = document.querySelector('#census-assistant-table td input');
145    var head = headInput === null ? xref : headInput.value;
146
147    let formData = new FormData();
148    formData.append('census', census);
149    formData.append('_csrf', document.querySelector('meta[name=csrf]').content);
150    formData.append('head', head);
151    formData.append('xref', xref);
152
153    const url = <?= json_encode(route('module', ['module' => 'GEDFact_assistant', 'action' => 'CensusIndividual', 'tree' => $individual->tree()->name()]), JSON_THROW_ON_ERROR) ?>;
154
155    webtrees.httpPost(url, formData)
156      .then(response => response.text())
157      .then(function (text) {
158        document.querySelector('#census-assistant-table tbody').insertAdjacentHTML('beforeend', text);
159        webtrees.resetTomSelect(document.querySelector('#census-assistant-individual').tomselect, '', '');
160      });
161
162    return false;
163  }
164
165  document.querySelectorAll('.census-selector').forEach(function (el) {
166    el.addEventListener('change', censusAssistantSelect);
167  });
168
169  document.querySelectorAll('.census-assistant-link').forEach(function (el) {
170    el.addEventListener('click', censusAssistantLink);
171  });
172
173  document.querySelectorAll('.census-assistant-add').forEach(function (el) {
174    el.addEventListener('click', censusAssistantAdd);
175  });
176
177  document.querySelectorAll('#census-assistant-table').forEach(function (el) {
178    el.addEventListener('click', function (el) {
179      if (el.target.matches('.wt-icon-delete')) {
180        el.target.closest('tr').remove();
181      }
182    });
183  });
184</script>
185<?php View::endpush() ?>
186