geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- vue-cli upgrade 4.5 to 5.0.4

Browse Source 
- npm updates for rxjs, axios, sass-loader, typescript and eslint
- adapt eslint and prettier
This commit is contained in:
Arno Kaimbacher 2022-05-31 16:37:41 +02:00
parent 5fb850165e
commit 2a5c21806f
14 changed files with 7305 additions and 15109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc.js
View File

@ -1,17 +1,10 @@
module.exports = {
root: true,
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"],
parserOptions: {
ecmaVersion: 2020,
},

22145
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@ -6,18 +6,18 @@
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"format": "prettier --write 'src/**/*.{ts,tsx}'"
"format": "prettier --check src/**/*.ts"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"@openfonts/open-sans_all": "^1.44.2",
"axios": "^0.26.1",
"axios": "^0.27.2",
"class-transformer": "^0.5.1",
"core-js": "^3.6.5",
"dayjs": "^1.10.7",
"leaflet": "^1.7.1",
"qs": "^6.10.1",
"rxjs": "^6.6.0",
"rxjs": "^7.5.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-matomo": "^4.1.0",
@ -30,20 +30,22 @@
"@types/xml2js": "^0.4.9",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.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-typescript": "^7.0.0",
"bulma": "^0.9.3",
"eslint": "^6.7.2",
"eslint": "^7.32.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"node-polyfill-webpack-plugin": "^1.1.4",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "^4.5.2"
"sass-loader": "^13.0.0",
"typescript": "^4.7.2",
"webpack": "^5.72.1"
}
}

3
src/components/face-category/FacetCategory.ts
View File

@ -1,8 +1,7 @@
import { FacetItem } from "@/models/headers";
import { FilterItem } from "@/models/solr";
// import { FilterItem } from "@/models/solr";
import { Options, Vue } from "vue-class-component";
import { Prop, Emit } from "vue-property-decorator";
// import FilterItem from '../models/filter-item';
@Options({
name: "FacetCategory",

3
src/components/map/map-options.ts
View File

@ -10,5 +10,4 @@ export interface LayerOptions {
// export type LayerMap = Map<string, LayerOptions>;
export class LayerMap extends Map<string, LayerOptions> {
}
export class LayerMap extends Map<string, LayerOptions> {}

8
src/components/map/map.component.ts
View File

@ -1,7 +1,8 @@
import { Options, Vue } from "vue-class-component";
import { Prop, Emit } from "vue-property-decorator";
// import { Prop, Emit } from "vue-property-decorator";
import { Prop } from "vue-property-decorator";
import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer } from "leaflet";
import { LayerOptions } from "./map-options";
// import { LayerOptions } from "./map-options";
import DatasetService from "../../services/dataset.service";
import { Subscription } from "rxjs";
import { OaiDataset } from "@/models/oai";
@ -110,7 +111,8 @@ export default class MapComponent extends Vue {
</p>`);
}
private addBaseMap(layerOptions?: LayerOptions): void {
// private addBaseMap(layerOptions?: LayerOptions): void {
private addBaseMap(): void {
if (this.map) {
const map = this.map.setView([47.7, 13.5], 7);
const southWest = new LatLng(46.5, 9.9),

16
src/components/vs-input/vs-input.ts
View File

@ -38,18 +38,18 @@ export default class VsInput extends Vue {
// host: "repository.geologie.ac.at",
};
// private rdrAPI!: DatasetService;
itemRefs!: Array<any>;
itemRefs!: Array<Element>;
emits = ["filter"];
setItemRef(el: any) {
setItemRef(el: Element): void {
this.itemRefs.push(el);
}
beforeUpdate() {
beforeUpdate(): void {
this.itemRefs = [];
}
mounted() {
mounted(): void {
// this.rdrAPI = new DatasetService();
}
@ -156,7 +156,7 @@ 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: any) => this.errorHandler(error),
(error: string) => this.errorHandler(error),
() => (this.loading = false),
);
}
@ -167,7 +167,7 @@ export default class VsInput extends Vue {
// this.loading = false;
}
private errorHandler(err: any): void {
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
@ -181,7 +181,7 @@ export default class VsInput extends Vue {
return key === this.selectedIndex;
}
onArrowDown(ev: any): void {
onArrowDown(ev: Event): void {
ev.preventDefault();
if (this.selectedIndex === null) {
this.selectedIndex = 0;
@ -200,7 +200,7 @@ export default class VsInput extends Vue {
});
}
onArrowUp(ev: any): void {
onArrowUp(ev: Event): void {
ev.preventDefault();
if (this.selectedIndex === null) {
this.selectedIndex = this.suggestions.length - 1;

42
src/notes.txt
View File

@ -87,3 +87,45 @@ https://www.programmerall.com/article/19972027526/
======================== xml2js ==========================================================
npm install --save xml2js
npm i --save-dev @types/xml2js
============================== upgrade cli-Service =========================================
https://cli.vuejs.org/migrations/migrate-from-v4.html
vue --version
@vue/cli 5.0.4
vue upgrade
continue to upgrade these plugins?
Name Installed Wanted Latest Command to upgrade
@vue/cli-service 4.5.17 4.5.17 5.0.4 vue upgrade @vue/cli-service
@vue/cli-plugin-babel 4.5.17 4.5.17 5.0.4 vue upgrade @vue/cli-plugin-babel
@vue/cli-plugin-eslint 4.5.17 4.5.17 5.0.4 vue upgrade @vue/cli-plugin-eslint
@vue/cli-plugin-typescript 4.5.17 4.5.17 5.0.4 vue upgrade @vue/cli-plugin-typescript
npm install --save-dev node-polyfill-webpack-plugin
vue.config.js:
1.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
2.
// devServer: {
// disableHostCheck: true,
// },
3.
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
VUE_APP_PORTAL: JSON.stringify(process.env.VUE_APP_PORTAL),
SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
}),
new NodePolyfillPlugin(),
],
============================ eslint ===========================================
https://dev-yakuza.posstree.com/en/react-native/eslint-prettier-husky-lint-staged/
https://prettier.io/docs/en/cli.html

17
src/services/dataset.service.ts
View File

@ -1,11 +1,13 @@
import api from "../api/api";
import { Observable, of } from "rxjs";
// import { Observable, of } from "rxjs";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
import { SolrResponse } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
import { VUE_APP_PORTAL } from "@/constants";
import { deserialize, instanceToInstance } from "class-transformer";
// import { deserialize, instanceToInstance } from "class-transformer";
import { deserialize } from "class-transformer";
// import { OAI_DATASETS } from "./mock-oai-datasets";
import { OaiDataset } from "@/models/oai";
import xml2js from "xml2js";
@ -169,7 +171,7 @@ class DatasetService {
const host = "https:" + VUE_APP_PORTAL;
const path = "/api/dataset/" + id;
const apiUrl = host + path;
const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res)));
// const dataset = api.get<DbDataset>(apiUrl).pipe(map((res) => this.prepareDataset(res, apiUrl)));
// this.messageService.add('HeroService: fetched heroes');
@ -178,7 +180,7 @@ class DatasetService {
public getOAI(): Observable<OaiDataset[]> {
const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
const oaiDatasets = api.get<any>(apiUrl).pipe(
const oaiDatasets = api.get<string>(apiUrl).pipe(
map(
(response: string) => {
// const arrOai = new Array<OaiDataset>();
@ -209,13 +211,13 @@ class DatasetService {
// console.log(records[i].getAttribute("name"));
// }
const parser = new xml2js.Parser({
const parser: xml2js.Parser = new xml2js.Parser({
trim: true,
explicitArray: false,
ignoreAttrs: false,
// mergeAttrs: true,
});
parser.parseString(records.outerHTML, function (err: any, result: any) {
parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
const xmlNode = result.ListRecords;
// const rt = xmlNode.resumptionToken;
for (const rNode in xmlNode.record) {
@ -294,7 +296,8 @@ class DatasetService {
// //
// }
private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
// private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
private prepareDataset(datasetObj: DbDataset): DbDataset {
const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
dataset.url = document.documentURI;
// this.internalDatasetId.generateInternalId(dataset);

10
src/shims-vue.d.ts vendored
View File

@ -1,7 +1,7 @@
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
declare module 'vue-matomo';
declare module "vue-matomo";

3
src/views/map-view/map-view.component.ts
View File

@ -1,6 +1,7 @@
import { Options, Vue } from "vue-class-component";
import MapComponent from "@/components/map/map.component.vue";
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
// import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
import { MapOptions } from "leaflet";
// const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";

12
src/views/search-view/search-view-component.ts
View File

@ -122,7 +122,7 @@ export default class SearchViewComponent extends Vue {
this.searchTerm = suggestion;
DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res),
(error: any) => this.errorHandler(error),
(error: string) => this.errorHandler(error),
);
}
@ -163,7 +163,7 @@ export default class SearchViewComponent extends Vue {
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
let facetValues = facetItems.map((facetItem, index) => {
let facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
if (filterItem?.val == facetItem.val) {
rObj = filterItem;
@ -189,7 +189,7 @@ export default class SearchViewComponent extends Vue {
}
}
private errorHandler(err: any): void {
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
@ -206,7 +206,7 @@ export default class SearchViewComponent extends Vue {
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res, facetItem),
(error: any) => this.errorHandler(error),
(error: string) => this.errorHandler(error),
);
// alert(this.activeFilterCategories[filter.Category]);
// var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
@ -268,7 +268,7 @@ export default class SearchViewComponent extends Vue {
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
const facetValues = facetItems.map((facetItem, index) => {
const facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
@ -290,7 +290,7 @@ export default class SearchViewComponent extends Vue {
}
}
},
(error: any) => this.errorHandler(error),
(error: string) => this.errorHandler(error),
);
}
}

10
vue.config.js
View File

@ -1,4 +1,7 @@
/* eslint @typescript-eslint/no-var-requires: "off" */
const webpack = require("webpack");
// const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
publicPath: "/",
@ -21,9 +24,9 @@ module.exports = {
title: "TETHYS - Research Data Repository",
},
},
devServer: {
disableHostCheck: true,
},
// devServer: {
// disableHostCheck: true,
// },
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
@ -31,6 +34,7 @@ module.exports = {
SOLR_HOST: JSON.stringify(process.env.SOLR_HOST),
SOLR_CORE: JSON.stringify(process.env.SOLR_CORE),
}),
new NodePolyfillPlugin(),
],
},
};