diff --git a/beat/web/reports/static/reports/app/directives/groupTextItem.js b/beat/web/reports/static/reports/app/directives/groupTextItem.js index ab61c56d444ae12060a4f853c33e90e6ed15ea79..06647fde57a4b28f6445ef6d50b2e5f5788c2853 100644 --- a/beat/web/reports/static/reports/app/directives/groupTextItem.js +++ b/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> `