- delete activated facets again
This commit is contained in:
Arno Kaimbacher
parent
795313d3dd
commit
bfd914a36d
15 changed files with 223 additions and 24 deletions
|
|
@ -34,12 +34,19 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="active-filter-items twelve columns">
|
||||
<!-- <div class="active-filter-items twelve columns">
|
||||
<a class="filter-link" v-for="(value, key, index) in activeFilterItems" :key="index">
|
||||
<span>{{ key + ": " }}</span>
|
||||
<span v-if="value && value.length > 0">{{ value.join(', ') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="twelve columns">
|
||||
<span class="active-filter-items" v-for="(values, key, index) in activeFilterCategories" :key="index">
|
||||
<active-facet-category :data="values" :categoryName="key" @clearFacetCategory="onClearFacetCategory"></active-facet-category>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Results section -->
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, Vue } from 'vue-property-decorator';
|
|||
import VsInput from './text-search/vs-input.vue';
|
||||
import VsResults from './search-results/vs-results.vue';
|
||||
import FacetList from './search-results/facet-list.vue';
|
||||
import ActiveFacetCategory from './search-results/active-facet-category.vue';
|
||||
import VsPagination from './search-results/vs-pagination.vue';
|
||||
import rdrApi from './search-results/dataservice';
|
||||
import FilterItem from './models/filter-item';
|
||||
|
|
@ -11,6 +12,7 @@ import FilterItem from './models/filter-item';
|
|||
VsInput,
|
||||
VsResults,
|
||||
FacetList,
|
||||
ActiveFacetCategory,
|
||||
VsPagination
|
||||
}
|
||||
})
|
||||
|
|
@ -19,7 +21,7 @@ export default class App extends Vue {
|
|||
results: Array<any> = [];
|
||||
facets: Object = {};
|
||||
searchTerm: string = '';
|
||||
activeFilterItems: Object = {};
|
||||
activeFilterCategories: Object = {};
|
||||
pagination: Object = {
|
||||
total: 0,
|
||||
per_page: 2,
|
||||
|
|
@ -32,21 +34,69 @@ export default class App extends Vue {
|
|||
|
||||
async onPaginate(start: number): Promise<void> {
|
||||
// console.log(start);
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterItems, start.toString());
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, start.toString());
|
||||
this.results = res.response.docs;
|
||||
}
|
||||
|
||||
async onClearFacetCategory(categoryName, alias): Promise<void> {
|
||||
// alert(categoryName);
|
||||
delete this.activeFilterCategories[categoryName];
|
||||
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories);
|
||||
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;
|
||||
|
||||
var facet_fields = res.facet_counts.facet_fields;
|
||||
for (var prop in facet_fields) {
|
||||
var facetValues = facet_fields[prop].map((facetValue, i) => {
|
||||
if (i % 2 === 0) {
|
||||
// var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
|
||||
var rObj:FilterItem;
|
||||
if (this.facets[prop].some(e => e.value === facetValue)) {
|
||||
// console.log(facetValue + " is included")
|
||||
var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
|
||||
// console.log(indexOfFacetValue);
|
||||
rObj = this.facets[prop][indexOfFacetValue];
|
||||
rObj.count = facet_fields[prop][i + 1];
|
||||
//if facet ccategory is reactivated category, deactivate all filter items
|
||||
if (this.propName(this.facets, this.facets[prop]) == alias) {
|
||||
rObj.Active = false;
|
||||
}
|
||||
} else {
|
||||
rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
|
||||
}
|
||||
return rObj;
|
||||
}
|
||||
}).filter(function (el) {
|
||||
return el != null && el.count > 0;
|
||||
});
|
||||
// this.facets.push({ filterName: prop, values: facetValues });
|
||||
this.facets[prop] = facetValues;
|
||||
}
|
||||
}
|
||||
|
||||
private propName (obj, type): string {
|
||||
let stringPropValue = Object.keys(obj).find(key => obj[key] === type);
|
||||
return stringPropValue;
|
||||
}
|
||||
|
||||
async onFilter(filter): Promise<void> {
|
||||
// console.log(filter.value);
|
||||
// if (!this.activeFilterItems.some(e => e.value === filter.value)) {
|
||||
// this.activeFilterItems.push(filter);
|
||||
if (!this.activeFilterItems.hasOwnProperty(filter.Category)) {
|
||||
this.activeFilterItems[filter.Category] = [];
|
||||
if (!this.activeFilterCategories.hasOwnProperty(filter.Category)) {
|
||||
this.activeFilterCategories[filter.Category] = Vue.observable([]);
|
||||
}
|
||||
if (!this.activeFilterItems[filter.Category].some(e => e === filter.value)) {
|
||||
this.activeFilterItems[filter.Category].push(filter.value);
|
||||
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
|
||||
if (!this.activeFilterCategories[filter.Category].some(e => e === filter.value)) {
|
||||
this.activeFilterCategories[filter.Category].push(filter.value);
|
||||
// alert(this.activeFilterCategories[filter.Category]);
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories);
|
||||
this.results = res.response.docs;
|
||||
this.numFound = res.response.numFound;
|
||||
|
||||
|
|
@ -92,13 +142,13 @@ export default class App extends Vue {
|
|||
term = "*%3A*";
|
||||
}
|
||||
|
||||
this.activeFilterItems = {};
|
||||
this.activeFilterCategories = {};
|
||||
// while (this.facets.length > 0) {
|
||||
// this.facets.pop();
|
||||
// }
|
||||
this.facets = {};
|
||||
this.searchTerm = term;
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
|
||||
var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories);
|
||||
this.results = res.response.docs;
|
||||
this.numFound = res.response.numFound;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
|
||||
//import FilterItem from '../models/filter-item';
|
||||
|
||||
@Component
|
||||
export default class ActiveFacetCategory extends Vue {
|
||||
|
||||
bar = '';
|
||||
|
||||
@Prop([Array])
|
||||
data!: string[];
|
||||
|
||||
@Prop([String])
|
||||
categoryName;
|
||||
|
||||
// @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();
|
||||
// }
|
||||
// }
|
||||
|
||||
deactivateFacetCategory = function (): void {
|
||||
// filterItem.Category = this.alias;
|
||||
// filterItem.Active = true;
|
||||
this.$emit("clearFacetCategory", this.categoryName, this.alias);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
83
resources/js/search/search-results/active-facet-category.vue
Normal file
83
resources/js/search/search-results/active-facet-category.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<!-- <a v-for="(item, index) in data" :key="index" class="list-group-item">
|
||||
<span>{{ filterName + ": " }}</span>
|
||||
<span>{{ item }}</span>
|
||||
</a>-->
|
||||
|
||||
|
||||
<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="data && data.length > 0">{{ data.join(', ') }}</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ActiveFacetCategory from "./active-facet-category-class";
|
||||
export default ActiveFacetCategory;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
th, td {
|
||||
/* padding: 0;
|
||||
text-align: left; */
|
||||
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:24px;
|
||||
background-repeat:no-repeat;
|
||||
background-position: 0 0;
|
||||
font-size:12px;
|
||||
font-weight:bold;
|
||||
vertical-align:middle;
|
||||
cursor:pointer;
|
||||
color: #bfbfbf;
|
||||
/*background-image:url('img/add.png');*/
|
||||
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAn1BMVEXMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzJycnLy8v////c3Nzn5+fp6en8/PzNzc3KysrOzs7l5eXGxsbR0dHa2trg4ODz8/PMzMzX19fw8PDd3d3m5ubu7u7y8vL7+/v09PTb29vk5OTY2NiyHSPoAAAAGXRSTlP0yb3mvngEyOd/6BbFrZrAlcoXt/Hp89A1KxYHDAAAAJBJREFUGNN1kEcOwzAMBJnee6Wo6p5e//+2BJIdCAq8lx3MgSAJ3cG44aU3HUHnEGQC7ZIYYw6GpTLvosiNxT40beOZSKDFVqU40cVTBjHJiOIE0TjFjpxnguiafVtbZW70yz1ioVJOsVxKcSJ6CClj/Tce65eoUU+lXpWauWN1mkaONjAPP7GA5WoNXra7/Qf12yWALFrgcgAAAABJRU5ErkJggg==') /*img/add.png*/;
|
||||
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox:checked + label.css-label {
|
||||
/*background-position: 0 -15px;*/
|
||||
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=');
|
||||
}
|
||||
/*
|
||||
input[type=checkbox].css-checkbox:disabled + label.css-label {
|
||||
color: #bfbfbf;
|
||||
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAIcKAACMDQABBbcAAIDoAABSBQABFVsAADavAAAfQQLQ3GkAAABpSURBVHja7NShEcIwAIXhLyEetsCzAKJdghlqWKCWEdqFkLnD0HF6YFiANKIi/wDfPfVCzvmECR2S//rgjSFhxE15V8wRF9s7x9+8ra21IFGlGtSgWlDYE3SIeFaAXgkPHNEXHtuC+3cA0zcPcDfWW3gAAAAASUVORK5CYII=');
|
||||
cursor:default;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@ import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
|
|||
import FilterItem from '../models/filter-item';
|
||||
|
||||
@Component
|
||||
export default class FacetList extends Vue {
|
||||
export default class ActiveFacetList extends Vue {
|
||||
|
||||
ITEMS_PER_FILTER = 2;
|
||||
bar = '';
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue