First implementation of loading title data via CSL2 API

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "cocoda-sdk": "^3.4.9",
+    "jskos-tools": "^1.0.40",
     "vue": "^3.4.31"
   },
   "devDependencies": {

src/App.vue

@@ -1,7 +1,46 @@
 <script setup>
+import { ref, reactive, watch } from "vue"
+import * as jskos from "jskos-tools"
 import config from "./config.js"
 
 const { version, name } = config
+
+const subjectsApi = "http://localhost:3141"
+const ppninput = ref("")
+
+const state = reactive({
+  schemes: [],
+  ppn: null,
+  loading: true,
+  error: false,
+  titleName: "",
+  subjects: [],
+})
+
+watch(() => state.ppn, async (ppn) => {
+  console.log(`Load ${ppn}`)
+  state.loading = true
+  state.error = false
+  try {
+    const cslResult = await (await fetch(`https://ws.gbv.de/suggest/csl2/?citationstyle=ieee&query=pica.ppn=${ppn}&database=opac-de-627&language=de`)).json()
+    state.titleName = cslResult[1][0]
+    const subjects = await (await fetch(`${subjectsApi}/subjects?record=http://uri.gbv.de/document/opac-de-627:ppn:${ppn}&live=1`)).json()
+    // Add scheme data to subjects
+    subjects.forEach(subject => {
+      subject.inScheme[0] = state.schemes.find(scheme => jskos.compare(scheme, subject.inScheme[0]))
+    })
+    state.subjects = state.schemes.map(scheme => ({ scheme, subjects: subjects.filter(s => jskos.compare(s.inScheme[0], scheme)) })).filter(group => group.subjects.length)
+  } catch (error) {
+    console.error(error)
+    state.error = true
+  }
+  state.loading = false
+})
+
+fetch(`${subjectsApi}/voc`).then(res => res.json()).then(result => {
+  state.schemes = result
+  state.loading = false
+})
 </script>
 
 <template>
@@ -38,7 +77,46 @@ const { version, name } = config
         <p>
           Mit folgendem Formular können Titeldaten aus PICA-Datenbanken abgerufen werden, um diese mit Sacherschließungsdaten (auf Basis von coli-conc Mappings) anzureichern.
         </p>
-        <p>Dieses Tool ist in Entwicklung. Aktuell besteht keine Funktionalität.</p>
+        <p>Dieses Tool ist in Entwicklung.</p>
+        <p>
+          Titel laden
+          <input
+            v-model="ppninput"
+            type="text"
+            placeholder="PPN">
+          <button 
+            :disabled="state.loading || !ppninput"
+            @click="state.ppn = ppninput">
+            Laden
+          </button>
+          <a
+            href=""
+            @click.prevent="ppninput = '389598534'; state.ppn = '389598534'">
+            Ex: 389598534
+          </a>
+        </p>
+        <table v-if="!state.loading && state.ppn">
+          <tbody>
+            <tr>
+              <th>PPN</th>
+              <td>{{ state.ppn }}</td>
+            </tr>
+            <tr>
+              <th>Titel</th>
+              <td>{{ state.titleName }}</td>
+            </tr>
+            <tr>
+              <th>Sacherschließung</th>
+              <td>
+                <p
+                  v-for="{ scheme, subjects } in state.subjects"
+                  :key="scheme.uri">
+                  <b>{{ scheme.VOC.toUpperCase() }}:</b> {{ subjects.map(subject => jskos.notation(subject)).join(", ") }}
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </main>
     <footer class="footer">