- libary updates for prettier, eslint and typescript

- uninstall @types/xml2js (save-dev) and core-js (save)
- remove HelloWorld component from app.ts and app2.ts

.eslintrc.js

@@ -1,21 +1,49 @@
 // https://npmmirror.com/package/@typescript-eslint/eslint-plugin/v/5.0.1-alpha.14
 module.exports = {
     root: true,
+    parser: "vue-eslint-parser",
     env: {
         es6: true,
         node: true,
     },
     // extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
-    extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint"],
+    extends: [
+        // "plugin:vue/vue3-essential",
+        "plugin:vue/vue3-recommended",
+        "eslint:recommended",
+        "@vue/typescript/recommended",
+        // "plugin:@typescript-eslint/recommended",
+
+        // "plugin:prettier/recommended",
+        "@vue/prettier",
+        // "@vue/prettier/@typescript-eslint"
+    ],
+    // plugins: ["@typescript-eslint"],
     parserOptions: {
         ecmaVersion: 2020,
+        sourceType: "module",
+        // parser: "@typescript-eslint/parser",
     },
     rules: {
         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-        // 'prettier/prettier': ['error', { printWidth: 120 }],
+        "@typescript-eslint/indent": ["error", 4, { ignoredNodes: ["PropertyDefinition"] }],
-        "prettier/prettier": "error",
+        "arrow-parens": "off",
-        "@typescript-eslint/indent": ["error", 4],
+        semi: "error",
         // "@vue-eslint/printWidth": ["error", 120],
+        "vue/v-bind-style": ["warn", "longform"], //autofix
+        "vue/prop-name-casing": ["error", "camelCase"],
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md
+        "vue/attribute-hyphenation": [
+            "error",
+            "never",
+            {
+                ignore: [],
+            },
+        ],
+
+        // 'prettier/prettier': ['error', { printWidth: 120 }],
+        //  "prettier/prettier": "error",
+        "prettier/prettier": ["error", { singleQuote: false }],
     },
 };

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint --check",
+    "lint2": "eslint ./src --ext .js,.ts",
     "format": "prettier --check src/**/*.ts"
   },
   "dependencies": {
@@ -13,7 +14,6 @@
     "@openfonts/open-sans_all": "^1.44.2",
     "axios": "^1.2.2",
     "class-transformer": "^0.5.1",
-    "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
     "leaflet": "^1.7.1",
     "qs": "^6.10.1",
@@ -26,25 +26,23 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.7.9",
-    "@types/xml2js": "^0.4.9",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^5.40.1",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~5.0.4",
     "@vue/cli-plugin-eslint": "~5.0.4",
     "@vue/cli-plugin-typescript": "~5.0.4",
     "@vue/cli-service": "~5.0.4",
     "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "bulma": "^0.9.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.25.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^9.9.0",
     "node-polyfill-webpack-plugin": "^2.0.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.1",
     "sass": "^1.26.5",
     "sass-loader": "^13.0.0",
-    "typescript": "~4.7.4",
+    "typescript": "^4.8.4",
     "webpack": "^5.72.1"
   }
 }

src/App.vue

@@ -13,13 +13,13 @@
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>
-            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" :class="active ? 'is-active' : ''" @click="showMobilemenu">
+            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" v-bind:class="active ? 'is-active' : ''" @click="showMobilemenu">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
             </a>
         </div>
-        <div id="navMenu" class="navbar-menu" :class="active ? 'is-active' : ''">
+        <div id="navMenu" class="navbar-menu" v-bind:class="active ? 'is-active' : ''">
             <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->

src/App2.vue

@@ -7,13 +7,13 @@
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>
-            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" :class="active ? 'is-active' : ''" @click="showMobilemenu">
+            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" v-bind:class="active ? 'is-active' : ''" @click="showMobilemenu">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
             </a>
         </div>
-        <div id="navMenu" class="navbar-menu" :class="active ? 'is-active' : ''">
+        <div id="navMenu" class="navbar-menu" v-bind:class="active ? 'is-active' : ''">
             <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
                 <li class="navbar-item">
                     <a class="navbar-link is-arrowless active" v-bind:href="app_url">STARTSEITE</a>

src/api/config.ts

@@ -1,5 +1,5 @@
 import { AxiosRequestConfig } from "axios";
-import * as qs from "qs";
+import { stringify } from "qs";
 
 export const axiosRequestConfiguration: AxiosRequestConfig = {
     // responseType: "text",
@@ -17,7 +17,7 @@ export const axiosRequestConfiguration: AxiosRequestConfig = {
 
     paramsSerializer: {
         serialize: (params: Record<string, number>) => {
-            return qs.stringify(params, { arrayFormat: "repeat" });
+            return stringify(params, { arrayFormat: "repeat" });
         },
     },
 };

src/app.ts

@@ -1,6 +1,5 @@
 import { Component, Vue, Watch } from "vue-facing-decorator";
 // import { RouteLocation } from "vue-router";
-import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/help-view/help-view-component.vue";
 import MapViewComponent from "./views/map-view/map-view.component.vue";
@@ -27,7 +26,7 @@ import { VUE_APP_PORTAL } from "./constants";
 // https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
 @Component({
     components: {
-        HelloWorld,
+        // HelloWorld,
         HomeViewComponent,
         // VsInput,
         // VsResult,

src/app2.ts

@@ -1,6 +1,5 @@
 import { Component, Vue, Watch } from "vue-facing-decorator";
 // import { RouteLocation } from "vue-router";
-import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/help-view/help-view-component.vue";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
@@ -26,7 +25,7 @@ import { APP_URL, VUE_APP_PORTAL } from "./constants";
 // https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
 @Component({
     components: {
-        HelloWorld,
+        // HelloWorld,
         HomeViewComponent,
         // VsInput,
         // VsResult,

src/assets/scss/main-styles.scss

@@ -2,7 +2,7 @@
 // @import "~bulma";
 // @import "@fontsource/open-sans"; // Defaults to weight 400.
 @import "~@openfonts/open-sans_all/index.css";
-@import '~leaflet/dist/leaflet.css';
+// @import '~leaflet/dist/leaflet.css';
 
 // 1. Import the initial variables
 @import "~bulma/sass/utilities/_all.sass";

src/components/active-facet-category/ActiveFacetCategory.ts

@@ -16,6 +16,7 @@ export default class ActiveFacetCategory extends Vue {
     // @Prop([String])
     @Prop({
         type: String,
+        required: true,
     })
     categoryName!: string;
 
@@ -51,7 +52,7 @@ export default class ActiveFacetCategory extends Vue {
     //     }
     // }
 
-    @Emit("clearFacetCategory")
+    @Emit("clear-facet-category")
     deactivateFacetCategory(): string {
         // filterItem.Category = this.alias;
         // filterItem.Active = true;

src/components/active-facet-category/active-facet-category.vue

@@ -1,9 +1,9 @@
 <template>
     <div>
-        <input v-bind:id="alias" v-bind:name="alias" type="checkbox" checked="checked" @click.prevent="deactivateFacetCategory()" class="css-checkbox" />
+        <input v-bind:id="alias" v-bind:name="alias" type="checkbox" checked="checked" class="css-checkbox" @click.prevent="deactivateFacetCategory()" />
         <label v-bind:for="alias" class="css-label">
             <span>{{ alias + ": " }}</span>
-            <a class="gbaterm" v-if="filterItems && filterItems.length > 0">{{ filterItems.join(", ") }}</a>
+            <a v-if="filterItems && filterItems.length > 0" class="gbaterm">{{ filterItems.join(", ") }}</a>
         </label>
     </div>
 </template>

src/components/face-category/facet-category.vue

@@ -7,9 +7,9 @@
         <div class="panel-body">
             <!-- e.g.language -->
             <ul class="filter-items list-unstyled" v-bind:class="{ limited: facetItems.length > 1 && collapsed }">
-                <li v-for="(item, index) in facetItems" :key="index" class="list-group-item titlecase">
+                <li v-for="(item, index) in facetItems" v-bind:key="index" class="list-group-item titlecase">
                     <!-- <span :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span> -->
-                    <span :class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
+                    <span v-bind:class="item.active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
                 </li>
             </ul>
             <!-- <ul class="overflowing" v-if="overflowing == true">
@@ -18,7 +18,7 @@
                 </li>
             </ul> -->
         </div>
-        <div class="card-footer" v-if="facetItems.length > 2">
+        <div v-if="facetItems.length > 2" class="card-footer">
             <p class="card-footer-item">
                 <!-- <span @click="toggle()">{{ uncollapseLabelText }}</span> -->
                 <span v-if="collapsed" @click="toggle()">

src/components/map/map.component.ts

@@ -1,6 +1,4 @@
 import { Component, Vue, Prop } from "vue-facing-decorator";
-// import { Prop, Emit } from "vue-property-decorator";
-// import { Prop } from "vue-property-decorator";
 import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer, TileLayer, CRS } from "leaflet";
 // import { LayerOptions } from "./map-options";
 // import DatasetService from "../../services/dataset.service";

src/components/simple-search/simple-search-component.vue

@@ -3,7 +3,7 @@
         <div class="search-box mx-auto">
             <div class="field has-addons main-search-from-bg">
                 <div class="control is-expanded">
-                    <input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
+                    <input id="search_query" v-model="display" class="input is-medium" type="text" name="q" autocomplete="off" />
                     <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
                 </div>
 

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

@@ -153,11 +153,11 @@ export default class VsInput extends Vue {
     }
 
     private request(): void {
-        DatasetService.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),
+            next: (res: Dataset[]) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-            () => (this.loading = false),
+            complete: () => (this.loading = false),
-        );
+        });
     }
 
     private dataHandler(datasets: Dataset[]): void {

src/components/vs-input/vs-input.vue

@@ -6,19 +6,19 @@
                 <div class="field has-addons main-search-from-bg">
                     <div class="control is-expanded">
                         <input
-                            v-on:input="searchChanged"
                             id="search_query"
+                            v-model="display"
                             class="input is-medium"
                             type="text"
                             name="q"
                             autocomplete="off"
-                            v-model="display"
                             v-bind:placeholder="placeholder"
-                            v-on:keydown.down="onArrowDown"
+                            @input="searchChanged"
-                            v-on:keydown.up="onArrowUp"
+                            @keydown.down="onArrowDown"
-                            v-on:keydown.enter="onEnter"
+                            @keydown.up="onArrowUp"
+                            @keydown.enter="onEnter"
                             @keydown.tab="close"
-                            v-on:focus="focus"
+                            @focus="focus"
                         />
                         <!-- <p>Display is: {{ display }}</p> -->
                         <!-- v-on:input="searchChanged" -->
@@ -35,17 +35,17 @@
         </div>
         <!-- <div class="column is-half is-offset-one-quarter"> -->
         <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
-            <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
+            <ul v-show="showResults" class="autocomplete-results pure-u-23-24">
-                <li class="loading" v-if="isLoading">Loading results...</li>
+                <li v-if="isLoading" class="loading">Loading results...</li>
 
                 <li
-                    v-else
                     v-for="(result, i) in suggestions"
-                    :key="i"
+                    v-else
+                    v-bind:key="i"
+                    v-bind:ref="setItemRef"
                     class="autocomplete-result-item"
-                    :class="{ 'is-active': isSelected(i) }"
+                    v-bind:class="{ 'is-active': isSelected(i) }"
                     @click.prevent="select(result)"
-                    :ref="setItemRef"
                 >
                     <div class="small-label">
                         <label>{{ result.value }} ({{ result.type }})</label>

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

@@ -1,5 +1,5 @@
 <template>
-    <div v-for="document in results" :key="document.id">
+    <div v-for="document in results" v-bind:key="document.id">
         <div class="card result-list-container">
             <div class="card-content record-elem">
                 <p v-if="document.identifier && document.identifier.length > 0">
@@ -7,7 +7,7 @@
                     <!-- <span v-for="(author,index) in document.author" :key="index">{{ author }}; </span> -->
                     <!-- <span>'https://doi.org/' + {{ document.identifier[0] }}</span> -->
                     <a target="_blank" v-bind:href="'https://doi.org/' + document.identifier[0]"> {{ "https://doi.org/" + document.identifier[0] + " &#10148;" }} </a>&nbsp;
-                    <span class="disabled" v-if="document.author && document.author.length > 0">{{ document.author[0] }}</span>
+                    <span v-if="document.author && document.author.length > 0" class="disabled">{{ document.author[0] }}</span>
                 </p>
 
                 <!-- <span class="label label-info" data-container="div" data-title="Publication date">
@@ -28,7 +28,7 @@
                     <!-- <a target="_self" v-bind:href="'dataset/' + document.id" class="ng-binding">
                         {{ document.title_output }}
                     </a> -->
-                    <router-link class="ng-binding" :to="{ name: 'dataset', params: { datasetId: document.id } }">{{ document.title_output }}</router-link>
+                    <router-link class="ng-binding" v-bind:to="{ name: 'dataset', params: { datasetId: document.id } }">{{ document.title_output }}</router-link>
                 </h4>
 
                 <!-- <p v-if="document.author && document.author.length > 0">

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

@@ -71,13 +71,13 @@ export default class DatasetDetailComponent extends Vue {
     }
 
     private getDataset(id: number): void {
-        const newSub = DatasetService.getDataset(id).subscribe(
+        const newSub = DatasetService.getDataset(id).subscribe({
-            (res: DbDataset) => {
+            next: (res: DbDataset) => {
                 this.dataset = res;
                 this.loaded = true;
             },
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-        );
+        });
         this.subscriptions.push(newSub);
     }
 

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

@@ -38,9 +38,9 @@
             </div>
         </div> -->
         <!-- <simple-search-component></simple-search-component> -->
-        <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
+        <vs-input v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
     </div>
-    <section class="section" v-if="loaded">
+    <section v-if="loaded" class="section">
         <div class="container">
             <!-- <span class="is-size-5"> Basic Table </span>
             <br /> -->
@@ -64,7 +64,7 @@
                     </div>
 
                     <div class="card record-elem">
-                        <div class="columns" v-if="dataset.hasOwnProperty('titles')">
+                        <div v-if="dataset.hasOwnProperty('titles')" class="columns">
                             <div class="column is-3-desktop is-4-tablet label">Title/<br />title:</div>
                             <!-- <div class="column is-9-desktop is-8-tablet">{{ dataset.titles[0].value }}</div> -->
                             <div class="column is-9-desktop is-8-tablet">
@@ -75,7 +75,7 @@
                                 </p>
                             </div>
                         </div>
-                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                        <div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
                             <div class="column is-3-desktop is-4-tablet label">
                                 Zusammenfassung/<br />
                                 abstract:
@@ -88,29 +88,29 @@
                                 </p>
                             </div>
                         </div>
-                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                        <div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
                             <div class="column is-3-desktop is-4-tablet label">Serieninformation/<br />series information:</div>
-                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasSeriesInformationAbstract()">
+                            <div v-if="dataset.hasSeriesInformationAbstract()" class="column is-9-desktop is-8-tablet">
                                 <p>{{ dataset.SeriesInformationAbstract?.value }}</p>
                                 <br />
                                 <p v-if="dataset.hasTranslatedSeriesInformationAbstract()">
                                     {{ dataset.TranslatedSeriesInformationAbstract?.value }}
                                 </p>
                             </div>
-                            <div class="column is-9-desktop is-8-tablet" v-else>-</div>
+                            <div v-else class="column is-9-desktop is-8-tablet">-</div>
                         </div>
-                        <div class="columns" v-if="dataset.hasOwnProperty('abstracts')">
+                        <div v-if="dataset.hasOwnProperty('abstracts')" class="columns">
                             <div class="column is-3-desktop is-4-tablet label">Methodik/<br />method:</div>
-                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.hasMethodsAbstract()">
+                            <div v-if="dataset.hasMethodsAbstract()" class="column is-9-desktop is-8-tablet">
                                 {{ dataset.MethodsAbstract.value }}
                             </div>
-                            <div class="column is-9-desktop is-8-tablet" v-else>-</div>
+                            <div v-else class="column is-9-desktop is-8-tablet">-</div>
                         </div>
 
                         <div class="columns">
                             <div class="column is-3-desktop is-4-tablet label">Downloads/<br />downloads:</div>
-                            <div class="column is-9-desktop is-8-tablet" v-if="dataset.files.length > 0">
+                            <div v-if="dataset.files.length > 0" class="column is-9-desktop is-8-tablet">
-                                <table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
+                                <table v-if="dataset.hasEmbargoPassed()" id="items" class="table is-bordered is-striped">
                                     <thead>
                                         <tr>
                                             <th class="table-header">Path Name</th>
@@ -119,7 +119,7 @@
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr v-for="file in dataset.files" :key="file.id">
+                                        <tr v-for="file in dataset.files" v-bind:key="file.id">
                                             <td>
                                                 <a class="link-label" target="_blank" v-bind:href="portal + file.id"> {{ file.label }} </a>
                                             </td>
@@ -210,7 +210,7 @@
                         <div class="column">
                             <h3 class="label uppercase">Lizenz/License</h3>
                             <p v-if="dataset.hasLicenses()">
-                                <label v-for="license in dataset.licenses" :key="license.id">
+                                <label v-for="license in dataset.licenses" v-bind:key="license.id">
                                     <span class="normal label">
                                         {{ license.name }}
                                     </span>

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

@@ -47,7 +47,7 @@
             <img src="https://bulma.io/images/placeholders/256x256.png" />
         </figure> -->
         <!-- class="columns help u-full-width featured-bg-image"> -->
-        <section data-sr id="help" class="header-image align-items-center h-100">
+        <section id="help" data-sr class="header-image align-items-center h-100">
             <!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
                 <div class="search-box mx-auto">
                     <div class="field has-addons main-search-from-bg">
@@ -62,7 +62,7 @@
                     </div>
                 </div>
             </div> -->
-            <vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
+            <vs-input v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
         </section>
 
         <div class="container">

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

@@ -1,5 +1,6 @@
 import { Component, Vue } from "vue-facing-decorator";
-import MapComponent from "@/components/map/map.component.vue";
+import { defineAsyncComponent } from "vue";
+// import MapComponent from "@/components/map/map.component.vue";
 // import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
 import { MapOptions } from "leaflet";
 
@@ -10,8 +11,11 @@ import { MapOptions } from "leaflet";
 @Component({
     name: "MapViewComponent",
     components: {
-        MapComponent,
+        MapComponent: defineAsyncComponent(() => import("@/components/map/map.component.vue")),
     },
+    // components: {
+    //     MapComponent,
+    // },
 })
 export default class MapViewComponent extends Vue {
     public mapOptions: MapOptions = {

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

@@ -121,10 +121,10 @@ export default class SearchViewComponent extends Vue {
 
         // this.facets = {};
         this.searchTerm = suggestion;
-        DatasetService.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),
+            next: (res: SolrResponse) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-        );
+        });
     }
 
     private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
@@ -251,8 +251,8 @@ export default class SearchViewComponent extends Vue {
         // alert(categoryName);
         delete this.activeFilterCategories[categoryName];
 
-        DatasetService.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) => {
+            next: (res: SolrResponse) => {
                 this.results = res.response.docs;
                 this.numFound = res.response.numFound;
 
@@ -291,7 +291,8 @@ export default class SearchViewComponent extends Vue {
                     }
                 }
             },
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-        );
+            complete: () => console.log("complete"),
+        });
     }
 }

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

@@ -1,7 +1,7 @@
 <template>
     <div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
         <div class="container-fluid banner mz-5">
-            <vs-input v-on:search-change="onSearch" v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'"></vs-input>
+            <vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
         </div>
         <div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
             <!-- <div class="tabs is-centered">
@@ -27,7 +27,7 @@
                 </ul>
             </div> -->
             <div v-if="results.length > 0" class="result-list-info">
-                <div class="resultheader" v-if="hasSearchTerm()">
+                <div v-if="hasSearchTerm()" class="resultheader">
                     Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
                 </div>
             </div>
@@ -57,7 +57,7 @@
         <div class="columns">
             <div id="id-side-bar" class="column is-4 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem; padding-left: 1.5rem">
                 <div id="externals" class="">
-                    <div v-for="(facetItems, key, index) in facets" :key="index" name="external_card" style="margin-bottom: 0px">
+                    <div v-for="(facetItems, key, index) in facets" v-bind:key="index" name="external_card" style="margin-bottom: 0px">
                         <facet-category v-bind:facetItems="facetItems" v-bind:filterName="key" @filter="onFilter"></facet-category>
                     </div>
                     <!-- <div class="card" name="external_card" style="margin-bottom: 0px">
@@ -109,9 +109,9 @@
             </div>
 
             <div class="col col-8 column is-8 results_column" style="padding-top: 1.2rem; padding-right: 1rem; padding-left: 1rem">
-                <div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
+                <div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
-                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
+                    <span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
-                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
+                        <active-facet-category v-bind:filterItems="values" v-bind:categoryName="key" @clear-facet-category="onClearFacetCategory"></active-facet-category>
                     </span>
                 </div>
                 <div class="results">

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

@@ -25,11 +25,11 @@ export default class SitelinkViewComponent extends Vue {
     }
 
     getYears(): void {
-        const newSubs: Subscription = DatasetService.getYears().subscribe(
+        const newSubs: Subscription = DatasetService.getYears().subscribe({
-            (res: string[]) => this.dataHandler(res),
+            next: (res: string[]) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-            () => newSubs.unsubscribe(),
+            complete: () => newSubs.unsubscribe(),
-        );
+        });
         // this.subscriptions.push(newSubs);
     }
 
@@ -43,13 +43,14 @@ export default class SitelinkViewComponent extends Vue {
 
     select(year: string): void {
         this.selected = year;
-        const newSubs = DatasetService.getDocuments(year).subscribe(
+        const newSubs: Subscription = DatasetService.getDocuments(year).subscribe({
-            (res: Array<DbDataset>) => {
+            next: (res: Array<DbDataset>) => {
                 this.datasets = res;
             },
-            (error: string) => this.errorHandler(error),
+            error: (error: string) => this.errorHandler(error),
-        );
+            complete: () => newSubs.unsubscribe(),
-        this.subscriptions.push(newSubs);
+        });
+        // this.subscriptions.push(newSubs);
     }
 
     private dataHandler(res: string[]): void {

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

@@ -15,9 +15,9 @@
             </div> -->
             <div class="columns is-centered">
                 <div class="column is-6-desktop">
-                    <div class="list" v-if="years.length > 0">
+                    <div v-if="years.length > 0" class="list">
                         <ul class="block-list has-radius is-primary">
-                            <li v-for="(year, index) in years" :key="index" :class="{ highlight: year == selected }" @click="select(year)">
+                            <li v-for="(year, index) in years" v-bind:key="index" v-bind:class="{ highlight: year == selected }" @click="select(year)">
                                 {{ year }}
                             </li>
                         </ul>
@@ -27,7 +27,7 @@
             <div class="columns is-centered">
                 <div class="column is-6-desktop">
                     <ol v-if="datasets.length > 0">
-                        <li v-for="(dataset, index) in datasets" :key="index">
+                        <li v-for="(dataset, index) in datasets" v-bind:key="index">
                             <div class="post">
                                 <header class="post-header">
                                     <h2 class="post-title">
@@ -39,11 +39,11 @@
                                 </div>
                                 <div class="post-description">
                                     <!-- @foreach ($document->authors as $author) -->
-                                    <div v-for="(author, index) in dataset.authors" :key="index">
+                                    <div v-for="(author, index_a) in dataset.authors" v-bind:key="index_a">
                                         <em>Author: {{ author.full_name }}</em>
                                         <br />
                                     </div>
-                                    <div v-for="(title, index) in dataset.titles" :key="index">
+                                    <div v-for="(title, index_t) in dataset.titles" v-bind:key="index_t">
                                         <em>{{ title.type }}: {{ title.value }}</em>
                                         <br />
                                     </div>