Add first part of a Todo sample app

Gruntfile.coffee

@@ -90,6 +90,7 @@ module.exports = (grunt)->
                     './src/client/imports.scss': [
                         './src/client/styles/main.scss'
                         './src/client/directives/**/*.scss'
+                        './src/client/index.scss'
                     ]
 
         watch:
@@ -110,7 +111,7 @@ module.exports = (grunt)->
                 tasks: ['jade:templates', 'browserify:internal']
             sass:
                 files: ['./src/**/*.scss']
-                tasks: ['sass']
+                tasks: ['sass_globbing', 'sass']
 
     # Compound Tasks #######################################################################################
 

src/client/dataflux_module.coffee

@@ -28,15 +28,15 @@ m.run (DS, DSLocalStorageAdapter)->
 
 m.factory 'Reflux', ($log, $rootScope, DatafluxEvent)->
 
-  Reflux.StoreMethods.$listen = (callback)->
+  reflux.StoreMethods.$listen = (callback)->
     if typeof callback != 'function'
       throw new Error 'callback is not a function'
 
     @listen (args...)->
       $rootScope.$applyAsync ->
         callback.apply(null, args)
 
-  Reflux.logActions = (context, actions)->
+  reflux.logActions = (context, actions)->
     return actions unless debug.enabled
 
     logAction = (context, label, args...) ->
@@ -55,4 +55,4 @@ m.factory 'Reflux', ($log, $rootScope, DatafluxEvent)->
 
     return actions
 
-  return Reflux
+  return reflux

src/client/directives/directives_module.coffee

@@ -7,5 +7,6 @@ m = module.exports = angular.module 'directives', [
   'dataflux'
   'stores'
 
+  require('./todo/todo_module').name
   require('./todo_list/todo_list_module').name
 ]

src/client/directives/todo/todo.jade

@@ -0,0 +1,8 @@
+//-
+//- Copyright (C) 2015 by Looker Data Services, Inc.
+//- All rights reserved.
+//-
+
+.checkbox(ng-class="{checked: todo.isDone}" ng-click="doneChanged()")
+
+input(ng-model="todo.text" ng-change="textChanged()")

src/client/directives/todo/todo.scss

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2015 by Looker Data Services, Inc.
+ * All rights reserved.
+ */
+
+todo {
+  display: flex;
+
+  .checkbox {
+    flex: 0 0 auto;
+    height: 2rem;
+    width: 2rem;
+    margin-right: 0.5rem;
+
+    border: 1px solid $color-gray-medium;
+
+    &.checked {
+      text-align: center;
+
+      &:before {
+        content: "✓";
+        font-size: 2rem;
+        line-height: 2rem;
+      }
+    }
+  }
+
+  input {
+    flex: 1 1 100%;
+
+    border: 0;
+
+    font-family: $font-family-text;
+    font-size: 1.25rem;
+    padding: 0 0.5rem;
+  }
+}

src/client/directives/todo/todo_controller.coffee

@@ -0,0 +1,41 @@
+#
+# Copyright (C) 2015 by Looker Data Services, Inc.
+# All rights reserved.
+#
+
+m = angular.module 'directives.todo'
+
+############################################################################################################
+
+m.controller 'TodoController', (
+  $scope
+  DatafluxEvent
+  TodoModelActions
+  TodoModelStore
+)->
+
+  $scope.todo = TodoModelStore.get($scope.modelId)?.toHash() or {}
+
+  # Listener Methods ###############################################################################
+
+  TodoModelStore.$listen (event, id)->
+    todo = TodoModelStore.get($scope.modelId)
+    return unless todo?
+
+    todo.mergeInto $scope.todo
+
+  # Scope Functions ################################################################################
+
+  $scope.doneChanged = ->
+    todo = TodoModelStore.get($scope.modelId)
+    return unless todo?
+
+    todo.isDone = ! todo.isDone
+    TodoModelActions.update(todo)
+
+  $scope.textChanged = ->
+    todo = TodoModelStore.get($scope.modelId)
+    return unless todo?
+
+    todo.text = $scope.todo.text
+    TodoModelActions.update(todo)

src/client/directives/todo/todo_directive.coffee

@@ -0,0 +1,16 @@
+#
+# Copyright (C) 2015 by Looker Data Services, Inc.
+# All rights reserved.
+#
+
+m = angular.module 'directives.todo'
+
+############################################################################################################
+
+m.directive 'todo', (
+)->
+  controller: 'TodoController'
+  restrict: 'E'
+  scope:
+    modelId: '@'
+  template: templates['directives/todo']

src/client/directives/todo/todo_module.coffee

@@ -0,0 +1,12 @@
+#
+# Copyright (C) 2015 by Looker Data Services, Inc.
+# All rights reserved.
+#
+
+m = module.exports = angular.module 'directives.todo', [
+  'dataflux'
+  'stores'
+]
+
+require './todo_controller'
+require './todo_directive'

src/client/directives/todo_list/todo_list.jade

@@ -4,4 +4,4 @@
 //-
 
 div(ng-repeat="todo in todos track by todo.id")
-    todo(id="todo.id")
+    todo(model-id="{{todo.id}}")

src/client/directives/todo_list/todo_list.scss

@@ -0,0 +1,13 @@
+/*
+ * Copyright (C) 2015 by Looker Data Services, Inc.
+ * All rights reserved.
+ */
+
+todo-list {
+  border: 1px solid $color-gray-light;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: 1rem;
+}

src/client/directives/todo_list/todo_list_controller.coffee

@@ -7,13 +7,15 @@ m = angular.module 'directives.todo_list'
 
 ############################################################################################################
 
-m.controller 'todoListController', (
+m.controller 'TodoListController', (
+  $scope
   DatafluxEvent
+  TodoModelActions
   TodoModelStore
 )->
 
   $scope.todos = []
-  TodoModelStore.loadAll()
+  TodoModelActions.loadAll()
 
   # Listener Methods ###############################################################################
 

src/client/directives/todo_list/todo_list_directive.coffee

@@ -9,6 +9,7 @@ m = angular.module 'directives.todo_list'
 
 m.directive 'todoList', (
 )->
+  controller: 'TodoListController'
   restrict: 'E'
   scope: {}
   template: templates['directives/todo_list']

src/client/index.scss

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2015 by Looker Data Services, Inc.
+ * All rights reserved.
+ */
+
+body {
+  display: flex;
+
+  .content {
+    flex: 1 1 100%;
+    margin: 3rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    todo-list {
+      max-width: 500px;
+      width: 66%;
+    }
+  }
+}

src/client/stores/todo_model_store.coffee

@@ -7,26 +7,35 @@ m = angular.module 'stores', []
 
 ############################################################################################################
 
-m.factory 'TodoModelActions', ->
-  actions = Reflux.createActions ['loadAll', 'create', 'update', 'delete']
+m.factory 'TodoModelActions', (Reflux)->
+  return Reflux.createActions ['loadAll', 'create', 'update', 'delete']
 
 ############################################################################################################
 
 m.factory 'TodoModelStore', (
   DatafluxEvent
   TodoModel
   Reflux
+  TodoModelActions
 )->
 
   Reflux.createStore
 
+    init: ->
+      @listen (event, id)=>
+        todos = TodoModel.getAll()
+        if todos.length is 0
+          @onCreate()
+
+    listenables: TodoModelActions
+
     # Public Method s###############################################################################
 
     getAll: ->
       return (model.toProxy() for model in TodoModel.getAll())
 
     get: (id)->
-      model = TodoModel.get id
+      return TodoModel.get(id)?.toProxy()
 
     # Action Methods ###############################################################################
 

src/client/styles/tags.scss

@@ -20,21 +20,6 @@ a {
     }
 }
 
-body {
-    margin: 3rem 1.5rem;
-}
-
 button {
     outline: none;
 }
-
-h1 {
-    font-family: $font-family-text;
-    font-size: $font-size-large;
-    margin-top: 1rem;
-    margin-bottom: 0.4rem;
-
-    &:first-child {
-        margin-top: 0;
-    }
-}