change textitem format to match that of other site textitems

beat/web/reports/static/reports/app/directives/groupTextItem.js

@@ -26,7 +26,7 @@
  * 	displays a text report item
  */
 angular.module('reportApp')
-.directive("groupTextItem", ['GroupsService', function(GroupsService){
+.directive("groupTextItem", ['GroupsService', '$sce', function(GroupsService, $sce){
 	return {
 		scope: {
 			group: '=',
@@ -35,13 +35,14 @@ angular.module('reportApp')
 			serializeFuncObj: '='
 		},
 		link: function(scope){
+			scope.trustAsHtml = $sce.trustAsHtml;
 			scope.isEditable = GroupsService.isEditable;
 			scope.item = scope.reportItem;
 			scope.domId = `${scope.group.name}_${scope.item.id}`;
 
 			scope.uicmOptions = {
 				mode: 'rst',
-				readOnly: GroupsService.isEditable
+				readOnly: !GroupsService.isEditable
 			};
 
 
@@ -55,6 +56,19 @@ angular.module('reportApp')
 					scope.compiledContent.val = data.data.html_str;
 				});
 			};
+
+			scope.isEditing = { val: false };
+			scope.unsavedContent = { val: `${scope.item.content}` };
+			scope.saveAction = () => {
+				scope.item.content = scope.unsavedContent.val;
+				scope.compileContent();
+				scope.isEditing.val = false;
+			};
+			scope.cancelAction = () => {
+				scope.unsavedContent.val = `${scope.item.content}`;
+				scope.isEditing.val = false;
+			};
+			scope.compileContent();
 		},
 		template: `
 <div id="{{domId}}-heading" class="panel-heading" role="tab">
@@ -70,12 +84,14 @@ angular.module('reportApp')
 			{{ domId }}
 		</a>
 		<div class="btn-group" role="group" role='tab'>
-			<button ng-disabled='!isEditable' class='btn btn-success' ng-click='compileContent()'>
-				Compile Content
+			<button ng-disabled='!isEditable' class='btn btn-default' ng-click='compileContent()'>
+				Recompile Content
 			</button>
+			<!-- dont show split view, just toggle between html/rst view
 			<button ng-disabled='!isEditable' class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
 				Toggle Compiled View
 			</button>
+			!-->
 		</div>
 
 		<button ng-disabled='!isEditable' class='btn btn-danger' ng-click='group.removeReportItem(item.id)'>
@@ -88,10 +104,39 @@ angular.module('reportApp')
 	role="tabpanel"
 	aria-labelledby="{{domId}}-heading">
 	<div class='panel-body'>
-		<ui-codemirror ng-model='item.content' ui-codemirror-opts='uicmOptions'></ui-codemirror>
-		<p class='help-block'>
-		Describe the object thoroughly using <a href="http://docutils.sourceforge.net/rst.html">reStructuredText mark-up</a><br><i class="fa fa-thumbs-up"></i> The ruler at 80 columns indicate suggested <a href="https://en.wikipedia.org/wiki/POSIX">POSIX line breaks</a> (for readability).<br><i class="fa fa-thumbs-up"></i> The editor will automatically enlarge to accomodate the entirety of your input<br><i class="fa fa-thumbs-up"></i> Use <a href="http://codemirror.net/doc/manual.html#commands">keyboard shortcuts</a> for search/replace and faster editing. For example, use Ctrl-F (PC) or Cmd-F (Mac) to search through this box
-		</p>
+		<div class='row'>
+			<div class='col-sm-10'>
+				<div ng-if='!isEditing.val' ng-bind-html='trustAsHtml(compiledContent.val)'></div>
+				<div ng-if='isEditing.val'>
+					<ui-codemirror ng-model='unsavedContent.val' ui-codemirror-opts='uicmOptions'></ui-codemirror>
+					<p class='help-block'>
+					Describe the object thoroughly using <a href="http://docutils.sourceforge.net/rst.html">reStructuredText mark-up</a><br><i class="fa fa-thumbs-up"></i> The ruler at 80 columns indicate suggested <a href="https://en.wikipedia.org/wiki/POSIX">POSIX line breaks</a> (for readability).<br><i class="fa fa-thumbs-up"></i> The editor will automatically enlarge to accomodate the entirety of your input<br><i class="fa fa-thumbs-up"></i> Use <a href="http://codemirror.net/doc/manual.html#commands">keyboard shortcuts</a> for search/replace and faster editing. For example, use Ctrl-F (PC) or Cmd-F (Mac) to search through this box
+					</p>
+				</div>
+			</div>
+			<div class='col-sm-2'>
+				<div class="pull-right action-buttons">
+					<a
+						ng-if='!isEditing.val'
+						ng-click='isEditing.val = !isEditing.val'
+						class="btn btn-primary btn-sm">
+						<i class="fa fa-edit fa-lg"></i> Edit
+					</a>
+					<a
+						ng-if='isEditing.val'
+						ng-click='cancelAction()'
+						class="btn btn-danger btn-sm">
+						<i class="fa fa-times fa-lg"></i> Cancel
+					</a>
+					<a
+						ng-if='isEditing.val'
+						ng-click='saveAction()'
+						class="btn btn-success btn-sm">
+						<i class="fa fa-save fa-lg"></i> Save
+					</a>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>
 `