From dc40c1b0aaef949b26736d7de84cb569cd4f4fa3 Mon Sep 17 00:00:00 2001
From: Mirjan Hoffmann <mirjan.hoffmann@tib.eu>
Date: Wed, 9 Mar 2022 08:05:54 +0100
Subject: [PATCH] added import possibility

---
 i18n/de.json            |   4 ++
 i18n/en.json            |   4 ++
 metadata-generator.html | 123 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 125 insertions(+), 6 deletions(-)

diff --git a/i18n/de.json b/i18n/de.json
index 1028393..ebace83 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -1,6 +1,7 @@
 {
   "FORM_HEADING": "OER Metadaten Formular",
   "LABEL_CHOOSE": "Wähle ...",
+  "LABEL_CLOSE": "Schließen",
   "LABEL_CREATOR": "Autor",
   "LABEL_CREATOR_ADD": "weiteren Autor hinzufügen",
   "LABEL_CREATOR_GIVEN_NAME": "Vorname",
@@ -9,6 +10,9 @@
   "LABEL_CREATOR_REMOVE": "Autor entfernen",
   "LABEL_DESCRIPTION": "Zusammenfassung",
   "LABEL_IMAGE_URL": "Vorschaubild URL",
+  "LABEL_IMPORT": "Import",
+  "LABEL_IMPORT_DATA_PLACEHOLDER": "Zu importierende Daten hier einfügen",
+  "LABEL_IMPORT_ERROR_MSG": "Daten konnten nicht importiert werden",
   "LABEL_KEYWORDS": "Schlagworte",
   "LABEL_KEYWORDS_PLACEHOLDER": "Komma getrennte Liste von Schlagworten",
   "LABEL_LANGUAGE": "Sprache",
diff --git a/i18n/en.json b/i18n/en.json
index 5257371..cc1d48f 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,6 +1,7 @@
 {
   "FORM_HEADING": "OER Metadata Form",
   "LABEL_CHOOSE": "Choose ...",
+  "LABEL_CLOSE": "Close",
   "LABEL_CREATOR": "Author",
   "LABEL_CREATOR_ADD": "add Author",
   "LABEL_CREATOR_GIVEN_NAME": "Firstname",
@@ -9,6 +10,9 @@
   "LABEL_CREATOR_REMOVE": "remove Author",
   "LABEL_DESCRIPTION": "Abstract",
   "LABEL_IMAGE_URL": "Thumbnail URL",
+  "LABEL_IMPORT": "Import",
+  "LABEL_IMPORT_DATA_PLACEHOLDER": "Insert data to be imported here",
+  "LABEL_IMPORT_ERROR_MSG": "Data could not be imported",
   "LABEL_KEYWORDS": "Keywords",
   "LABEL_KEYWORDS_PLACEHOLDER": "Comma separated list of keywords",
   "LABEL_LANGUAGE": "Language",
diff --git a/metadata-generator.html b/metadata-generator.html
index 51caeb8..4406936 100644
--- a/metadata-generator.html
+++ b/metadata-generator.html
@@ -20,6 +20,7 @@
   <!-- (Optional) Latest compiled and minified JavaScript translation files -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-de_DE.min.js"></script>
   <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
   <style>
       .btn-primary {
           background-color: #0A1F40;
@@ -44,7 +45,10 @@
     <div class="navbar-brand">
       <img src="logo.svg" height="50" width="116" alt="LOGO">
     </div>
-    <ul class="navbar-nav ml-auto">
+    <form class="form-inline ml-auto mr-3">
+      <button class="btn" type="button" data-toggle="modal" data-target="#importModal">Import</button>
+    </form>
+    <ul class="navbar-nav">
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span id="selectedLanguageLabel">DE</span>
@@ -56,6 +60,26 @@
       </li>
     </ul>
   </nav>
+  <!-- Modal -->
+  <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Import</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <textarea rows="15" class="form-control" id="importData" placeholder="Daten" data-i18n-placeholder="LABEL_IMPORT_DATA_PLACEHOLDER"></textarea>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="LABEL_CLOSE">Schließen</button>
+          <button type="button" class="btn btn-primary" data-i18n="LABEL_IMPORT" onclick="importData()">Import</button>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <div class="container main">
     <h2 style="margin-bottom:40px;" data-i18n="FORM_HEADING">OER Metadaten Formular</h2>
@@ -375,7 +399,7 @@
         break;
       default:
         color = "grey"
-        document.getElementById("choosenLicense").innerText = "keine gültige Lizenz"
+        document.getElementById("choosenLicense").innerText = "keine gültige CC Lizenz"
         document.getElementById("licenseUrl").value = ""
         by.disabled = false;
         sa.disabled = false;
@@ -400,26 +424,26 @@
     return listString;
   }
 
-  function addCreator() {
+  function addCreator(firstName = "", lastName = "", authorId = "") {
     const creatorList = document.getElementById("creator-list");
     const item = document.createElement("li");
     item.setAttribute("class", "list-group-item");
     item.innerHTML = `
     <div class="form-row">
       <div class="col">
-        <input type="text" class="form-control inputGivenName" placeholder="Vorname" data-i18n-placeholder="LABEL_CREATOR_GIVEN_NAME" value="" required>
+        <input type="text" class="form-control inputGivenName" placeholder="Vorname" data-i18n-placeholder="LABEL_CREATOR_GIVEN_NAME" value="${firstName}" required>
           <div class="valid-feedback"></div>
           <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
       </div>
       <div class="col">
-        <input type="text" class="form-control inputFamilyName" placeholder="Nachname" data-i18n-placeholder="LABEL_CREATOR_LAST_NAME" value="" required>
+        <input type="text" class="form-control inputFamilyName" placeholder="Nachname" data-i18n-placeholder="LABEL_CREATOR_LAST_NAME" value="${lastName}" required>
           <div class="valid-feedback"></div>
           <div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
       </div>
     </div>
     <div class="form-row">
       <div class="col">
-        <input type="text" class="form-control inputAuthorId" placeholder="Persönliche ID (optional, wie ORCID, GND)" data-i18n-placeholder="LABEL_CREATOR_ID" value="">
+        <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">
@@ -493,6 +517,93 @@
     document.getElementById("comment").value = meta;
   }
 
+  function setCreators(creators) {
+    const creatorsElement = document.getElementById("creator-list").querySelectorAll(".list-group-item");
+    for (let i = 0; i < creatorsElement.length - 1; i++) {
+      removeCreator(creatorsElement[i]);
+    }
+    for (let i = 0; i < creators.length; i++) {
+      const firstName = creators[i].name.split(" ")[0];
+      const lastName = creators[i].name.substring(creators[i].name.indexOf(" ") + 1);
+      const authorId = creators[i].id ? creators[i].id : "";
+      addCreator(firstName, lastName, authorId);
+    }
+  }
+  function importData() {
+    try {
+      const data = jsyaml.load(document.getElementById("importData").value);
+      const sourceOrganizationIds = data.sourceOrganization ? data.sourceOrganization.map((o) => o.id) : [];
+      const aboutIds = data.about ? data.about.map((o) => o.id) : [];
+      const learningResourceTypeIds = data.learningResourceType ? data.learningResourceType.map((o) => o.id) : [];
+
+      document.getElementById("inputStatus").value = data.creativeWorkStatus ? data.creativeWorkStatus : "Draft";
+      document.getElementById("inputUrl").value = data.id;
+      document.getElementById("inputTitle").value = data.name;
+      setCreators(data.creator ? data.creator : []);
+      document.getElementById("inputTags").value = data.keywords ? data.keywords.join(", ") : "";
+      document.getElementById("inputDescription").value = data.description ? data.description : "";
+      $('#inputLanguage').val(data.inLanguage ? data.inLanguage : []).selectpicker('refresh');
+      $('#inputSourceOrganization').val(sourceOrganizationIds).selectpicker('refresh');
+      $('#inputSubjectOf').val(aboutIds).selectpicker('refresh');
+      setLicense((data.license && data.license.id) ? data.license.id : "")
+      document.getElementById("inputImage").value = data.image ? data.image : "";
+      $('#inputResourceType').val(learningResourceTypeIds).selectpicker('refresh');
+    } catch (e) {
+      console.warn(e);
+      alert(i18next.t("LABEL_IMPORT_ERROR_MSG"));
+    } finally {
+      $('#importModal').modal('hide')
+    }
+  }
+  function setLicense(license) {
+    const by = document.getElementById("inputLicenseBY")
+    const sa = document.getElementById("inputLicenseSA")
+    const nd = document.getElementById("inputLicenseND")
+    const nc = document.getElementById("inputLicenseNC")
+    if (license.startsWith("https://creativecommons.org/publicdomain/zero/")) {
+      by.checked = true;
+      sa.checked = true;
+      nd.checked = true;
+      nc.checked = true;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by/")) {
+      by.checked = false;
+      sa.checked = true;
+      nd.checked = true;
+      nc.checked = true;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by-sa/")) {
+      by.checked = false;
+      sa.checked = false;
+      nd.checked = true;
+      nc.checked = true;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by-nd/")) {
+      by.checked = false;
+      sa.checked = true;
+      nd.checked = false;
+      nc.checked = true;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by-nc/")) {
+      by.checked = false;
+      sa.checked = true;
+      nd.checked = true;
+      nc.checked = false;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by-nc-sa/")) {
+      by.checked = false;
+      sa.checked = false;
+      nd.checked = true;
+      nc.checked = false;
+    } else if (license.startsWith("https://creativecommons.org/licenses/by-nc-nd/")) {
+      by.checked = false;
+      sa.checked = true;
+      nd.checked = false;
+      nc.checked = false;
+    } else {
+      by.checked = false;
+      sa.checked = false;
+      nd.checked = false;
+      nc.checked = false;
+    }
+    chooseLicense();
+  }
+
   async function i18nLoader() {
     const langs = ["en", "de"];
     const jsons = await Promise.all(