started configurble components

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",

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"
   }
 }

src/components/isIterable.js

+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

src/components/views/SubDoc.js

+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

src/components/views/SubDocDate.js

+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

src/components/views/SubDocHorizontal.js

+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

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 {

src/components/views/ViewTable.js

 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;
 };
 

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
 };