added search

config.json

 {
   "repo": "http://localhost:8080/repo/",
+  "views": {
+    "view": {
+      "fields": ["name", "author", "description", "publisher", "date"]
+    }
+  },
+  "core": "repo",
   "api": "/solr/ocflcore",
   "dev": {
     "proxy": {

package.json

@@ -12,10 +12,15 @@
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/preset-env": "^7.6.2",
+    "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.12.0",
     "popper.js": "^1.15.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^2.1.0",

src/components/Footer.js

 const Footer = function (data) {
-  return `
+  return ''/*
   <footer class="footer">
     <div class="container">
       <div class="row">
@@ -11,7 +11,7 @@ const Footer = function (data) {
       </div>
     </div>
   </footer>
-  `
+  `*/
 };
 
 module.exports = Footer;
\ No newline at end of file

src/components/Header.js

@@ -6,7 +6,7 @@ const Header = function (data) {
             <div class="col-md-9">
               <p></p>
               <p class="header-main">
-                <img src="${data.header.logoURL}" [attr.alt]="${data.header.title}" style="width:110px;"/>
+                <img src="${data.header.logo}" [attr.alt]="${data.header.title}" style="width:110px;"/>
                 <a href="${data.header.URL}">${data.header.title}</a>
               </p>
             </div>

src/components/ListDocs.js

+const ListDocs = function (data) {
+  var html = '';
+  const docs = data.main.docs;
+  html += `<ul class="list-group">`;
+  if (docs.length > 0) {
+    docs.forEach((d) => {
+      var url = `${data.config.repo}${d['uri_id']}/`;
+      var url = `/#view/${d['id']}`;
+      html += `<li class="list-group-item">
+        <div class="item"><a href="${url}">${d['name'][0]}</a> ${d['record_type_s']} </div>
+      </li>`;
+    });
+  }
+  html += `</ul>`;
+  return html;
+};
+
+module.exports = ListDocs;
\ No newline at end of file

src/components/Main.js

+const ListDocs = require('./ListDocs');
+
 const Main = function (data) {
-  var html = '';
-  const docs = data.main.docs;
-  html += `<ul class="list-group">`;
-  if (docs.length > 0) {
-    docs.forEach((d) => {
-      var url = `${data.config.repo}${d['uri_id']}/`;
-      html += `<li class="list-group-item">
-        <div class="item"><a href="${url}">${d['name'][0]}</a> ${d['record_type_s']} </div>
-</li>`
-    });
-  }
-  html += `</ul>`;
+
+  let html = '';
+
+  html = [ListDocs(data)].join('');
 
   return html;
 };

src/components/Router.js

+const Header = require('./header');
+const Main = require('./main');
+const Footer = require('./footer');
+const Search = require('./search');
+const ViewDoc = require('./ViewDoc');
+const ViewError = require('./ViewError');
+const solrService = require('../lib/SolrService');
+
+const Router = async function (state) {
+  const route = window.location.hash;
+  const app = document.querySelector('#app');
+
+  if (route) {
+    const match = route.match(/(#.*?\/)(.*)/);
+    const verb = match[1];
+    const query = match[2];
+    if (verb === '#view/') {
+      const {data, status} = await solrService.get({api: state.config.api}, query);
+      if (status === 200) {
+        state.main.doc = data;
+        app.innerHTML = [Header(state), Search(state), ViewDoc(state), Footer(state)].join('');
+      } 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;
+      app.innerHTML = [Header(state), Search(state), Main(state), Footer(state)].join('');
+    } else {
+      app.innerHTML = [Header(state), Search(state), ViewError(state), Footer(state)].join('');
+    }
+  }
+};
+
+module.exports = Router;

src/components/Search.js

 const Search = function (data) {
   return `
-    <div class="search-header">
-      <div class="row no-gutters align-items-center h-100">
+    <div class="">
+      <div class="row no-gutters align-items-center">
         <div class="col-md-2"></div>
         <div class="col-md-8">
           <div class="input-group mb-3" *ngIf="currentParam">
-            <input [(ngModel)]="currentParam.searchText" type="text" class="form-control form-control-lg"
+            <input id="text-to-search" type="text" class="form-control form-control-lg"
                    [attr.aria-label]="${data.search.searchText}" [attr.placeholder]="${data.search.searchText}"
                    (keyup.enter)="goSearch()" (keyup)="checkSearchText()">
             <div class="input-group-append">
-              <button [disabled]="isSearching || !currentParam.searchText || invalidSearchText" [innerHTML]="searchLabelStr"
+              <button id="search-text" [disabled]="isSearching || !currentParam.searchText || invalidSearchText" [innerHTML]="searchLabelStr"
                       (click)="goSearch()" class="btn btn-secondary btn-lg" type="submit">${data.search.searchText}</button>
-              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split btn-lg"
-                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="sr-only">Toggle Search Type</span>
-              </button>
-              <div class="dropdown-menu">
-                <button *ngFor="let rType of availableRecordTypes" class="dropdown-item" (click)="setRecordType(rType)"
-                        [innerHTML]="getSearchRecordTypeLabel(rType)"></button>
-              </div>
+<!--              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split btn-lg"-->
+<!--                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
+<!--                <span class="sr-only">Toggle Search Type</span>-->
+<!--              </button>-->
+<!--              <div class="dropdown-menu">-->
+<!--                <button *ngFor="let rType of availableRecordTypes" class="dropdown-item" (click)="setRecordType(rType)"-->
+<!--                        [innerHTML]="getSearchRecordTypeLabel(rType)"></button>-->
+<!--              </div>-->
             </div>
           </div>
-          <div *ngIf="searchError" class="alert alert-danger" role="alert">
-            ${data.search.error}
-          </div>
-          <div *ngIf="invalidSearchText" class="alert alert-danger" role="alert">
-            ${data.search.invalidSearch}
-          </div>
         </div>
         <div class="col-md-2"></div>
       </div>

src/components/ViewDoc.js

+const $ = require("jquery");
+const ViewTable = require('./ViewTable');
+const ViewErrorElement = require('./ViewErrorElement');
+
+const ViewDoc = function (data) {
+
+  const doc = data.main.doc;
+  const dummy = $('<div>');
+  const summary = $('<div class="jumbotron">');
+  if (doc) {
+    const heading = $('<h1>').html(doc.name);
+    const desc = $('<p>').html(doc.description);
+    const date = $('<p>').html(doc.datePublished);
+
+    const fields = ["author"];
+
+    summary.append(heading).append(desc).append(date).append(ViewTable(doc, fields));
+    dummy.append(summary);
+    return dummy.html();
+  } else {
+    summary.append(ViewErrorElement()).html();
+    dummy.append(summary);
+    return dummy.html();
+  }
+};
+
+module.exports = ViewDoc;
\ No newline at end of file

src/components/ViewError.js

+const $ = require("jquery");
+const ViewErrorElement = require('./ViewErrorElement');
+
+const ViewDoc = function () {
+
+  const dummy = $('<div>');
+  const summary = $('<div class="jumbotron">');
+  summary.append(ViewErrorElement());
+  dummy.append(summary);
+  return dummy.html();
+};
+
+module.exports = ViewDoc;
\ No newline at end of file

src/components/ViewErrorElement.js

+const $ = require("jquery");
+
+const ViewErrorElement = function () {
+
+  const dummy = $('<div>');
+
+  const heading = $('<h3>').html('Error');
+  const desc = $('<p>').html('Canot display element');
+
+  dummy.append(heading).append(desc);
+  return dummy.html();
+};
+
+module.exports = ViewErrorElement;
\ No newline at end of file

src/components/ViewSubDoc.js

+const $ = require("jquery");
+
+const ViewSubDoc = function (ele) {
+
+  try {
+    if (Array.isArray(ele)) {
+      ele = ele[0];
+      const dummy = $('<div>');
+      const sub = $('<div>');
+      const a = $('<a>');
+      console.log(ele);
+      ele = JSON.parse(ele);
+      const href = `/#view/${ele['@id']}`;
+      a.attr('href', href);
+      a.attr('title', ele['name']);
+      a.text(ele['name']);
+      a.addClass("link");
+      sub.append(a);
+      console.log(a.html());
+      dummy.append(sub);
+      return dummy;
+    } else {
+      return ele;
+    }
+
+  } catch (e) {
+    console.error(`Error: ${e.message} for ${ele}`);
+    return ele;
+  }
+
+};
+
+module.exports = ViewSubDoc;
\ No newline at end of file

src/components/ViewTable.js

+const $ = require("jquery");
+const ViewSubDoc = require('./ViewSubDoc');
+const ViewTable = function (doc, fields) {
+
+  //"fields" =  ["name", "author", "description", "publisher", "date"]
+  const dummy = $('<div>');
+  const table = $('<table class="table">');
+
+  for (let key of fields) {
+    const tr = $('<tr>');
+    if (key === 'author') {
+      const subDoc = ViewSubDoc(doc[key]);
+      tr.append(subDoc);
+    } else {
+      tr.append($('<th>').html(key));
+      tr.append($('<td>').html(doc[key]));
+    }
+    table.append(tr);
+  }
+  dummy.append(table);
+  return dummy;
+};
+
+module.exports = ViewTable;
\ No newline at end of file

src/images/logo.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="52 14 425.2 200.4" style="enable-background:new 0 0 529.2 228.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+</style>
+<g id="UTS_Logo_Horizontal_Lock-Up">
+	<g>
+		<polygon points="298.9,76.8 324.9,76.8 324.9,175.2 351.5,175.2 351.5,76.8 377.5,76.8 377.5,53.2 298.9,53.2 		"/>
+		<path d="M248.9,137.5c0,9.8-5.8,16-14.9,16c-9.3,0-14.9-6.1-14.9-16V53.2h-26.6v84.7c0,24.2,16.7,39.2,41.4,39.2
+			s41.4-15.1,41.4-39.2V53.2h-26.6V137.5z"/>
+		<path d="M446.3,102.8L431.1,97c-8.4-3.2-9.8-8.5-9.8-12.1c0-6.7,4.8-11.7,13.4-11.7c8.4,0,13.9,5.6,13.9,14.3v3.3h24.9v-2.8
+			c0-22.7-15.6-36.8-38.8-36.8c-24.3,0-38.5,16.7-38.5,35.3c0,17.8,9.3,28.4,26.9,35.1l17.1,6.5c7.6,3,10.6,7.1,10.6,13.2
+			c0,8.5-5.6,13.6-15.6,13.6s-16.2-4.6-16.2-14.5V136h-25.1v4.3c0,22.7,17.5,36.8,41.3,36.8c26,0,40.9-15.8,40.9-38.3
+			C476,116.3,461.5,108.5,446.3,102.8z"/>
+		<rect x="56.5" y="95.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -54.2158 76.0526)" width="16.3" height="16.3"/>
+		<path d="M102.1,106.2l8.8,8.8l11.5-11.5l-11.8-11.8c-4.7-4.7-12.4-4.7-17.1,0l-40.4,40.4l11.5,11.5L102.1,106.2z"/>
+		<path d="M99.3,155.2l-11.5-11.5l-8.8,8.8l-8.8-8.8l-11.5,11.5l11.8,11.8c4.7,4.7,12.4,4.7,17.1,0L99.3,155.2z"/>
+		<path d="M102.1,175.5l-8.8-8.8l-11.5,11.5L93.5,190c4.7,4.7,12.4,4.7,17.1,0l11.8-11.8l-11.5-11.5L102.1,175.5z"/>
+		<path d="M125.2,152.4l-8.8-8.8l-11.5,11.5l11.8,11.8c4.7,4.7,12.4,4.7,17.1,0l11.8-11.8L134,143.6L125.2,152.4z"/>
+		<rect x="131.3" y="123.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -52.5342 137.3136)" width="16.3" height="16.3"/>
+		<path d="M102.1,129.3l-8.8-8.8l-11.5,11.5l11.8,11.8c4.7,4.7,12.4,4.7,17.1,0l40.4-40.4l-11.5-11.5L102.1,129.3z"/>
+		<rect x="91.2" y="18.7" transform="matrix(0.7073 -0.707 0.707 0.7073 8.9711 80.837)" width="21.8" height="21.8"/>
+		<path d="M82.9,64.6h11v21.9c5-3,11.3-3,16.3,0V64.6h11l7.2,7.2l15.4-15.4l-15.4-15.4l-7.2,7.2H82.9l-7.2-7.2L60.2,56.5l15.4,15.4
+			L82.9,64.6z"/>
+	</g>
+</g>
+<g id="Guides" class="st0">
+</g>
+</svg>
\ No newline at end of file

src/index.js

 import * as $ from 'jquery';
-import 'bootstrap/dist/css/bootstrap.min.css';
+//import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap';
-import './style.css';
+import './styles/styles.scss';
+import './images/logo.svg';
 
-const Delegate = require('./lib/Delegate');
-const searchService = require('./lib/SearchService');
+const delegate = require('./lib/Delegate');
+const solrService = require('./lib/SolrService');
 
 const config = require('../config.json');
 
@@ -13,13 +14,14 @@ const Header = require('./components/header');
 const Main = require('./components/main');
 const Footer = require('./components/footer');
 const Search = require('./components/search');
+const Router = require('./components/Router');
 
 //Default state
 let state = {
   header: {
     title: 'Data Portal',
     URL: '/',
-    logo: 'assets/mint.svg',
+    logo: 'images/logo.svg',
     help: 'help',
     helpURL: '',
     portal: 'Back to Stash',
@@ -28,7 +30,7 @@ let state = {
       {id: 'back', name: 'Back'}
     ]
   },
-  search:{
+  search: {
     error: 'Search Error',
     invalidSearch: 'Invalid Search',
     searchText: 'Search'
@@ -39,17 +41,45 @@ let state = {
   config: config
 };
 
-const app = document.querySelector('#app');
-
 const renderApp = function (data, into) {
-  console.log('rendering')
   into.innerHTML = [Header(data), Search(data), Main(data), Footer(data)].join('');
 };
 
-(async () => {
+const app = document.querySelector('#app');
+
+// Register Events
 
-  state.main.docs = await searchService.searchAll({api: config.api});
+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;
+  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;
+    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.onhashchange = main;
 
-})();
+// Main App
\ No newline at end of file
+async function main() {
+  await Router(state);
+}
+
+(async () => {
+  await main();
+})();

src/lib/Delegate.js

+function siblings(selector) {
+  var element = document.querySelector(selector);
+  var childElements = Array.from(element.parentNode.children);
+  return childElements.filter(function(child) {
+    return child !== element;
+  })
+}
+
+function closest(element, query) {
+  while (!!element && element !== document) {
+    if (element.matches(query)) {
+      return element;
+    }
+    element = element.parentNode;
+  }
+  return null;
+}
+
 const Delegate = function(selector, eventName, targetSelector, listener) {
   document.querySelector(selector).addEventListener(eventName, function (event) {
-    var closestMatch = closest(event.target, targetSelector)
+    var closestMatch = closest(event.target, targetSelector);
     if (closestMatch) {
-      event.delegateTarget = closestMatch
-      listener(event)
+      event.delegateTarget = closestMatch;
+      listener(event);
     }
   })
 };

src/lib/SearchService.js

-const axios = require('axios');
-
-const SearchService = {
-  searchAll: async function (config) {
-    const req = await axios.get(`${config.api}/select?q=*%3A*`);
-    if (req.data) {
-      return req.data['response']['docs'];
-    } else {
-      return [];
-    }
-  }
-};
-
-module.exports = SearchService;
\ No newline at end of file

src/lib/SolrService.js

+const axios = require('axios');
+
+const SolrService = {
+  searchAll: async function (config) {
+    try {
+      const req = await axios.get(`${config.api}/select?q=*%3A*`);
+      if (req.data) {
+        return {data: req.data['response']['docs'], status: req.status};
+      } else {
+        return {data: [], status: req.status};
+      }
+    } catch (e) {
+      return {data: [], status: e.message};
+    }
+  },
+  get: async function (config, data) {
+    try {
+      let param = `get?id=`;
+      //Twice encoded, once for html one for solr
+      data = encodeURIComponent(`${data}`);
+      const req = await axios.get(`${config.api}/${param}${data}`);
+      if (req.data) {
+        return {data: req.data['doc'], status: req.status};
+      } else {
+        return {data: {}, status: req.status};
+      }
+    } catch (e) {
+      return {data: {}, status: e.message};
+    }
+  },
+  search: async function (config, data) {
+    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}`);
+      if (req.data) {
+        return {data: req.data['response']['docs'], status: req.status};
+      } else {
+        return {data: [], status: req.status};
+      }
+    } catch (e) {
+      return {data: [], status: e.message};
+    }
+  }
+};
+
+module.exports = SolrService;
\ No newline at end of file

src/style.css

-div{
-    font-family: Arial;
-    color: red;
-    size: B5;
-}
\ No newline at end of file