geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- add active filter facets

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-11-18 13:38:02 +01:00
parent 7d84d41dcc
commit d6b4ff882f
5 changed files with 188 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@ -19,12 +19,6 @@
</a>
</div>
<div class="content column is-half is-offset-6">
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
<active-facet-category :data="values" :categoryName="key"></active-facet-category>
</span>
</div>
<vs-input v-on:search-change="onSearch" v-bind:placeholder="'Enter your search term...'"></vs-input>
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
@ -56,6 +50,12 @@
<strong>{{ numFound }}</strong> results:
</div>
</div>
<div v-else-if="results.length == 0">
<div class="resultheader">
Your search yielded
<strong> 0</strong> results:
</div>
</div>
<!-- <div id="id-pro-sign-in" class="notification" style="">
<button
@ -128,6 +128,11 @@
</div>
<div class="column is-8 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
<div class="column" v-if="activeFilterCategories && Object.keys(activeFilterCategories).length > 0">
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
<active-facet-category v-bind:filterItems="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
</span>
</div>
<div class="results">
<!-- Results section -->
<vs-result v-bind:datasets="results"></vs-result>

52
src/app.ts
View File

@ -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<FacetItem> = 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),
);
}
}

55
src/components/active-facet-category/ActiveFacetCategory.ts Normal file
View File

@ -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<string> {
// 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;
}
}

63
src/components/active-facet-category/active-facet-category.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div>
<input v-bind:id="alias" v-bind:name="alias" type="checkbox" checked="checked" @click.prevent="deactivateFacetCategory()" class="css-checkbox" />
<label v-bind:for="alias" class="css-label">
<span>{{ alias + ": " }}</span>
<a class="gbaterm" v-if="filterItems && filterItems.length > 0">{{ filterItems.join(", ") }}</a>
</label>
</div>
</template>
<script lang="ts">
import ActiveFacetCategory from "./ActiveFacetCategory";
export default ActiveFacetCategory;
</script>
<style scoped>
th,
td {
border-bottom: 0px solid #e1e1e1;
}
.gbaterm {
color: #0099cc;
border: 1px solid rgb(200, 210, 255);
padding: 4px;
background: rgb(220, 225, 255);
/* display: inline-block; */
margin: 1px 0 1px 0;
border-radius: 2px;
}
/* -------------------------------------
CSS for Checkbox Type-1
---------------------------------------- */
input[type="checkbox"].css-checkbox {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
input[type="checkbox"].css-checkbox + label.css-label {
padding-left: 25px;
/* height: 24px;
display: inline-block; */
line-height: 30px;
background-repeat: no-repeat;
font-size: 12px;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAn1BMVEXMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzJycnLy8v////c3Nzn5+fp6en8/PzNzc3KysrOzs7l5eXGxsbR0dHa2trg4ODz8/PMzMzX19fw8PDd3d3m5ubu7u7y8vL7+/v09PTb29vk5OTY2NiyHSPoAAAAGXRSTlP0yb3mvngEyOd/6BbFrZrAlcoXt/Hp89A1KxYHDAAAAJBJREFUGNN1kEcOwzAMBJnee6Wo6p5e//+2BJIdCAq8lx3MgSAJ3cG44aU3HUHnEGQC7ZIYYw6GpTLvosiNxT40beOZSKDFVqU40cVTBjHJiOIE0TjFjpxnguiafVtbZW70yz1ioVJOsVxKcSJ6CClj/Tce65eoUU+lXpWauWN1mkaONjAPP7GA5WoNXra7/Qf12yWALFrgcgAAAABJRU5ErkJggg==");
}
input[type="checkbox"].css-checkbox:checked + label.css-label {
color: black;
/* opacity: 1; */
cursor: pointer;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAABGlBMVEUAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcwAmcz///8AmcwAl8sAmMsAmMwAlssAlcoAk8kAlsoAlMkMm80NnM0OnM4Pnc4Sns4SoNAAkskDl8sEl8sFmcwGm80AksgAkccAkch1x+R6yeV7yuWAzOaCzeZzx+MClssTns8Tn88TodAfpdIwq9VFtNlGtdpItdpKttpNt9tXvN5yx+ODzeaHz+eN0uiQ0+mX1uqY1uqd2Oui2u2w4O+x4O+04fC65PG75PHA5vPC5/PK6vTK6vXl9frm9frw+fzy+vz1+/33/P74/P78/v79/v8Cl8vxGPkTAAAAGHRSTlMCEB0+cHKNm6W5vL2+wMPP2ubn6On4+vtKR3RrAAAAy0lEQVR4Xl3M5XLDMBSEUSXlJinDXpEdZk6ZmZnp/V8jVxO7k/H3Yz1zJFmIsanEUNPjMTFKkSZFIkqLIsmrjdH8MVLxLrhbOt07SWsqHV1XJdG8o78u0PHqh5+4yagBrZ8DWNv/Ah5zAWl7xvYL3GdM8JCUPf1hvM36FBI1976Z2g36p9LuO1zHng7IHHwAD5dsrUpA5TvgKe9dAK+bckBy4/mlYJW9etvxw3/5xS3LJ7VtXqYUcVK6VcbtkpigSLMiPrO8OtTK3Egf1HcmSFPcuygAAAAASUVORK5CYII=");
}
</style>

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

@ -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<Dataset> = [];
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()