From 6da5c7fc66e83aa2b704ea42de141c0f1888d2c3 Mon Sep 17 00:00:00 2001
From: Moises Sacal <moisbo@gmail.com>
Date: Thu, 3 Oct 2019 14:42:20 +1000
Subject: [PATCH] started configurble components
---
package-lock.json | 5 +++
package.json | 3 +-
src/components/isIterable.js | 9 +++++
src/components/views/SubDoc.js | 26 +++++++++++++
src/components/views/SubDocDate.js | 19 ++++++++++
src/components/views/SubDocHorizontal.js | 29 +++++++++++++++
src/components/views/ViewDoc.js | 25 +++++++++++--
src/components/views/ViewTable.js | 47 ++++++++++++++++++------
src/index.js | 8 +++-
9 files changed, 155 insertions(+), 16 deletions(-)
create mode 100644 src/components/isIterable.js
create mode 100644 src/components/views/SubDoc.js
create mode 100644 src/components/views/SubDocDate.js
create mode 100644 src/components/views/SubDocHorizontal.js
diff --git a/package-lock.json b/package-lock.json
index e19c810..b19c5da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5255,6 +5255,11 @@
}
}
},
+ "moment": {
+ "version": "2.24.0",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+ "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+ },
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index 9342b58..f707eca 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
- "jquery": "^3.4.1"
+ "jquery": "^3.4.1",
+ "moment": "^2.24.0"
}
}
diff --git a/src/components/isIterable.js b/src/components/isIterable.js
new file mode 100644
index 0000000..3525012
--- /dev/null
+++ b/src/components/isIterable.js
@@ -0,0 +1,9 @@
+const isIterable = function(obj){
+ // checks for null and undefined
+ if (obj == null) {
+ return false;
+ }
+ return typeof obj[Symbol.iterator] === 'function';
+};
+
+module.exports = isIterable;
\ No newline at end of file
diff --git a/src/components/views/SubDoc.js b/src/components/views/SubDoc.js
new file mode 100644
index 0000000..97a1d05
--- /dev/null
+++ b/src/components/views/SubDoc.js
@@ -0,0 +1,26 @@
+const $ = require("jquery");
+const isIterable = require('../isIterable');
+
+const SubDoc = function (data) {
+ const div = $('<div class="row">');
+ const headerDiv = $('<div class="col-sm-2">').html(data.fieldName);
+ div.append(headerDiv);
+ if (isIterable(data.value)) {
+ for (let key of data.value) {
+ try {
+ const subDiv = $('<div class="col-sm">');
+ const item = JSON.parse(data.value);
+ // TODO: talk to Michael Lynch
+ const display = eval("`" + data.template + "`");
+ const dis = $('<span>').html(display);
+ subDiv.append(dis);
+ div.append(subDiv);
+ } catch (e) {
+ div.append('')
+ }
+ }
+ }
+ return div;
+}
+
+module.exports = SubDoc;
\ No newline at end of file
diff --git a/src/components/views/SubDocDate.js b/src/components/views/SubDocDate.js
new file mode 100644
index 0000000..ddf9b87
--- /dev/null
+++ b/src/components/views/SubDocDate.js
@@ -0,0 +1,19 @@
+const $ = require('jquery');
+const moment = require('moment');
+const isIterable = require('../isIterable');
+
+const SubDocDate = function (data) {
+ const div = $('<div class="row">');
+ const headerDiv = $('<div class="col-sm-2">').html(data.fieldName);
+ div.append(headerDiv);
+ if (isIterable(data['value'])) {
+ for (let key of data['value']) {
+ const value = moment(key).format('LL');
+ const eleDiv = $('<div class="col-sm-6">').html(value);
+ div.append(eleDiv);
+ }
+ }
+
+ return div;
+};
+module.exports = SubDocDate;
\ No newline at end of file
diff --git a/src/components/views/SubDocHorizontal.js b/src/components/views/SubDocHorizontal.js
new file mode 100644
index 0000000..45c9298
--- /dev/null
+++ b/src/components/views/SubDocHorizontal.js
@@ -0,0 +1,29 @@
+const $ = require("jquery");
+const isIterable = require('../isIterable');
+
+const SubDocHorizontal = function (data) {
+ const div = $('<div class="row">');
+ const headerDiv = $('<div class="col-sm-2">').html(data.fieldName);
+ div.append(headerDiv);
+ if (isIterable(data.value)) {
+ for (let key of data.value) {
+ try {
+ const a = $('<a>');
+ const subDiv = $('<div class="col-sm">');
+ const sub = JSON.parse(key);
+ const href = `/#view/${sub['@id']}`;
+ a.attr('href', href);
+ a.attr('title', sub['name']);
+ a.text(sub['name']);
+ a.addClass("link");
+ subDiv.append(a);
+ div.append(subDiv);
+ } catch (e) {
+ div.append('')
+ }
+ }
+ }
+ return div;
+}
+
+module.exports = SubDocHorizontal;
\ No newline at end of file
diff --git a/src/components/views/ViewDoc.js b/src/components/views/ViewDoc.js
index fc9b3cb..6917ad0 100644
--- a/src/components/views/ViewDoc.js
+++ b/src/components/views/ViewDoc.js
@@ -2,6 +2,7 @@ const $ = require("jquery");
const ViewTable = require('./ViewTable');
const ViewErrorElement = require('./ViewErrorElement');
const ViewRelated = require('./ViewRelated');
+const isIterable = require('../isIterable');
const ViewDoc = function (data) {
@@ -11,7 +12,6 @@ const ViewDoc = function (data) {
if (doc) {
const heading = $('<h1>').html(doc.name);
const desc = $('<p>').html(doc.description);
- const date = $('<p>').html(doc.datePublished);
const related = $('<div>');
if (data.main.related.length > 0) {
const relatedInfo = $('<h3>').html('Related Objects');
@@ -24,9 +24,28 @@ const ViewDoc = function (data) {
}
related.append(relatedUl);
}
- const fields = ["author"];
+ const linkTo = $('<div>');
+ if (isIterable(doc['uri_id'])) {
+ for (let resolve of doc['uri_id']) {
+ const goTo = $('<a>');
+ goTo.attr('href', `${data.config.repo}${resolve}`);
+ goTo.attr('title', 'Open Record');
+ goTo.attr('target', 'blank');
+ goTo.text('Open Record');
+ goTo.addClass("link");
+ linkTo.append(goTo);
+ }
+ }
+ let tableFields = data.main.viewFields || [];
+ // if (doc['record_type_s'] === data.main.tabledDoc) {
+ // tableFields = data.main.viewFields;
+ // }
- summary.append(heading).append(desc).append(date).append(ViewTable(doc, fields)).append(related);
+ summary.append(heading)
+ .append(desc)
+ .append(ViewTable(doc, tableFields))
+ .append(related)
+ .append(linkTo);
dummy.append(summary);
return dummy.html();
} else {
diff --git a/src/components/views/ViewTable.js b/src/components/views/ViewTable.js
index 34fd38f..1c11ad8 100644
--- a/src/components/views/ViewTable.js
+++ b/src/components/views/ViewTable.js
@@ -1,23 +1,48 @@
const $ = require("jquery");
const ViewSubDoc = require('./ViewSubDoc');
+const SubDocHorizontal = require('./SubDocHorizontal');
+const SubDocDate = require('./SubDocDate');
+const SubDoc = require('./SubDoc');
+
const ViewTable = function (doc, fields) {
- //"fields" = ["name", "author", "description", "publisher", "date"]
const dummy = $('<div>');
- const table = $('<table class="table">');
+ const div = $('<div class="table table-responsive">');
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]));
+ const list = $('<div class="table">');
+ let subDoc;
+ switch (key.display) {
+ case 'SubDocHorizontal':
+ if(doc[key.field]) {
+ subDoc = SubDocHorizontal({key: key.field, value: doc[key.field], fieldName: key.fieldName});
+ list.append(subDoc);
+ }
+ break;
+ case 'SubDocDate':
+ if(doc[key.field]) {
+ subDoc = SubDocDate({key: key.field, value: doc[key.field], fieldName: key.fieldName});
+ list.append(subDoc);
+ }
+ break;
+ case 'SubDoc':
+ if(doc[key.field]) {
+ subDoc = SubDoc({key: key.field, value: doc[key.field], fieldName: key.fieldName, template: key.template});
+ list.append(subDoc);
+ }
+ break;
+ default:
+ if(doc[key.field]) {
+ const row = $('<div class="row">');
+ const defaultKey = $('<div class="col-sm-2">').html(`${key.fieldName}`);
+ const defaultValue = $('<div class="col-sm-6">').html(doc[key.field]);
+ row.append(defaultKey).append(defaultValue);
+ list.append(row);
+ }
}
- table.append(tr);
+ div.append(list);
}
- dummy.append(table);
+ dummy.append(div);
return dummy;
};
diff --git a/src/index.js b/src/index.js
index ddba3be..b950518 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,7 +37,13 @@ let state = {
numFound: 0,
pageSize: 10,
searchText: '',
- related: []
+ related: [],
+ viewFields: [
+ {display: "SubDocHorizontal", field: "author", fieldName: 'Author/s'},
+ {display: "", field: "license", fieldName: 'Licence'},
+ {display: "SubDocDate", field: "datePublished", fieldName: 'Date Published'},
+ {display: "SubDoc", field: "contactPoint", fieldName: 'Contact Point', template: '${item.name} ${item.email}'},
+ ]
},
config: config
};
--
GitLab