From a7570686e4c511a2ddb507696f94921fe8f36539 Mon Sep 17 00:00:00 2001
From: Sophie <6323967-smatts@users.noreply.gitlab.com>
Date: Tue, 27 Jun 2023 12:50:31 +0000
Subject: [PATCH] Use ROR API to search through institutions

---
 i18n/de.json            |  3 +-
 i18n/en.json            |  3 +-
 metadata-generator.html | 62 +++++++++++++++++++++++++++++++++++++++--
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/i18n/de.json b/i18n/de.json
index db40b2e..ad3e815 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -43,5 +43,6 @@
   "LABEL_TITLE": "Titel",
   "LABEL_URL": "URL der Ressource",
   "LABEL_URL_PLACEHOLDER": "Direktlink zur Resource (Voreinstellung GitHub/GitLab Pages URL)",
-  "LABEL_YAML_METADATA": "YAML Metadaten"
+  "LABEL_YAML_METADATA": "YAML Metadaten",
+  "LABEL_NO_INSTITUTION_FOUND": "Keine passende Institution gefunden"
 }
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
index c6d2c0b..ac65b58 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -43,5 +43,6 @@
   "LABEL_TITLE": "Title",
   "LABEL_URL": "Resource URL",
   "LABEL_URL_PLACEHOLDER": "Direct link to the resource (default GitHub/GitLab Pages URL)",
-  "LABEL_YAML_METADATA": "YAML Metadata"
+  "LABEL_YAML_METADATA": "YAML Metadata",
+  "LABEL_NO_INSTITUTION_FOUND": "No matching institution found"
 }
\ No newline at end of file
diff --git a/metadata-generator.html b/metadata-generator.html
index b8ddd5e..32cd660 100644
--- a/metadata-generator.html
+++ b/metadata-generator.html
@@ -12,6 +12,11 @@
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"/>
 
+  <!-- jQuery Select2 -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"/>
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <!-- Latest compiled and minified JavaScript -->
@@ -511,17 +516,20 @@
         <input type="text" class="form-control inputAuthorId" placeholder="Persönliche ID (optional, wie ORCID, GND)" data-i18n-placeholder="LABEL_CREATOR_ID" value="${authorId}">
       </div>
     </div>
+
     <div class="form-row mt-2 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 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>
+      
+      <div class="col-11 mb-1" id="select-div">
+        <select ${customInstitutionSelected ? "disabled":""} data-style="input-dropdown" data-width="100%" class="form-select inputAffiliation select-institution" id="institution-select">
+          <option value="" data-i18n="LABEL_ORGANIZATION_CHOOSE" ${institution === "" ? "selected":""}></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')">
@@ -545,6 +553,7 @@
     `;
 
     creatorList.insertBefore(item, creatorList.lastElementChild);
+    createOrUpdateSelect2();
     updateContent();
   }
 
@@ -779,6 +788,53 @@
   function changeLanguage(languageCode) {
     i18next.changeLanguage(languageCode);
     document.getElementById("selectedLanguageLabel").textContent = languageCode.toUpperCase();
+    createOrUpdateSelect2();
+  }
+
+  function createOrUpdateSelect2() {
+    $('.select-institution').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 updateContent() {