Comenius-Institut/FOERBICO-metadata-form
11
0
Fork 0
mirror of https://gitlab.com/comenius-institut/foerbico/metadata-form.git synced 2025-12-07 23:34:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add institution picker for organization tab

Browse source 
Lets users choose their organization using our list and ror query
when they set the author type to "Organization".
This commit is contained in:
smatts 2023-09-28 10:50:37 +02:00
parent f4e2ad052b
commit 677e45c681
1 changed files with 64 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

74
metadata-generator.html
View file

@ -495,9 +495,11 @@
const creatorList = document.getElementById("creator-list");
const item = document.createElement("li");
item.setAttribute("class", "list-group-item");
let institutionOptions = ""
let institutionOptions = "";
let organizationOptions = "";
$.each(vocabInstitutions, function (i, item) {
institutionOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
organizationOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
});
let customInstitutionSelected = institution === "" && affiliationName !== "";
let radioGroupName = creatorList.childElementCount > 1 ? $(creatorList.lastElementChild.previousElementSibling).find('.inputType').find('input').attr('name') : ''
@ -554,10 +556,11 @@
</div>
</div>
<div class="form-row mt-3 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
<div class="col">
<input type="text" class="form-control inputOrganizationName" placeholder="Name" data-i18n-placeholder="LABEL_ORGANIZATION_NAME" value="${organizationName}" required>
<div class="valid-feedback"></div>
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
<div class="col mb-1" id="select-div">
<select data-style="input-dropdown" data-width="100%" class="form-select inputOrganizationName select-organization" id="organization-select">
<option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
${organizationOptions}
</select>
</div>
</div>
<div class="form-row mt-2">
@ -568,7 +571,8 @@
`;
creatorList.insertBefore(item, creatorList.lastElementChild);
createOrUpdateSelect2();
createOrUpdateSelectInputAffiliation();
createOrUpdateSelectOrganization();
createOrUpdateDatePicker();
updateContent();
}
@ -584,8 +588,10 @@
const typeElement = creatorsElement[i].getElementsByClassName("inputType")[0];
const type = $(typeElement).find('input:radio:checked').val()
if (type === "Organization") {
const organizationInput = creatorsElement[i].querySelector("select.inputOrganizationName");
creators.push({
name: creatorsElement[i].getElementsByClassName("inputOrganizationName")[0].value.trim(),
name: organizationInput.options[organizationInput.selectedIndex].innerHTML,
id: organizationInput.value,
type: "Organization"
});
} else {
@ -686,7 +692,8 @@
}
for (let i = 0; i < creators.length; i++) {
if (creators[i].type === "Organization") {
addCreator("", "", "", "", creators[i].name, "Organization");
const ror = creators[i].id ? creators[i].id : "";
addCreator("", "", "", ror, creators[i].name, "Organization");
} else {
const firstName = creators[i].givenName ? creators[i].givenName : creators[i].name.split(" ")[0];
const lastName = creators[i].familyName ? creators[i].familyName: creators[i].name.substring(creators[i].name.indexOf(" ") + 1);
@ -812,11 +819,58 @@
function changeLanguage(languageCode) {
i18next.changeLanguage(languageCode);
document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
createOrUpdateSelect2();
createOrUpdateSelectInputAffiliation();
createOrUpdateSelectOrganization();
createOrUpdateDatePicker();
}
function createOrUpdateSelect2() {
function createOrUpdateSelectOrganization() {
$('.select-organization').select2({
language: {
noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")
},
placeholder: i18next.t("LABEL_ORGANIZATION_CHOOSE"),
theme: "bootstrap",
ajax: {
url: 'https://api.ror.org/organizations?query=',
data: function (params) {
return {
query: params.term,
filter: "types:Education"
}
},
processResults: function (data, params) {
let results = [];
if (params.term) {
let localInstitutions = vocabInstitutions.map(institution => ({"name": institution["label"], "id": institution["ror"]}));
let rorInstitutions = data["items"].map(institution => ({"name": institution.name, "id": institution.id}));
let matchedLocalInstitutions = localInstitutions.filter(function(item) {
return item.name.toLowerCase().includes(params.term.toLowerCase());
});
let filteredRorInstitutions = rorInstitutions.filter(function(item) {
return !matchedLocalInstitutions.find(value => value.id == item.id);
});
results = [...matchedLocalInstitutions, ...filteredRorInstitutions];
}
return {
results: $.map(results, function(item) {
return {
text: item.name,
id: item.id
}
})
}
}
}
});
}
function createOrUpdateSelectInputAffiliation() {
$('.select-institution').select2({
language: {
noResults: () => i18next.t("LABEL_NO_INSTITUTION_FOUND")