Add new Javascript object for the policy entity. This will help with databinding for the relevant properties.

updated admin.html to pull in new policy object
updated admin.js to use new observables in the object.

#94
This commit is contained in:
chris.watts90@outlook.com 2020-02-24 07:40:52 +00:00
parent 5e0d716ed5
commit 695c88521d
5 changed files with 91 additions and 56 deletions

View File

@ -287,6 +287,9 @@
<Content Include="www\js\marked.min.js">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="www\js\PolicyObject.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="www\spa.css">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>

View File

@ -108,60 +108,60 @@
</div>
</div>
</div>
<div id="PolicyManagement" class="container">
<div id="row">
<ul class="nav nav-tabs">
<li class="active"><a href="#edit" data-toggle="tab" >Edit</a></li>
<li ><a href="#preview" data-toggle="tab" >Preview</a></li>
</ul>
<div class="tab-content" style="max-height: 500px; min-height: 400px;overflow-y: auto">
<div id="edit" class="tab-pane fade in active">
<textarea id="policyEditor"></textarea>
</div>
<div id="preview" class="tab-pane fade in">
<div data-bind="html: policyData().Html" class="well-lg"></div>
<div id="PolicyManagement" class="container">
<div id="row">
<ul class="nav nav-tabs">
<li class="active"><a href="#edit" data-toggle="tab">Edit</a></li>
<li><a href="#preview" data-toggle="tab">Preview</a></li>
</ul>
<div class="tab-content" style="max-height: 500px; min-height: 400px;overflow-y: auto">
<div id="edit" class="tab-pane fade in active">
<textarea id="policyEditor"></textarea>
</div>
<div id="preview" class="tab-pane fade in">
<div data-bind="html: policyData.html" class="well-lg"></div>
</div>
</div>
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#saveDialog">Save</button><!--data-bind="click: $root.policySave"-->
<button class="btn btn-secondary pull-right" data-bind="click: $root.policyReload">Cancel</button>
</div>
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#saveDialog" >Save</button><!--data-bind="click: $root.policySave"-->
<button class="btn btn-secondary pull-right" data-bind="click: $root.policyReload">Cancel</button>
</div>
</div>
<div id="saveDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Change Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<th>Change Author</th>
<td ><input class="form-control" id="changeAuthorInput" type="text" data-bind="value: policyData().ChangeAuthor"/></td>
</tr>
<tr>
<th>Change Date</th>
<td><input class="form-control" id="changeDatePicker" type="datetime-local" data-bind="value: policyData().ChangeDate"/></td>
</tr>
<tr>
<th >Version</th>
<td ><input class="form-control" id="versionInput" type="text" data-bind="value: policyData().Version"/></td>
</tr>
<tr>
<th>Change Description</th>
<td><input class="form-control" id="changeDescription" type="text" data-bind="value: policyData().ChangeDescription"/></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary pull-right" data-bind="click: $root.policySave">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="saveDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4>Change Details</h4>
</div>
<div class="modal-body">
<table class="table">
<tr>
<th>Change Author</th>
<td><input class="form-control" id="changeAuthorInput" type="text" data-bind="value: policyData.ChangeAuthor" /></td>
</tr>
<tr>
<th>Change Date</th>
<td><input class="form-control" id="changeDatePicker" type="datetime-local" data-bind="value: policyData.ChangeDate" /></td>
</tr>
<tr>
<th>Version</th>
<td><input class="form-control" id="versionInput" type="text" data-bind="value: policyData.Version" readonly /></td>
</tr>
<tr>
<th>Change Description</th>
<td><input class="form-control" id="changeDescription" type="text" data-bind="value: policyData.ChangeDescription" /></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary pull-right" data-bind="click: $root.policySave">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="Helpers.min.js" type="text/javascript"></script>
<script src="js/PolicyObject.js" type="text/javascript"></script>
<script src="Helpers.min.js" type="text/javascript"></script>
<script src="js/easymde.min.js" type="text/javascript"></script>
<script src="js/highlightjs.min.js" type="text/javascript"></script>
<script src="js/htmlparser.min.js" type="text/javascript"></script>

View File

@ -5,7 +5,7 @@
self.unassignedCardList = ko.observable(null);
self.helpers = new Helpers();
self.policyMarkdown = "";
self.policyData = ko.observable({ChangeAuthor:"", ChangeDate:moment(), Version:1, ChangeDescription:"", Markdown:"", Html:""});
self.policyData = new policy();
self.renderer = new marked.Renderer();
self.renderer.blockquote = function(quote) {
return "<blockquote class=\"blockquote\">" + quote + "</blockquote>";
@ -66,7 +66,7 @@
});
self.editor.codemirror.on("changes",
function () {
self.policyData().Html=self.editor.options.previewRender(self.editor.value());
self.policyData.html(self.editor.options.previewRender(self.editor.value()));
});
self.uiPages = {
overview: "overview",
@ -168,10 +168,10 @@
};
self.policySave = function () {
var url = self.helpers.createRequestUrl(self.apiEndpoints.savePolicy, null, false);
self.policyData().Markdown = self.editor.value(); //make sure we update it, as it doesnt push the value back into the variable
console.log(self.policyData());
self.policyData.Markdown(self.editor.value()); //make sure we update it, as it doesnt push the value back into the variable
//console.log(self.policyData());
$.post(url, self.policyData(), function() {
}, "json")
}, "json") //todo: check this serialisation as the object is now complex.
.done(function() {
self.policyReload();
}).fail(function(resp, status, error) {
@ -183,9 +183,11 @@
var url = self.helpers.createRequestUrl(self.apiEndpoints.getPolicy,
[], false, false);
$.getJSON(url, function (res) {
console.log(res);
//console.log(res);
self.editor.value(res.Markdown);
self.policyData(res);
res.Version = (parseInt(res.Version) + 1).toString();
self.policyData.update(res);
$('#saveDialog').modal('hide');
}).fail(function (resp, status, error) {
console.log("error - policyReload");
var errObj = self.helpers.processRequestFailure(resp, status, error);

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,30 @@
function policy(data) {
var self = this;
if (typeof data === "undefined") {
data = createDefaultPolicy();
}
self.changeDate = ko.observable(data.changeDate);
self.description = ko.observable(data.description);
self.changeAuthor = ko.observable(data.changeAuthor);
self.version = ko.observable(data.version);
self.markdown = ko.observable(data.markdown);
self.html = ko.observable(data.html);
function createDefaultPolicy() {
return {
changeDate: moment().format(),
description: "",
changeAuthor: "",
version: -1,
markdown: "",
html: ""
};
}
self.update = function(data) {
self.changeDate(data.changeDate);
self.description(data.description);
self.changeAuthor(data.changeAuthor);
self.version(data.version);
self.markdown(data.markdown);
self.html(data.html);
}
}