views/view.ejs
<%- include('_header'); -%>
<div class="columns is-align-items-center">
<div class="column">
<h1 class="title is-1">
<%= recordType.recordType + " " + record.recordNumber %>
</h1>
</div>
<div class="column is-narrow has-text-right">
<a class="button is-link" href="<%= urlPrefix + "/view/" + record.recordID %>?view=print" target="_blank">
<span class="icon"><i class="fas fa-print" aria-hidden="true"></i></span>
<span>Print Record</span>
</a>
<% if (user.canUpdate) { %>
<a class="button is-link" href="<%= urlPrefix + "/edit/" + record.recordID %>">
<span class="icon"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>
<span>Edit Record</span>
</a>
<% } %>
</div>
</div>
<div class="columns">
<div class="column">
<div class="panel">
<h2 class="panel-heading"><%= recordType.recordType %> Details</h2>
<div class="panel-block is-block">
<div class="columns">
<div class="column">
<strong><%= record.recordTitle %></strong>
</div>
<div class="column is-narrow">
<span class="has-tooltip-left has-tooltip-arrow" data-tooltip="<%= recordType.recordType %> Date">
<%= record.recordDate ? dateTimeFns.dateToString(record.recordDate) : "" %>
</span>
</div>
</div>
</div>
<% if (record.party && record.party !== "") { %>
<div class="panel-block" aria-label="Related Party">
<span class="panel-icon has-tooltip-right has-tooltip-arrow" data-tooltip="Related Party">
<i class="fas fa-fw fa-users" aria-hidden="true"></i>
</span>
<%= record.party %>
</div>
<% } %>
<% if (record.location && record.location !== "") { %>
<div class="panel-block" aria-label="Location">
<span class="panel-icon has-tooltip-right has-tooltip-arrow" data-tooltip="Location">
<i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i>
</span>
<%= record.location %>
</div>
<% } %>
<% if (record.recordDescription && record.recordDescription !== "") { %>
<div class="panel-block is-align-items-start" aria-label="<%= recordType.recordType %> Description">
<span class="panel-icon mt-2 has-tooltip-right has-tooltip-arrow" data-tooltip="Description">
<i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
</span>
<span class="has-whitespace-pre"><%= record.recordDescription %></span>
</div>
<% } %>
<% if (record.tags.length > 0) { %>
<div class="panel-block is-block">
<span class="panel-icon mt-2 has-tooltip-right has-tooltip-arrow" data-tooltip="Tags">
<i class="fas fa-fw fa-tags" aria-hidden="true"></i>
</span>
<% for (const tag of record.tags) { %>
<span class="tag is-medium">
<%= tag %>
</span>
<% } %>
</div>
<% } %>
</div>
</div>
<div class="column">
<% if (record.statuses.length > 0) { %>
<div class="panel">
<div class="panel-heading">
<div class="columns is-mobile">
<div class="column">
<h2 class="has-text-weight-bold">Statuses</h2>
</div>
<div class="column is-narrow">
<span class="tag is-info"><%= record.statuses.length %></span>
</div>
</div>
</div>
<% for (let index = 0; index < record.statuses.length; index += 1) { %>
<%
const status = record.statuses[index];
const statusType = statusTypes.find((possibleStatusType) => { return possibleStatusType.statusTypeKey === status.statusTypeKey});
%>
<div class="panel-block is-block <%= (index >= 5 ? "is-hidden" : "") %>">
<strong><%= statusType ? statusType.statusType : status.statusTypeKey %></strong><br />
<span class="has-tooltip-arrow has-tooltip-right" data-tooltip="<%= dateTimeFns.dateToTimeString(status.statusTime) %>">
<%= dateTimeFns.dateToString(status.statusTime) %>
</span><br />
<span class="is-size-7"><%= status.statusLog %></span>
</div>
<% } %>
<% if (record.statuses.length > 5) { %>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth is-show-all-button" type="button">
Show <%= (record.statuses.length - 5) %> More
</button>
</div>
<% } %>
</div>
<% } %>
<% if (record.users.length > 0) { %>
<div class="panel">
<div class="panel-heading">
<div class="columns is-mobile">
<div class="column">
<h2 class="has-text-weight-bold">Users</h2>
</div>
<div class="column is-narrow">
<span class="tag is-info"><%= record.users.length %></span>
</div>
</div>
</div>
<% for (let index = 0; index < record.users.length; index += 1) { %>
<%
const recordUser = record.users[index];
const recordUserType = recordUserTypes.find((possibleRecordUserType) => { return possibleRecordUserType.recordUserTypeKey === recordUser.recordUserTypeKey});
%>
<div class="panel-block is-block <%= (index >= 5 ? "is-hidden" : "") %>">
<strong><%= recordUserType ? recordUserType.recordUserType : recordUser.recordUserTypeKey %></strong><br />
<span><%= recordUser.userName %></span>
</div>
<% } %>
<% if (record.users.length > 5) { %>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth is-show-all-button" type="button">
Show <%= (record.users.length - 5) %> More
</button>
</div>
<% } %>
</div>
<% } %>
<% if (record.urls.length > 0) { %>
<div class="panel">
<div class="panel-heading">
<div class="columns is-mobile">
<div class="column">
<h2 class="has-text-weight-bold">Links</h2>
</div>
<div class="column is-narrow">
<span class="tag is-info"><%= record.urls.length %></span>
</div>
</div>
</div>
<% for (const url of record.urls) { %>
<a class="panel-block is-block" href="<%= url.url %>" target="_blank">
<strong><%= url.urlTitle %></strong><br />
<span class="tag has-tooltip-arrow has-tooltip-right" data-tooltip="Link Domain">
<%= url.url.split("/")[2] %>
</span><br />
<span class="is-size-7"><%= url.urlDescription %></span>
</a>
<% } %>
</div>
<% } %>
<% if (record.related.length > 0) { %>
<div class="panel">
<div class="panel-heading">
<div class="columns is-mobile">
<div class="column">
<h2 class="has-text-weight-bold">Related Records</h2>
</div>
<div class="column is-narrow">
<span class="tag is-info"><%= record.related.length %></span>
</div>
</div>
</div>
<% for (let index = 0; index < record.related.length; index += 1) { %>
<%
const relatedRecord = record.related[index];
const relatedRecordType = recordTypes.find((possibleRecordType) => { return possibleRecordType.recordTypeKey === relatedRecord.recordTypeKey; });
%>
<a class="panel-block is-block <%= (index >= 5 ? "is-hidden" : "") %>" href="<%= urlPrefix + "/view/" + relatedRecord.recordID.toString() %>" target="_blank">
<div class="columns mb-0">
<div class="column pb-0">
<strong><%= (relatedRecordType ? relatedRecordType.recordType : relatedRecord.recordTypeKey) %> <%= relatedRecord.recordNumber %></strong><br />
<%= relatedRecord.recordTitle %>
</div>
<div class="column is-narrow pb-0 has-text-right">
<%= dateTimeFns.dateToString(new Date(relatedRecord.recordDate)) %>
</div>
</div>
<div class="is-size-7">
<% if (relatedRecord.party && relatedRecord.party !== "") { %>
<span class="has-tooltip-right has-tooltip-arrow" data-tooltip="Related Party">
<span class="icon"><i class="fas fa-users" aria-hidden="true"></i></span>
<%= relatedRecord.party %>
</span><br />
<% } %>
<% if (relatedRecord.location && relatedRecord.location !== "") { %>
<span class="has-tooltip-right has-tooltip-arrow" data-tooltip="Location">
<span class="icon"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>
<%= relatedRecord.location %>
</span><br />
<% } %>
<%= (record.recordDescription.length > 500 ? record.recordDescription.substring(0, 497) + " ..." : record.recordDescription) %>
</div>
</a>
<% } %>
<% if (record.related.length > 5) { %>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth is-show-all-button" type="button">
Show <%= (record.related.length - 5) %> More
</button>
</div>
<% } %>
</div>
<% } %>
<% if (record.comments.length > 0) { %>
<div class="panel">
<div class="panel-heading">
<div class="columns">
<div class="column">
<h2 class="has-text-weight-bold">Comments</h2>
</div>
<div class="column is-narrow">
<span class="tag is-info"><%= record.comments.length %></span>
</div>
</div>
</div>
<% for (const comment of record.comments) { %>
<div class="panel-block is-block">
<span class="has-tooltip-arrow has-tooltip-right" data-tooltip="<%= dateTimeFns.dateToTimeString(comment.commentTime) %>">
<%= dateTimeFns.dateToString(comment.commentTime) %>
</span><br />
<span class="is-size-7"><%= comment.comment %></span>
</div>
<% } %>
</div>
<% } %>
</div>
</div>
<%- include('_footerA'); -%>
<script src="<%= urlPrefix %>/javascripts/view.min.js"></script>
<%- include('_footerB'); -%>