diff --git a/.env.example b/.env.example index 2f97d5d..ea6aeaa 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,4 @@ APP_URL=//tethys.at VUE_API=//www.tethys.at -# SOLR_HOST=tethys.at -# SOLR_CORE=rdr_data -OPEN_HOST=192.168.21.18 -OPEN_CORE=tethys-records \ No newline at end of file +SOLR_HOST=tethys.at +SOLR_CORE=rdr_data \ No newline at end of file diff --git a/OpenSearch queries.txt b/OpenSearch queries.txt deleted file mode 100644 index 5a84e5e..0000000 --- a/OpenSearch queries.txt +++ /dev/null @@ -1,9 +0,0 @@ -Get all documents in the index ("core" in solr) ----------------------------------------------------- -curl -XGET "http://192.168.21.18/tethys-records/_search?pretty" -H 'Content-Type: application/json' -d' -{ - "query": { - "match_all": {} - } -}' - diff --git a/SOLR queries.txt b/SOLR queries.txt deleted file mode 100644 index 30d17b7..0000000 --- a/SOLR queries.txt +++ /dev/null @@ -1,60 +0,0 @@ -Search by a specific value for one of the fields -https://tethys.at/solr/rdr_data/select?&q=year:2024 - -Search within a specific range of values for one of the fields -https://tethys.at/solr/rdr_data/select?&q=year:2023%20TO%202024 years 2023 to 2024 - -Search for a term (search done in predefined field?) -https://tethys.at/solr/rdr_data/select?&q=linz - -Predefined Tethys Search -https://tethys.at/solr/rdr_data/select?&0=fl%3Did%2Clicence%2Cserver_date_published%2Cabstract_output%2Cidentifier%2Ctitle_output%2Ctitle_additional%2Cauthor%2Csubject%2Cdoctype&q=%2A&q.op=or&defType=edismax&qf=title%5E3%20author%5E2%20subject%5E1&indent=on&wt=json&rows=10&start=0&sort=server_date_published%20desc&facet=on&json.facet.language=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22language%22%20%7D&json.facet.subject=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22subject%22%2C%20limit%3A%20-1%20%7D&json.facet.year=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22year%22%20%7D&json.facet.author=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22author_facet%22%2C%20limit%3A%20-1%20%7D - -Predefined Tethys search changing the last facet to "doctype" -https://tethys.at/solr/rdr_data/select?&0=fl%3Did%2Clicence%2Cserver_date_published%2Cabstract_output%2Cidentifier%2Ctitle_output%2Ctitle_additional%2Cauthor%2Csubject%2Cdoctype&q=*&q.op=or&defType=edismax&qf=title^3%20author^2%20subject^1&indent=on&wt=json&rows=10&start=0&sort=server_date_published%20desc&facet=on&json.facet.language={%20type%3A%20%22terms%22%2C%20field%3A%20%22language%22%20}&json.facet.subject={%20type%3A%20%22terms%22%2C%20field%3A%20%22subject%22%2C%20limit%3A%20-1%20}&json.facet.author={%20type%3A%20%22terms%22%2C%20field%3A%20%22author_facet%22%2C%20limit%3A%20-1%20}&json.facet.doctype={%20type%3A%20%22terms%22%2C%20field%3A%20%22doctype%22%2C%20limit%3A%20-1%20} - -Giving a value for only one facet => Author: Coric, Stjepan (16) -https://tethys.at/solr/rdr_data/select?&0=fl%3Did%2Clicence%2Cserver_date_published%2Cabstract_output%2Cidentifier%2Ctitle_output%2Ctitle_additional%2Cauthor%2Csubject%2Cdoctype&q=%2A&q.op=or&defType=edismax&qf=title%5E3%20author%5E2%20subject%5E1&indent=on&wt=json&rows=10&fq=author%3A%28%22Coric%2C%20Stjepan%22%29&start=0&sort=server_date_published%20desc&facet=on&json.facet.language=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22language%22%20%7D&json.facet.subject=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22subject%22%2C%20limit%3A%20-1%20%7D&json.facet.year=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22year%22%20%7D&json.facet.author=%7B%20type%3A%20%22terms%22%2C%20field%3A%20%22author_facet%22%2C%20limit%3A%20-1%20%7D - - - -ASCII -+----+-----+----+-----+----+-----+----+-----+ -| Hx | Chr | Hx | Chr | Hx | Chr | Hx | Chr | -+----+-----+----+-----+----+-----+----+-----+ -| 00 | NUL | 20 | SPC | 40 | @ | 60 | ` | -| 01 | SOH | 21 | ! | 41 | A | 61 | a | -| 02 | STX | 22 | " | 42 | B | 62 | b | -| 03 | ETX | 23 | # | 43 | C | 63 | c | -| 04 | EOT | 24 | $ | 44 | D | 64 | d | -| 05 | ENQ | 25 | % | 45 | E | 65 | e | -| 06 | ACK | 26 | & | 46 | F | 66 | f | -| 07 | BEL | 27 | ' | 47 | G | 67 | g | -| 08 | BS | 28 | ( | 48 | H | 68 | h | -| 09 | TAB | 29 | ) | 49 | I | 69 | i | -| 0A | LF | 2A | * | 4A | J | 6A | j | -| 0B | VT | 2B | + | 4B | K | 6B | k | -| 0C | FF | 2C | , | 4C | L | 6C | l | -| 0D | CR | 2D | - | 4D | M | 6D | m | -| 0E | SO | 2E | . | 4E | N | 6E | n | -| 0F | SI | 2F | / | 4F | O | 6F | o | -| 10 | DLE | 30 | 0 | 50 | P | 70 | p | -| 11 | DC1 | 31 | 1 | 51 | Q | 71 | q | -| 12 | DC2 | 32 | 2 | 52 | R | 72 | r | -| 13 | DC3 | 33 | 3 | 53 | S | 73 | s | -| 14 | DC4 | 34 | 4 | 54 | T | 74 | t | -| 15 | NAK | 35 | 5 | 55 | U | 75 | u | -| 16 | SYN | 36 | 6 | 56 | V | 76 | v | -| 17 | ETB | 37 | 7 | 57 | W | 77 | w | -| 18 | CAN | 38 | 8 | 58 | X | 78 | x | -| 19 | EM | 39 | 9 | 59 | Y | 79 | y | -| 1A | SUB | 3A | : | 5A | Z | 7A | z | -| 1B | ESC | 3B | ; | 5B | [ | 7B | { | -| 1C | FS | 3C | < | 5C | \ | 7C | | | -| 1D | GS | 3D | = | 5D | ] | 7D | } | -| 1E | RS | 3E | > | 5E | ^ | 7E | ~ | -| 1F | US | 3F | ? | 5F | _ | 7F | DEL | -+----+-----+----+-----+----+-----+----+-----+ -https://www.asciitable.com/ see Hx - -If you write encodeURIComponent(",") in your JavaScript console, then you will also get %2C. And with decodeURIComponent("%2C") you will get back the "," \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 206df8e..ea6b588 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,6 @@ "axios": "^1.2.2", "class-transformer": "^0.5.1", "dayjs": "^1.10.7", - "dompurify": "^3.1.5", "leaflet": "^1.7.1", "qs": "^6.10.1", "rxjs": "^7.5.5", @@ -30,7 +29,6 @@ "@babel/plugin-proposal-decorators": "^7.22.5", "@babel/preset-env": "^7.22.5", "@tailwindcss/forms": "^0.5.7", - "@types/dompurify": "^3.0.5", "@types/leaflet": "^1.7.9", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", @@ -2499,15 +2497,6 @@ "@types/node": "*" } }, - "node_modules/@types/dompurify": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz", - "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==", - "dev": true, - "dependencies": { - "@types/trusted-types": "*" - } - }, "node_modules/@types/eslint": { "version": "8.56.7", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.7.tgz", @@ -2705,12 +2694,6 @@ "@types/node": "*" } }, - "node_modules/@types/trusted-types": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", - "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", - "dev": true - }, "node_modules/@types/webpack-env": { "version": "1.18.4", "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.4.tgz", @@ -5643,11 +5626,6 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, - "node_modules/dompurify": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.5.tgz", - "integrity": "sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==" - }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", diff --git a/package.json b/package.json index efa7d39..de5f0e1 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "axios": "^1.2.2", "class-transformer": "^0.5.1", "dayjs": "^1.10.7", - "dompurify": "^3.1.5", "leaflet": "^1.7.1", "qs": "^6.10.1", "rxjs": "^7.5.5", @@ -33,7 +32,6 @@ "@babel/plugin-proposal-decorators": "^7.22.5", "@babel/preset-env": "^7.22.5", "@tailwindcss/forms": "^0.5.7", - "@types/dompurify": "^3.0.5", "@types/leaflet": "^1.7.9", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", diff --git a/src/App.vue b/src/App.vue index afc4c9b..9b042da 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,7 +34,7 @@
  • - OPENSEARCH + SEARCH
  • diff --git a/src/api/api.ts b/src/api/api.ts index 639d35b..662b705 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,37 +1,46 @@ -// Import the necessary modules and functions -import initializeAxios from "./axiosSetup"; // Function to initialize the Axios instance -import { axiosRequestConfiguration } from "./config"; // Axios configuration settings -import { map } from "rxjs/operators"; // Operator to transform the items emitted by an Observable -import { defer, Observable } from "rxjs"; // RxJS utilities for creating and working with Observables -import { AxiosResponse } from "axios"; // Axios response type +import initializeAxios from "./axiosSetup"; +import { axiosRequestConfiguration } from "./config"; +import { map } from "rxjs/operators"; +// import { Observable } from "@reactivex/rxjs/compat"; +import { defer, Observable } from "rxjs"; +import { AxiosResponse } from "axios"; +// https://ichi.pro/de/so-wickeln-sie-axios-mit-typescript-und-react-in-rxjs-ein-118892823169891 -// Initialize the Axios instance with the provided configuration const axiosInstance = initializeAxios(axiosRequestConfiguration); -// Function to make a GET request using Axios wrapped in an Observable // eslint-disable-next-line const get = (url: string, queryParams?: any): Observable => { - // Use defer to create an Observable that makes the Axios GET request when subscribed to - return defer(() => axiosInstance.get(url, { params: queryParams })) - // Use map to transform the Axios response to extract the data property - .pipe(map((result: AxiosResponse) => result.data)); + return defer(() => axiosInstance.get(url, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data)); }; -// Function to make a POST request using Axios wrapped in an Observable -const post = (url: string, body: any, queryParams?: any): Observable => { - // Use defer to create an Observable that makes the Axios POST request when subscribed to - // console.log(body); - // console.log(queryParams); - - return defer(() => axiosInstance.post(url, body, { - params: queryParams, - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - } - })) - .pipe(map((result: AxiosResponse) => result.data)); // Use map to transform the Axios response to extract the data property -}; +// const post = (url: string, body: object, queryParams?: any): Observable => { +// return defer(() => axiosInstance.post(url, body, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data)); +// }; -// Export the get and post functions as part of the default export -export default { get, post }; \ No newline at end of file +// const put = ( +// url: string, +// body: object, +// queryParams?: object +// ): Observable => { +// return defer(() => +// axiosInstance.put(url, body, { params: queryParams }) +// ).pipe(map((result) => result.data)); +// }; + +// const patch = ( +// url: string, +// body: object, +// queryParams?: object +// ): Observable => { +// return defer(() => +// axiosInstance.patch(url, body, { params: queryParams }) +// ).pipe(map((result) => result.data)); +// }; + +// const deleteR = (url: string, id: number): Observable => { +// return defer(() => axiosInstance.delete(`${url}/${id}`)).pipe( +// map((result) => result.data) +// ); +// }; + +export default { get }; diff --git a/src/api/axiosSetup.ts b/src/api/axiosSetup.ts index f284001..93cfbbc 100644 --- a/src/api/axiosSetup.ts +++ b/src/api/axiosSetup.ts @@ -1,12 +1,20 @@ import axios, { AxiosRequestConfig, AxiosInstance } from "axios"; const initialization = (config: AxiosRequestConfig): AxiosInstance => { - + //axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; delete axios.defaults.headers.common["X-Requested-With"]; - + // axios.defaults.withCredentials = true; + // const token = document.head.querySelector('meta[name="csrf-token"]'); + // if (token) { + // axios.defaults.headers.common["X-CSRF-TOKEN"] = token.innerHTML; + // } const axiosInstance = axios.create(config); + /* + Add default headers, interceptors etc.. + */ + return axiosInstance; }; -export default initialization; \ No newline at end of file +export default initialization; diff --git a/src/api/config.ts b/src/api/config.ts index 57de462..b58a88a 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -1,16 +1,31 @@ import { AxiosRequestConfig } from "axios"; import { stringify } from "qs"; -/* This file configures Axios to send requests with the specified headers and parameters serialization format for URL-encoded form data */ +// let headers: AxiosRequestConfig['headers'] = +// headers['Content-Type'] = 'multipart/form-data'; + export const axiosRequestConfiguration: AxiosRequestConfig = { - + // responseType: "text", + // headers: { + // // "Content-Type": "text/plain", + // "Content-Type": "application/x-www-form-urlencoded", + // // "Content-Type": "application/x-www-form-urlencoded", + // // credentials: "same-origin", + // // "Access-Control-Allow-Credentials": "true", + // // "Access-Control-Allow-Origin": "*", + // }, headers: { + //: AxiosHeaders | Partial | undefined "Content-Type": "application/x-www-form-urlencoded", }, + // headers: { + // "Content-type": "application/json; charset=UTF-8", + // }, + // paramsSerializer: { + // indexes: null, // by default: false + // }, paramsSerializer: { - /* The serialize function takes an object of key-value pairs as input and uses the qs.stringify method to convert it into a URL-encoded string. - The arrayFormat: "repeat" option specifies how arrays should be serialized in the URL parameters. */ serialize: (params: Record) => { return stringify(params, { arrayFormat: "repeat" }); }, diff --git a/src/components/face-category/FacetCategory.ts b/src/components/face-category/FacetCategory.ts index 3161dcf..8a3f5c2 100644 --- a/src/components/face-category/FacetCategory.ts +++ b/src/components/face-category/FacetCategory.ts @@ -20,7 +20,6 @@ export default class FacetCategory extends Vue { filterName!: string; get alias(): string { - // console.log("filterName:", this.filterName); return this.filterName == "datatype" ? "doctype" : this.filterName; } @@ -54,7 +53,6 @@ export default class FacetCategory extends Vue { @Emit("filter") activateItem(filterItem: FacetItem): FacetItem { - // console.log("ActivateItem"); filterItem.category = this.alias; filterItem.active = true; // this.$emit("filter", filterItem); diff --git a/src/components/vs-input/vs-input.ts b/src/components/vs-input/vs-input.ts index 468d55b..1b08792 100644 --- a/src/components/vs-input/vs-input.ts +++ b/src/components/vs-input/vs-input.ts @@ -2,17 +2,12 @@ // import debounce from 'lodash/debounce'; // import { DatasetService } from "../../services/dataset.service"; import DatasetService from "../../services/dataset.service"; -// import { SolrSettings } from "@/models/solr"; // PENDING USE - -import { OpenSettings } from "@/models/solr"; +import { SolrSettings } from "@/models/solr"; +// import { ref } from "vue"; 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"; - -import { OPEN_HOST, OPEN_CORE } from "@/constants"; // PENDING USE -import { HitHighlight } from "@/models/headers"; - -import DOMPurify from 'dompurify'; // To sanitize the HTML content to prevent XSS attacks! +import { SOLR_HOST, SOLR_CORE } from "@/constants"; @Component({ name: "VsInput", @@ -21,40 +16,30 @@ export default class VsInput extends Vue { // @Prop() // private title!: string; - // Define the placeholder text for the input field @Prop({ default: "Search" }) readonly placeholder!: string; - private display = ""; // Input display value + private display = ""; @Prop() private propDisplay = ""; private value!: Suggestion | string; private error = ""; - private results: Array = []; // Array to store search results - private highlights: Array = []; - - private loading = false; // Loading state indicator - private selectedIndex = -1; // Index of the currently selected suggestion - - // private solr: SolrSettings = { - // core: SOLR_CORE, //"rdr_data", // SOLR.core; - // host: SOLR_HOST, //"tethys.at", - // }; - - private openSearch: OpenSettings = { - core: OPEN_CORE, //"rdr_data", // SOLR.core; - host: OPEN_HOST, //"tethys.at", + private results: Array = []; + private loading = false; + private selectedIndex = -1; + // private selectedDisplay = ""; + private solr: SolrSettings = { + core: SOLR_CORE, //"rdr_data", // SOLR.core; + host: SOLR_HOST, //"tethys.at", // core: "test_data", // SOLR.core; // host: "repository.geologie.ac.at", }; - // private rdrAPI!: DatasetService; - itemRefs!: Array; // Array to store references to suggestion items - emits = ["filter"]; // Emits filter event + itemRefs!: Array; + emits = ["filter"]; - // Set reference for each item setItemRef(el: Element): void { this.itemRefs.push(el); } @@ -83,113 +68,53 @@ export default class VsInput extends Vue { return this.error !== null; } - // Computed property to generate suggestions based on search results get suggestions(): Suggestion[] { - + // const suggestion = { + // titles: new Array(), + // authors: new Array(), + // subjects: new Array(), + // }; const suggestions = new Array(); - // console.log("getSuggestions > Display:", this.display); - // console.log("results:", this.results ); - // console.log("highlights:", this.highlights); - - //The method checks if there are any highlighted titles in the highlight object. If found, it joins the highlighted fragments into a single string - // Generate suggestions based on search results - this.results.forEach((dataset, index) => { - - const highlight = this.highlights[index]; - - // console.log("get suggestions:id", dataset.id); - // console.log("get suggestions:title_output", dataset.title_output); - // console.log("get suggestions:author", dataset.author); - // console.log("get suggestions:subjects", dataset.subjects); - - // Checks if a suggestion with the same title and type already exists in the suggestions array. If not, it creates a new Suggestion object and adds it to the suggestions array. - if (highlight.title && highlight.title.length > 0) { - /** This line checks if the highlight object has a title property and if that property is an array with at least one element. - * The highlight object contains highlighted fragments of the search term in various fields (e.g., title, author, subjects) as returned by the OpenSearch API. - * This check ensures that we only process results that have highlighted titles. */ - const highlightedTitle = highlight.title.join(" "); - /** - * The highlight.title property is an array of strings, where each string is a highlighted fragment of the title. join(" ") combines these fragments into a single string with spaces between them. - * This step constructs a full highlighted title from the individual fragments. - * OpenSearch can return multiple fragments of a field (like the title) in its response, especially when the field contains multiple terms that match the search query. - * This can happen because OpenSearch's highlighting feature is designed to provide context around each match within the field, which can result in multiple highlighted fragments. - */ - const hasTitleSuggestion = suggestions.some((suggestion) => suggestion.highlight.toLowerCase() === highlightedTitle.toLowerCase() && suggestion.type == SearchType.Title); + this.results.forEach((dataset) => { + // const del = dataset.title_output?.toLowerCase(); + if (dataset.title_output.toLowerCase().includes(this.display.toLowerCase())) { + const title = dataset.title_output; + // if (!suggestion["titles"].find((value) => value === title)) { + // suggestion.titles.push(title); + // } + const hasTitleSuggestion = suggestions.some((suggestion) => suggestion.value === title && suggestion.type == SearchType.Title); if (!hasTitleSuggestion) { - const suggestion = new Suggestion(dataset.title_output, highlightedTitle, SearchType.Title); + const suggestion = new Suggestion(title, SearchType.Title); suggestions.push(suggestion); } } - if (highlight.author && highlight.author.length > 0) { - const highlightedAuthor = highlight.author.join(" "); - const datasetAuthor = this.find(dataset.author, this.display.toLowerCase()); - const hasAuthorSuggestion = suggestions.some((suggestion) => suggestion.highlight.toLowerCase() === highlightedAuthor.toLowerCase() && suggestion.type == SearchType.Author); + if (this.find(dataset.author, this.display.toLowerCase()) !== "") { + const author = this.find(dataset.author, this.display.toLowerCase()); + + const hasAuthorSuggestion = suggestions.some((suggestion) => suggestion.value === author && suggestion.type == SearchType.Author); if (!hasAuthorSuggestion) { - const suggestion = new Suggestion(datasetAuthor, highlightedAuthor, SearchType.Author); + const suggestion = new Suggestion(author, SearchType.Author); suggestions.push(suggestion); } } - if (highlight.subjects && highlight.subjects.length > 0) { - const highlightedSubject = highlight.subjects.join(" "); - const datasetSubject = this.find(dataset.subjects, this.display.toLowerCase()); - const hasSubjectSuggestion = suggestions.some((suggestion) => suggestion.highlight.toLowerCase() === highlightedSubject.toLowerCase() && suggestion.type == SearchType.Subject); + if (this.find(dataset.subject, this.display.toLowerCase()) != "") { + const subject = this.find(dataset.subject, this.display.toLowerCase()); + const hasSubjectSuggestion = suggestions.some((suggestion) => suggestion.value === subject && suggestion.type == SearchType.Subject); if (!hasSubjectSuggestion) { - const suggestion = new Suggestion(datasetSubject, highlightedSubject, SearchType.Subject); + const suggestion = new Suggestion(subject, SearchType.Subject); suggestions.push(suggestion); } } - - // ORIGINAL SOLR =================================================================================================== - // if (dataset.title_output.toLowerCase().includes(this.display.toLowerCase())) { - // const title = dataset.title_output; - // // Check if there is already a suggestion with this title and type - // const hasTitleSuggestion = suggestions.some((suggestion) => suggestion.value === title && suggestion.type == SearchType.Title); - // if (!hasTitleSuggestion) { - // // If there is no such suggestion, create a new one and add it to the suggestions array - // const suggestion = new Suggestion(title, SearchType.Title); - // suggestions.push(suggestion); - // } - // } - // if (this.find(dataset.author, this.display.toLowerCase()) !== "") { - // const author = this.find(dataset.author, this.display.toLowerCase()); - // // Check if there is already a suggestion with this author and type - // const hasAuthorSuggestion = suggestions.some((suggestion) => suggestion.value === author && suggestion.type == SearchType.Author); - // if (!hasAuthorSuggestion) { - // const suggestion = new Suggestion(author, SearchType.Author); - // suggestions.push(suggestion); - // } - // } - // if (this.find(dataset.subjects, this.display.toLowerCase()) != "") { - // const subject = this.find(dataset.subjects, this.display.toLowerCase()); - // const hasSubjectSuggestion = suggestions.some((suggestion) => suggestion.value === subject && suggestion.type == SearchType.Subject); - // if (!hasSubjectSuggestion) { - // const suggestion = new Suggestion(subject, SearchType.Subject); - // suggestions.push(suggestion); - // } - // } - }); return suggestions; } - /** - * This method combines the suggestion value and type into a single HTML string. It also sanitizes the HTML content using DOMPurify to prevent XSS attacks. - * The vue file uses the v-html directive to bind the combined HTML string to the label element. This ensures that the HTML content (e.g., Wien) is rendered correctly in the browser. - */ - formatSuggestion(result: Suggestion): string { - const sanitizedValue = DOMPurify.sanitize(result.highlight); - // Replacing the predefined format for highlights given by OpenSearch from emphasys to bold - const replacedValue = sanitizedValue.replace(//g, '').replace(/<\/em>/g, ''); - return `${replacedValue} | ${result.type}`; - } - /** * Clear all values, results and errors **/ clear(): void { - console.log("clear"); this.display = ""; // this.value = null; this.results = []; @@ -197,20 +122,15 @@ export default class VsInput extends Vue { // this.$emit("clear"); } - /* When the search button is clicked or the search input is changed, it updates the value property of the component with the current value of display, - and emits a search-change event with the current value of display as the argument. */ @Emit("search-change") search(): string { - console.log("search"); this.results = []; // this.$emit("search", this.display) this.value = this.display; //(obj["title_output"]) ? obj["title_output"] : obj.id return this.display; } - // Handler for search input change searchChanged(): void { - // console.log("Search changed!"); this.selectedIndex = -1; // Let's warn the parent that a change was made // this.$emit("input", this.display); @@ -222,9 +142,7 @@ export default class VsInput extends Vue { } } - // Perform the search request private resourceSearch() { - // console.log("resourceSearch"); if (!this.display) { this.results = []; return; @@ -234,29 +152,23 @@ export default class VsInput extends Vue { this.request(); } - // Make the API request to search for datasets private request(): void { - console.log("request()"); - // DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe({ - DatasetService.searchTerm(this.display, this.openSearch.core, this.openSearch.host).subscribe({ - // next: (res: Dataset[]) => this.dataHandler(res), - next: (res: { datasets: Dataset[], highlights: HitHighlight[] }) => this.dataHandler(res.datasets, res.highlights), + 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), }); } - // Handle the search results - private dataHandler(datasets: Dataset[], highlights: HitHighlight[]): void { + private dataHandler(datasets: Dataset[]): void { this.results = datasets; - this.highlights = highlights; // Store highlights - // console.log(datasets); - + // this.$emit("search", this.display); + // this.loading = false; } - // Handle errors from the search request private errorHandler(err: string): void { this.error = err; + // this.loading = false; } /** @@ -268,9 +180,7 @@ export default class VsInput extends Vue { return key === this.selectedIndex; } - // Handle arrow down key press to navigate suggestions onArrowDown(ev: Event): void { - console.log("onArrowDown"); ev.preventDefault(); if (this.selectedIndex === -1) { this.selectedIndex = 0; @@ -280,7 +190,6 @@ export default class VsInput extends Vue { this.fixScrolling(); } - // Scroll the selected suggestion into view private fixScrolling() { const currentElement = this.itemRefs[this.selectedIndex]; currentElement.scrollIntoView({ @@ -290,9 +199,7 @@ export default class VsInput extends Vue { }); } - // Handle arrow up key press to navigate suggestions onArrowUp(ev: Event): void { - console.log("onArrowUp"); ev.preventDefault(); if (this.selectedIndex === -1) { this.selectedIndex = this.suggestions.length - 1; @@ -302,10 +209,7 @@ export default class VsInput extends Vue { this.fixScrolling(); } - // Handle enter key press to select a suggestion onEnter(): void { - console.log("onEnter"); - if (this.selectedIndex === -1) { // this.$emit("nothingSelected", this.display); this.display && this.search(); @@ -318,18 +222,18 @@ export default class VsInput extends Vue { @Emit("search-change") private select(obj: Suggestion): Suggestion { - console.log("select:"); - this.value = obj; - console.log(obj); - - this.display = obj.value; + // if (!obj) { + // return; + // } + this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id + this.display = obj.value; // this.formatDisplay(obj) + // this.selectedDisplay = this.display; this.close(); - + // this.$emit("update", this.value); return this.value; } - // Find a search term in an array private find(myarray: Array, searchterm: string): string { for (let i = 0, len = myarray.length; i < len; i += 1) { if (typeof myarray[i] === "string" && myarray[i].toLowerCase().indexOf(searchterm) !== -1) { @@ -344,11 +248,15 @@ export default class VsInput extends Vue { * Close the results list. If nothing was selected clear the search */ close(): void { - console.log("close"); if (!this.value) { this.clear(); } + // if (this.selectedDisplay !== this.display && this.value) { + // this.display = this.selectedDisplay; + // } this.results = []; this.error = ""; + //this.removeEventListener() + // this.$emit("close"); } } diff --git a/src/components/vs-input/vs-input.vue b/src/components/vs-input/vs-input.vue index e06d528..7980aed 100644 --- a/src/components/vs-input/vs-input.vue +++ b/src/components/vs-input/vs-input.vue @@ -1,15 +1,10 @@