- add dataset-detail.component

- add named router links

src/app.ts

@@ -5,6 +5,7 @@ import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/map-view/help-view-component.vue";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
+import DatasetDetailComponent from "./views/dataset-detail.component.ts/dataset-detail.component.vue";
 import ServiceViewComponent from "./views/services-view/service-view-component.vue";
 import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
 import ContactViewComponent from "./views/contact-view/contact-view-component.vue";
@@ -34,6 +35,7 @@ import { VUE_APP_PORTAL } from "./constants";
         // ActiveFacetCategory,
         HelpViewComponent,
         SearchViewComponent,
+        DatasetDetailComponent,
         ServiceViewComponent,
         OaiViewComponent,
         ContactViewComponent,

src/components/vs-input/vs-input.ts

@@ -27,8 +27,10 @@ export default class VsInput extends Vue {
     private selectedIndex = 0;
     private selectedDisplay = "";
     private solr: SolrSettings = {
-        core: "rdr_data", // SOLR.core;
-        host: "tethys.at",
+        // core: "rdr_data", // SOLR.core;
+        // host: "tethys.at",
+        core: "test_data", // SOLR.core;
+        host: "repository.geologie.ac.at",
     };
     // private rdrAPI!: DatasetService;
     itemRefs!: Array<any>;

src/components/vs-result/vs-result.vue

@@ -17,17 +17,18 @@
                 <span v-if="openAccessLicences.includes(document.licence)" class="label label-success titlecase">Open Access</span> -->
 
                 <h4>
-                    <a
+                    <!-- <a
                         v-if="document.identifier && document.identifier.length > 0"
                         target="_self"
                         v-bind:href="'https://doi.' + getDomainWithoutSubdomain() + '/' + document.identifier[0]"
                         class="ng-binding"
                     >
                         {{ document.title_output }}
-                    </a>
-                    <a v-else target="_self" v-bind:href="'dataset/' + document.id" class="ng-binding">
+                    </a> -->
+                    <!-- <a target="_self" v-bind:href="'dataset/' + document.id" class="ng-binding">
                         {{ document.title_output }}
-                    </a>
+                    </a> -->
+                    <router-link class="ng-binding" :to="{ name: 'dataset', params: { datasetId: document.id } }">{{ document.title_output }}</router-link>
                 </h4>
 
                 <!-- <p v-if="document.author && document.author.length > 0">

src/router/index.ts

@@ -8,6 +8,7 @@ import ContactViewComponent from "@/views/contact-view/contact-view-component.vu
 import SitelinkViewComponent from "@/views/sitelink-view/sitelink-view-component.vue";
 import ImprintViewComponent from "@/views/imprint-view/imprint-view-component.vue";
 import TermsViewComponent from "@/views/terms-view/terms-view-component.vue";
+import DatasetDetailComponent from "@/views/dataset-detail.component.ts/dataset-detail.component.vue";
 
 const routes = [
     {
@@ -25,6 +26,12 @@ const routes = [
         name: "Search",
         component: SearchViewComponent,
     },
+    {
+        path: "/dataset/:datasetId",
+        name: "dataset",
+        component: DatasetDetailComponent,
+        props: true,
+    },
     {
         path: "/services",
         name: "Services",

src/services/dataset.service.ts

@@ -159,6 +159,16 @@ class DatasetService {
         // this.messageService.add('HeroService: fetched heroes');
         return documents;
     }
+
+    public getDataset(id: number): Observable<DbDataset> {
+        const host = "https:" + VUE_APP_PORTAL;
+        const path = "/api/dataset/" + id;
+        const base = host + path;
+
+        const dataset = api.get<DbDataset>(base);
+        // this.messageService.add('HeroService: fetched heroes');
+        return dataset;
+    }
 }
 
 export default new DatasetService();

src/views/dataset-detail.component.ts/dataset-detail.component.ts

@@ -0,0 +1,52 @@
+import { Options, Vue } from "vue-class-component";
+// import DatasetService from "../../services/dataset.service";
+import { DbDataset } from "@/models/dataset";
+import { Prop } from "vue-property-decorator";
+import DatasetService from "../../services/dataset.service";
+import { Subscription } from "rxjs";
+
+@Options({
+    name: "DatasetDetailComponent",
+    // selector: "dataset-detail",
+})
+export default class DatasetDetailComponent extends Vue {
+    @Prop()
+    datasetId!: number;
+
+    private subscriptions: Array<Subscription> = [];
+    private dataset = {};
+    private error = "";
+
+    beforeMount(): void {
+        this.getDataset(this.datasetId);
+    }
+
+    beforeUnmount(): void {
+        //unsunscribe to ensure no memory leaks
+        // this.subscription.unsubscribe();
+        for (const subs of this.subscriptions) {
+            subs.unsubscribe();
+        }
+    }
+
+    private getDataset(id: number): void {
+        const newSub = DatasetService.getDataset(this.datasetId).subscribe(
+            (res: DbDataset) => {
+                this.dataset = res;
+            },
+            (error: string) => this.errorHandler(error),
+        );
+        this.subscriptions.push(newSub);
+    }
+
+    private errorHandler(err: string): void {
+        this.error = err;
+        // this.loading = false;
+    }
+
+    public goBack(): void {
+        // go back by one record, the same as history.back()
+        // router.go(-1);
+        this.$router.go(-1);
+    }
+}

src/views/dataset-detail.component.ts/dataset-detail.component.vue

@@ -0,0 +1,49 @@
+<template v-if="datasetId">
+    <div class="container" v-if="dataset != undefined">
+        <section class="section">
+            <h2>{{ dataset.titles[0].value }} details!</h2>
+            <div class="dataset__blog-meta">published: {{ dataset.server_date_published }}</div>
+            <p class="dataset__abstract">{{ dataset.abstracts[0].value }}</p>
+            <div><label>id: </label>{{ dataset.id }}</div>
+            <button v-on:click="goBack">Back</button>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import DatasetDetailComponent from "./dataset-detail.component";
+export default DatasetDetailComponent;
+</script>
+
+<style scoped lang="scss">
+label {
+    display: inline-block;
+    width: 3em;
+    margin: 0.5em 0;
+    color: #607d8b;
+    font-weight: bold;
+}
+input {
+    height: 2em;
+    font-size: 1em;
+    padding-left: 0.4em;
+}
+button {
+    margin-top: 20px;
+    font-family: Arial;
+    background-color: #eee;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    cursor: hand;
+}
+button:hover {
+    background-color: #cfd8dc;
+}
+button:disabled {
+    background-color: #eee;
+    color: #ccc;
+    cursor: auto;
+}
+</style>

src/views/search-view/search-view-component.ts

@@ -37,8 +37,10 @@ export default class SearchViewComponent extends Vue {
     loaded = false;
     numFound!: number;
     private solr: SolrSettings = {
-        core: "rdr_data", // SOLR.core;
-        host: "tethys.at",
+        // core: "rdr_data", // SOLR.core;
+        // host: "tethys.at",
+        core: "test_data", // SOLR.core;
+        host: "repository.geologie.ac.at",
     };
     // private rdrAPI!: DatasetService;
     private error = "";