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