Added possibility to set custom institution name

Ref https://gitlab.com/oersi/metadata-form/-/issues/1

i18n/de.json

@@ -10,6 +10,7 @@
   "LABEL_CREATOR_ID": "Persönliche ID (wie ORCID, GND, ...)",
   "LABEL_CREATOR_LAST_NAME": "Nachname",
   "LABEL_CREATOR_REMOVE": "Autor entfernen",
+  "LABEL_CUSTOM_INSTITUTION": "benutzerdefinierte Institution",
   "LABEL_DESCRIPTION": "Zusammenfassung",
   "LABEL_EDUCATIONALLEVEL": "Bildungsstufe",
   "LABEL_EDUCATIONALLEVEL_CHOOSE": "Wähle eine Bildungsstufe ...",

i18n/en.json

@@ -10,6 +10,7 @@
   "LABEL_CREATOR_ID": "Personal ID (like ORCID, GND, ...)",
   "LABEL_CREATOR_LAST_NAME": "Lastname",
   "LABEL_CREATOR_REMOVE": "remove Author",
+  "LABEL_CUSTOM_INSTITUTION": "custom Institution",
   "LABEL_DESCRIPTION": "Abstract",
   "LABEL_EDUCATIONALLEVEL": "Level",
   "LABEL_EDUCATIONALLEVEL_CHOOSE": "Choose a level ...",

metadata-generator.html

@@ -461,7 +461,19 @@
     }
   }
 
-  function addCreator(firstName = "", lastName = "", authorId = "", institution = "", organizationName = "", type = "Person") {
+  function changeAffiliationType(creatorListItem, type) {
+    const affiliationElements = creatorListItem.getElementsByClassName("inputAffiliation")
+    for (const element of affiliationElements) {
+      if (element.classList.contains("customAffiliation")) {
+        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");
     item.setAttribute("class", "list-group-item");
@@ -469,6 +481,7 @@
     $.each(vocabInstitutions, function (i, item) {
       institutionOptions += '<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') : ''
     radioGroupName += 'x'
 
@@ -501,13 +514,24 @@
       </div>
     </div>
     <div class="form-row mt-2 person-element" ${type !== "Person" ? 'style="display:none;"':''}>
-      <div class="col">
+      <div class="col-1 m-auto" style="flex-basis: content">
-        <select data-style="input-dropdown" data-width="100%" class="selectpicker inputAffiliation" data-live-search="true">
+        <input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for institution list" ${customInstitutionSelected ? "":"checked"} value="standard" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'standard')">
+      </div>
+      <div class="col-11">
+        <select ${customInstitutionSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="selectpicker inputAffiliation" data-live-search="true">
           <option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}>Wähle Institution ...</option>
           ${institutionOptions}
         </select>
       </div>
     </div>
+    <div class="form-row person-element" ${type !== "Person" ? 'style="display:none;"':''}>
+      <div class="col-1 m-auto" style="flex-basis: content">
+        <input class="affiliationType" type="radio" name="institution_${radioGroupName}" aria-label="radio button for custom institution" ${customInstitutionSelected ? "checked":""} value="custom" onclick="changeAffiliationType(this.parentNode.parentNode.parentNode, 'custom')">
+      </div>
+      <div class="col-11">
+        <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">
         <input type="text" class="form-control inputOrganizationName" placeholder="Name" data-i18n-placeholder="LABEL_ORGANIZATION_NAME" value="${organizationName}" required>
@@ -543,17 +567,28 @@
         });
       } else {
         const creatorId = creatorsElement[i].getElementsByClassName("inputAuthorId")[0].value;
-        const affiliationInput = creatorsElement[i].querySelector("select.inputAffiliation");
+        const affiliationTypeElement = creatorsElement[i].querySelector("input.affiliationType:checked");
+        let affiliation
+        if ("custom" === affiliationTypeElement.value) {
+          const affiliationInput = creatorsElement[i].getElementsByClassName("customAffiliation")[0].value.trim();
+          affiliation = affiliationInput ? {
+            name: affiliationInput,
+            type: "Organization"
+          } : undefined
+        } else {
+          const affiliationInput = creatorsElement[i].querySelector("select.inputAffiliation");
+          affiliation = affiliationInput.value ? {
+            name: affiliationInput.options[affiliationInput.selectedIndex].innerHTML,
+            id: affiliationInput.value,
+            type: "Organization"
+          } : undefined
+        }
         creators.push({
           givenName: creatorsElement[i].getElementsByClassName("inputGivenName")[0].value.trim(),
           familyName: creatorsElement[i].getElementsByClassName("inputFamilyName")[0].value.trim(),
           id: creatorId ? creatorId : undefined,
           type: "Person",
-          affiliation: affiliationInput.value ? {
+          affiliation: affiliation
-            name: affiliationInput.options[affiliationInput.selectedIndex].innerHTML,
-            id: affiliationInput.value,
-            type: "Organization"
-          } : undefined
         });
       }
     }
@@ -624,7 +659,8 @@
         const lastName = creators[i].familyName ? creators[i].familyName: creators[i].name.substring(creators[i].name.indexOf(" ") + 1);
         const authorId = creators[i].id ? creators[i].id : "";
         const ror = creators[i].affiliation?.id ? creators[i].affiliation.id : "";
-        addCreator(firstName, lastName, authorId, ror);
+        const affiliationName = creators[i].affiliation?.name ? creators[i].affiliation.name : "";
+        addCreator(firstName, lastName, authorId, ror, "", "Person", affiliationName);
       }
     }
   }