forked from geolba/tethys.frontend
- Code cleaning for OpenSearch
- Added comments - Facets menu small change
This commit is contained in:
parent
50ab318854
commit
6f1b9f4c5f
5 changed files with 264 additions and 389 deletions
|
|
@ -1,17 +1,18 @@
|
|||
// Import necessary modules, components, and models from Vue and the project
|
||||
import { Component, Vue, Prop } from "vue-facing-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";
|
||||
import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
|
||||
// import { SolrSettings } from "@/models/solr";
|
||||
|
||||
// Import models and services
|
||||
// import { SolrSettings } from "@/models/solr";
|
||||
import { OpenSettings } from "@/models/solr";
|
||||
// import { DatasetService } from "@/services/dataset.service";
|
||||
import DatasetService from "../../services/dataset.service";
|
||||
import { Suggestion, Dataset, SearchType } from "@/models/dataset";
|
||||
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
|
||||
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance, OpenSearchResponse, HitHighlight } from "@/models/headers";
|
||||
import { FacetFields, FacetItem, FacetResults, FacetInstance, OpenSearchResponse, HitHighlight } from "@/models/headers";
|
||||
import { FacetItem, FacetResults, OpenSearchResponse } from "@/models/headers";
|
||||
import { ActiveFilterCategories } from "@/models/solr";
|
||||
// import { SOLR_HOST, SOLR_CORE } from "@/constants";
|
||||
import { IPagination } from "@/models/pagination";
|
||||
|
|
@ -19,7 +20,7 @@ import PaginationComponent from "@/components/PaginationComponent.vue";
|
|||
|
||||
import { OPEN_HOST, OPEN_CORE } from "@/constants";
|
||||
|
||||
// Decorate the component and define its name and components
|
||||
// Define the Vue component, its name, and child components
|
||||
@Component({
|
||||
name: "SearchViewComponent",
|
||||
components: {
|
||||
|
|
@ -31,51 +32,51 @@ import { OPEN_HOST, OPEN_CORE } from "@/constants";
|
|||
},
|
||||
})
|
||||
|
||||
// Define the SearchViewComponent class
|
||||
// Export the default class for the component
|
||||
export default class SearchViewComponent extends Vue {
|
||||
@Prop()
|
||||
display!: string;
|
||||
|
||||
@Prop()
|
||||
type!: string;
|
||||
|
||||
results: Array<Dataset> = [];
|
||||
|
||||
// facets: FacetFields = new FacetFields();
|
||||
facets: FacetResults = new FacetResults();
|
||||
searchTerm: string | Suggestion = "";
|
||||
// activeFilterCategories: Object = {};
|
||||
activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
|
||||
pagination: IPagination = {
|
||||
// Define props passed from the parent component
|
||||
@Prop()
|
||||
display!: string; // Search display string
|
||||
@Prop()
|
||||
type!: string; // Search type
|
||||
|
||||
// Declare variables used in the component
|
||||
results: Array<Dataset> = []; // Array to hold search results
|
||||
facets: FacetResults = new FacetResults(); // Object to hold facet results
|
||||
searchTerm: string | Suggestion = ""; // The search term input
|
||||
activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // Active filter categories for search
|
||||
pagination: IPagination = { // Pagination data for the results
|
||||
total: 0,
|
||||
perPage: 10,
|
||||
currentPage: 1,
|
||||
// lastPage: 0,
|
||||
data: [],
|
||||
};
|
||||
loaded = false;
|
||||
numFound!: number;
|
||||
loaded = false; // Boolean to track whether data has been loaded
|
||||
numFound!: number; // Number of results found
|
||||
|
||||
// private solr: SolrSettings = {
|
||||
// core: SOLR_CORE, //"rdr_data", // SOLR.core;
|
||||
// host: SOLR_HOST, //"tethys.at",
|
||||
// };
|
||||
|
||||
// Define settings for the OpenSearch API (core and host information)
|
||||
private open: OpenSettings = {
|
||||
core: OPEN_CORE, //"rdr_data", // SOLR.core;
|
||||
host: OPEN_HOST, //"tethys.at",
|
||||
core: OPEN_CORE, //
|
||||
host: OPEN_HOST, //
|
||||
};
|
||||
|
||||
private error = "";
|
||||
|
||||
// Computed property to get search term as string
|
||||
get stringSearchTerm(): string {
|
||||
// console.log("stringSearchTerm:", this.searchTerm);
|
||||
|
||||
// If searchTerm is a string, return it directly
|
||||
if (typeof this.searchTerm === "string") {
|
||||
return this.searchTerm;
|
||||
// If searchTerm is a Suggestion, return its value and type alias
|
||||
} else if (this.searchTerm instanceof Suggestion) {
|
||||
return this.searchTerm.value + " (" + this.getTypeAlias(this.searchTerm.type) + ")";
|
||||
// return this.searchTerm.value + " (" + this.searchTerm.type + ")";
|
||||
// Default to empty string
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
|
@ -109,9 +110,6 @@ export default class SearchViewComponent extends Vue {
|
|||
return false;
|
||||
}
|
||||
}
|
||||
// getKeyName(value: string) {
|
||||
// return Object.entries(Suggestion).find(([key, val]) => val === value)?.[0];
|
||||
// }
|
||||
|
||||
// Method to get enum key by enum value
|
||||
getEnumKeyByEnumValue<T extends { [index: string]: string }>(myEnum: T, enumValue: string): keyof T | null {
|
||||
|
|
@ -124,7 +122,6 @@ export default class SearchViewComponent extends Vue {
|
|||
beforeMount(): void {
|
||||
// console.log("beforeMount!");
|
||||
|
||||
// this.rdrAPI = new DatasetService();
|
||||
// Trigger search based on provided display and type props
|
||||
if (this.display != "" && this.type != undefined) {
|
||||
const enumKey: "Title" | "Author" | "Subject" | "Doctype" | null = this.getEnumKeyByEnumValue(SearchType, this.type);
|
||||
|
|
@ -150,64 +147,30 @@ export default class SearchViewComponent extends Vue {
|
|||
this.activeFilterCategories = new ActiveFilterCategories();
|
||||
this.facets = new FacetResults();
|
||||
this.searchTerm = suggestion;
|
||||
// console.log("ONSEARCH > suggestion: ", suggestion);
|
||||
|
||||
// /* Perform faceted search. The method returns an Observable, and the code subscribes to this Observable to handle the response. If the response is successful, it calls the dataHandler method
|
||||
// with the Solr response as a parameter. If there is an error, it calls the errorHandler method with the error message as a parameter */
|
||||
// DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
|
||||
// DatasetService.facetedSearchSOLR(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
|
||||
// next: (res: SolrResponse) => this.dataHandler(res),
|
||||
// error: (error: string) => this.errorHandler(error),
|
||||
// });
|
||||
|
||||
DatasetService.facetedSearchOPEN(suggestion, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
// next: (res: { datasets: Dataset[], highlights: HitHighlight[] }) => this.dataHandlerOpen(res.datasets, res.highlights),
|
||||
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res),
|
||||
DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
next: (res: OpenSearchResponse) => this.dataHandler(res),
|
||||
error: (error: string) => this.errorHandler(error),
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Handle the search results
|
||||
private dataHandlerOPEN(res: OpenSearchResponse, filterItem?: FacetItem): void {
|
||||
private dataHandler(res: OpenSearchResponse, filterItem?: FacetItem): void {
|
||||
this.results = res.hits.hits.map(hit => hit._source);
|
||||
this.numFound = res.hits.total.value;
|
||||
|
||||
// console.log("dataHandlerOPEN (results, numFound):");
|
||||
// console.log(this.results);
|
||||
// console.log(this.numFound);
|
||||
// console.log(res.hits.hits);
|
||||
// console.log(res.hits.total.value); console.log(res);
|
||||
// console.log("results:");
|
||||
// console.log(res);
|
||||
|
||||
// for (const key in this.results) {
|
||||
// if (Object.prototype.hasOwnProperty.call(this.results, key)) {
|
||||
// const element = this.results[key];
|
||||
// // console.log(element.abstract[0]);
|
||||
// // console.log(element.language);
|
||||
// console.log(element.server_date_published);
|
||||
// }
|
||||
// }
|
||||
|
||||
this.pagination.total = res.hits.total.value;
|
||||
this.pagination.perPage = 10;
|
||||
this.pagination.data = this.results;
|
||||
this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
|
||||
|
||||
// if (res.aggregations) {
|
||||
// const facet_fields = res.aggregations;
|
||||
|
||||
// let prop: keyof typeof facet_fields;
|
||||
|
||||
// for (prop in facet_fields) {
|
||||
// const facetCategory = facet_fields[prop];
|
||||
// if (facetCategory.buckets) {
|
||||
// const facetItems = facetCategory.buckets.map(bucket => new FacetItem(bucket.key, bucket.doc_count));
|
||||
// this.facets[prop] = facetItems.filter(el => el.count > 0);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
if (res.aggregations) {
|
||||
const facet_fields = res.aggregations;
|
||||
|
||||
|
|
@ -244,7 +207,7 @@ export default class SearchViewComponent extends Vue {
|
|||
}
|
||||
|
||||
// // Method to handle search response
|
||||
// private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
|
||||
// private dataHandlerSOLR(res: SolrResponse, filterItem?: FacetItem): void {
|
||||
// // console.log("dataHandlerSOLR (docs, numFound):");
|
||||
// // console.log(res.response.docs);
|
||||
// // console.log(res.response.numFound);
|
||||
|
|
@ -315,13 +278,13 @@ export default class SearchViewComponent extends Vue {
|
|||
const start = page * this.pagination.perPage - this.pagination.perPage;
|
||||
|
||||
// // Trigger new search with updated pagination parameters
|
||||
// DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, start.toString()).subscribe(
|
||||
// DatasetService.facetedSearchSOLR(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, start.toString()).subscribe(
|
||||
// (res: SolrResponse) => this.dataHandler(res),
|
||||
// (error: string) => this.errorHandler(error),
|
||||
// );
|
||||
|
||||
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, start.toString()).subscribe({
|
||||
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res),
|
||||
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, start.toString()).subscribe({
|
||||
next: (res: OpenSearchResponse) => this.dataHandler(res),
|
||||
error: (error: string) => this.errorHandler(error),
|
||||
});
|
||||
}
|
||||
|
|
@ -332,37 +295,32 @@ export default class SearchViewComponent extends Vue {
|
|||
|
||||
// Reset current page
|
||||
this.pagination.currentPage = 1;
|
||||
// console.log(facetItem.val);
|
||||
// console.log(facetItem.category);
|
||||
|
||||
// if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
|
||||
|
||||
|
||||
// Check if filter item already exists
|
||||
if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
|
||||
this.activeFilterCategories[facetItem.category] = new Array<string>();
|
||||
// console.log(this.activeFilterCategories);
|
||||
}
|
||||
// if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
|
||||
|
||||
// Check if filter item is not already applied
|
||||
if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
|
||||
// Add filter item to active filter categories
|
||||
this.activeFilterCategories[facetItem.category].push(facetItem.val);
|
||||
// Trigger new search with updated filter
|
||||
// DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
|
||||
|
||||
// DatasetService.facetedSearchSOLR(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
|
||||
// (res: SolrResponse) => this.dataHandler(res, facetItem),
|
||||
// (error: string) => this.errorHandler(error),
|
||||
// );
|
||||
// console.log(this.activeFilterCategories);
|
||||
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res, facetItem),
|
||||
|
||||
// Trigger new search with updated filter
|
||||
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
next: (res: OpenSearchResponse) => this.dataHandler(res, facetItem),
|
||||
error: (error: string) => this.errorHandler(error),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// // // Method to clear facet category filter
|
||||
// onClearFacetCategory(categoryName: string): void {
|
||||
// onClearFacetCategorySOLR(categoryName: string): void {
|
||||
// console.log("onClearFacetCategory");
|
||||
|
||||
// delete this.activeFilterCategories[categoryName];
|
||||
|
|
@ -416,12 +374,12 @@ export default class SearchViewComponent extends Vue {
|
|||
// }
|
||||
|
||||
// Method to clear facet category filter
|
||||
onClearFacetCategoryOPEN(categoryName: string): void {
|
||||
console.log("onClearFacetCategory");
|
||||
onClearFacetCategory(categoryName: string): void {
|
||||
// console.log("onClearFacetCategory");
|
||||
delete this.activeFilterCategories[categoryName];
|
||||
|
||||
// Trigger new search with updated filter
|
||||
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
|
||||
next: (res: OpenSearchResponse) => {
|
||||
this.results = res.hits.hits.map(hit => hit._source);
|
||||
this.numFound = res.hits.total.value;
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@
|
|||
<active-facet-category
|
||||
v-bind:filterItems="values"
|
||||
v-bind:categoryName="key"
|
||||
@clear-facet-category="onClearFacetCategoryOPEN"
|
||||
@clear-facet-category="onClearFacetCategory"
|
||||
></active-facet-category>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue