diff --git a/.env.example b/.env.example index ea6aeaa..2f97d5d 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1,6 @@ APP_URL=//tethys.at VUE_API=//www.tethys.at -SOLR_HOST=tethys.at -SOLR_CORE=rdr_data \ No newline at end of file +# SOLR_HOST=tethys.at +# SOLR_CORE=rdr_data +OPEN_HOST=192.168.21.18 +OPEN_CORE=tethys-records \ No newline at end of file diff --git a/OpenSearch queries.txt b/OpenSearch queries.txt new file mode 100644 index 0000000..5a84e5e --- /dev/null +++ b/OpenSearch queries.txt @@ -0,0 +1,9 @@ +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 new file mode 100644 index 0000000..30d17b7 --- /dev/null +++ b/SOLR queries.txt @@ -0,0 +1,60 @@ +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 ea6b588..206df8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "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", @@ -29,6 +30,7 @@ "@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", @@ -2497,6 +2499,15 @@ "@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", @@ -2694,6 +2705,12 @@ "@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", @@ -5626,6 +5643,11 @@ "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 de5f0e1..efa7d39 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "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", @@ -32,6 +33,7 @@ "@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 9b042da..afc4c9b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -34,7 +34,7 @@
  • - SEARCH + OPENSEARCH
  • diff --git a/src/api/api.ts b/src/api/api.ts index 662b705..639d35b 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -1,46 +1,37 @@ -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 +// 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 +// 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 => { - return defer(() => axiosInstance.get(url, { params: queryParams })).pipe(map((result: AxiosResponse) => result.data)); + // 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)); }; -// const post = (url: string, body: object, queryParams?: any): Observable => { -// return defer(() => axiosInstance.post(url, body, { 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 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 }; +// Export the get and post functions as part of the default export +export default { get, post }; \ No newline at end of file diff --git a/src/api/axiosSetup.ts b/src/api/axiosSetup.ts index 93cfbbc..f284001 100644 --- a/src/api/axiosSetup.ts +++ b/src/api/axiosSetup.ts @@ -1,20 +1,12 @@ 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.. - */ + const axiosInstance = axios.create(config); return axiosInstance; }; -export default initialization; +export default initialization; \ No newline at end of file diff --git a/src/api/config.ts b/src/api/config.ts index b58a88a..57de462 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -1,31 +1,16 @@ import { AxiosRequestConfig } from "axios"; import { stringify } from "qs"; -// let headers: AxiosRequestConfig['headers'] = -// headers['Content-Type'] = 'multipart/form-data'; - +/* This file configures Axios to send requests with the specified headers and parameters serialization format for URL-encoded 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 8a3f5c2..3161dcf 100644 --- a/src/components/face-category/FacetCategory.ts +++ b/src/components/face-category/FacetCategory.ts @@ -20,6 +20,7 @@ export default class FacetCategory extends Vue { filterName!: string; get alias(): string { + // console.log("filterName:", this.filterName); return this.filterName == "datatype" ? "doctype" : this.filterName; } @@ -53,6 +54,7 @@ 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 1b08792..468d55b 100644 --- a/src/components/vs-input/vs-input.ts +++ b/src/components/vs-input/vs-input.ts @@ -2,12 +2,17 @@ // 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 { SolrSettings } from "@/models/solr"; // PENDING USE + +import { OpenSettings } from "@/models/solr"; 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 { 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! @Component({ name: "VsInput", @@ -16,30 +21,40 @@ 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 = ""; + private display = ""; // Input display value @Prop() private propDisplay = ""; private value!: Suggestion | string; private error = ""; - 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", + 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", // core: "test_data", // SOLR.core; // host: "repository.geologie.ac.at", }; - // private rdrAPI!: DatasetService; - itemRefs!: Array; - emits = ["filter"]; + // private rdrAPI!: DatasetService; + itemRefs!: Array; // Array to store references to suggestion items + emits = ["filter"]; // Emits filter event + + // Set reference for each item setItemRef(el: Element): void { this.itemRefs.push(el); } @@ -68,53 +83,113 @@ 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(); - 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(title, SearchType.Title); - suggestions.push(suggestion); - } - } - if (this.find(dataset.author, this.display.toLowerCase()) !== "") { - const author = this.find(dataset.author, this.display.toLowerCase()); + // 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 hasAuthorSuggestion = suggestions.some((suggestion) => suggestion.value === author && suggestion.type == SearchType.Author); + 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); + if (!hasTitleSuggestion) { + const suggestion = new Suggestion(dataset.title_output, highlightedTitle, 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 (!hasAuthorSuggestion) { - const suggestion = new Suggestion(author, SearchType.Author); + const suggestion = new Suggestion(datasetAuthor, highlightedAuthor, SearchType.Author); suggestions.push(suggestion); } } - 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 (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 (!hasSubjectSuggestion) { - const suggestion = new Suggestion(subject, SearchType.Subject); + const suggestion = new Suggestion(datasetSubject, highlightedSubject, 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 = []; @@ -122,15 +197,20 @@ 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); @@ -142,7 +222,9 @@ export default class VsInput extends Vue { } } + // Perform the search request private resourceSearch() { + // console.log("resourceSearch"); if (!this.display) { this.results = []; return; @@ -152,23 +234,29 @@ export default class VsInput extends Vue { this.request(); } + // Make the API request to search for datasets private request(): void { - DatasetService.searchTerm(this.display, this.solr.core, this.solr.host).subscribe({ - next: (res: Dataset[]) => this.dataHandler(res), + 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), error: (error: string) => this.errorHandler(error), complete: () => (this.loading = false), }); } - private dataHandler(datasets: Dataset[]): void { + // Handle the search results + private dataHandler(datasets: Dataset[], highlights: HitHighlight[]): void { this.results = datasets; - // this.$emit("search", this.display); - // this.loading = false; + this.highlights = highlights; // Store highlights + // console.log(datasets); + } + // Handle errors from the search request private errorHandler(err: string): void { this.error = err; - // this.loading = false; } /** @@ -180,7 +268,9 @@ 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; @@ -190,6 +280,7 @@ export default class VsInput extends Vue { this.fixScrolling(); } + // Scroll the selected suggestion into view private fixScrolling() { const currentElement = this.itemRefs[this.selectedIndex]; currentElement.scrollIntoView({ @@ -199,7 +290,9 @@ 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; @@ -209,7 +302,10 @@ 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(); @@ -222,18 +318,18 @@ export default class VsInput extends Vue { @Emit("search-change") private select(obj: Suggestion): Suggestion { - // 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; + console.log("select:"); + this.value = obj; + console.log(obj); + + this.display = obj.value; 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) { @@ -248,15 +344,11 @@ 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 7980aed..e06d528 100644 --- a/src/components/vs-input/vs-input.vue +++ b/src/components/vs-input/vs-input.vue @@ -1,10 +1,15 @@