- .panel-title: capitalize

- bind sevaal filter-viewmodel
- better dataservice with datatype facet
This commit is contained in:
Arno Kaimbacher 2019-10-04 19:00:31 +02:00
parent 961c99adc1
commit c596a620cc
7 changed files with 59 additions and 42 deletions

View File

@ -22,6 +22,7 @@ section.search {
/* Seasrch items */
.left-bar .panel-title {
text-transform: capitalize;
margin-top: 8px;
margin-bottom: 2px;
color: white;

File diff suppressed because one or more lines are too long

View File

@ -9,7 +9,10 @@
<span>{{ item }}</span>
</div> -->
<facet-list v-bind:data="facets"></facet-list>
<!-- <facet-list v-bind:data="facets"></facet-list> -->
<div class="card" v-for="(valueArray, filterName, index) in facets" :key="index">
<facet-list :data="valueArray" :filterName="filterName"></facet-list>
</div>
</div>
</div>

View File

@ -27,7 +27,7 @@ export default class App extends Vue {
mounted() {
console.log('Component mounted.')
// console.log('Component mounted.')
}
}

View File

@ -9,7 +9,7 @@ export default {
const path = 'solr/rdr_data/select';
const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
const dismaxFields = "title^3 abstract^2 subject^1";
const facetFields = "facet.field=language";//&fq=year:(2019)";//&facet.query=year:2018";
const facetFields = "facet.field=language&facet.field={!key=datatype}doctype";//&fq=year:(2019)";//&facet.query=year:2018";
// $dismax->setQueryFields('title^3 abstract^2 subject^1');
const api = `${host}${path}?defType=dismax&q=${term}&fl=${fields}&qf=${dismaxFields}&facet=on&${facetFields}&wt=json&rows=20&indent=on`;

View File

@ -8,17 +8,22 @@ export default class FacetList extends Vue {
ITEMS_PER_FILTER = 5;
bar = 'bar';
// filterItems = [];
@Prop()
data;
@Prop()
filterName;
get myLanguageFilters() {
var facetValues = this.data.language.map((facet, i) => {
// console.log(this.filterName);
// console.log(this.data);
var facetValues = this.data.map((facet, i) => {
if (i % 2 === 0) {
// var rObj = {};
// rObj['value'] = facet;
// rObj['count'] = solrArray[i +1];
var rObj = { value: facet, count: this.data.language[i + 1] };
var rObj = { value: facet, count: this.data[i + 1] };
return rObj;
}
}).filter(function (el) {
@ -36,26 +41,27 @@ export default class FacetList extends Vue {
get facets() {
return this.data;
};
mounted() {
};
test(solrArray) {
//this.facetValues = this.data.language.filter((facet, i) => i % 2 === 0);
// var facetValues = this.data.language.map((facet, i) => {
var facetValues = solrArray.map((facet, i) => {
get filterItems() {
var facetValues = this.data.map((facet, i) => {
if (i % 2 === 0) {
// var rObj = {};
// rObj['value'] = facet;
// rObj['count'] = solrArray[i +1];
var rObj = { value: facet, count: solrArray[i + 1] };
var rObj = { value: facet, count: this.data[i + 1] };
return rObj;
}
}).filter(function (el) {
return el != null && el.count > 0;
});
// this.facetCounts = this.data.filter((facet, i) => i % 2 === 1);
// var facetValues = this.data.language.filter(function(facet, i) {
// return i % 2 === 0;
// }).map(function (facet, i) {
// var rObj = { value: facet, count: this.data.language[i + 1] };
// return rObj;
// }, this);
return facetValues;
}
};
mounted() {
};
}

View File

@ -1,12 +1,16 @@
<template>
<div>
<div class="card" v-for="(valueArray, filterName, index) in facets" :key="index">
<!-- <span>property: {{ filterName }}</span>
<span>value: {{ myLanguageFilters }}</span> -->
<span>value: {{ myLanguageFilters }}</span>-->
<div class="panel panel-primary">
<h3 class="panel-title">{{ filterName }}</h3> <!-- e.g.language -->
<ul class="filter-items" v-for="(value, index) in myLanguageFilters" :key="index">
<h3 class="panel-title filterViewModelName">{{ filterName }}</h3>
<!-- e.g.language -->
<ul
class="filter-items"
v-for="(value, index) in myLanguageFilters"
:key="index"
v-bind:class="{'limited':filterItems.length > 1}"
>
<li class="active" role="radio">
<input
class="css-w1gpbi"
@ -20,8 +24,11 @@
</label>
</li>
</ul>
</div>
</div>
<ul class="overflowing">
<li>
<span @click="toggle()"></span>
</li>
</ul>
</div>
</template>