checklists WIP

bower.json

@@ -29,7 +29,7 @@
     "bootstrap": "v2.3.2",
     "bootstrap-datepicker": "~1.2.0",
     "bootstrap-growl": "~1.1.0",
-    "habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared.git#develop",
+    "habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared.git#checklists",
     "BrowserQuest": "https://github.com/mozilla/BrowserQuest.git",
     "github-buttons": "git://github.com/mdo/github-buttons.git",
     "marked": "~0.2.9",

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0-152",
   "main": "./src/server.js",
   "dependencies": {
-    "habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared#develop",
+    "habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared#checklists",
     "derby-auth": "git://github.com/lefnire/derby-auth#master",
     "connect-mongo": "*",
     "passport-facebook": "~1.0.0",

public/css/index.styl

@@ -1,4 +1,5 @@
-@import "nib/vendor"
+@import "nib"
+//@import "nib/vendor"
 
 // Vendor Includes - include first so we can override
 // Import only styles that do not have urls to images! Include them directly in the page!

public/css/tasks.styl

@@ -407,4 +407,27 @@ form
     color: #333
     &:hover
       border-top: 0
-      margin-top: 2px
+      margin-top: 2px
+
+// Checklists
+// --------
+.checklist-form
+  /* Make an input blend into its parent */
+  input.inline-edit
+    reset-box-model()
+    reset-font()
+    line-height: inherit
+    text-align: inherit
+    background-color:inherit
+    box-shadow: none
+
+  /* Add interaction cues on hover and focus */
+  input.inline-edit:hover,input.inline-edit:focus
+    background-color: #FFD
+    transition: background-color 0.5s
+
+  .checklist-icons
+    opacity:0
+
+  label:hover .checklist-icons
+    opacity:1

public/js/controllers/tasksCtrl.js

@@ -1,7 +1,7 @@
 "use strict";
 
-habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','Notification', '$http', 'API_URL',
-  function($scope, $rootScope, $location, User, Notification, $http, API_URL) {
+habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','Notification', '$http', 'API_URL', '$timeout',
+  function($scope, $rootScope, $location, User, Notification, $http, API_URL, $timeout) {
     $scope.obj = User.user; // used for task-lists
     $scope.user = User.user;
 
@@ -68,6 +68,41 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
         });
     };
 
+    /*
+     ------------------------
+     Checklists
+     ------------------------
+     */
+    var ws = window.setTimeout;
+    $scope.addChecklist = function(task) {
+      task.checklist = [{completed:false,text:""}];
+      ws(function(){
+        $('#task-'+task.id+' .checklist-form .inline-edit')[0].focus();
+      });
+    }
+    $scope.checkChecklistItem = function(task){
+      User.user.ops.updateTask({params:{id:task.id},body:task});
+    }
+    $scope.saveChecklist = function(task,$event,$index) {
+      User.user.ops.updateTask({params:{id:task.id},body:task});
+      task.checklist = _.filter(task.checklist,function(i){return !!i.text});
+      $event.target.blur();
+      if ($index == task.checklist.length-1){
+        task.checklist.push({completed:false,text:''});
+        ws(function(){
+          var list = $('#task-'+task.id+' .checklist-form .inline-edit');
+          list[list.length-1].focus();
+        },100);
+      }
+    }
+    $scope.removeChecklistItem = function(task,$index){
+      task.checklist.splice($index,1);
+      User.user.ops.updateTask({params:{id:task.id},body:task});
+    }
+    $scope.checklistCompletion = function(checklist){
+      return _.reduce(checklist,function(m,i){return m+(i.completed ? 1 : 0);},0)
+    }
+
     /*
      ------------------------
      Items 

src/models/task.js

@@ -39,6 +39,13 @@ var HabitSchema = new Schema(
   , { _id: false }
 );
 
+var checklist = [{
+  completed:{type:Boolean,'default':false},
+  text: String,
+  _id:false,
+  id: {type:String,'default':shared.uuid}
+}];
+
 var DailySchema = new Schema(
   _.defaults({
     type: {type:String, 'default': 'daily'},
@@ -53,6 +60,7 @@ var DailySchema = new Schema(
       s:  {type: Boolean, 'default': true},
       su: {type: Boolean, 'default': true}
     },
+    checklist:checklist,
     streak: {type: Number, 'default': 0}
   }, TaskSchema)
   , { _id: false }
@@ -62,7 +70,8 @@ var TodoSchema = new Schema(
   _.defaults({
     type: {type:String, 'default': 'todo'},
     completed: {type: Boolean, 'default': false},
-    date: String // due date for todos // FIXME we're getting parse errors, people have stored as "today" and "3/13". Need to run a migration & put this back to type: Date
+    date: String, // due date for todos // FIXME we're getting parse errors, people have stored as "today" and "3/13". Need to run a migration & put this back to type: Date
+    checklist:checklist
   }, TaskSchema)
   , { _id: false }
 );

views/shared/tasks/task.jade

@@ -1,4 +1,4 @@
-li(bindonce='list', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && castEnd(task, "task", $event)', ng-class='{"cast-target":spell}', popover-trigger='mouseenter', popover-placement='top', popover='{{task.notes}}')
+li(bindonce='list', bo-id='"task-"+task.id', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared.taskClasses(task, user.filters, user.preferences.dayStart, user.lastCron, list.showCompleted, main)}}', ng-click='spell && castEnd(task, "task", $event)', ng-class='{"cast-target":spell}', popover-trigger='mouseenter', popover-placement='top', popover='{{task.notes}}')
   // right-hand side control buttons
   .task-meta-controls
 
@@ -12,6 +12,9 @@ li(bindonce='list', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared
 
     // Icons only available if you own the tasks (aka, hidden from challenge stats)
     span(ng-if='!obj._locked')
+      span.badge(ng-if='task.checklist[0]', ng-class='{"badge-success":checklistCompletion(task.checklist) == task.checklist.length}')
+        {{checklistCompletion(task.checklist)}}/{{task.checklist.length}}
+
       i.icon-tags(tooltip='{{appliedTags(user.tags, task.tags)}}', ng-hide='Shared.noTags(task.tags)')
       // edit
       a(ng-hide='task._editing', ng-click='editTask(task)', tooltip='Edit')
@@ -96,6 +99,20 @@ li(bindonce='list', ng-repeat='task in obj[list.type+"s"]', class='task {{Shared
             |  | 
             a(ng-click="unlink(task, 'remove-all')") Remove Them
 
+      // Checklists
+      a.btn.btn-small(ng-if='!task.checklist[0] && (task.type=="daily" || task.type=="todo")',ng-click='addChecklist(task)')
+        i.icon-tasks
+        |  Add Checklist
+      form.checklist-form(ng-if='task.checklist')
+        fieldset.option-group.task-checklist(ng-if='!$state.includes("options.social.challenges")')
+          legend.option-title Checklist
+          label.checkbox(ng-repeat='item in task.checklist')
+            a.pull-right.checklist-icons(ng-click='removeChecklistItem(task,$index)')
+              i.icon-trash(tooltip='Delete')
+            input(type='checkbox',ng-model='item.completed',ng-change='checkChecklistItem(task)')
+            input.inline-edit(type='text',ng-model='item.text',ui-keypress="{13:'saveChecklist(task,$event,$index)'}",ng-blur='saveChecklist(task,$event,$index)')
+
+
       form(ng-submit='saveTask(task)')
         // text & notes
         fieldset.option-group