- search paginate

- typescript
- tsconfig.json and typings.d.ts

composer.lock

@@ -1005,16 +1005,16 @@
         },
         {
             "name": "league/flysystem",
-            "version": "1.0.56",
+            "version": "1.0.57",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/flysystem.git",
-                "reference": "90e3f83cb10ef6b058d70f95267030e7a6236518"
+                "reference": "0e9db7f0b96b9f12dcf6f65bc34b72b1a30ea55a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/90e3f83cb10ef6b058d70f95267030e7a6236518",
+                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/0e9db7f0b96b9f12dcf6f65bc34b72b1a30ea55a",
-                "reference": "90e3f83cb10ef6b058d70f95267030e7a6236518",
+                "reference": "0e9db7f0b96b9f12dcf6f65bc34b72b1a30ea55a",
                 "shasum": ""
             },
             "require": {
@@ -1085,20 +1085,20 @@
                 "sftp",
                 "storage"
             ],
-            "time": "2019-10-12T13:05:59+00:00"
+            "time": "2019-10-16T21:01:05+00:00"
         },
         {
             "name": "mcamara/laravel-localization",
-            "version": "1.4.3",
+            "version": "1.4.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/mcamara/laravel-localization.git",
-                "reference": "00ed4af3633076e98dc58d317125b7f17d3c64f4"
+                "reference": "4350fdbd4e4da04510a77cf9fd19614233c500f6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/mcamara/laravel-localization/zipball/00ed4af3633076e98dc58d317125b7f17d3c64f4",
+                "url": "https://api.github.com/repos/mcamara/laravel-localization/zipball/4350fdbd4e4da04510a77cf9fd19614233c500f6",
-                "reference": "00ed4af3633076e98dc58d317125b7f17d3c64f4",
+                "reference": "4350fdbd4e4da04510a77cf9fd19614233c500f6",
                 "shasum": ""
             },
             "require": {
@@ -1147,7 +1147,7 @@
                 "localization",
                 "php"
             ],
-            "time": "2019-10-13T10:19:29+00:00"
+            "time": "2019-10-17T20:28:46+00:00"
         },
         {
             "name": "monolog/monolog",
@@ -4608,16 +4608,16 @@
         },
         {
             "name": "squizlabs/php_codesniffer",
-            "version": "3.5.0",
+            "version": "3.5.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/squizlabs/PHP_CodeSniffer.git",
-                "reference": "0afebf16a2e7f1e434920fa976253576151effe9"
+                "reference": "82cd0f854ceca17731d6d019c7098e3755c45060"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/0afebf16a2e7f1e434920fa976253576151effe9",
+                "url": "https://api.github.com/repos/squizlabs/PHP_CodeSniffer/zipball/82cd0f854ceca17731d6d019c7098e3755c45060",
-                "reference": "0afebf16a2e7f1e434920fa976253576151effe9",
+                "reference": "82cd0f854ceca17731d6d019c7098e3755c45060",
                 "shasum": ""
             },
             "require": {
@@ -4655,7 +4655,7 @@
                 "phpcs",
                 "standards"
             ],
-            "time": "2019-09-26T23:12:26+00:00"
+            "time": "2019-10-16T21:14:26+00:00"
         },
         {
             "name": "theseer/tokenizer",

package-lock.json

@@ -7160,6 +7160,12 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
+      "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==",
+      "dev": true
+    },
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -9895,6 +9901,70 @@
         "glob": "^7.1.2"
       }
     },
+    "ts-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.0.tgz",
+      "integrity": "sha512-Da8h3fD+HiZ9GvZJydqzk3mTC9nuOKYlJcpuk+Zv6Y1DPaMvBL+56GRzZFypx2cWrZFMsQr869+Ua2slGoLxvQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^1.0.2",
+        "micromatch": "^4.0.0",
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
@@ -9944,6 +10014,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.4.tgz",
+      "integrity": "sha512-unoCll1+l+YK4i4F8f22TaNVPRHcD9PA3yCuZ8g5e0qGqlVlJ/8FSateOLLSagn+Yg5+ZwuPkL8LFUc0Jcvksg==",
+      "dev": true
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",

package.json

@@ -24,6 +24,8 @@
     "resolve-url-loader": "^3.1.0",
     "sass": "^1.15.2",
     "sass-loader": "^7.1.0",
+    "ts-loader": "^6.2.0",
+    "typescript": "^3.6.4",
     "vee-validate": "^2.2.15",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",

public/css/search_style.css

@@ -121,6 +121,7 @@ section.search {
 .overflowing {
     color: #444444;
     list-style: none;
+    z-index: 999;
 }
 
 .overflowing span {
@@ -159,7 +160,7 @@ ul.filter-items li {
 } */
 ul.filter-items li a {
 cursor: pointer;
-color: lightgray;
+color:#ffffff;
 text-decoration: none;
 font-weight: bold;
 font-size: 16px;
@@ -191,8 +192,6 @@ font-size: 16px;
 
 
 .sidebar.left-bar {  
-    /* background: mediumseagreen none repeat scroll 0% 0%; */ 
-    background-color:#3cb371;
     float: left;
     border-left: none;
     /* width: 250px; */
@@ -201,8 +200,38 @@ font-size: 16px;
     padding: 1rem;
 /* height: 100vh; */
     overflow-y: auto;
+    background-color: #3abac4; 
+    opacity: .9;
+  color: white;
+  position: relative;
+
+  
+}
+.left-bar .sidebar-image {
+    background: url("../images/csm_kabel.png") no-repeat;
+    background-size: cover;
+    background-position: 50% 50%;
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    opacity: .2;     
+}
+.sidebar-image:after {
+    content: '';
+  opacity: .17; 
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); 
+  background-image: -moz-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 
+  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); 
+  background-image: -webkit-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 
+  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%);
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
   }
 
+.card {
+    z-index: 1;
+    position: relative;
+    
+}
 
 .sidebar.right-bar {
     border: none;

public/css/style.css

@@ -124,7 +124,7 @@ a {
 -------- */
 section {
   text-align: center;
-  padding: 80px 0;
+  padding: 60px 0 0 0;
 }
 section.normal {
   text-align: left;
@@ -354,7 +354,7 @@ section.normal {
 .hero-image:after {
   content: '';
   opacity: .77; 
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); 
+  /* background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);  */
   background-image: -moz-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 
   background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); 
   background-image: -webkit-linear-gradient(right, #A8EB12 0%, #3abac4 100%); 

resources/assets/js/search/App.vue

@@ -1,8 +1,9 @@
-<template>
+<template v-if="loaded">
   <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="sidebar-image"></div>
+        <!-- <h2 class="indexheader">DataXplore</h2> -->
 
         <!-- <div class="card" v-for="item in facets.language" :key="item.id">
           <span>{{ item }}</span>     
@@ -18,7 +19,6 @@
 
     <div class="eight columns right-bar">
       <div id="right-bar" class="sidebar right-bar">
-       
         <!-- Search input section -->
         <div class="row">
           <div class="twelve columns">
@@ -26,6 +26,13 @@
           </div>
         </div>
 
+        <div v-if="results.length > 0" class="result-list-info">
+          <div class="resultheader">
+            Your search yielded
+            <strong>{{ numFound }}</strong> results:
+          </div>
+        </div>
+
         <div class="row">
           <div class="active-filter-items twelve columns">
             <a class="filter-link" v-for="(value, key, index) in activeFilterItems" :key="index">
@@ -37,6 +44,13 @@
 
         <!-- Results section -->
         <vs-results v-bind:data="results"></vs-results>
+
+        <!-- pagination -->
+        <div class="row">
+          <div class="twelve columns">
+            <vs-pagination v-bind:data="pagination" @paginate="onPaginate"></vs-pagination>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -56,8 +70,8 @@
   </div>-->
 </template>
 
-<script lang="js">
+<script lang="ts">
-  import App from './app-class.js';
+import App from "./app-class";
 export default App;
 </script>
 

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

@@ -1,7 +1,8 @@
 import { Component, Vue, Prop, Provide } 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 FacetList from './search-results/facet-list.vue';
+import VsPagination from './search-results/vs-pagination.vue';
 import rdrApi from './search-results/dataservice';
 import FilterItem from './models/filter-item';
 
@@ -9,17 +10,33 @@ import FilterItem from './models/filter-item';
   components: {
     VsInput,
     VsResults,
-    FacetList
+    FacetList,
+    VsPagination
   }
 })
 export default class App extends Vue {
 
-  results = [];
+  results: Array<any> = [];
-  facets = {};
+  facets: Object = {};
-  searchTerm = '';
+  searchTerm: string = '';
-  activeFilterItems = {};
+  activeFilterItems: Object = {};
+  pagination: Object = {
+    total: 0,
+    per_page: 2,
+    current_page: 0,
+    // last_page: 0,
+    data: []
+  };
+  loaded = false;
+  numFound: number;
 
-  async  onFilter(filter) {  
+  async onPaginate(start: number): Promise<void> {
+    console.log(start);
+    var res = await rdrApi.search(this.searchTerm, this.activeFilterItems, start.toString());
+    this.results = res.response.docs;
+  }
+
+  async  onFilter(filter): Promise<void> {
     // console.log(filter.value);
     // if (!this.activeFilterItems.some(e => e.value === filter.value)) {
     // this.activeFilterItems.push(filter);
@@ -31,8 +48,14 @@ export default class App extends Vue {
 
       var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
       this.results = res.response.docs;
-      // this.facets = res.facet_counts.facet_fields;
+      this.numFound = res.response.numFound;
-      // this.facets = [];
+
+      // 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) => {
@@ -62,11 +85,13 @@ export default class App extends Vue {
     }
   }
 
-  async  onSearch(term) {
+  async  onSearch(term): Promise<void> {
-    // console.log(term);
+    if (term){
-    // while (this.activeFilterItems.length > 0) {
+      term = term.trim();
-    //   this.activeFilterItems.pop();
+    } else {
-    // }
+      term = "*%3A*";
+    }
+
     this.activeFilterItems = {};
     // while (this.facets.length > 0) {
     //   this.facets.pop();
@@ -75,6 +100,15 @@ export default class App extends Vue {
     this.searchTerm = term;
     var res = await rdrApi.search(this.searchTerm, this.activeFilterItems);
     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;
+
+    // facets
     var facet_fields = res.facet_counts.facet_fields;
     for (var prop in facet_fields) {
       var facetValues = facet_fields[prop].map((facet, i) => {
@@ -92,9 +126,22 @@ export default class App extends Vue {
     // console.log(this.facets.toString());
   }
 
+  // When the window loads, read query parameters and perform search
+  async mounted() {
+    var query = this.getParameterByName("q");
+    if (query) query = query.trim();
+    await this.onSearch("*%3A*");
+    this.loaded = true;
+  }
 
-  mounted() {
+  getParameterByName(name: string, url?: string) {
-    // console.log('Component mounted.')
+    if (!url) url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+      results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return "";
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
   }
 
 }

resources/assets/js/search/models/filter-item.js

@@ -1,28 +0,0 @@
-export default class FilterItem {
-    category;
-    value;
-    count;
-    active;
-
-    constructor(value, count) {
-        // this.category = category;
-        this.value = value;
-        this.count = count;
-        this.active = false;
-        this.category = "";
-    }
-
-    get Category() {
-        return this.category;
-    }
-    set Category(theCategory) {
-        this.category = theCategory;
-    }
-
-    get Active() {
-        return this.active;
-    }
-    set Active(isActive) {
-        this.active = isActive;
-    }
-}

resources/assets/js/search/models/filter-item.ts

@@ -0,0 +1,31 @@
+export default class FilterItem {
+    private category: string;
+    value: string;
+    count: number;
+    private active: boolean;
+
+    constructor(value: string, count: number) {      
+        this.value = value;
+        this.count = count;
+        this.active = false;
+        this.category = "";
+    }
+
+    //#region properties
+
+    get Category(): string {
+        return this.category;
+    }
+    set Category(theCategory: string) {
+        this.category = theCategory;
+    }
+
+    get Active(): boolean {
+        return this.active;
+    }
+    set Active(isActive: boolean) {
+        this.active = isActive;
+    }
+
+    //#endregion
+}

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

@@ -1,35 +0,0 @@
-import axios from "axios";
-
-export default {
-
-    async search(term, filterItems) {
-        // solr endpoint
-        // const host = 'http://voyagerdemo.com/';
-        const host = 'https://repository.geologie.ac.at/';
-        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&facet.field={!key=datatype}doctype&facet.field=subject";//&fq=year:(2019)";//&facet.query=year:2018";
-
-        var filterFields = "";
-        // filterItems.forEach(function (item) {
-        //    console.log(item.value + " " + item.category);
-        //     filterFields += "&fq=" + item.category +":("+ item.value + ")";
-        //   });
-        Object.entries(filterItems).forEach(([key, valueArray]) => {
-          // console.log(`${key} ${valueArray}`);
-          valueArray.forEach(function (value) {             
-                filterFields += "&fq=" + key +":("+ value + ")";
-              });
-          
-        });
-
-
-        // $dismax->setQueryFields('title^3 abstract^2 subject^1');
-        const api = `${host}${path}?defType=dismax&q=${term}&fl=${fields}&qf=${dismaxFields}&facet=on&${facetFields}&${filterFields}&wt=json&rows=20&indent=on`;
-
-        const res = await axios.get(api);
-        return res.data;//.response;//.docs;
-    }
-
-}

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

@@ -0,0 +1,68 @@
+import axios from "axios";
+
+var SOLR_CONFIG = {
+  "server": "https://arcticdata.io/metacat/d1/mn/v2/query/solr?",  // Solr server
+  "filter": "knb-lter-bnz",  // Filter results for an organization or user
+  "limit": 4,  // Max number of results to retrieve per page
+  "resultsElementId": "searchResults",  // Element to contain results
+  "urlElementId": "searchUrl",  // Element to display search URL
+  "countElementId": "resultCount",  // Element showing number of results
+  "pagesElementId": "pagination",  // Element to display result page links
+  "showPages": 5  // MUST BE ODD NUMBER! Max number of page links to show
+};
+
+export default {
+
+ 
+  async search(term: string, filterItems: Object, start?: string): Promise<any> {
+    // solr endpoint
+    // const host = 'http://voyagerdemo.com/';
+    const host = 'https://repository.geologie.ac.at/';
+    const path = 'solr/rdr_data/select?';
+    var base = host + path;
+
+    //const fields = 'id,server_date_published,abstract_output,title_output,title_additional,author,subject'; // fields we want returned
+    var fields = ["id",
+      "server_date_published",
+      "abstract_output",
+      "title_output",
+      "title_additional",
+      "author",
+      "subject"].toString();
+    var limit = "&rows=" + SOLR_CONFIG["limit"];  
+    // var limit = solrConfig.limit;
+    var params = "fl=" + fields + "&defType=edismax&wt=json&indent=on";
+
+    if (start === undefined) start = "0";
+    start = "&start=" + start;
+
+    //const dismaxFields = "title^3 abstract^2 subject^1";
+    const facetFields = "&facet=on&facet.field=language&facet.field={!key=datatype}doctype&facet.field=subject";//&fq=year:(2019)";//&facet.query=year:2018";
+
+    var filterFields = "";
+    // filterItems.forEach(function (item) {
+    //    console.log(item.value + " " + item.category);
+    //     filterFields += "&fq=" + item.category +":("+ item.value + ")";
+    //   });
+    Object.entries(filterItems).forEach(([key, valueArray]) => {
+      // console.log(`${key} ${valueArray}`);
+      valueArray.forEach(function (value) {
+        filterFields += "&fq=" + key + ":(" + value + ")";
+      });
+
+    });
+    var query = "&q=" + term;
+
+
+    // $dismax->setQueryFields('title^3 abstract^2 subject^1');
+    //const api = `${host}${path}?defType=dismax&q=${term}&fl=${fields}&qf=${dismaxFields}&facet=on&${facetFields}&${filterFields}&wt=json&rows=20&indent=on`;
+    //const api = `${host}${path}?q=${term}&fl=${fields}&facet=on&${facetFields}&${filterFields}&wt=json&rows=20&indent=on`;
+
+    var api = base + params + limit + start + query + filterFields + facetFields;
+
+    let res = await axios.get(api);
+    // let { data } = res.data;
+    return res.data;//.response;//.docs;
+  }
+
+}

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

@@ -1,4 +1,5 @@
 import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
+import FilterItem from './../models/filter-item';
 
 @Component
 export default class FacetList extends Vue {
@@ -12,10 +13,10 @@ export default class FacetList extends Vue {
     data;
     @Prop([String])
     filterName;
-    @Prop([String])
+    // @Prop([String])
     // alias;
   
-    get alias() {      
+    get alias(): string {      
         return this.filterName == 'datatype' ? 'doctype' : this.filterName
     }
     // get filterItems() {
@@ -38,16 +39,16 @@ export default class FacetList extends Vue {
     //     // }, this);
     //     return facetValues;
     // }
-    get filterItems() {
+    get filterItems(): Array<FilterItem> {
         return this.data;
     }
 
-    get overflowing() {
+    get overflowing(): boolean {
         //ko.observable(self.filterItems().length - self.activeFilterItems().length > ITEMS_PER_FILTER);
         return (this.filterItems.length) > this.ITEMS_PER_FILTER;
     }
 
-    get uncollapseLabelText() {
+    get uncollapseLabelText() : string {
         if (this.collapsed == true) {
             // return myLabels.viewer.sidePanel.more; //"More results";
             return "More results";
@@ -58,7 +59,7 @@ export default class FacetList extends Vue {
         }
     }
 
-    toggle = function () {
+    toggle = function (): void {
         if (this.collapsed == true) {
             this.collapsed = false;
         }
@@ -68,7 +69,7 @@ export default class FacetList extends Vue {
         }
     }
 
-    activateItem = function (filterItem) {  
+    activateItem = function (filterItem: FilterItem): void {  
         filterItem.Category = this.alias;
         filterItem.Active = true;
         this.$emit("filter", filterItem);

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

@@ -36,9 +36,8 @@ export default FacetList;
 <style scoped>
 /* local styles */
 .disabled {
-  /* background: #dddddd;   */
   /* color: #EBEBE4; */
-  color:#ffffff;
+  color:lightgray;
   pointer-events: none;
   text-decoration:line-through;
 }

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

@@ -0,0 +1,49 @@
+import { Vue, Component, Prop } from 'vue-property-decorator';
+// import Vue from "vue";
+
+@Component
+export default class VsPagination extends Vue {
+
+    pageNumber: number = 0; // default to page 0
+
+    @Prop()
+    data;
+
+    @Prop({ default: 4 }) readonly offset: number;
+
+    changePage(page) {   
+        if (page == this.data.current_page) {
+            return;
+        }    
+        this.data.current_page = page;
+        let from = (page * this.data.per_page) - this.data.per_page;
+        this.$emit('paginate', from);      
+    }
+    get numberOfPages() {
+        return Math.ceil(this.data.total / this.data.per_page);
+    }
+
+    get pages() {
+        let numberOfPages = Math.ceil(this.data.total / this.data.per_page);
+
+        // if (!this.data.to) {
+        //     return [];
+        // }
+        let from = this.data.current_page - this.data.per_page;
+        if (from < 1) {
+            from = 1;
+        }
+        let to = from + (this.data.per_page * 2);
+        if (to >= numberOfPages) {
+            to = numberOfPages;
+        }
+        let pagesArray = [];
+        for (let page = from; page <= to; page++) {
+            pagesArray.push(page);
+        }
+        return pagesArray;
+    }
+
+    mounted() {           
+    }
+}

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

@@ -0,0 +1,278 @@
+<template>
+<nav v-if="pages.length > 1" class="pagination is-rounded is-medium" role="navigation" aria-label="pagination">
+  <ul class="pagination-list">
+
+    <!-- Previous Page Link -->
+    <li v-if="data.current_page > 1">     
+       <a class="pagination-previous" href="#" rel="prev" v-on:click.prevent="changePage(data.current_page - 1)">&laquo;</a>
+    </li>
+    <li v-else>
+      <a class="pagination-previous disabled" disabled href="#" rel="prev">&laquo;</a>
+    </li>
+
+    <li v-for="(page, index) in pages" :key="index" >     
+      <a  href="#"  v-on:click.prevent="changePage(page)" v-bind:class="['pagination-link', page == data.current_page ? 'is-current' : '']">{{ page }}</a>
+    </li>
+
+     <!-- Previous Page Link -->
+    <li v-if="data.current_page < numberOfPages">     
+      <a  class="pagination-next" href="#" v-on:click.prevent="changePage(data.current_page + 1)" rel="next">&raquo;</a>
+    </li>
+     <li v-else>
+      <a  class="pagination-next disabled" disabled href="#" rel="next">&raquo;</a>
+    </li>
+
+  </ul>
+</nav>
+</template>
+
+<script lang="ts">
+import VsPagination from "./vs-pagination-class";
+export default VsPagination;
+</script>
+
+<style scoped>
+/* local styles */
+/* vom cms Pagination */
+.pagination {
+  text-align: center;
+  margin: 80px 0 0 0;
+  clear: both;  
+}
+
+.pagination a {
+  /*font-size:1.1em;*/
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+/* selbst Pagination */
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-dots {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-shadow: none;
+  display: inline-flex;
+  /*display: inline-block;*/
+  font-size: 1rem;
+  height: 2.25em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  padding: calc(0.375em - 1px) calc(0.625em - 1px) calc(0.375em - 1px)
+    calc(0.625em - 1px);
+  /*padding-top: calc(0.375em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);*/
+  position: relative;
+  vertical-align: top;
+}
+
+.pagination-previous:focus,
+.pagination-next:focus,
+.pagination-link:focus,
+.pagination-dots:focus,
+.is-focused.pagination-next,
+.is-focused.pagination-link,
+.is-focused.pagination-dots,
+.pagination-previous:active,
+.pagination-next:active,
+.pagination-link:active,
+.pagination-dots:active,
+.is-active.pagination-previous,
+.is-active.pagination-next,
+.is-active.pagination-link,
+.is-active.pagination-dots {
+  outline: none;
+}
+
+.pagination-previous.disabled,
+.pagination-next.disabled,
+.pagination-link.disabled,
+.pagination-dots.disabled {
+  cursor: not-allowed;
+}
+
+.pagination {
+  /*background-color:azure;*/
+  font-size: 1rem;
+  margin: -0.25rem;
+}
+
+.pagination.is-small {
+  font-size: 0.75rem;
+}
+
+.pagination.is-medium {
+  font-size: 1.25rem;
+}
+
+.pagination.is-large {
+  font-size: 1.5rem;
+}
+
+.pagination.is-rounded .pagination-previous,
+.pagination.is-rounded .pagination-next {
+  padding-left: 1em;
+  padding-right: 1em;
+  border-radius: 290486px;
+}
+
+.pagination.is-rounded .pagination-link {
+  border-radius: 290486px;
+}
+
+/*.pagination,*/
+.pagination-list {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  list-style: none;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-dots {
+  font-size: 1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  justify-content: center;
+  margin: 0.25rem;
+  text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+  border-color: #dbdbdb;
+  color: #363636;
+  min-width: 2.25em;
+}
+
+.pagination-previous:hover,
+.pagination-next:hover,
+.pagination-link:hover {
+  border-color: #b5b5b5;
+  color: #363636;
+}
+
+.pagination-previous:focus,
+.pagination-next:focus,
+.pagination-link:focus {
+  border-color: #3273dc;
+}
+
+.pagination-previous:active,
+.pagination-next:active,
+.pagination-link:active {
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+}
+
+.pagination-previous.disabled,
+.pagination-next.disabled,
+.pagination-link.disabled {
+  background-color: #dbdbdb;
+  border-color: #dbdbdb;
+  box-shadow: none;
+  color: #7a7a7a;
+  opacity: 0.5;
+}
+
+.pagination-previous,
+.pagination-next {
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
+}
+
+.pagination-link.is-current {
+  background-color: #3abac4; /*#3273dc;*/
+  border-color: #3abac4;
+  color: #fff;
+}
+
+.pagination-dots {
+  color: #b5b5b5;
+  pointer-events: none;
+}
+
+.pagination-list {
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 767px) {
+  .pagination {
+    flex-wrap: wrap;
+  }
+
+  .pagination-previous,
+  .pagination-next {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .pagination-list li {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
+@media screen and (min-width: 768px), print {
+  .pagination-list {
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: center;
+    order: 1;
+  }
+
+  .pagination-previous {
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+
+  .pagination {
+    justify-content: space-between;
+  }
+
+  .pagination.is-centered .pagination-previous {
+    order: 1;
+  }
+
+  .pagination.is-centered .pagination-list {
+    justify-content: center;
+    order: 2;
+  }
+
+  .pagination.is-centered .pagination-next {
+    order: 3;
+  }
+
+  .pagination.is-right .pagination-previous {
+    order: 1;
+  }
+
+  .pagination.is-right .pagination-next {
+    order: 2;
+  }
+
+  .pagination.is-right .pagination-list {
+    justify-content: flex-end;
+    order: 3;
+  }
+}
+</style>

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

@@ -21,7 +21,7 @@ export default class VsResults extends Vue {
         this.$forceUpdate();
     };
 
-    convert(unixtimestamp) {
+    convert(unixtimestamp: number) {
 
         // Unixtimestamp
         // var unixtimestamp = document.getElementById('timestamp').value;

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

@@ -10,12 +10,12 @@
   </div>-->
   <div class="results">
 
-    <div class="result-list-info">
+    <!-- <div class="result-list-info">
       <div class="resultheader">
         Your search yielded
         <strong>{{ results.length }}</strong> results:
       </div>
-    </div>
+    </div> -->
 
     <section class="result-list-container">
       <div class="row">

resources/assets/js/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue'
+    export default Vue
+}

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

@@ -109,7 +109,7 @@
 <!-- Help -->
 <section data-sr id="help" class="help u-full-width featured-bg-image">
     <h4 class="centered">
-        <button class="button inverted">We're here to help!</button>
+        <a class="button inverted" href="{{ URL::route('frontend.home.help') }}">We're here to help!</a>
     </h4>
 </section>
 

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

@@ -161,5 +161,6 @@
 @endsection
 
 @section('after-scripts')
+{{-- <script type="text/javascript" src="{{  asset('js/search/main.js') }}"></script> --}}
 <script type="text/javascript" src="{{  asset('js/search/main.js') }}"></script>
 @stop

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {       
+        "module": "es2015",
+        "target": "es5",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "outDir": "public/js/search",
+        "experimentalDecorators": true,
+    },
+    "include": [
+        "resources/assets/js/**/*"
+    ]
+}

webpack.mix.js

@@ -15,7 +15,7 @@ let mix = require('laravel-mix');
 // .sass('resources/assets/sass/app1.scss', 'public/css')
 
 mix.js('resources/assets/js/datasetPublish.js', 'public/backend/publish')
-    .js('resources/assets/js/search/main.js', 'public/js/search')
+    .js('resources/assets/js/search/main.ts', 'public/js/search')
     .js('resources/assets/js/app.js', 'public/js')
     .js('resources/assets/js/lib.js', 'public/js')
     .js('resources/assets/js/releaseDataset.js', 'public/backend/publish')
@@ -31,7 +31,29 @@ mix.js('resources/assets/js/datasetPublish.js', 'public/backend/publish')
         'node_modules/datatables.net-buttons/js/buttons.flash.js',
         'node_modules/datatables.net-buttons/js/buttons.html5.js',
         'node_modules/datatables.net-buttons/js/buttons.print.js',
-    ], 'public/js/dataTable.js');
+    ], 'public/js/dataTable.js')
+    // .sourceMaps()
+    .webpackConfig({
+        module: {
+            rules: [
+                // We're registering the TypeScript loader here. It should only
+                // apply when we're dealing with a `.ts` or `.tsx` file.
+                {
+                    test: /\.tsx?$/,
+                    loader: 'ts-loader',
+                    options: { appendTsSuffixTo: [/\.vue$/] },
+                    exclude: /node_modules/,
+                },
+            ],
+        },
+       resolve: {
+           // We need to register the `.ts` extension so Webpack can resolve
+           // TypeScript modules without explicitly providing an extension.
+           // The other extensions in this list are identical to the Mix
+           // defaults.
+           extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
+       },
+    });
 // .options({
 //     //publicPath: '../'
 //     processCssUrls: false