- 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
2023-01-16 15:19:14 +01:00 · 2023-01-16 15:19:14 +01:00 · 426228705c
commit 426228705c
parent 6295f7ea1c
25 changed files with 961 additions and 4286 deletions
--- a/.eslintrc.js
+++ b/.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 }],
-        "prettier/prettier": "error",
-        "@typescript-eslint/indent": ["error", 4],
+        "@typescript-eslint/indent": ["error", 4, { ignoredNodes: ["PropertyDefinition"] }],
+        "arrow-parens": "off",
+        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 }],
    },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~5.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.40.1",
    "@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-typescript": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
    "bulma": "^0.9.3",
-    "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint": "^8.25.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "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"
  }
 }
--- a/src/App.vue
+++ b/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> -->
--- a/src/App2.vue
+++ b/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>
--- a/src/api/config.ts
+++ b/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" });
        },
    },
 };
--- a/src/app.ts
+++ b/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,
--- a/src/app2.ts
+++ b/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,
--- a/src/assets/scss/main-styles.scss
+++ b/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";
--- a/src/components/active-facet-category/ActiveFacetCategory.ts
+++ b/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;
--- a/src/components/active-facet-category/active-facet-category.vue
+++ b/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>
--- a/src/components/face-category/facet-category.vue
+++ b/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()">
--- a/src/components/map/map.component.ts
+++ b/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";
--- a/src/components/simple-search/simple-search-component.vue
+++ b/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>

--- a/src/components/vs-input/vs-input.ts
+++ b/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(
-            (res: Dataset[]) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
-            () => (this.loading = false),
-        );
+        DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe({
+            next: (res: Dataset[]) => this.dataHandler(res),
+            error: (error: string) => this.errorHandler(error),
+            complete: () => (this.loading = false),
+        });
    }

    private dataHandler(datasets: Dataset[]): void {
--- a/src/components/vs-input/vs-input.vue
+++ b/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"
-                            v-on:keydown.up="onArrowUp"
-                            v-on:keydown.enter="onEnter"
+                            @input="searchChanged"
+                            @keydown.down="onArrowDown"
+                            @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">
-                <li class="loading" v-if="isLoading">Loading results...</li>
+            <ul v-show="showResults" class="autocomplete-results pure-u-23-24">
+                <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>
--- a/src/components/vs-result/vs-result.vue
+++ b/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">
--- a/src/views/dataset-detail.component/dataset-detail.component.ts
+++ b/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(
-            (res: DbDataset) => {
+        const newSub = DatasetService.getDataset(id).subscribe({
+            next: (res: DbDataset) => {
                this.dataset = res;
                this.loaded = true;
            },
-            (error: string) => this.errorHandler(error),
-        );
+            error: (error: string) => this.errorHandler(error),
+        });
        this.subscriptions.push(newSub);
    }

--- a/src/views/dataset-detail.component/dataset-detail.component.vue
+++ b/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">
-                                <table id="items" v-if="dataset.hasEmbargoPassed()" class="table is-bordered is-striped">
+                            <div v-if="dataset.files.length > 0" class="column is-9-desktop is-8-tablet">
+                                <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>
--- a/src/views/home-view/home-view-component.vue
+++ b/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">
--- a/src/views/map-view/map-view.component.ts
+++ b/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 = {
--- a/src/views/search-view/search-view-component.ts
+++ b/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(
-            (res: SolrResponse) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
-        );
+        DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
+            next: (res: SolrResponse) => this.dataHandler(res),
+            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(
-            (res: SolrResponse) => {
+        DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
+            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"),
+        });
    }
 }
--- a/src/views/search-view/search-view-component.vue
+++ b/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">
-                    <span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
-                        <active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
+                <div v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0" class="column">
+                    <span v-for="(values, key, index) in activeFilterCategories" v-bind:key="index" class="active-filter-items">
+                        <active-facet-category v-bind:filterItems="values" v-bind:categoryName="key" @clear-facet-category="onClearFacetCategory"></active-facet-category>
                    </span>
                </div>
                <div class="results">
--- a/src/views/sitelink-view/sitelink-view-component.ts
+++ b/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(
-            (res: string[]) => this.dataHandler(res),
-            (error: string) => this.errorHandler(error),
-            () => newSubs.unsubscribe(),
-        );
+        const newSubs: Subscription = DatasetService.getYears().subscribe({
+            next: (res: string[]) => this.dataHandler(res),
+            error: (error: string) => this.errorHandler(error),
+            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(
-            (res: Array<DbDataset>) => {
+        const newSubs: Subscription = DatasetService.getDocuments(year).subscribe({
+            next: (res: Array<DbDataset>) => {
                this.datasets = res;
            },
-            (error: string) => this.errorHandler(error),
-        );
-        this.subscriptions.push(newSubs);
+            error: (error: string) => this.errorHandler(error),
+            complete: () => newSubs.unsubscribe(),
+        });
+        // this.subscriptions.push(newSubs);
    }

    private dataHandler(res: string[]): void {
--- a/src/views/sitelink-view/sitelink-view-component.vue
+++ b/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>