Skip to content

Commit

Permalink
Usability improvements to the data model public and admin pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikesname
mikesname committed Aug 8, 2024
1 parent 6b58997 commit c699bab
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 27 deletions.
9 changes: 8 additions & 1 deletion modules/admin/app/assets/css/dmeditor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,20 @@ $active-table-row: #e7f1ff;
width: 5rem;
}

.fm-see-also strong {
margin-right: $margin-xs;
}

.fm-see-also a + a {
display: inline-block;
}

.fm-see-also a + a:before {
content: ", ";
}

.fm-usage {
white-space: nowrap;

}

.fm-list td:last-child a {
Expand Down
8 changes: 4 additions & 4 deletions modules/admin/app/assets/js/dmeditor/components/_list-et.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ export default {
<th>Name</th>
<th>Usage</th>
<th>Description</th>
<th>See Also</th>
<th></th>
</tr>
</thead>
Expand All @@ -137,9 +136,10 @@ export default {
<td class="fm-description">
<markdown v-bind:content="fm.description"/>
<p v-if="fm.defaultVal"><strong>Default Value:</strong> <q>{{ fm.defaultVal }}</q></p>
</td>
<td class="fm-see-also">
<a v-for="sa in fm.seeAlso" v-bind:href="sa">{{ sa }}</a>
<div class="fm-see-also" v-if="fm.seeAlso && fm.seeAlso.length > 0">
<strong>See Also:</strong>
<a v-for="sa in fm.seeAlso" v-bind:href="sa" target="_blank">{{ sa }}</a>
</div>
</td>
<td class="fm-actions">
<a class="fm-edit" v-on:click.prevent="editFieldMetadata(fm)" href="#">
Expand Down
4 changes: 2 additions & 2 deletions modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@ export default {
<multi-item v-bind:label="'See Also'" v-model="seeAlso" v-bind:type="'url'" />
</fieldset>
<template v-slot:footer>
<button v-if="editing" class="btn btn-danger" id="delete-metadata" v-on:click="confirmDelete = true">
<i v-if="saving" class="fa fa-fw fa-circle-o-notch fa-spin"></i>
<button tabindex="-1" v-if="editing" class="btn btn-danger" id="delete-metadata" v-on:click="confirmDelete = true">
<i v-if="deleting" class="fa fa-fw fa-circle-o-notch fa-spin"></i>
<i v-else class="fa fa-fw fa-trash-o"></i>
Delete Field Metadata
</button>
Expand Down
97 changes: 77 additions & 20 deletions modules/portal/app/views/dataModel.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,39 @@
font-weight: bold;
}

.data-model-see-also a {
display: inline-block;
}

.data-model-entity-type {
margin-bottom: 2rem;
}

.data-model-usage {
white-space: nowrap;
}

.data-model-see-also a + a {
display: inline-block;
}

.data-model-see-also a + a:before {
content: ", ";
}

#data-model-nav {
position: sticky;
top: 1rem;
}

#data-model-nav ul {
flex-direction: column;
}

#data-model-nav ul li ul {
padding-left: 1rem;
font-size: 0.9rem;
}
#data-model-nav ul li ul li a {
display: block;
padding: 0.5rem 1rem;
}
</style>
}

Expand All @@ -37,17 +59,23 @@
@field.description.map { desc =>
@Markdown(desc)
}
</td>
<td class="data-model-see-also">
@field.seeAlso.map { sa =>
<a href="@sa" target="_blank">@sa</a>
@if(field.seeAlso.nonEmpty && field.description.nonEmpty) {
<hr/>
}
@if(field.seeAlso.nonEmpty) {
<div class="data-model-see-also">
<strong>@Messages("dataModel.field.seeAlso"):</strong>
@field.seeAlso.map { sa =>
<a href="@sa" target="_blank">@sa</a>
}
</div>
}
</td>
</tr>

}

@views.html.layout.textLayout(Messages("dataModel"), styles = extraStyles) {
@views.html.layout.rightSidebarLayout(Messages("dataModel"), styles = extraStyles) {

<div class="row">
<div class="col-md-12">
Expand All @@ -57,23 +85,19 @@ <h2>@Messages("dataModel")</h2>
</div>

@for((entityType, categories) <- templates) {
<div class="row data-model-entity-type">
<div class="col-md-12">
@entityTypeMetadata.get(entityType).map { metadata =>
<h3>@metadata.name</h3>
@metadata.description.map { desc =>
@Markdown(desc)
}
@entityTypeMetadata.get(entityType).map { metadata =>
<div class="data-model-entity-type">
<h3 id="section-@entityType">@metadata.name</h3>
@metadata.description.map { desc =>
@Markdown(desc)
}

@fieldMetadata.get(entityType).map { fieldSet =>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>@Messages("dataModel.field.name")</th>
<th>@Messages("dataModel.field.usage")</th>
<th>@Messages("dataModel.field.description")</th>
<th>@Messages("dataModel.field.seeAlso")</th>
</tr>
</thead>
<tbody>
Expand All @@ -85,7 +109,7 @@ <h3>@metadata.name</h3>
} else {
@if(fieldSet.withCategory(category).nonEmpty) {
<tr>
<td colspan="4" class="data-model-category"><strong>@Messages(s"dataModel.$entityType.$category")</strong></td>
<td colspan="4" class="data-model-category" id="section-@entityType-@category"><strong>@Messages(s"dataModel.$entityType.$category")</strong></td>
</tr>
@for(field <- fieldSet.withCategory(category)) {
@fieldRow(field)
Expand All @@ -97,6 +121,39 @@ <h3>@metadata.name</h3>
</table>
}
</div>
</div>
}
}

<script>
jQuery(function($) {
$("body").scrollspy({ target: "#data-model-nav" });
});
</script>
} {
<div id="data-model-nav">
<ul class="nav nav-pills">
@for((entityType, categories) <- templates) {
@entityTypeMetadata.get(entityType).map { metadata =>
<li class="nav-item">
<a class="nav-link" href="#section-@entityType">@metadata.name</a>
@if(categories.keys.toSeq.nonEmpty) {
<ul class="nav nav-pills">
@categories.keys.toSeq.map { category =>
@if(!category.equals("_")) {
@if(fieldMetadata.get(entityType).exists(_.withCategory(category).nonEmpty)) {
<li class="nav-item">
<a href="#section-@entityType-@category">
@Messages(s"dataModel.$entityType.$category")
</a>
</li>
}
}
}
</ul>
}
</li>
}
}
</ul>
</div>
}

0 comments on commit c699bab

Please sign in to comment.