Add choice between list and custom organization

Just like in the "Person" tab, it is possible to either enter
a custom organization, or choose one from our list / ror api.
This commit is contained in:
smatts 2023-09-28 13:59:11 +02:00
parent 677e45c681
commit 4b9eccec8c

View file

@ -491,6 +491,18 @@
$('.selectpicker').selectpicker('refresh');
}
function changeOrganizationType(creatorListItem, type) {
const organizationElements = creatorListItem.getElementsByClassName("inputOrganization")
for (const element of organizationElements) {
if (element.classList.contains("customOrganization")) {
element.disabled = type !== "custom";
} else {
element.disabled = type === "custom";
}
}
$('.selectpicker').selectpicker('refresh');
}
function addCreator(firstName = "", lastName = "", authorId = "", institution = "", organizationName = "", type = "Person", affiliationName = "") {
const creatorList = document.getElementById("creator-list");
const item = document.createElement("li");
@ -502,6 +514,7 @@
organizationOptions += '<option value="' + item["ror"] + '"' + (item["ror"] === institution ? ' selected' : '') + '>' + item["label"] + '</option>';
});
let customInstitutionSelected = institution === "" && affiliationName !== "";
let customOrganizationSelected = institution === "" && organizationName !== "";
let radioGroupName = creatorList.childElementCount > 1 ? $(creatorList.lastElementChild.previousElementSibling).find('.inputType').find('input').attr('name') : ''
radioGroupName += 'x'
@ -555,14 +568,28 @@
<input type="text" ${customInstitutionSelected ? "":"disabled"} class="form-control customAffiliation inputAffiliation" placeholder="Institution" data-i18n-placeholder="LABEL_CUSTOM_INSTITUTION" value="${customInstitutionSelected ? affiliationName:""}">
</div>
</div>
<div class="form-row mt-3 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
<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">
<div class="form-row mt-2 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
<div class="col-1 m-auto" style="flex-basis: content">
<input class="organizationType" type="radio" name="organization_${radioGroupName}" aria-label="radio button for organization list" ${customOrganizationSelected ? "":"checked"} value="standard" onclick="changeOrganizationType(this.parentNode.parentNode.parentNode, 'standard')">
</div>
<div class="col-11 mb-1" id="select-div">
<select ${customOrganizationSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="form-select inputOrganization select-organization" id="organization-select">
<option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></option>
${organizationOptions}
</select>
</div>
</div>
<div class="form-row organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
<div class="col-1 m-auto" style="flex-basis: content">
<input class="organizationType" type="radio" name="organization_${radioGroupName}" aria-label="radio button for organization list" ${customOrganizationSelected ? "checked":""} value="custom" onclick="changeOrganizationType(this.parentNode.parentNode.parentNode, 'custom')">
</div>
<div class="col-11">
<input type="text" ${customOrganizationSelected ? "":"disabled"} class="form-control customOrganization inputOrganization" placeholder="Institution" data-i18n-placeholder="LABEL_CUSTOM_INSTITUTION" value="${customOrganizationSelected ? organizationName:""}">
</div>
</div>
</div>
<div class="form-row mt-2">
<div class="col">
<button type="button" onclick="removeCreator(this.parentNode.parentNode.parentNode)" class="btn btn-primary"><i class="fa fa-minus"></i> <span data-i18n="LABEL_CREATOR_REMOVE"> Autor entfernen</span></button>
@ -588,12 +615,25 @@
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");
const organizationTypeElement = creatorsElement[i].querySelector("input.organizationType:checked");
let organizationInput, organization;
if ("custom" === organizationTypeElement.value) {
organizationInput = creatorsElement[i].getElementsByClassName("customOrganization")[0].value.trim();
organization = organizationInput ? {
name: organizationInput
} : undefined;
} else {
organizationInput = creatorsElement[i].querySelector("select.inputOrganization");
organization = organizationInput ? {
name: organizationInput.options[organizationInput.selectedIndex].innerHTML,
id: organizationInput.value
} : undefined;
}
creators.push({
name: organizationInput.options[organizationInput.selectedIndex].innerHTML,
id: organizationInput.value,
name: organization.name,
id: organization.id ? organization.id : undefined,
type: "Organization"
});
})
} else {
const creatorId = creatorsElement[i].getElementsByClassName("inputAuthorId")[0].value;
const affiliationTypeElement = creatorsElement[i].querySelector("input.affiliationType:checked");
@ -692,8 +732,10 @@
}
for (let i = 0; i < creators.length; i++) {
if (creators[i].type === "Organization") {
const name = creators[i].name ? creators[i].name : "";
const ror = creators[i].id ? creators[i].id : "";
addCreator("", "", "", ror, creators[i].name, "Organization");
console.log(creators[i], name, ror);
addCreator("", "", "", ror, 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);