Show titles index with DDC notation in K10plus

Related to #26 (show total number). Shows up to 10 titles in citation
format.

src/components/Analyze.vue

@@ -99,6 +99,8 @@
             target="blank">FAQ</a>)
         </p>
       </div>
+      <catalog-titles
+        :notation="result.notation[0]" />
     </div>
   </template>
 </template>
@@ -113,6 +115,7 @@ import { baseNumberIndex, baseNumberFromIndex } from "../../lib/baseNumber.js"
 import { store, languages } from "../store.js"
 
 import ConceptLinks from "./ConceptLinks.vue"
+import CatalogTitles from "./CatalogTitles.vue"
 import LoadingSpinner from "./LoadingSpinner.vue"
 
 import jskos from "jskos-tools"
@@ -137,7 +140,7 @@ const isMemberParentOf = (member1, member2) => {
  */
 
 export default {
-  components: { ConceptLinks, LoadingSpinner },
+  components: { ConceptLinks, CatalogTitles, LoadingSpinner },
   props: {
     notation: {
       type: String,

src/components/CatalogTitles.vue

@@ -0,0 +1,71 @@
+<template>
+  <div v-if="titles.length">
+    <h5>Titles in K10plus catalog</h5>
+    <ul style="list-style-type: none; padding-left: 0">
+      <li v-for="title of titles">
+        <a
+          :href="`https://opac.k10plus.de/DB=2.299/PPNSET?PPN=${title.ppn}`"
+          target="k10plus"
+          title="show in K10plus catalog">
+          📚
+        </a>
+        <span v-html="title.citation" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { watch, ref, computed } from "vue"
+
+export default {
+  props: {
+    notation: {
+      type: String,
+      default: "",
+    },
+    language: {
+      type: String,
+      default: "en",
+    },
+    citationstyle: {
+      type: String,
+      default: "ieee",
+    }
+  },
+  setup(props) {
+    const titles = ref({})
+
+    const fetchTitles = async () => {
+      const { notation, language, citationstyle } = props
+      if (!notation) {
+        titles.value = []
+        return
+      }
+      try {
+        const url = `http://ws.gbv.de/suggest/csl2?query=pica.ddc=${notation}&citationstyle=${citationstyle}&language=${language}&highlight=1`
+        const response = await fetch(url)
+        const data = await response.json()
+        titles.value = data[1].map((title, i) => {
+          const ppn = data[3][i].replace(/^.+:/,'')
+          return { citation: title, ppn }
+        })
+      } catch (error) {
+        titles.value = []
+      }
+    }
+
+    fetchTitles()
+    watch(
+      () => props,
+      async () => { await fetchTitles() },
+      { deep: true },
+    )
+
+    return {
+      fetchTitles,
+      titles
+    }
+  }
+}
+</script>