- 'xsltfile' => "public/solr.xslt"

- search_style.css
- vuejs based solr search
- vuejs facets

config/solarium.php

@@ -9,5 +9,5 @@ return [
             'core' => env('SOLR_CORE', 'rdr_data')
         ]
         ],
-        'xsltfile' => "solr.xslt"
+        'xsltfile' => "public/solr.xslt"
 ];

public/css/search_style.css

@@ -288,26 +288,23 @@ font-size: 16px;
     max-height: 140px;
   }
 
+
+  /* overflow for abstracts */
   .clamped {
     line-height: 1.5;
     overflow: hidden;
     position: relative;
 }
-
-
-
 .clamped-2 {
     /* Clamp to 2 lines, ie line-height x 2: */
-    max-height: 6em;
+    max-height: 4.5em;
 }
-
 .ellipsis {
     background: #fff;
     bottom: 0;
     position: absolute;
     right: 0;
 }
-
 .fill {
     background: #fff; 
     height: 100%;

public/solr.xslt

@@ -220,7 +220,7 @@
                 </xsl:for-each>
 
                 <!-- subject (uncontrolled) -->
-                <xsl:for-each select="/Opus/Rdr_Dataset/Subject[@Type = 'uncontrolled']">
+                <xsl:for-each select="/Opus/Rdr_Dataset/Subject[@Type = 'Uncontrolled']">
                     <xsl:element name="field">
                         <xsl:attribute name="name">subject</xsl:attribute>
                         <xsl:value-of select="@Value" />

resources/assets/js/search/App.vue

@@ -1,31 +1,49 @@
 <template>
-  <div>
-    <!-- <div>{{ bar }}</div> -->
-    <!-- Search input section -->
-    <div class="row">
-      <div class="twelve columns">
-        <vs-input @search="onSearch"></vs-input>
+  <div  class="search-container row">
+
+    <div class="four columns left-bar">
+      <div id="left-bar" class="sidebar left-bar">
+         <h2 class="indexheader">DataXplore</h2>
+          
+          <!-- <div class="card" v-for="item in facets.language" :key="item.id">
+          <span>{{ item }}</span>     
+        </div> -->
+
+         <facet-list v-bind:data="facets"></facet-list>
       </div>
     </div>
 
-    <!-- Results section -->
-    <div class="results">
-      <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 class="eight columns right-bar">
+      <div id="right-bar" class="sidebar right-bar">
+        <!-- Search input section -->
+
+        <div class="row">
+          <div class="twelve columns">
+            <vs-input @search="onSearch"></vs-input>
+          </div>
         </div>
+
+        <!-- Results section -->
+        <vs-results v-bind:data="results"></vs-results>
+
+      
       </div>
     </div>
-
   </div>
+  <!-- <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>-->
 </template>
 
 <script lang="js">

resources/assets/js/search/app-class.js

@@ -1,20 +1,28 @@
 import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
-import VsInput from './components/vs-input.vue';
-import rdrApi from './search-results/search-api';
+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 rdrApi from './search-results/dataservice';
 
 @Component({
   components: {   
-    VsInput
+    VsInput,
+    VsResults,
+    FacetList
   }
 })
 export default class App extends Vue {
 
   results = [];
+  facets = [];
   bar = 'bar';
 
   async  onSearch(term) {
     console.log(term);
-    this.results = await rdrApi.search(term);
+    // this.results = await rdrApi.search(term);
+    var res = await rdrApi.search(term);
+    this.results = res.response.docs;
+    this.facets = res.facet_counts.facet_fields;
   }
  
 

resources/assets/js/search/main.js

@@ -2,6 +2,6 @@ import Vue from 'vue';
 import App from './App.vue';
 
 new Vue({
-  el: '#search-input',
+  el: '#test',
   render: h => h(App)
 });

resources/assets/js/search/search-results/dataservice.js

@@ -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;
+    }
+
+}

resources/assets/js/search/search-results/facet-list-class.js

@@ -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;
+    }
+}

resources/assets/js/search/search-results/facet-list.vue

@@ -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>

resources/assets/js/search/search-results/search-api.js

@@ -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;
-    }
-
-}

resources/assets/js/search/search-results/vs-results-class.js

@@ -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;
+    };
+
+
+}

resources/assets/js/search/search-results/vs-results.vue

@@ -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>
+

resources/assets/js/search/text-search/vs-input.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="sidebar-simplesearch">
-    <form method="GET" action="//repository.geologie.ac.at/search" accept-charset="UTF-8">
+    <!-- <form method="GET" action="//repository.geologie.ac.at/search" accept-charset="UTF-8"> -->
+    <div>
       <input
         class="search-input"
         placeholder="Enter your search term..."
         name="q"
         type="text"
-        v-model="term"
+        v-model="term" v-on:keyup.enter="search()"
       />
 
       <!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> -->
       <button class="css-1gklxk5 ekqohx90">
         <svg
           alt="Search"
+          @click="search()"
           class="search-icon"
           height="14"
           xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +26,7 @@
           />
         </svg>
       </button>
-    </form>
+    </div>
   </div>
 </template>
 

resources/views/frontend/search/index.blade.php

@@ -7,40 +7,18 @@
 <section data-sr id="search" class="search normal u-full-width">
     {{-- <div class="container"> --}}
 
-    {{-- <div class="row">
-        <div class="twelve columns">          
-            <div class="content">
-                <div class="sidebar-simplesearch">
-                    {{ Form::open(array('method' => 'GET')) }}
-    {!! Form::text('q', Input::get('q'), array('class'=>'search-input',
-    'placeholder'=>'Enter your search term')) !!}
-    <span class="input-group-btn">
-        <button type="submit">
-            <i class="fa fa-search"></i>
-        </button>
-    </span>
-    {{ Form::close() }}
-    </div>
-    </div>
-    </div>
-    </div> --}}
     
     <!-- SEARCH RESULTS GO HERE, EXACTLY AS BEFORE -->
+    <div id="test" class="search-container row">
 
-    <div class="search-container row">
-
-        <div class="four columns left-bar">
-            <div class="sidebar left-bar">
-                {{-- <h3 class="indexheader">Refine by</h3> --}}
+        {{-- <div class="four columns left-bar">
+            <div id="left-bar" class="sidebar left-bar">             
                 <h2 class="indexheader">DataXplore</h2>
+
                 @if (isset($resultset))
               
-
-
-                <?php $facet = $resultset->getFacetSet()->getFacet('language'); ?>
                 <div class="panel panel-primary">
                     <h3 class="panel-title">Language</h3>
-
                     <ul class="filter-items">
                         @foreach ($facet as $value => $count)
                         @if ($count)
@@ -49,19 +27,13 @@
                                 value="{{ $value }}">
                             <label for="{{ $value }}"><span>{{ $value }} ({{ $count }}) </span></label>
                         </li>                   
-                        {{-- <li class="list-group-item">
-                            <a class="firstLabel"
-                                href="?{{ http_build_query(array_merge(Input::all(), array('language' => $value))) }}">{{ $value }}</a>
-                        <span class="badge">{{ $count }}</span>
-                        </li> --}}
                         @endif
                         @endforeach
                     </ul>
                 </div>
 
-                <?php $facet = $resultset->getFacetSet()->getFacet('datatype'); ?>
+            
                 <div class="panel panel-primary">               
-                    {{-- <h3 class="panel-title">Datatype</h3> --}}
                     <h3 class="panel-title">Data Type</h3>
                     <ul class="filterItems">
                         @foreach ($facet as $value => $count)
@@ -69,37 +41,36 @@
                         <li class="list-group-item">
                             <a class="firstLabel"
                                 href="?{{ http_build_query(array_merge(Input::all(), array('datatype' => $value))) }}">{{ $value }} ({{ $count }})</a>                          
-                            {{-- <span class="badge">{{ $count }}</span> --}}
                         </li>
                         @endif
                         @endforeach
                     </ul>
                 </div>
 
-                <?php $facet = $resultset->getFacetSet()->getFacet('year'); ?>
+             
                 <div class="panel panel-primary">
                     <h3 class="panel-title">Year</h3>
-
                     <ul class="filterItems">
                         @foreach ($facet as $value => $count)
                         @if ($count)
                         <li class="list-group-item">
                             <a class="firstLabel"
                                 href="?{{ http_build_query(array_merge(Input::all(), array('year' => $value))) }}">{{ $value }} ({{ $count }})</a>                         
-                            {{-- <span class="badge">{{ $count }}</span> --}}
                         </li>
                         @endif
                         @endforeach
                     </ul>
                 </div>
                 @endif
-            </div>
-        </div>
 
-        <div class="eight columns right-bar">
-            <div class="sidebar right-bar">
-            <div id="search-input"></div>
-                {{-- <div class="row">
+            </div>
+        </div> --}}
+
+       
+
+        {{--<div class="eight columns right-bar">
+            <div id="right-bar" class="sidebar right-bar">           
+                 <div class="row">
                     <div class="twelve columns">
                         <div class="sidebar-simplesearch">
                             {{ Form::open(array('method' => 'GET')) }}
@@ -122,8 +93,8 @@
                     </div>
                 </div> --}}
 
-                @if (isset($resultset))
-                <div class="results">
+                {{-- @if (isset($resultset))
+                <section class="results">
                     <div class="result-list-info">
                         <div class="resultheader">
                             Your search yielded <strong>{{ $resultset->getNumFound() }}</strong> results:
@@ -175,10 +146,11 @@
                             </ul>
                         </div>
                     </section>
-                </div>
+                </section>
                 @endif 
             </div>
-        </div>
+        </div>--}}
+
     </div>