- 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
This commit is contained in:
Arno Kaimbacher 2023-01-16 15:19:14 +01:00
parent 6295f7ea1c
commit 426228705c
25 changed files with 961 additions and 4286 deletions

View File

@ -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 }],
},
};

4998
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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> -->

View File

@ -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>

View File

@ -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" });
},
},
};

View File

@ -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,

View File

@ -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,

View File

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

View File

@ -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;

View File

@ -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>

View File

@ -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()">

View File

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

View File

@ -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>

View File

@ -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 {

View File

@ -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>

View File

@ -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">

View File

@ -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);
}

View File

@ -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>

View File

@ -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">

View File

@ -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 = {

View File

@ -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"),
});
}
}

View File

@ -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">

View File

@ -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 {

View File

@ -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>