diff --git a/src/App.vue b/src/App.vue index 1bd12b0..2019c82 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,12 +19,6 @@ -
- - - -
-
@@ -56,6 +50,12 @@ {{ numFound }} results:
+
+
+ Your search yielded + 0 results: +
+
diff --git a/src/app.ts b/src/app.ts index 05e505e..b8bcc21 100644 --- a/src/app.ts +++ b/src/app.ts @@ -3,10 +3,11 @@ import HelloWorld from "./components/HelloWorld/HelloWorld.vue"; 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 { DatasetService } from "./services/dataset.service"; import { Suggestion } from "./models/dataset"; -import { SolrResponse, FacetFields, FacetItem, FacetResults } from "./models/headers"; +import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers"; import { ActiveFilterCategories } from "@/models/solr"; @Options({ @@ -15,6 +16,7 @@ import { ActiveFilterCategories } from "@/models/solr"; VsInput, VsResult, FacetCategory, + ActiveFacetCategory, }, }) export default class App extends Vue { @@ -192,4 +194,52 @@ export default class App extends Vue { // this.facets[prop] = facetValues; } } + + onClearFacetCategory(categoryName: string): void { + // alert(categoryName); + delete this.activeFilterCategories[categoryName]; + + this.rdrAPI.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe( + (res: SolrResponse) => { + this.results = res.response.docs; + this.numFound = res.response.numFound; + + // pagination + this.pagination["total"] = res.response.numFound; + this.pagination["per_page"] = res.responseHeader.params.rows; + this.pagination["current_page"] = 1; + this.pagination["data"] = res.response.docs; + + const facet_fields: FacetFields = res.facets; + let prop: keyof typeof facet_fields; + for (prop in facet_fields) { + const facetCategory: FacetInstance = facet_fields[prop]; + if (facetCategory.buckets) { + const facetItems: Array = facetCategory.buckets; + + const facetValues = facetItems.map((facetItem, index) => { + let rObj: FacetItem; + if (this.facets[prop]?.some((e) => e.val === facetItem.val)) { + // console.log(facetValue + " is included") + const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val); + // console.log(indexOfFacetValue); + rObj = this.facets[prop][indexOfFacetValue]; + rObj.count = facetItem.count; + // rObj = new FacetItem(val, count); + //if facet ccategory is reactivated category, deactivate all filter items + if (prop == categoryName) { + rObj.active = false; + } + } else { + rObj = new FacetItem(facetItem.val, facetItem.count); + } + return rObj; + }); + this.facets[prop] = facetValues; + } + } + }, + (error: any) => this.errorHandler(error), + ); + } } diff --git a/src/components/active-facet-category/ActiveFacetCategory.ts b/src/components/active-facet-category/ActiveFacetCategory.ts new file mode 100644 index 0000000..509130a --- /dev/null +++ b/src/components/active-facet-category/ActiveFacetCategory.ts @@ -0,0 +1,55 @@ +import { Options, Vue } from "vue-class-component"; +import { Prop, Emit } from "vue-property-decorator"; + +@Options({ + name: "ActiveFacetCategory", +}) +export default class ActiveFacetCategory extends Vue { + bar = ""; + + @Prop([Array]) + filterItems!: string[]; + + @Prop([String]) + categoryName!: string; + + // @Prop([String]) + // alias; + + get alias(): string { + return this.categoryName == "doctype" ? "datatype" : this.categoryName; + } + + // get filterItems(): Array { + // return this.data; + // } + + // get uncollapseLabelText() : string { + // if (this.collapsed == true) { + // // return myLabels.viewer.sidePanel.more; //"More results"; + // return "More results"; + // } + // else { + // // return myLabels.viewer.sidePanel.collapse; //"Collapse"; + // return "Collapse"; + // } + // } + + // toggle = function (): void { + // if (this.collapsed == true) { + // this.collapsed = false; + // } + // else if (this.collapsed == false) { + // this.collapsed = true; + // //list.children("li:gt(4)").hide(); + // } + // } + + @Emit("clearFacetCategory") + deactivateFacetCategory(): string { + // filterItem.Category = this.alias; + // filterItem.Active = true; + // this.$emit("clearFacetCategory", this.categoryName, this.alias); + return this.categoryName; + } +} diff --git a/src/components/active-facet-category/active-facet-category.vue b/src/components/active-facet-category/active-facet-category.vue new file mode 100644 index 0000000..35b182a --- /dev/null +++ b/src/components/active-facet-category/active-facet-category.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/components/vs-input/vs-input.ts b/src/components/vs-input/vs-input.ts index 0a53dc6..48c63ce 100644 --- a/src/components/vs-input/vs-input.ts +++ b/src/components/vs-input/vs-input.ts @@ -19,7 +19,7 @@ export default class VsInput extends Vue { readonly placeholder!: string; private display = ""; - private value!: Suggestion; + private value!: Suggestion | string; private error = ""; private results: Array = []; private loading = false; @@ -119,6 +119,7 @@ export default class VsInput extends Vue { search(): string { this.results = []; // this.$emit("search", this.display) + this.value = this.display; //(obj["title_output"]) ? obj["title_output"] : obj.id return this.display; } @@ -216,8 +217,8 @@ export default class VsInput extends Vue { // return; // } this.value = obj; //(obj["title_output"]) ? obj["title_output"] : obj.id - // this.display = obj; // this.formatDisplay(obj) - this.selectedDisplay = this.display; + this.display = obj.value; // this.formatDisplay(obj) + // this.selectedDisplay = this.display; this.close(); // this.$emit("update", this.value); @@ -238,12 +239,12 @@ export default class VsInput extends Vue { * Close the results list. If nothing was selected clear the search */ close(): void { - if (!this.value || !this.selectedDisplay) { + if (!this.value) { this.clear(); } - if (this.selectedDisplay !== this.display && this.value) { - this.display = this.selectedDisplay; - } + // if (this.selectedDisplay !== this.display && this.value) { + // this.display = this.selectedDisplay; + // } this.results = []; this.error = ""; //this.removeEventListener()