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.

metadata-generator.html

@@ -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">
+    <div class="form-row  mt-2 organization-element" ${type !== "Organization" ? 'style="display:none;"':''}>
-        <select data-style="input-dropdown" data-width="100%" class="form-select inputOrganizationName select-organization" id="organization-select">
+      <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,
+          name: organization.name,
-          id: organizationInput.value,
+          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);