Task notes modals (#8521)

* Merged in develop

* Show task notes modal on click

* Began adding tests

* Removed extra characters

* Fixed lingering popup

* Added markdown

* Fixed line endings

test/client-old/spec/directives/task.directive.js

@@ -0,0 +1,35 @@
+describe('task Directive', () => {
+  var compile, scope, directiveElem, $modal;
+
+  beforeEach(function(){
+    module(function($provide) {
+      $modal = {
+        open: sandbox.spy(),
+      };
+      $provide.value('$modal', $modal);
+    });
+
+    inject(function($compile, $rootScope, $templateCache) {
+      compile = $compile;
+      scope = $rootScope.$new();
+
+      $templateCache.put('templates/task.html', '<div>Task</div>');
+    });
+
+
+    directiveElem = getCompiledElement();
+  });
+
+  function getCompiledElement(){
+    var element = angular.element('<task></task>');
+    var compiledElement = compile(element)(scope);
+    scope.$digest();
+    return compiledElement;
+  }
+
+  xit('opens task note modal', () => {
+    scope.showNoteDetails();
+
+    expect($modal.open).to.be.calledOnce;
+  });
+})

website/client-old/js/directives/task.directive.js

@@ -1,24 +1,41 @@
-'use strict';
-
-(function(){
-  angular
-    .module('habitrpg')
-    .directive('task', task);
-
-  task.$inject = [
-    'Shared',
-  ];
-
-  function task(Shared) {
-    return {
-      restrict: 'E',
-      templateUrl: 'templates/task.html',
-      scope: true,
-      link: function($scope, element, attrs) {
-        $scope.getClasses = function (task, user, list, main) {
-          return Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main);
-        }
-      }
-    }
-  }
-}());
+'use strict';
+
+(function(){
+  angular
+    .module('habitrpg')
+    .directive('task', task);
+
+  task.$inject = [
+    'Shared',
+    '$modal',
+  ];
+
+  function task(Shared, $modal) {
+    return {
+      restrict: 'E',
+      templateUrl: 'templates/task.html',
+      scope: true,
+      link: function($scope, element, attrs) {
+        $scope.getClasses = function (task, user, list, main) {
+          return Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main);
+        }
+
+        $scope.showNoteDetails = function (task) {
+          task.popoverOpen = false;
+
+          $modal.open({
+            templateUrl: 'modals/task-extra-notes.html',
+            controller: function ($scope, task) {
+              $scope.task = task;
+            },
+            resolve: {
+              task: function() {
+                return task;
+              }
+            }
+          })
+        };
+      }
+    }
+  }
+}());

website/common/locales/en/tasks.json

@@ -164,6 +164,7 @@
     "confirmScoreNotes": "Confirm task scoring with notes",
     "taskScoreNotesTooLong": "Task score notes must be less than 256 characters",
     "groupTasksByChallenge": "Group tasks by challenge title",
+    "taskNotes": "Task Notes",
     "monthlyRepeatHelpContent": "This task will be due every X months",
     "yearlyRepeatHelpContent": "This task will be due every X years"
 }

website/views/shared/modals/index.jade

@@ -26,6 +26,7 @@ include ./login-incentives-reward-unlocked.jade
 include ./generic.jade
 include ./tasks-edit.jade
 include ./task-notes.jade
+include ./task-extra-notes.jade
 
 //- Settings
 script(type='text/ng-template', id='modals/change-day-start.html')

website/views/shared/modals/task-extra-notes.jade

@@ -0,0 +1,10 @@
+script(id='modals/task-extra-notes.html', type='text/ng-template')
+  .modal-header
+    h4=env.t('taskNotes')
+
+  .modal-body
+    div
+      markdown(text='task.notes')
+
+  .modal-footer
+    .btn.btn-primary(ng-click="$close()")=env.t('close')

website/views/shared/tasks/meta_controls.jade

@@ -4,14 +4,14 @@
   span(ng-if='showDoubleTaskCounter(task, obj)')
     span(tooltip=env.t('habitCounterUp')) +{{task.counterUp}}|
     span(tooltip=env.t('habitCounterDown')) -{{task.counterDown}} 
-    
+
   span(ng-if='showSingleTaskCounter(task, obj)')
     span(tooltip=env.t('habitCounter')) {{task.up ? task.counterUp : task.counterDown}} 
-  
+
   // Due Date
   span(ng-if='task.type=="todo" && task.date')
     span(ng-class='{"label label-danger":(moment(task.date).isBefore(_today, "days") && !task.completed)}') {{task.date | date:(user.preferences.dateFormat.indexOf('yyyy') == 0 ? user.preferences.dateFormat.substr(5) : user.preferences.dateFormat.substr(0,5))}}
-  
+
   // Approval requested
   |  
   span(ng-show='task.group.approval.requested && !task.group.approval.approved')
@@ -29,7 +29,7 @@
   // Icons only available if you own the tasks (aka, hidden from challenge stats)
   span(ng-if='!obj._locked')
     group-task-meta-actions(ng-if="!obj.auth && obj.purchased && obj.purchased.active", task='task', group='obj')
-    
+
     a(ng-click='pushTask(task,$index,"top")', tooltip=env.t('pushTaskToTop'), ng-class="{'push-down': ctrlPressed}")
       span(ng-hide="ctrlPressed").glyphicon.glyphicon-open
       span(ng-show="ctrlPressed").glyphicon.glyphicon-save
@@ -39,13 +39,13 @@
     a.badge(ng-if='task.checklist[0]', ng-class='{"badge-success":checklistCompletion(task.checklist) == task.checklist.length}', ng-click='collapseChecklist(task)', tooltip=env.t('expandCollapse'))
       |{{checklistCompletion(task.checklist)}}/{{task.checklist.length}}
     span.glyphicon.glyphicon-tags(tooltip='{{Shared.appliedTags(user.tags, task.tags)}}', ng-hide='Shared.noTags(task.tags)')
-    
+
     // edit
     a(ng-hide='checkGroupAccess && !checkGroupAccess(obj)', ng-click='editTask(task, user, Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main))', tooltip=env.t('edit'))
       |  
       span.glyphicon.glyphicon-pencil
     |  
-  
+
     //challenges
     span(ng-if='task.challenge.id')
       span(ng-if='task.challenge.broken')
@@ -54,7 +54,7 @@
       span(ng-if='!task.challenge.broken')
         span.glyphicon.glyphicon-bullhorn(tooltip=env.t('challenge'))
         |  
-        
+
     // delete
     a(ng-if='!task.challenge.id || (obj.leader && obj.leader.id === user._id)', ng-hide="(checkGroupAccess && !checkGroupAccess(obj))" ng-click='removeTask(task, obj)', tooltip=env.t('delete'))
       span.glyphicon.glyphicon-trash
@@ -67,6 +67,6 @@
     // notes
 
   // Make this icon available regardless of task ownership
-  a.task-notes(ng-show='task.notes && !task._editing', ng-click='task.popoverOpen = !task.popoverOpen', popover-trigger='click', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}')
+  a.task-notes(ng-show='task.notes && !task._editing', ng-click='showNoteDetails(task);', popover-trigger='hover', data-popover-html="{{task.notes | markdown}}", popover-placement="top", popover-append-to-body='{{::modal ? "false":"true"}}')
     span.glyphicon.glyphicon-comment
     |