added pagination eresearch/rdm#1289

README.md

+### Data-Portal 
+
+This is the code of a single page application for searching with SOLR
+
+### Install
+
+```bash
+npm intstall
+```
+
+### Development
+
+run npm scripts for development
+
+#### Webpack
+
+```bash
+npm run start:dev
+``` 
+
+and go to [http://localhost:9000](http://localhost:9000)
+
+### Compile
+
+```bash
+npm run build
+```
+
+should generate a [dist](./dist) folder with compiled SPA
\ No newline at end of file

src/components/RegisterEvents.js

@@ -16,28 +16,35 @@ const RegisterEvents = function (state) {
 
   delegate('#app', 'click', '#search-text', async () => {
     const search = document.querySelector('#text-to-search');
-    const {data, status} = await solrService.search({api: state.config.api}, search.value);
-    state.main.docs = data.docs;
-    state.main.numFound = data.numFound;
-    renderApp(state, app);
+    window.location.hash = `#search/${state.main.start}/${state.main.page}/${search.value}`;
+
+    // const {data, status} = await solrService.search({api: state.config.api}, {start: state.main.start, page: state.main.page, text: search.value});
+    // state.main.docs = data.docs;
+    // state.main.numFound = data.numFound;
+    // renderApp(state, app);
   });
 
   delegate('#app', 'keyup', '#text-to-search', async (event) => {
     if (event.keyCode === 13) {
       event.preventDefault();
+
       const search = document.querySelector('#text-to-search');
-      const {data, status} = await solrService.search({api: state.config.api}, search.value);
-      state.main.docs = data.docs;
-      state.main.numFound = data.numFound;
-      renderApp(state, app);
+      window.location.hash = `#search/${state.main.start}/${state.main.page}/${search.value}`;
+
+      // const {data, status} = await solrService.search({api: state.config.api}, {start: state.main.start, page: state.main.page, text: search.value});
+      // state.main.docs = data.docs;
+      // state.main.numFound = data.numFound;
+      // renderApp(state, app);
     }
   });
 
   delegate('#app', 'click', '#search-text-1', async () => {
     const search = document.querySelector('#text-to-search');
-    const {data, status} = await solrService.search({api: state.config.api}, search.value);
-    state.main.docs = data;
-    renderApp(state, app);
+    window.location.hash = `#search/${state.main.start}/${state.main.page}/${search.value}`;
+
+    // const {data, status} = await solrService.search({api: state.config.api}, {start: state.main.start, page: state.main.page, text: search.value});
+    // state.main.docs = data;
+    // renderApp(state, app);
   });
 };
 

src/components/Router.js

@@ -23,11 +23,35 @@ const Router = async function (state) {
         app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
       }
     }
+    if (verb === '#search/') {
+      const splits = match[2].split('/');
+      const start = splits[0] || state.main.start;
+      const page = splits[1] || '';
+      const searchText = splits[2] || '';
+      const {data, status} = await solrService.search({api: state.config.api}, {
+        start: start,
+        page: page,
+        text: searchText
+      });
+      if (status === 200) {
+        state.main.docs = data.docs;
+        state.main.numFound = data.numFound;
+        state.main.searchText = searchText;
+        app.innerHTML = [Header(state), Search(state), Main(state), Footer(state)].join('');
+        const input = document.getElementById('text-to-search');
+        if (input) {
+          input.value = searchText;
+        }
+      } else {
+        app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
+      }
+    }
   } else {
     const {data, status} = await solrService.searchAll({api: state.config.api});
     if (status === 200) {
       state.main.docs = data.docs;
       state.main.numFound = data.numFound;
+      state.main.searchText = '';
       app.innerHTML = [Header(state), Search(state), Main(state), Footer(state)].join('');
     } else {
       app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');

src/components/SolrService.js

@@ -28,13 +28,16 @@ const SolrService = {
       return {data: {}, status: e.message};
     }
   },
-  search: async function (config, data) {
+  search: async function (config, {start: start, page: page, text: text}) {
     try {
       let param = `select?q=main_search%3A`;
       //Twice encoded, once for html one for solr
-      data = encodeURIComponent(`${data}`);
-      data = encodeURIComponent(`${data}`);
-      const req = await axios.get(`${config.api}/${param}${data}`);
+      let data = encodeURIComponent(`${text}`);
+      data = encodeURIComponent(`${text}`);
+      if (text === '' || !text) {
+        data = '*';
+      }
+      const req = await axios.get(`${config.api}/${param}${data}&start=${start}&page=${page}`);
       if (req.data) {
         return {data: req.data['response'], status: req.status};
       } else {

src/components/views/ListDocs.js

@@ -10,8 +10,10 @@ const ListDocs = function (data) {
         <div class="item"><a href="${url}">${d['name'][0]}</a> ${d['record_type_s']} </div>
       </li>`;
     });
+  } else {
+    html += `<div class="text-center"> No data found</div>`;
   }
-  html += `</ul>`;
+  html += `<div></div><br/></div></ul>`;
   return html;
 };
 

src/components/views/Main.js

 const $ = require("jquery");
 const ListDocs = require('./ListDocs');
+const Pagination = require('./Pagination');
 
 const Main = function (data) {
   let html = '';
-  html = [ListDocs(data)].join('');
+  html = [ListDocs(data), Pagination(data)].join('');
 
   html += `<div class="container">
-  <br/>
   <div class="text-center">
   <p>Results: ${data.main.numFound}</p>
   </div>`;

src/components/views/Pagination.js

+const Pagination = function (data) {
+  const numFound = data.main.numFound;
+  const pageSize = data.main.pageSize;
+  const searchText = data.main.searchText || '';
+  let start = data.main.start;
+  const pages = Math.ceil(numFound / pageSize);
+
+  let html = `
+  <div class="container">
+    <nav class="d-flex justify-content-center" aria-label="Pagination">
+    <ul class="pagination">`;
+  for (let x = 1; x < pages + 1; x++) {
+    html += `<li class="page-item"><a class="page-link" href="#search/${start}/${x}/${searchText}">${x}</a></li>`;
+    start = (start + pageSize);
+  }
+  html += `</ul>
+  </nav>
+  </div>`;
+
+  return html;
+}
+
+module.exports = Pagination;
\ No newline at end of file

src/index.js

@@ -32,7 +32,11 @@ let state = {
   main: {
     docs: [],
     doc: {},
-    numFound: 0
+    start: 0,
+    page: 1,
+    numFound: 0,
+    pageSize: 10,
+    searchText: ''
   },
   config: config
 };