- add sitelink-view-component with portal REST requests

.env

@@ -2,4 +2,4 @@
 NODE_ENV=development
 
 CONSTANT_VALUE=1234567
-VUE_APP_PORTAL=//repository.geologie.ac.at/portal/login
+VUE_APP_PORTAL=//repository.geologie.ac.at/portal

src/app.ts

@@ -8,6 +8,7 @@ import SearchViewComponent from "./views/search-view/search-view-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";
+import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue";
 import { VUE_APP_PORTAL } from "./constants";
 // import VsInput from "./components/vs-input/vs-input.vue";
 // import VsResult from "./components/vs-result/vs-result.vue";
@@ -34,11 +35,12 @@ import { VUE_APP_PORTAL } from "./constants";
         ServiceViewComponent,
         OaiViewComponent,
         ContactViewComponent,
+        SitelinkViewComponent,
     },
 })
 export default class App extends Vue {
     public active = false;
-    public portal = VUE_APP_PORTAL;
+    public portal = VUE_APP_PORTAL + "/login";
 
     mounted(): void {
         // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);

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

@@ -1,7 +1,8 @@
 // import Vue from "vue";
 // import { Component, Prop } from 'vue-property-decorator';
 // import debounce from 'lodash/debounce';
-import { DatasetService } from "../../services/dataset.service";
+// import { DatasetService } from "../../services/dataset.service";
+import DatasetService from "../../services/dataset.service";
 import { SolrSettings } from "@/models/solr";
 // import { ref } from "vue";
 import { Options, Vue } from "vue-class-component";
@@ -29,7 +30,7 @@ export default class VsInput extends Vue {
         core: "rdr_data", // SOLR.core;
         host: "tethys.at",
     };
-    private rdrAPI!: DatasetService;
+    // private rdrAPI!: DatasetService;
     itemRefs!: Array<any>;
     emits = ["filter"];
 
@@ -42,7 +43,7 @@ export default class VsInput extends Vue {
     }
 
     mounted() {
-        this.rdrAPI = new DatasetService();
+        // this.rdrAPI = new DatasetService();
     }
 
     get showResults(): boolean {
@@ -146,7 +147,7 @@ export default class VsInput extends Vue {
     }
 
     private request(): void {
-        this.rdrAPI.searchTerm(this.display, this.solr.core, this.solr.host).subscribe(
+        DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe(
             (res: Dataset[]) => this.dataHandler(res),
             (error: any) => this.errorHandler(error),
             () => (this.loading = false),

src/models/dataset.ts

@@ -30,3 +30,28 @@ export enum SearchType {
     Author = "author",
     Subject = "subject",
 }
+
+export interface DbDataset {
+    id: number;
+    contributing_corporation: string;
+    creating_corporation: string;
+    publisher_name: string;
+    embargo_date: string;
+    publish_id: number;
+    project_id: number;
+    type: string;
+    language: string;
+    server_state: string;
+    belongs_to_bibliography: boolean;
+    created_at: string;
+    server_date_modified: string;
+    server_date_published: string;
+    account_id: number;
+    editor_id: number;
+    reviewer_id: number;
+    preferred_reviewer: number;
+    preferred_reviewer_email: string;
+    reject_editor_note: string;
+    reject_reviewer_note: string;
+    reviewer_note_visible: string;
+}

src/router/index.ts

@@ -5,6 +5,7 @@ import SearchViewComponent from "@/views/search-view/search-view-component";
 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";
+import SitelinkViewComponent from "@/views/sitelink-view/sitelink-view-component.vue";
 
 const routes = [
     {
@@ -37,6 +38,11 @@ const routes = [
         name: "Contact",
         component: ContactViewComponent,
     },
+    {
+        path: "/sitelinks",
+        name: "Sitelinks",
+        component: SitelinkViewComponent,
+    },
 ];
 
 const router = createRouter({

src/services/dataset.service.ts

@@ -2,11 +2,12 @@
 import api from "../api/api";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
-import { Dataset, Suggestion } from "@/models/dataset";
+import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
 import { SolrResponse } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
+import { VUE_APP_PORTAL } from "@/constants";
 
-export class DatasetService {
+class DatasetService {
     // for the autocomplete search
     public searchTerm(term: string, solrCore: string, solrHost: string): Observable<Dataset[]> {
         // solr endpoint
@@ -138,4 +139,27 @@ export class DatasetService {
 
         return stations;
     }
+
+    getYears(): Observable<string[]> {
+        // const heroes = of(HEROES);
+        const host = "https:" + VUE_APP_PORTAL;
+        const path = "/api/years";
+        const base = host + path;
+
+        const years = api.get<string[]>(base);
+        // this.messageService.add('HeroService: fetched heroes');
+        return years;
+    }
+
+    getDocuments(year: string): Observable<Array<DbDataset>> {
+        const host = "https:" + VUE_APP_PORTAL;
+        const path = "/api/sitelinks/" + year;
+        const base = host + path;
+
+        const documents = api.get<Array<DbDataset>>(base);
+        // this.messageService.add('HeroService: fetched heroes');
+        return documents;
+    }
 }
+
+export default new DatasetService();

src/views/home-view/home-view-component.vue

@@ -209,7 +209,8 @@
                                     <a href="#"><i class="fas fa-stamp"></i> Impressum</a>
                                 </li>
                                 <li class="list-group-item">
-                                    <a href="#"><i class="fas fa-link"></i> Sitelinks</a>
+                                    <!-- <a href="#"><i class="fas fa-link"></i> Sitelinks</a> -->
+                                    <router-link to="/sitelinks"><i class="fas fa-link"></i> Sitelinks</router-link>
                                 </li>
                                 <li class="list-group-item">
                                     <a href="#"><i class="far fa-file-alt"></i> Terms &amp; Conditions</a>

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

@@ -4,7 +4,8 @@ import VsResult from "@/components/vs-result/vs-result.vue";
 import FacetCategory from "@/components/face-category/facet-category.vue";
 import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
 import { SolrSettings } from "@/models/solr";
-import { DatasetService } from "@/services/dataset.service";
+// import { DatasetService } from "@/services/dataset.service";
+import DatasetService from "../../services/dataset.service";
 import { Suggestion, Dataset } from "@/models/dataset";
 import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
@@ -39,11 +40,11 @@ export default class SearchViewComponent extends Vue {
         core: "rdr_data", // SOLR.core;
         host: "tethys.at",
     };
-    private rdrAPI!: DatasetService;
+    // private rdrAPI!: DatasetService;
     private error = "";
 
     mounted(): void {
-        this.rdrAPI = new DatasetService();
+        // this.rdrAPI = new DatasetService();
     }
 
     // onSearch(term: string): void {
@@ -68,7 +69,7 @@ export default class SearchViewComponent extends Vue {
 
         // this.facets = {};
         this.searchTerm = suggestion;
-        this.rdrAPI.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+        DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
             (res: SolrResponse) => this.dataHandler(res),
             (error: any) => this.errorHandler(error),
         );
@@ -152,7 +153,7 @@ export default class SearchViewComponent extends Vue {
         if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
             this.activeFilterCategories[facetItem.category].push(facetItem.val);
 
-            this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+            DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
                 (res: SolrResponse) => this.dataHandler(res, facetItem),
                 (error: any) => this.errorHandler(error),
             );
@@ -198,7 +199,7 @@ export default class SearchViewComponent extends Vue {
         // alert(categoryName);
         delete this.activeFilterCategories[categoryName];
 
-        this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
+        DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
             (res: SolrResponse) => {
                 this.results = res.response.docs;
                 this.numFound = res.response.numFound;

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

@@ -0,0 +1,64 @@
+import { Observable, Subscription } from "rxjs";
+import { Options, Vue } from "vue-class-component";
+import DatasetService from "../../services/dataset.service";
+import { DbDataset } from "@/models/dataset";
+
+@Options({
+    name: "SitelinkViewComponent",
+})
+export default class SitelinkViewComponent extends Vue {
+    public years: string[] = [];
+    public selected = "";
+    private error = "";
+    // private subscription!: Subscription;
+    private subscriptions: Array<Subscription> = [];
+    public datasets: Array<DbDataset> = [];
+
+    // constructor() {
+    //     super();
+    //     // this.rdrAPI = new DatasetService();
+    // }
+
+    beforeMount() {
+        // this.rdrAPI = new DatasetService();
+        this.getYears();
+    }
+
+    getYears() {
+        const newSubs: Subscription = DatasetService.getYears().subscribe(
+            (res: string[]) => this.dataHandler(res),
+            (error: any) => this.errorHandler(error),
+            () => newSubs.unsubscribe(),
+        );
+        // this.subscriptions.push(newSubs);
+    }
+
+    beforeUnmount() {
+        //unsunscribe to ensure no memory leaks
+        // this.subscription.unsubscribe();
+        for (const subs of this.subscriptions) {
+            subs.unsubscribe();
+        }
+    }
+
+    select(year: string) {
+        this.selected = year;
+        const newSubs = DatasetService.getDocuments(year).subscribe(
+            (res: Array<DbDataset>) => {
+                this.datasets = res;
+            },
+            (error: any) => this.errorHandler(error),
+        );
+        this.subscriptions.push(newSubs);
+    }
+
+    private dataHandler(res: string[]): void {
+        // this.results = datasets;
+        this.years = res;
+    }
+
+    private errorHandler(err: any): void {
+        this.error = err;
+        // this.loading = false;
+    }
+}

src/views/sitelink-view/sitelink-view-component.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="container">
+        <section class="section">
+            <div class="title has-text-centered">
+                <h1 class="title">Sitelinks for Web Crawlers</h1>
+                <!-- <p class="lead">Want to keep updated or need further information?</p> -->
+                <hr class="center-line" />
+            </div>
+            <!-- <div class="column">
+                <span>
+                    <a href="" v-for="(year, index) in years" :key="index">
+                        {{ year }}
+                    </a>
+                </span>
+            </div> -->
+            <div class="columns is-mobile is-centered">
+                <div class="column is-6">
+                    <div class="list" v-if="years.length > 0">
+                        <ul class="block-list has-radius is-primary">
+                            <li v-for="(year, index) in years" :key="index" :class="{ highlight: year == selected }" @click="select(year)">
+                                {{ year }}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="columns is-mobile is-centered">
+                <div class="column is-6">
+                    <ol v-if="datasets.length > 0">
+                        <li v-for="(dataset, index) in datasets" :key="index">
+                            <div class="post">
+                                <header class="post-header">
+                                    <h2 class="post-title">
+                                        <a>{{ dataset.type }}; {{ dataset.publish_id }}</a>
+                                    </h2>
+                                </header>
+                            </div>
+                        </li>
+                    </ol>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import SitelinkViewComponent from "./sitelink-view-component";
+export default SitelinkViewComponent;
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.block-list li.is-primary,
+.block-list.is-primary > li {
+    background: #00d1b2;
+    color: #fff;
+}
+
+.block-list li.has-radius,
+.block-list.has-radius > li {
+    border-radius: 4px;
+}
+
+.block-list li {
+    padding: 16px;
+    background: #f5f5f5;
+    margin-bottom: 0.25rem;
+}
+
+// .block-list li:hover {
+//     color: red;
+// }
+
+.block-list li.highlight {
+    background: #6b716f;
+}
+</style>