Skip to content

Commit a90c4c2

Browse files
lwesterhoflwesterhof
committed
Metadata forms: pull out utils and remove some jQuery
1 parent 86f2d59 commit a90c4c2

File tree

10 files changed

+135
-151
lines changed

10 files changed

+135
-151
lines changed

‎deposit/metadata-form/src/index.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { customizeValidator } from '@rjsf/validator-ajv8';
55
import Ajv2019 from 'ajv/dist/2019';
66
import { getTemplate } from '@rjsf/utils';
77
import Select from 'react-select';
8-
import AffiliationIdentifier from 'YodaFields/AffiliationIdentifier'
9-
import Geolocation from 'YodaFields/Geolocation'
10-
import TreeKeywordSelector from 'YodaFields/TreeKeywordSelector'
11-
import PersonIdentifier from 'YodaFields/PersonIdentifier'
12-
import Vocabulary from 'YodaFields/Vocabulary'
8+
import AffiliationIdentifier from 'Yoda/AffiliationIdentifier'
9+
import Geolocation from 'Yoda/Geolocation'
10+
import TreeKeywordSelector from 'Yoda/TreeKeywordSelector'
11+
import PersonIdentifier from 'Yoda/PersonIdentifier'
12+
import Vocabulary from 'Yoda/Vocabulary'
1313
import { withTheme } from "@rjsf/core";
1414

15-
const path = $('#form').attr('data-path');
15+
const path = document.querySelector('#form').getAttribute('data-path');
1616

1717
let schema = {};
1818
let uiSchema = {};
@@ -473,11 +473,11 @@ class YodaForm extends React.Component {
473473

474474
// Update TreeKeyword field if it exists and was the one changed
475475
if (id === "yoda_TreeKeyword" &&
476-
form.formData.TreeKeyword &&
476+
form.formData.TreeKeyword &&
477477
form.formData.TreeKeyword.value &&
478478
form.formData.TreeKeyword.value.length &&
479479
Object.keys(form.schema.properties.TreeKeyword.items.properties).includes("subject")) {
480-
480+
481481
form.formData.TreeKeyword = this.updateTreeKeywords(form, form.formData.TreeKeyword.value)
482482
}
483483

@@ -769,11 +769,12 @@ function loadForm() {
769769
});
770770
}
771771

772-
$(_ => loadForm());
772+
document.addEventListener('DOMContentLoaded', () => loadForm());
773773

774774
async function submitData(data) {
775775
// Disable buttons.
776-
$('.yodaButtons button').attr('disabled', true);
776+
const buttons = document.querySelectorAll('.yodaButtons button')
777+
buttons.forEach(button => button.disabled = true)
777778

778779
// Remove empty arrays and array items when saving.
779780
for (const property in data) {
@@ -801,7 +802,7 @@ async function submitData(data) {
801802
window.location.href = '/deposit/submit?dir=' + path;
802803
}
803804
} catch (e) {
804-
// Allow retry.
805-
$('.yodaButtons button').attr('disabled', false);
805+
// Allow retry.
806+
buttons.forEach(button => button.disabled = false)
806807
}
807808
}

‎deposit/static/deposit/js/metadata-form.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎metadata_form/src/js/Geolocation.js‎

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -92,65 +92,69 @@ class Geolocation extends React.Component {
9292

9393
this.fillCoordinateInputs(northBoundLatitude, westBoundLongitude, southBoundLatitude, eastBoundLongitude)
9494

95-
$('.geoInputCoords').on('input propertychange paste', function () {
96-
const boxid = $(this).attr('boxid')
97-
98-
// Remove earlier markers and rectangle(s)
99-
map.eachLayer(function (layer) {
100-
if (layer instanceof L.Marker || layer instanceof L.Rectangle) {
101-
map.removeLayer(layer)
95+
const geoInputCoords = document.querySelectorAll('.geoInputCoords');
96+
geoInputCoords.forEach(input => {
97+
input.addEventListener('input', function () {
98+
const boxid = this.getAttribute('boxid');
99+
// Remove earlier markers and rectangle(s)
100+
map.eachLayer(function (layer) {
101+
if (layer instanceof L.Marker || layer instanceof L.Rectangle) {
102+
map.removeLayer(layer);
103+
}
104+
});
105+
106+
// only make persistent when correct coordinates are added by user
107+
const lat0 = Number(document.querySelector(`.geoLat0[boxid='${boxid}']`).value);
108+
const lng0 = Number(document.querySelector(`.geoLng0[boxid='${boxid}']`).value);
109+
const lat1 = Number(document.querySelector(`.geoLat1[boxid='${boxid}']`).value);
110+
const lng1 = Number(document.querySelector(`.geoLng1[boxid='${boxid}']`).value);
111+
let alertText = '';
112+
113+
// Validation of coordinates - reset when dialog is reopened
114+
if (isNaN(lng0)) {
115+
alertText += ', WEST';
116+
}
117+
if (isNaN(lat0)) {
118+
alertText += ', NORTH';
119+
}
120+
if (isNaN(lng1)) {
121+
alertText += ', EAST';
122+
}
123+
if (isNaN(lat1)) {
124+
alertText += ', SOUTH';
102125
}
103-
})
104-
105-
// only make persistent when correct coordinates are added by user
106-
const lat0 = Number($(".geoLat0[boxid='" + boxid + "']").val())
107-
const lng0 = Number($(".geoLng0[boxid='" + boxid + "']").val())
108-
const lat1 = Number($(".geoLat1[boxid='" + boxid + "']").val())
109-
const lng1 = Number($(".geoLng1[boxid='" + boxid + "']").val())
110-
let alertText = ''
111-
112-
// Validation of coordinates - resetten als dialog wordt heropend
113-
if (!$.isNumeric(lng0)) {
114-
alertText += ', WEST'
115-
}
116-
if (!$.isNumeric(lat0)) {
117-
alertText = ', NORTH'
118-
}
119-
if (!$.isNumeric(lng1)) {
120-
alertText += ', EAST'
121-
}
122-
if (!$.isNumeric(lat1)) {
123-
alertText += ', SOUTH'
124-
}
125-
126-
if (alertText) {
127-
$('.geoAlert[boxid="' + boxid + '"]').html('Invalid coordinates: ' + alertText.substring(2))
128-
} else {
129-
$('.geoAlert[boxid="' + boxid + '"]').html('') // reset the alert box -> no alert required
130-
const bounds = [[lat0, lng0], [lat1 + 0.1, lng1 + 0.1]]
131126

132-
// Coordinates are a point.
133-
if (lat0 === lat1 && lng0 === lng1) {
134-
const latlng = L.latLng(lat0, lng0)
135-
L.marker(latlng).addTo(map)
127+
const geoAlert = document.querySelector(`.geoAlert[boxid='${boxid}']`);
128+
if (alertText) {
129+
geoAlert.innerHTML = 'Invalid coordinates: ' + alertText.substring(2);
136130
} else {
137-
L.rectangle(bounds).addTo(map)
131+
const geoAlert = document.querySelector(`.geoAlert[boxid='${boxid}']`);
132+
geoAlert.innerHTML = ''; // reset the alert box -> no alert required
133+
const bounds = [[lat0, lng0], [lat1 + 0.1, lng1 + 0.1]];
134+
135+
// Coordinates are a point.
136+
if (lat0 === lat1 && lng0 === lng1) {
137+
const latlng = L.latLng(lat0, lng0);
138+
L.marker(latlng).addTo(map);
139+
} else {
140+
L.rectangle(bounds).addTo(map);
141+
}
142+
map.fitBounds(bounds, { padding: [150, 150] });
143+
144+
globalThis.setFormData('northBoundLatitude', lat0);
145+
globalThis.setFormData('westBoundLongitude', lng0);
146+
globalThis.setFormData('southBoundLatitude', lat1);
147+
globalThis.setFormData('eastBoundLongitude', lng1);
138148
}
139-
map.fitBounds(bounds, { padding: [150, 150] })
140-
141-
globalThis.setFormData('northBoundLatitude', lat0)
142-
globalThis.setFormData('westBoundLongitude', lng0)
143-
globalThis.setFormData('southBoundLatitude', lat1)
144-
globalThis.setFormData('eastBoundLongitude', lng1)
145-
}
146-
})
149+
});
150+
});
147151
}
148152

149153
fillCoordinateInputs (northBoundLatitude, westBoundLongitude, southBoundLatitude, eastBoundLongitude) {
150-
$('.geoLat0').val(northBoundLatitude)
151-
$('.geoLng0').val(westBoundLongitude)
152-
$('.geoLat1').val(southBoundLatitude)
153-
$('.geoLng1').val(eastBoundLongitude)
154+
document.querySelector('.geoLat0').value = northBoundLatitude;
155+
document.querySelector('.geoLng0').value = westBoundLongitude;
156+
document.querySelector('.geoLat1').value = southBoundLatitude;
157+
document.querySelector('.geoLng1').value = eastBoundLongitude;
154158
}
155159

156160
drawCreated (e) {

‎metadata_form/src/js/utils.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export function updateCompleteness () {
2+
let mandatoryTotal = 0
3+
let mandatoryFilled = 0
4+
5+
document.querySelectorAll('.form-control[required]').forEach(control => {
6+
if (!control.id.startsWith('yoda_links_')) {
7+
mandatoryTotal++
8+
if (control.value) mandatoryFilled++
9+
}
10+
})
11+
12+
mandatoryTotal += document.querySelectorAll('.select-required').length
13+
mandatoryFilled += document.querySelectorAll('.select-filled').length
14+
15+
const percent = (mandatoryTotal ? (mandatoryFilled / mandatoryTotal) * 100 : 0)
16+
const progressBar = document.querySelector('.form-completeness .progress-bar')
17+
if (progressBar) progressBar.style.width = percent + '%'
18+
19+
const formCompleteness = document.querySelector('.form-completeness')
20+
if (formCompleteness) {
21+
formCompleteness.setAttribute('title', `Required for the vault: ${mandatoryTotal}, currently filled required fields: ${mandatoryFilled}`)
22+
}
23+
24+
return mandatoryTotal === mandatoryFilled
25+
}

‎metadata_form/src/webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const configIndividual = function (argv) {
1515
resolve: {
1616
modules: ['...', SHARED_DIR + '/node_modules', 'node_modules'],
1717
alias: {
18-
YodaFields: SHARED_DIR + '/js'
18+
Yoda: SHARED_DIR + '/js'
1919
}
2020
},
2121
module: {

‎research/metadata-form/src/index.js‎

Lines changed: 15 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import { customizeValidator } from '@rjsf/validator-ajv8';
55
import Ajv2019 from 'ajv/dist/2019';
66
import { getTemplate } from '@rjsf/utils';
77
import Select from 'react-select';
8-
import AffiliationIdentifier from 'YodaFields/AffiliationIdentifier'
9-
import Geolocation from 'YodaFields/Geolocation'
10-
import TreeKeywordSelector from 'YodaFields/TreeKeywordSelector'
11-
import PersonIdentifier from 'YodaFields/PersonIdentifier'
12-
import Vocabulary from 'YodaFields/Vocabulary'
8+
import AffiliationIdentifier from 'Yoda/AffiliationIdentifier'
9+
import Geolocation from 'Yoda/Geolocation'
10+
import TreeKeywordSelector from 'Yoda/TreeKeywordSelector'
11+
import PersonIdentifier from 'Yoda/PersonIdentifier'
12+
import Vocabulary from 'Yoda/Vocabulary'
13+
import { updateCompleteness } from 'Yoda/utils'
1314
import { withTheme } from "@rjsf/core";
1415

15-
const path = $('#form').attr('data-path');
16+
const path = document.querySelector('#form').getAttribute('data-path');
1617

1718
let schema = {};
1819
let uiSchema = {};
@@ -472,11 +473,11 @@ class YodaForm extends React.Component {
472473

473474
// Update TreeKeyword field if it exists and was the one changed
474475
if (id === "yoda_TreeKeyword" &&
475-
form.formData.TreeKeyword &&
476+
form.formData.TreeKeyword &&
476477
form.formData.TreeKeyword.value &&
477478
form.formData.TreeKeyword.value.length &&
478479
Object.keys(form.schema.properties.TreeKeyword.items.properties).includes("subject")) {
479-
480+
480481
form.formData.TreeKeyword = this.updateTreeKeywords(form, form.formData.TreeKeyword.value)
481482
}
482483

@@ -822,11 +823,12 @@ function loadForm() {
822823
});
823824
}
824825

825-
$(_ => loadForm());
826+
document.addEventListener('DOMContentLoaded', () => loadForm());
826827

827828
async function submitData(data) {
828829
// Disable buttons.
829-
$('.yodaButtons button').attr('disabled', true);
830+
const buttons = document.querySelectorAll('.yodaButtons button')
831+
buttons.forEach(button => button.disabled = true)
830832

831833
// Remove empty arrays and array items when saving.
832834
for (const property in data) {
@@ -849,36 +851,10 @@ async function submitData(data) {
849851
{errorPrefix: 'Metadata could not be saved'});
850852

851853
Yoda.set_message('success', `Updated metadata of folder <${path}>`);
852-
$('.yodaButtons button').attr('disabled', false);
854+
// Allow retry.
855+
buttons.forEach(button => button.disabled = false)
853856
} catch (e) {
854857
// Allow retry.
855-
$('.yodaButtons button').attr('disabled', false);
858+
buttons.forEach(button => button.disabled = false)
856859
}
857860
}
858-
859-
function updateCompleteness()
860-
{
861-
let mandatoryTotal = 0;
862-
let mandatoryFilled = 0;
863-
$(".form-control").each(function() {
864-
if ($(this)[0].required && !$(this)[0].id.startsWith("yoda_links_")) {
865-
mandatoryTotal++;
866-
if ($(this)[0].value != "") {
867-
mandatoryFilled++;
868-
}
869-
}
870-
});
871-
872-
$(".select-required").each(function() {
873-
mandatoryTotal++;
874-
});
875-
$(".select-filled").each(function() {
876-
mandatoryFilled++;
877-
});
878-
879-
let percent = (mandatoryFilled / mandatoryTotal) * 100;
880-
$(".form-completeness .progress-bar").css('width', percent + '%');
881-
$('.form-completeness').attr('title', `Required for the vault: ${mandatoryTotal}, currently filled required fields: ${mandatoryFilled}`);
882-
883-
return mandatoryTotal == mandatoryFilled;
884-
}

‎research/static/research/js/metadata-form.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vault/metadata-form/src/index.js‎

Lines changed: 14 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@ import { customizeValidator } from '@rjsf/validator-ajv8';
55
import Ajv2019 from 'ajv/dist/2019';
66
import { getTemplate } from '@rjsf/utils';
77
import Select from 'react-select';
8-
import AffiliationIdentifier from 'YodaFields/AffiliationIdentifier'
9-
import Geolocation from 'YodaFields/Geolocation'
10-
import TreeKeywordSelector from 'YodaFields/TreeKeywordSelector'
11-
import PersonIdentifier from 'YodaFields/PersonIdentifier'
12-
import Vocabulary from 'YodaFields/Vocabulary'
8+
import AffiliationIdentifier from 'Yoda/AffiliationIdentifier'
9+
import Geolocation from 'Yoda/Geolocation'
10+
import TreeKeywordSelector from 'Yoda/TreeKeywordSelector'
11+
import PersonIdentifier from 'Yoda/PersonIdentifier'
12+
import Vocabulary from 'Yoda/Vocabulary'
13+
import { updateCompleteness } from 'Yoda/utils'
14+
1315
import { withTheme } from "@rjsf/core";
1416

15-
const path = $('#form').attr('data-path');
17+
const path = document.querySelector('#form').getAttribute('data-path');
1618

1719
let schema = {};
1820
let uiSchema = {};
@@ -474,11 +476,11 @@ class YodaForm extends React.Component {
474476

475477
// Update TreeKeyword field if it exists and was the one changed
476478
if (id === "yoda_TreeKeyword" &&
477-
form.formData.TreeKeyword &&
479+
form.formData.TreeKeyword &&
478480
form.formData.TreeKeyword.value &&
479481
form.formData.TreeKeyword.value.length &&
480482
Object.keys(form.schema.properties.TreeKeyword.items.properties).includes("subject")) {
481-
483+
482484
form.formData.TreeKeyword = this.updateTreeKeywords(form, form.formData.TreeKeyword.value)
483485
}
484486

@@ -782,11 +784,12 @@ function loadForm() {
782784
});
783785
}
784786

785-
$(_ => loadForm());
787+
document.addEventListener('DOMContentLoaded', () => loadForm());
786788

787789
async function submitData(data) {
788790
// Disable buttons.
789-
$('.yodaButtons button').attr('disabled', true);
791+
const buttons = document.querySelectorAll('.yodaButtons button')
792+
buttons.forEach(button => button.disabled = true)
790793

791794
// Remove empty arrays and array items when saving.
792795
for (const property in data) {
@@ -812,33 +815,6 @@ async function submitData(data) {
812815
browse();
813816
} catch (e) {
814817
// Allow retry.
815-
$('.yodaButtons button').attr('disabled', false);
818+
buttons.forEach(button => button.disabled = false)
816819
}
817820
}
818-
819-
function updateCompleteness()
820-
{
821-
let mandatoryTotal = 0;
822-
let mandatoryFilled = 0;
823-
$(".form-control").each(function() {
824-
if ($(this)[0].required && !$(this)[0].id.startsWith("yoda_links_")) {
825-
mandatoryTotal++;
826-
if ($(this)[0].value != "") {
827-
mandatoryFilled++;
828-
}
829-
}
830-
});
831-
832-
$(".select-required").each(function() {
833-
mandatoryTotal++;
834-
});
835-
$(".select-filled").each(function() {
836-
mandatoryFilled++;
837-
});
838-
839-
let percent = (mandatoryFilled / mandatoryTotal) * 100;
840-
$(".form-completeness .progress-bar").css('width', percent + '%');
841-
$('.form-completeness').attr('title', `Required for the vault: ${mandatoryTotal}, currently filled required fields: ${mandatoryFilled}`);
842-
843-
return mandatoryTotal == mandatoryFilled;
844-
}

‎vault/static/vault/js/metadata-form.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)