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