- add dataset-detail.component

- add named router links

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 = "";