From c4e774de8d41c384b0c246862f1b7aa706097b16 Mon Sep 17 00:00:00 2001
From: Moises Sacal <moisbo@gmail.com>
Date: Thu, 26 Sep 2019 14:28:52 +1000
Subject: [PATCH] clean up, added more components
---
config.json | 1 +
src/components/Footer.js | 17 +++++++++++
src/components/Header.js | 59 +++++++++++++++++----------------------
src/components/Loading.js | 9 ++++++
src/components/Main.js | 9 ++++--
src/components/Search.js | 36 ++++++++++++++++++++++++
src/index.js | 38 ++++++++++++++-----------
src/lib/NginxService.js | 8 ------
src/lib/SearchService.js | 14 ++++++++++
9 files changed, 130 insertions(+), 61 deletions(-)
create mode 100644 src/components/Footer.js
create mode 100644 src/components/Loading.js
create mode 100644 src/components/Search.js
delete mode 100644 src/lib/NginxService.js
create mode 100644 src/lib/SearchService.js
diff --git a/config.json b/config.json
index 98b9f9d..b051f49 100644
--- a/config.json
+++ b/config.json
@@ -1,4 +1,5 @@
{
+ "repo": "http://localhost:8080/repo/",
"api": "/solr/ocflcore",
"dev": {
"proxy": {
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..fccd44c
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,17 @@
+const Footer = function (data) {
+ return `
+ <footer class="footer">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-10">
+ <div class="copyright">
+ <p class="font-weight-light small">© copyright</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </footer>
+ `
+};
+
+module.exports = Footer;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index e46a440..c106968 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,41 +1,32 @@
const Header = function (data) {
return `
<header id="header" class="container">
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Link</a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- Dropdown
- </a>
- <div class="dropdown-menu" aria-labelledby="navbarDropdown">
- <a class="dropdown-item" href="#">Action</a>
- <a class="dropdown-item" href="#">Another action</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="#">Something else here</a>
- </div>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
- </li>
- </ul>
- <form class="form-inline my-2 my-lg-0">
- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
- </form>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-9">
+ <p></p>
+ <p class="header-main">
+ <img src="${data.header.logoURL}" [attr.alt]="${data.header.title}" style="width:110px;"/>
+ <a href="${data.header.URL}">${data.header.title}</a>
+ </p>
+ </div>
+ <div class="col-md-3">
+ <p></p>
+ <nav class="navbar">
+ <div class="navbar-nav">
+ <a class="nav-item nav-link"
+ href="${data.header.helpURL}" target="_blank noreferer">
+ ${data.header.help}<i class="fa fa-question-circle" aria-hidden="true"></i></a>
+ </div>
+ <div class="navbar-nav">
+ <a class="nav-item nav-link"
+ href="${data.header.portalURL}" target="_blank noreferer">
+ ${data.header.portal}<i class="fa fa-external-link" aria-hidden="true"></i></a>
+ </div>
+ </nav>
+ </div>
+ </div>
</div>
- </nav>
</header>
`
};
diff --git a/src/components/Loading.js b/src/components/Loading.js
new file mode 100644
index 0000000..09c0650
--- /dev/null
+++ b/src/components/Loading.js
@@ -0,0 +1,9 @@
+const Loading = function () {
+ return `
+ <section class="center">
+ <div>loading</div>
+ </section>
+ `;
+};
+
+module.exports = Loading;
\ No newline at end of file
diff --git a/src/components/Main.js b/src/components/Main.js
index ecb5a04..40e1a5c 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,12 +1,17 @@
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 = '/repo/' + d['uri_id'] + '/';
- html += '<div class="item"><a href="' + url + '">' + d['name'][0] + '</a> ' + d['record_type_s'] + '</div>\n'
+ 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>`;
+
return html;
};
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 0000000..4e5a638
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,36 @@
+const Search = function (data) {
+ return `
+ <div class="search-header">
+ <div class="row no-gutters align-items-center h-100">
+ <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"
+ [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"
+ (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>
+ </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>
+ </div>
+ `;
+};
+module.exports = Search;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 3eb499b..e1da1ef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,48 +4,52 @@ import 'bootstrap';
import './style.css';
const Delegate = require('./lib/Delegate');
-const nginxService = require('./lib/NginxService');
+const searchService = require('./lib/SearchService');
const config = require('../config.json');
//App view components
const Header = require('./components/header');
const Main = require('./components/main');
+const Footer = require('./components/footer');
+const Search = require('./components/search');
//Default state
let state = {
header: {
title: 'Data Portal',
+ URL: '/',
+ logo: 'assets/mint.svg',
+ help: 'help',
+ helpURL: '',
+ portal: 'Back to Stash',
+ portalURL: 'http://stash.research.uts.edu.au',
menu: [
- {id: 'sign-out-header', name: 'Sign Out'}
+ {id: 'back', name: 'Back'}
]
},
+ search:{
+ error: 'Search Error',
+ invalidSearch: 'Invalid Search',
+ searchText: 'Search'
+ },
main: {
docs: []
- }
+ },
+ config: config
};
const app = document.querySelector('#app');
const renderApp = function (data, into) {
console.log('rendering')
- into.innerHTML = [Header(data), Main(data)].join('');
-};
-
-const renderLoading = function () {
- let loading = `
- <section class="center">
- <div>loading</div>
- </section>
- `
- state.main = loading;
- renderApp(state, app)
+ into.innerHTML = [Header(data), Search(data), Main(data), Footer(data)].join('');
};
(async () => {
- const res = await nginxService({uri: '/solr/ocflcore'});
- state.main.docs = res['response']['docs'];
- console.log(state);
+
+ state.main.docs = await searchService.searchAll({api: config.api});
+
renderApp(state, app);
})();
\ No newline at end of file
diff --git a/src/lib/NginxService.js b/src/lib/NginxService.js
deleted file mode 100644
index 9e4336c..0000000
--- a/src/lib/NginxService.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const axios = require('axios');
-
-const NginxService = async function (config) {
- const req = await axios.get(`${config.uri}/select?q=*%3A*`);
- return req.data;
-};
-
-module.exports = NginxService;
\ No newline at end of file
diff --git a/src/lib/SearchService.js b/src/lib/SearchService.js
new file mode 100644
index 0000000..8d4161e
--- /dev/null
+++ b/src/lib/SearchService.js
@@ -0,0 +1,14 @@
+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
--
GitLab