barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull Requests Activity

- add vue-facing-decorator (replace vue-class-component and vue-property-decorator)

Browse Source 
- npm updates (stabele axios version) + adaption in axios config
- remove maps route from src/router/index.ts
This commit is contained in:
Arno Kaimbacher 2023-01-13 11:55:31 +01:00
parent 82872bf3fb
commit 5603614045
26 changed files with 1288 additions and 1797 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2697
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -11,7 +11,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"@openfonts/open-sans_all": "^1.44.2",
"axios": "^0.27.2",
"axios": "^1.2.2",
"class-transformer": "^0.5.1",
"core-js": "^3.6.5",
"dayjs": "^1.10.7",
@ -19,11 +19,9 @@
"qs": "^6.10.1",
"rxjs": "^7.5.5",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-facing-decorator": "^2.1.13",
"vue-matomo": "^4.1.0",
"vue-property-decorator": "^9.1.2",
"vue-router": "^4.0.12",
"xml2js": "^0.4.23",
"xslt3": "^2.4.0"
},
"devDependencies": {

12
src/api/config.ts
View File

@ -2,7 +2,7 @@ import { AxiosRequestConfig } from "axios";
import * as qs from "qs";
export const axiosRequestConfiguration: AxiosRequestConfig = {
responseType: "text",
// responseType: "text",
headers: {
// "Content-Type": "text/plain",
"Content-Type": "application/x-www-form-urlencoded",
@ -11,5 +11,13 @@ export const axiosRequestConfiguration: AxiosRequestConfig = {
// "Access-Control-Allow-Credentials": "true",
// "Access-Control-Allow-Origin": "*",
},
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
// paramsSerializer: {
// indexes: null, // by default: false
// },
paramsSerializer: {
serialize: (params: Record<string, number>) => {
return qs.stringify(params, { arrayFormat: "repeat" });
},
},
};

5
src/app.ts
View File

@ -1,5 +1,4 @@
import { Options, Vue } from "vue-class-component";
import { Watch } from "vue-property-decorator";
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";
@ -26,7 +25,7 @@ import { VUE_APP_PORTAL } from "./constants";
// import { ActiveFilterCategories } from "@/models/solr";
// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
@Options({
@Component({
components: {
HelloWorld,
HomeViewComponent,

5
src/app2.ts
View File

@ -1,5 +1,4 @@
import { Options, Vue } from "vue-class-component";
import { Watch } from "vue-property-decorator";
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";
@ -25,7 +24,7 @@ import { APP_URL, VUE_APP_PORTAL } from "./constants";
// import { ActiveFilterCategories } from "@/models/solr";
// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
@Options({
@Component({
components: {
HelloWorld,
HomeViewComponent,

6
src/components/HelloWorld/HelloWorld.ts
View File

@ -1,7 +1,7 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Component, Vue, Prop } from "vue-facing-decorator";
// import { Prop } from "vue-property-decorator";
@Options({
@Component({
name: "HelloWorld",
})
export default class HelloWorld extends Vue {

16
src/components/active-facet-category/ActiveFacetCategory.ts
View File

@ -1,16 +1,22 @@
import { Options, Vue } from "vue-class-component";
import { Prop, Emit } from "vue-property-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
// import { Prop, Emit } from "vue-property-decorator";
@Options({
@Component({
name: "ActiveFacetCategory",
})
export default class ActiveFacetCategory extends Vue {
bar = "";
@Prop([Array])
// @Prop([Array])
@Prop({
type: Array<string>,
})
filterItems!: string[];
@Prop([String])
// @Prop([String])
@Prop({
type: String,
})
categoryName!: string;
// @Prop([String])

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

@ -1,9 +1,9 @@
import { FacetItem } from "@/models/headers";
// import { FilterItem } from "@/models/solr";
import { Options, Vue } from "vue-class-component";
import { Prop, Emit } from "vue-property-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
// import { Prop, Emit } from "vue-property-decorator";
@Options({
@Component({
name: "FacetCategory",
})
export default class FacetCategory extends Vue {
@ -14,7 +14,10 @@ export default class FacetCategory extends Vue {
@Prop()
facetItems!: Array<FacetItem>;
@Prop([String])
// @Prop([String])
@Prop({
type: String,
})
filterName!: string;
get alias(): string {

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

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue, Prop } from "vue-facing-decorator";
// import { Prop, Emit } from "vue-property-decorator";
import { Prop } 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";
@ -11,7 +11,7 @@ const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>, <a href="http://www.geologie.ac.at" target="_blank">Geologie.ac.at</a>';
@Options({
@Component({
// selector: "app-map",
// templateUrl: "map.component.html",
name: "MapComponent",

4
src/components/simple-search/simple-search-component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "SimpleSearchComponent",
})
export default class SimpleSearchComponent extends Vue {

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

@ -1,16 +1,15 @@
// import Vue from "vue";
// import { Component, Prop } from 'vue-property-decorator';
// import debounce from 'lodash/debounce';
// import { DatasetService } from "../../services/dataset.service";
import DatasetService from "../../services/dataset.service";
import { SolrSettings } from "@/models/solr";
// import { ref } from "vue";
import { Options, Vue } from "vue-class-component";
import { Prop, Emit } from "vue-property-decorator";
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
// import { Prop, Emit } from "vue-property-decorator";
import { Dataset, Suggestion, SearchType } from "@/models/dataset";
import { SOLR_HOST, SOLR_CORE } from "@/constants";
@Options({
@Component({
name: "VsInput",
})
export default class VsInput extends Vue {

6
src/components/vs-result/vs-result.ts
View File

@ -1,8 +1,8 @@
import { Dataset } from "@/models/dataset";
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Component, Vue, Prop } from "vue-facing-decorator";
// import { Prop } from "vue-property-decorator";
@Options({
@Component({
name: "VsResult",
})
export default class VsResult extends Vue {

17
src/notes.txt
View File

@ -138,4 +138,19 @@ https://prettier.io/docs/en/cli.html
=================================== xslt3
npm install xslt3 --save
npm install xslt3 --save
=================================== vue-facing-decorator
npm install --save vue-facing-decorator
npm uninstall --save vue-class-component
package.json:
"vue-class-component": "^8.0.0-0",
npm uninstall --save vue-property-decorator
package.json:
"vue-property-decorator": "^9.1.2",
npm uninstall --save xml2js

12
src/router/index.ts
View File

@ -1,7 +1,7 @@
import { createWebHistory, createRouter } from "vue-router";
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";
// import MapViewComponent from "@/views/map-view/map-view.component.vue";
import SearchViewComponent from "@/views/search-view/search-view-component";
import ServiceViewComponent from "@/views/services-view/service-view-component.vue";
import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
@ -22,11 +22,11 @@ const routes = [
name: "Help",
component: HelpViewComponent,
},
{
path: "/map",
name: "Map",
component: MapViewComponent,
},
// {
// path: "/map",
// name: "Map",
// component: MapViewComponent,
// },
{
path: "/search/:display?/:type?",
name: "Search",

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

@ -9,8 +9,8 @@ import { VUE_APP_PORTAL } from "@/constants";
// import { deserialize, instanceToInstance } from "class-transformer";
import { deserialize } from "class-transformer";
// import { OAI_DATASETS } from "./mock-oai-datasets";
import { OaiDataset, OaiPerson } from "@/models/oai";
import xml2js from "xml2js";
// import { OaiDataset, OaiPerson } from "@/models/oai";
// import xml2js from "xml2js";
class DatasetService {
// for the autocomplete search
@ -183,132 +183,132 @@ class DatasetService {
return dataset;
}
public getOaiDatasets(): Observable<OaiDataset[]> {
const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
const oaiDatasets = api.get<string>(apiUrl).pipe(
map(
(response: string) => {
// const parser = new DOMParser();
// const xmlDoc: XMLDocument = parser.parseFromString(response, "application/xml");
// public getOaiDatasets(): Observable<OaiDataset[]> {
// const apiUrl = "https://data.tethys.at/oai?verb=ListRecords&metadataPrefix=oai_datacite";
// const oaiDatasets = api.get<string>(apiUrl).pipe(
// map(
// (response: string) => {
// // const parser = new DOMParser();
// // const xmlDoc: XMLDocument = parser.parseFromString(response, "application/xml");
// const xslDoc = parser.parseFromString(this.xsl, "application/xml");
// const xsltProcessor = new XSLTProcessor();
// xsltProcessor.importStylesheet(xslDoc);
// console.log(xmlDoc);
// const xmlDom = xsltProcessor.transformToDocument(xmlDoc);
// // const xslDoc = parser.parseFromString(this.xsl, "application/xml");
// // const xsltProcessor = new XSLTProcessor();
// // xsltProcessor.importStylesheet(xslDoc);
// // console.log(xmlDoc);
// // const xmlDom = xsltProcessor.transformToDocument(xmlDoc);
// const serializer = new XMLSerializer();
// const html = serializer.serializeToString(xmlDom.documentElement);
// console.log(html);
// // const serializer = new XMLSerializer();
// // const html = serializer.serializeToString(xmlDom.documentElement);
// // console.log(html);
// const arrOai = new Array<OaiDataset>();
// return arrOai;
const arrOai = this.parseXML(response);
return arrOai;
// .then((data) => {
// return data;
// });
},
// (error: string) => this.errorHandler(error),
),
);
// const oaiDatasets = of(OAI_DATASETS);
// // const arrOai = new Array<OaiDataset>();
// // return arrOai;
// const arrOai = this.parseXML(response);
// return arrOai;
// // .then((data) => {
// // return data;
// // });
// },
// // (error: string) => this.errorHandler(error),
// ),
// );
// // const oaiDatasets = of(OAI_DATASETS);
// this.messageService.add('HeroService: fetched heroes');
return oaiDatasets;
}
// // this.messageService.add('HeroService: fetched heroes');
// return oaiDatasets;
// }
private parseXML(xmlStr: string): Array<OaiDataset> {
// let k = "";
const arr: OaiDataset[] = [];
const domParser = new DOMParser();
const doc = domParser.parseFromString(xmlStr, "application/xml");
const records = doc.getElementsByTagName("ListRecords")[0];
// // const rt = xmlNode.resumptionToken;
// for (let i = 0; i < records.length; i++) {
// console.log(records[i].getAttribute("name"));
// }
// private parseXML(xmlStr: string): Array<OaiDataset> {
// // let k = "";
// const arr: OaiDataset[] = [];
// const domParser = new DOMParser();
// const doc = domParser.parseFromString(xmlStr, "application/xml");
// const records = doc.getElementsByTagName("ListRecords")[0];
// // // const rt = xmlNode.resumptionToken;
// // for (let i = 0; i < records.length; i++) {
// // console.log(records[i].getAttribute("name"));
// // }
const parser: xml2js.Parser = new xml2js.Parser({
trim: true,
explicitArray: false,
ignoreAttrs: false,
// mergeAttrs: true,
});
parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
const xmlNode = result.ListRecords;
// const rt = xmlNode.resumptionToken;
for (const rNode in xmlNode.record) {
const item = xmlNode.record[rNode];
// const parser: xml2js.Parser = new xml2js.Parser({
// trim: true,
// explicitArray: false,
// ignoreAttrs: false,
// // mergeAttrs: true,
// });
// parser.parseString(records.outerHTML, function (err: Error | null, result: any) {
// const xmlNode = result.ListRecords;
// // const rt = xmlNode.resumptionToken;
// for (const rNode in xmlNode.record) {
// const item = xmlNode.record[rNode];
const dc = item.metadata.resource;
const t = dc.titles.title;
const id = dc.identifier._;
// const dc = item.metadata.resource;
// const t = dc.titles.title;
// const id = dc.identifier._;
const lang = "en"; //dc.titles.title.attributes("xml",True)->lang;
let title: string;
if (lang == "en" && t.length > 1) {
title = t[1]._;
} else {
title = t[0]._;
}
// const lang = "en"; //dc.titles.title.attributes("xml",True)->lang;
// let title: string;
// if (lang == "en" && t.length > 1) {
// title = t[1]._;
// } else {
// title = t[0]._;
// }
let creator = "";
if (dc.creators.creator instanceof Array) {
dc.creators.creator.forEach((person: OaiPerson) => {
creator += person.creatorName + "; ";
});
} else {
creator += dc.creators.creator.creatorName._;
}
// let creator = "";
// if (dc.creators.creator instanceof Array) {
// dc.creators.creator.forEach((person: OaiPerson) => {
// creator += person.creatorName + "; ";
// });
// } else {
// creator += dc.creators.creator.creatorName._;
// }
let contributor = "";
if (dc.contributors) {
if (dc.contributors.contributor instanceof Array) {
dc.contributors.contributor.forEach((person: OaiPerson) => {
contributor += person.contributorName + "; ";
});
} else {
contributor += dc.contributors.contributor.contributorName;
}
}
// let contributor = "";
// if (dc.contributors) {
// if (dc.contributors.contributor instanceof Array) {
// dc.contributors.contributor.forEach((person: OaiPerson) => {
// contributor += person.contributorName + "; ";
// });
// } else {
// contributor += dc.contributors.contributor.contributorName;
// }
// }
// ?.map((u: any) => u.creatorName._).join("; ");
// foreach ($dc->creators->creator as $c) {
// foreach ($c->creatorName as $d) {
// if (count(explode(',',$d)) > 1) {
// $creator .= explode(',',$d)[0] . ', ' . substr(explode(',',$d)[1],1,1) . '; ';
// } else {
// $creator .= explode(',',$d)[0];
// }
// // ?.map((u: any) => u.creatorName._).join("; ");
// // foreach ($dc->creators->creator as $c) {
// // foreach ($c->creatorName as $d) {
// // if (count(explode(',',$d)) > 1) {
// // $creator .= explode(',',$d)[0] . ', ' . substr(explode(',',$d)[1],1,1) . '; ';
// // } else {
// // $creator .= explode(',',$d)[0];
// // }
// }
// }
// // }
// // }
const north = dc.geoLocations.geoLocation.geoLocationBox.northBoundLatitude;
const east = dc.geoLocations.geoLocation.geoLocationBox.eastBoundLongitude;
const south = dc.geoLocations.geoLocation.geoLocationBox.southBoundLatitude;
const west = dc.geoLocations.geoLocation.geoLocationBox.westBoundLongitude;
// const north = dc.geoLocations.geoLocation.geoLocationBox.northBoundLatitude;
// const east = dc.geoLocations.geoLocation.geoLocationBox.eastBoundLongitude;
// const south = dc.geoLocations.geoLocation.geoLocationBox.southBoundLatitude;
// const west = dc.geoLocations.geoLocation.geoLocationBox.westBoundLongitude;
const subject = dc.subjects.subject.map((u: any) => u._).join(", ");
// const subject = dc.subjects.subject.map((u: any) => u._).join(", ");
const oaiDataset = {
doi: id,
title: title,
creator: creator,
contributor: contributor,
subject: subject,
north: north,
south: south,
east: east,
west: west,
} as OaiDataset;
arr.push(oaiDataset);
}
// resolve(arr);
});
return arr;
}
// const oaiDataset = {
// doi: id,
// title: title,
// creator: creator,
// contributor: contributor,
// subject: subject,
// north: north,
// south: south,
// east: east,
// west: west,
// } as OaiDataset;
// arr.push(oaiDataset);
// }
// // resolve(arr);
// });
// return arr;
// }
// private prepareOAI(xml: any) : Array<OaiDataset> {
// //

4
src/views/contact-view/contact-view-component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "ContactViewComponent",
// components: {
// VsInput,

6
src/views/dataset-detail.component/dataset-detail.component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue, Prop } from "vue-facing-decorator";
import { DbDataset } from "@/models/dataset";
import { Prop } from "vue-property-decorator";
// import { Prop } from "vue-property-decorator";
import DatasetService from "../../services/dataset.service";
import { Subscription } from "rxjs";
import dayjs from "dayjs";
@ -10,7 +10,7 @@ import VsInput from "@/components/vs-input/vs-input.vue";
import { Suggestion } from "@/models/dataset";
import { VUE_APP_PORTAL } from "@/constants";
@Options({
@Component({
name: "DatasetDetailComponent",
components: {
VsInput,

4
src/views/help-view/help-view-component.ts
View File

@ -1,7 +1,7 @@
import { Options, Vue } from "vue-class-component";
// import { Prop } from "vue-property-decorator";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "HelpViewComponent",
})
export default class HelpViewComponent extends Vue {

4
src/views/home-view/home-view-component.ts
View File

@ -1,8 +1,8 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
import VsInput from "@/components/vs-input/vs-input.vue";
import { Suggestion } from "@/models/dataset";
@Options({
@Component({
name: "HomeViewComponent",
components: {
VsInput,

5
src/views/imprint-view/imprint-view-component.ts
View File

@ -1,6 +1,7 @@
import { Options, Vue } from "vue-class-component";
// import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "ImprintViewComponent",
// components: {
// VsInput,

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

@ -1,4 +1,4 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
import MapComponent from "@/components/map/map.component.vue";
// import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
import { MapOptions } from "leaflet";
@ -7,7 +7,7 @@ import { MapOptions } from "leaflet";
// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
// const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@Options({
@Component({
name: "MapViewComponent",
components: {
MapComponent,

4
src/views/oai-view/oai-view-component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "OaiViewComponent",
})
export default class OaiViewComponent extends Vue {}

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

@ -1,5 +1,5 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Component, Vue, Prop } from "vue-facing-decorator";
// import { Prop } from "vue-property-decorator";
import VsInput from "@/components/vs-input/vs-input.vue";
import VsResult from "@/components/vs-result/vs-result.vue";
import FacetCategory from "@/components/face-category/facet-category.vue";
@ -13,7 +13,7 @@ import { ActiveFilterCategories } from "@/models/solr";
import { SOLR_HOST, SOLR_CORE } from "@/constants";
import { Pagination } from "@/models/pagination";
@Options({
@Component({
name: "SearchViewComponent",
components: {
VsInput,

4
src/views/services-view/service-view-component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "ServiceViewComponent",
})
export default class ServiceViewComponent extends Vue {}

4
src/views/sitelink-view/sitelink-view-component.ts
View File

@ -1,9 +1,9 @@
import { Subscription } from "rxjs";
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
import DatasetService from "../../services/dataset.service";
import { DbDataset } from "@/models/dataset";
@Options({
@Component({
name: "SitelinkViewComponent",
})
export default class SitelinkViewComponent extends Vue {

4
src/views/terms-view/terms-view-component.ts
View File

@ -1,6 +1,6 @@
import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-facing-decorator";
@Options({
@Component({
name: "TermsViewComponent",
// components: {
// VsInput,