- 'xsltfile' => "public/solr.xslt"
- search_style.css - vuejs based solr search - vuejs facets
This commit is contained in:
Arno Kaimbacher
parent
eb4d35ddc1
commit
dd2ad2d898
16 changed files with 316 additions and 110 deletions
21
resources/assets/js/search/search-results/dataservice.js
Normal file
21
resources/assets/js/search/search-results/dataservice.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
|
||||
async search (term) {
|
||||
// solr endpoint
|
||||
// const host = 'http://voyagerdemo.com/';
|
||||
const host = 'http://repository.geologie.ac.at:8983/';
|
||||
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";
|
||||
|
||||
// $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`;
|
||||
|
||||
const res = await axios.get(api);
|
||||
return res.data;//.response;//.docs;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
|
||||
|
||||
|
||||
|
||||
|
||||
@Component
|
||||
export default class FacetList extends Vue {
|
||||
|
||||
ITEMS_PER_FILTER = 5;
|
||||
bar = 'bar';
|
||||
|
||||
@Prop()
|
||||
data;
|
||||
|
||||
get myLanguageFilters() {
|
||||
var facetValues = this.data.language.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] };
|
||||
return rObj;
|
||||
}
|
||||
}).filter(function (el) {
|
||||
return el != null && el.count > 0;
|
||||
});
|
||||
// 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;
|
||||
};
|
||||
|
||||
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) => {
|
||||
if (i % 2 === 0) {
|
||||
// var rObj = {};
|
||||
// rObj['value'] = facet;
|
||||
// rObj['count'] = solrArray[i +1];
|
||||
var rObj = { value: facet, count: solrArray[i + 1] };
|
||||
return rObj;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// this.facetCounts = this.data.filter((facet, i) => i % 2 === 1);
|
||||
return facetValues;
|
||||
}
|
||||
}
|
||||
31
resources/assets/js/search/search-results/facet-list.vue
Normal file
31
resources/assets/js/search/search-results/facet-list.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card" v-for="(valueArray, filterName, index) in facets" :key="index">
|
||||
<!-- <span>property: {{ filterName }}</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">
|
||||
<li class="active" role="radio">
|
||||
<input
|
||||
class="css-w1gpbi"
|
||||
name="language"
|
||||
v-bind:id="value.value"
|
||||
type="radio"
|
||||
v-bind:value="value.value"
|
||||
/>
|
||||
<label :for="value.value">
|
||||
<span>{{ value.value }} ({{ value.count }})</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import FacetList from "./facet-list-class";
|
||||
export default FacetList;
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
|
||||
async search (term) {
|
||||
// solr endpoint
|
||||
const host = 'http://voyagerdemo.com/';
|
||||
const path = 'daily/solr/v0/select';
|
||||
const fields = 'id,name:[name],thumb:[thumbURL],abstract,description'; // fields we want returned
|
||||
const api = `${host}${path}?q=${term}&fl=${fields}&wt=json&rows=20`;
|
||||
|
||||
const res = await axios.get(api);
|
||||
// const call = await fetch(api);
|
||||
// const json = await res.json();
|
||||
return res.data.response.docs;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class VsResults extends Vue {
|
||||
|
||||
@Prop()
|
||||
data;
|
||||
|
||||
get results() {
|
||||
return this.data;
|
||||
};
|
||||
|
||||
truncate(text, limit) {
|
||||
text = text === undefined ? '' : text;
|
||||
const content = text.split(' ').slice(0, limit);
|
||||
return content.join(' ');
|
||||
};
|
||||
|
||||
error(item) {
|
||||
delete item.thumb;
|
||||
this.$forceUpdate();
|
||||
};
|
||||
|
||||
convert(unixtimestamp) {
|
||||
|
||||
// Unixtimestamp
|
||||
// var unixtimestamp = document.getElementById('timestamp').value;
|
||||
// Months array
|
||||
var months_arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
// Convert timestamp to milliseconds
|
||||
var date = new Date(unixtimestamp * 1000);
|
||||
// Year
|
||||
var year = date.getFullYear();
|
||||
// Month
|
||||
var month = months_arr[date.getMonth()];
|
||||
// Day
|
||||
var day = date.getDate();
|
||||
// Hours
|
||||
var hours = date.getHours();
|
||||
// Minutes
|
||||
var minutes = "0" + date.getMinutes();
|
||||
// Seconds
|
||||
var seconds = "0" + date.getSeconds();
|
||||
// Display date time in MM-dd-yyyy h:m:s format
|
||||
var convdataTime = month + '-' + day + '-' + year + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
|
||||
// document.getElementById('datetime').innerHTML = convdataTime;
|
||||
return convdataTime;
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
63
resources/assets/js/search/search-results/vs-results.vue
Normal file
63
resources/assets/js/search/search-results/vs-results.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<!-- <div class="card-columns" >
|
||||
<div class="card" v-for="item in results" :key="item.id">
|
||||
<img v-if="item.thumb" class="card-img-top" :src="item.thumb" :alt="item.title" @error="error(item)">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{item.name}}</h5>
|
||||
<p class="card-text" v-html="truncate(item.description || item.abstract, 50)"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="results">
|
||||
|
||||
<div class="result-list-info">
|
||||
<div class="resultheader">
|
||||
Your search yielded
|
||||
<strong>{{ results.length }}</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="result-list-container">
|
||||
<div class="row">
|
||||
<ul class="search-items isotope js-isotope u-cf">
|
||||
<li v-for="document in results" :key="document.id" class="six columns post">
|
||||
<div class="search-detail">
|
||||
<div>
|
||||
<a
|
||||
v-bind:href="'dataset/' + document.id"
|
||||
>{{ document.title_output }}</a>
|
||||
</div>
|
||||
{{ convert(document.server_date_published) }}
|
||||
|
||||
<p v-if="document.title_additional && document.title_additional.length > 0">
|
||||
<em>Additional Title:{{ document.title_additional.join(', ') }}</em>
|
||||
</p>
|
||||
|
||||
<div v-if="document.author && document.author.length > 0">
|
||||
<em>Author: {{ document.author.join(', ') }}</em>
|
||||
</div>
|
||||
|
||||
<p class="clamped clamped-2">
|
||||
<span class="text">
|
||||
Abstract: {{ document.abstract_output }}
|
||||
<span class="ellipsis">...</span>
|
||||
<span class="fill"></span>
|
||||
</span>
|
||||
</p>
|
||||
<div class="css-subject" v-if="document.subject && document.subject.length > 0">
|
||||
<div v-for="(item, index) in document.subject" :key="index" class="css-keyword">#{{ item }}</div>
|
||||
<!-- <div class="css-keyword">#graphql</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import VgResults from "./vs-results-class";
|
||||
export default VgResults;
|
||||
</script>
|
||||
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue