feat: List of sources filterable by genre (#1155)

index.html

@@ -33,7 +33,7 @@
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]beta3/dist/js/bootstrap-select.min.js"></script>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]beta3/dist/css/bootstrap-select.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]beta2/dist/js/bootstrap-select.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]beta2/dist/css/bootstrap-select.min.css" rel="stylesheet">
 </body>
 </html>

src/App.vue

@@ -91,6 +91,13 @@
         <div class="row">
           <div class="col-md-3">
             <p><a href="https://termennetwerk-api.netwerkdigitaalerfgoed.nl">GraphQL Playground</a></p>
+            <p>
+              <router-link
+                :to="{name: 'sources'}"
+              >
+                {{ t('termSources.title') }}
+              </router-link>
+            </p>
             <p>
               <router-link
                 :to="{name: 'reconciliation'}"

src/components/ReconciliationEndpoints.vue

@@ -30,7 +30,7 @@
         <span
           v-for="genre in source.genres.sort((a: { 'name': string}, b: {'name': string}) => a.name.localeCompare(b.name))"
           :key="genre.uri"
-          class="badge badge-pill badge-secondary"
+          class="badge rounded-pill text-bg-secondary"
         >
           {{ genre.name }}
         </span>

src/components/SearchForm.vue

@@ -32,6 +32,12 @@
           >{{ t('search.labelTermSources') }}</label>
           <div class="col-sm-12 col-lg-8">
             <DatasetsSelect />
+            <p class="form-text ms-1">
+              {{ t('search.helpTermSources') }}
+              <router-link to="sources">
+                {{ t('search.termSourcesLink') }}
+              </router-link>
+            </p>
           </div>
         </div>
         <div class="form-group row">

src/components/TerminologySources.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="content">
+    <h1 class="display-5 mb-3">
+      {{ t('termSources.title') }}
+    </h1>
+    <p class="mb-5">
+      {{ t('termSources.intro') }}
+    </p>
+    <suspense>
+      <TerminologySourcesList />
+    </suspense>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import {useI18n} from 'vue-i18n';
+import TerminologySourcesList from './TerminologySourcesList.vue';
+
+export default defineComponent({
+  name: 'TerminologySources',
+  components: {TerminologySourcesList},
+  setup() {
+    const {t} = useI18n();
+    return {t};
+  },
+});
+</script>

src/components/TerminologySourcesList.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-start">
+      <div class="col-3">
+        <p>{{ t('termSources.selectGenres') }}</p>
+        <div
+          v-for="genre in genres"
+          :key="genre.uri"
+          class="mt-1"
+        >
+          <input
+            :id="genre.uri"
+            v-model="selectedGenres"
+            :value="genre.uri"
+            autocomplete="off"
+            class="btn-check"
+            name="genres"
+            type="checkbox"
+          >
+          <label
+            :for="genre.uri"
+            class="btn btn-outline-primary"
+          >{{ genre.name }}</label><br>
+        </div>
+      </div>
+      <div class="col">
+        <p>
+          {{ t('termSources.matchingSources', terminologySources.length) }}
+          <router-link
+            :to="{
+              name: 'home', query: {datasets: terminologySourceUris}
+            }"
+            class="btn btn-primary btn-md ms-1"
+          >
+            {{ t('termSources.search') }}
+            <ArrowRightCircleIcon class="icon" />
+          </router-link>
+        </p>
+        <div class="list-group">
+          <a
+            v-for="source in terminologySources"
+            :key="source.uri"
+            class="list-group-item list-group-item-action"
+            style="text-decoration: none"
+          >
+            <div class="d-flex pb-1 w-100 justify-content-between">
+              <h5 class="mb-1">{{ source.name }}
+                <small class="text-muted">{{ source.creators[0].alternateName }}</small>
+              </h5>
+              <div>
+                <a
+                  :href="source.mainEntityOfPage"
+                  class="btn btn-sm btn-primary ml-2"
+                >
+                  {{ t('search.viewAtSource') }}
+                  <ArrowTopRightOnSquareIcon class="icon" />
+                </a>
+              </div>
+            </div>
+            <p>{{ source.description }}</p>
+            <p>
+              <span
+                v-for="genre in source.genres.sort((a: { 'name': string}, b: {'name': string}) => a.name.localeCompare(b.name))"
+                :key="genre.uri"
+                class="badge rounded-pill text-bg-secondary"
+              >
+                {{ genre.name }}
+              </span>
+            </p>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, reactive, ref} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useClient, useQuery} from 'villus';
+import {Source} from '../query';
+import {ArrowRightCircleIcon, ArrowTopRightOnSquareIcon} from '@heroicons/vue/16/solid';
+
+export default defineComponent({
+  name: 'TerminologySourcesList',
+  components: {ArrowRightCircleIcon, ArrowTopRightOnSquareIcon},
+  async setup() {
+    const {t} = useI18n();
+    useClient({
+      url: import.meta.env.VITE_GRAPHQL_URL,
+    });
+    const {data} = await useQuery({
+      query: 'query Sources { sources { name alternateName mainEntityOfPage description uri creators { uri alternateName } genres { uri name } features { type url } } }',
+      cachePolicy: 'network-only',
+    });
+
+    const selectedGenres = ref([] as string[]);
+    const allGenres = reactive([...data.value.sources.reduce((acc: Map<string, string>, source: Source) => {
+      source.genres.forEach((source => acc.set(source.uri, source.name)));
+      return acc;
+    }, new Map<string, string>())].sort().map(([uri, name]) => ({name, uri})));
+
+    const terminologySources = computed(() => {
+      if (selectedGenres.value.length == 0) {
+        return data.value.sources;
+      }
+      return data.value.sources.filter((source: Source) => source.genres.some(genre => selectedGenres.value.includes(genre.uri)));
+    });
+    const terminologySourceUris = computed(() => terminologySources.value.map((source: Source) => source.uri).join(','));
+
+    return {t, selectedGenres, terminologySources, terminologySourceUris, genres: allGenres, copied: ref(false)};
+  },
+});
+</script>
+
+<style scoped>
+a.btn {
+  text-decoration: none;
+}
+.badge {
+  margin-right: 0.2em;
+}
+</style>

src/index.css

@@ -32,8 +32,17 @@ button.btn-light:focus {
 }
 
 button.btn-primary, a.btn-primary {
-  background-color:#154273;
-  border-color:#154273;
+  background-color: #154273;
+  border-color: #154273;
+}
+
+label.btn-outline-primary {
+  border-color: #154273;
+  color: #154273;
+}
+
+.btn-check {
+  background-color: red !important;
 }
 
 .card:hover {

src/locales/en.json

@@ -10,9 +10,9 @@
     "subtitle": "Frequently asked questions about the Network of Terms",
     "copyUrl": "Copy URL",
     "voor_c": "for managers of heritage collections",
-    "voor_b": "for administrators of terminology resources",
+    "voor_b": "for administrators of terminology sources",
     "voor_o": "for heritage software developers",
-    "voor_r": "for terminology resource providers",
+    "voor_r": "for terminology source providers",
     "title_b":"Frequently Asked Questions about the Network of Terms for managers of heritage collections",
     "title_c":"Frequently asked questions about the Network of Terms for collection administrators at heritage institutions",
     "title_o":"Frequently Asked Questions about the Network of Terms for heritage software developers",
@@ -47,6 +47,8 @@
     "buttonLookup": "Look up",
     "labelQuery": "Search words",
     "labelTermSources": "Terminology sources",
+    "helpTermSources": "Or consult the",
+    "termSourcesLink": "list of terminology sources",
     "labelUri": "Term URI",
     "termsFound": "no terms found | {n} term found | {n} terms found",
     "altLabel": "Alternative label | Alternative labels",
@@ -62,6 +64,13 @@
   "language": {
     "label": "Taal"
   },
+  "termSources": {
+    "title": "List of terminology sources",
+    "selectGenres": "Select one or more genres:",
+    "matchingSources": "no matching sources | {n} matching source | {n} matching sources",
+    "search": "Search in these sources",
+    "intro": "This is the list of terminology sources that you can consult through the Network of Terms."
+  },
   "api": {
     "ServerError": "The term source could not process the request",
     "TimeoutError": "The term source is temporarily unavailable",

src/locales/nl.json

@@ -48,6 +48,8 @@
     "buttonLookup": "Zoeken",
     "labelQuery": "Zoekwoorden",
     "labelTermSources": "Terminologiebronnen",
+    "helpTermSources": "Of bekijk de",
+    "termSourcesLink": "lijst van terminologiebronnen",
     "labelUri": "URI van term",
     "termsFound": "geen termen gevonden | {n} term gevonden | {n} termen gevonden",
     "altLabel": "Alternatief label | Alternatieve labels",
@@ -63,6 +65,13 @@
   "language": {
     "label": "Language"
   },
+  "termSources": {
+    "title": "Lijst van terminologiebronnen",
+    "selectGenres": "Selecteer een of meer genres:",
+    "matchingSources": "geen overeenkomstige bronnen | {n} overeenkomstige bron | {n} overeenkomstige bronnen",
+    "search": "Zoeken in deze bronnen",
+    "intro": "Dit is de lijst van terminologiebronnen die je via het Termennetwerk kunt raadplegen."
+  },
   "api": {
     "ServerError": "De terminologiebron kon de vraag niet verwerken",
     "TimeoutError": "De terminologiebron is tijdelijk niet bereikbaar",

src/query.ts

@@ -54,6 +54,7 @@ export interface Source {
   description: string;
   creators: Creator[];
   features: Feature[];
+  genres: Genre[];
 }
 
 export interface Creator {
@@ -65,3 +66,8 @@ export interface Feature {
   type: string;
   url: string;
 }
+
+export interface Genre {
+  uri: string;
+  name: string;
+}

src/router.ts

@@ -9,6 +9,7 @@ import Contact from './components/ContactInfo.vue';
 import PrivacyStatement from './components/PrivacyStatementNl.vue';
 import SearchForm from './components/SearchForm.vue';
 import LookupForm from './components/LookupForm.vue';
+import TerminologySources from './components/TerminologySources.vue';
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -48,7 +49,13 @@ export const router = createRouter({
       path: '/faq4',
       name: 'faq4',
       component: TheFaq4,
-    },    {
+    },
+    {
+      path: '/sources',
+      name: 'sources',
+      component: TerminologySources,
+    },
+    {
       path: '/reconciliation',
       name: 'reconciliation',
       component: ReconciliationService,