Merge pull request #31 from karudedios/features/todo-edit

Features/todo edit

features/auth/strategies/local.js

@@ -1,3 +1,4 @@
+'use strict';
 const Strategy    = require('passport-local');
 const UserDto     = require('../../user/model/dto');
 const FindUser    = require('../../user/services/findUser');

features/todo/model/dto.js

@@ -1,3 +1,4 @@
+'use strict';
 const Todo = require('./todo');
 
 module.exports = class TodoDto {

features/todo/model/todo.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const mongoose  = require('mongoose');
 const Schema    = mongoose.Schema;
 

features/todo/services/updateTodo.js

@@ -9,6 +9,7 @@ const objectIdSchema  = require('../../../utils/objectIdSchema');
 const _idSchema = objectIdSchema.required().label('todo._id');
 
 const todoSchema = Joi.object().keys({
+  _id: Joi.string().label('todo._id'),
   name: Joi.string().label('todo.name'),
   desc: Joi.string().label('todo.desc'),
   color: Joi.string().regex(/#[a-f0-9]{6}/i).label('todo.color')

features/user/model/dto.js

@@ -1,3 +1,4 @@
+'use strict';
 const md5   = require('md5');
 const User  = require('./user');
 

features/user/model/user.js

@@ -1,3 +1,4 @@
+'use strict';
 const crypto    = require('crypto');
 const mongoose  = require('mongoose');
 

features/user/services/createUser.js

@@ -1,3 +1,4 @@
+'use strict';
 const Q               = require('q');
 const Joi             = require('joi');
 const validateSchema  = require('../../../utils/validateSchema');

features/user/services/findUser.js

@@ -1,3 +1,4 @@
+'use strict';
 const Q               = require('q');
 const Joi             = require('joi');
 const validateSchema  = require('../../../utils/validateSchema');

features/user/services/updateUser.js

@@ -1,3 +1,4 @@
+'use strict';
 const Q               = require('q');
 const Joi             = require('joi');
 const FindUser        = require('./findUser');

public/factory/todo.colors.js

@@ -0,0 +1,20 @@
+angular.module('todoApp')
+    .value('Colors',
+        [
+            {
+                name: 'Blue',
+                colorCode: '#0000FF'
+            },
+            {
+                name: 'Red',
+                colorCode: '#FF0000'
+            },
+            {
+                name: 'Yellow',
+                colorCode: '#FFFF00'
+            },
+            {
+                name: 'Blue Grey',
+                colorCode: '#607D8B'
+            },
+        ]);

public/factory/todo.factory.js

@@ -2,5 +2,8 @@ angular.module('todoApp')
     .factory('Todo', ['$resource', TodoFactory]);
 
 function TodoFactory($resource){
-    return $resource('/api/todo/:id');
+    return $resource('/api/todo/:id',
+        {id : '@_id'},
+        {'update' : {method : 'PUT'}}
+    );
 }

public/index.html

@@ -31,8 +31,11 @@
 <script src="sections/home/home.state.js"></script>
 <script src="sections/todo/todo.state.js"></script>
 <script src="sections/todo/todo.controller.js"></script>
-<script src="sections/todo/directives/todo.create.modal.directive.js"></script>
+<script src="sections/todo/directives/create/todo.create.modal.directive.js"></script>
+<script src="sections/todo/directives/editcolor/todo.editcolor.modal.directive.js"></script>
+
 <script src="factory/todo.factory.js"></script>
+<script src="factory/todo.colors.js"></script>
 
 </body>
 </html>

public/sections/todo/directives/todo.create.modal.directive.js → public/sections/todo/directives/create/todo.create.modal.directive.js

@@ -8,7 +8,7 @@ function myTodoCreateModal(){
             todoModalId : '@',
             onSuccess : '&'
         },
-        templateUrl : 'sections/todo/directives/todo.create.modal.html',
+        templateUrl : 'sections/todo/directives/create/todo.create.modal.html',
         controller : ['$scope', 'Todo', myTodoCreateModalController]
     }
 }
@@ -20,7 +20,7 @@ function myTodoCreateModalBtn(){
             classes : '@?'
         },
         transclude : true,
-        templateUrl : 'sections/todo/directives/todo.create.modal.btn.html',
+        templateUrl : 'sections/todo/directives/create/todo.create.modal.btn.html',
         controller : ['$scope', myTodoCreateModalBtnController]
     }
 }
@@ -51,7 +51,9 @@ function myTodoCreateModalController($scope, Todo){
     function create(){
         console.log($scope.todo)
         Todo.save($scope.todo, function(data){
-            $scope.onSuccess(data);
+            if($scope.onSuccess){
+                $scope.onSuccess(data);
+            }
             refreshTodo();
             Materialize.toast('The Task was created succesful !', 4000)
         }, function(err){

public/sections/todo/directives/editcolor/todo.editcolor.modal.directive.js

@@ -0,0 +1,34 @@
+angular.module('todoApp')
+    .directive('myTodoEditColorModal', myTodoEditColorModal);
+
+function myTodoEditColorModal() {
+    return {
+        scope : {
+            editColorModalId : '@',
+            myTodo : '=',
+            onSuccess : '&'
+        },
+        templateUrl : 'sections/todo/directives/editcolor/todo.editcolor.modal.html',
+        controller : ['$scope', 'Todo', 'Colors', myTodoEditColorModaController]
+    }
+}
+
+function myTodoEditColorModaController($scope, Todo, Colors){
+    $scope.colors = Colors;
+    $scope.editColor = editColor;
+
+    function editColor(color){
+        Todo.update({_id : $scope.myTodo._id, color : color.colorCode}, function(doc){
+            if($scope.onSuccess){
+                $scope.onSuccess(doc);
+            }
+            Materialize.toast('The Color was Updated for Task: ' + doc.name, 4000)
+            closeModal();
+        });
+
+    }
+
+    function closeModal(){
+        $('#' + $scope.editColorModalId).closeModal();
+    }
+}

public/sections/todo/directives/editcolor/todo.editcolor.modal.html

@@ -0,0 +1,15 @@
+<div id="{{editColorModalId}}" class="modal modal-editcolor">
+    <div class="modal-content">
+        <ul class="collection with-header ">
+            <li class="collection-header center-align"><h5><strong>Select a Color</strong></h5></li>
+            <li class="collection-item" ng-repeat="color in colors | filter : findTodo">
+                <a href="javascript:void(0);"  style="background-color : {{color.colorCode}}; " class="material-icons tiny btn-floating"></a>
+                <strong> {{color.name}}</strong>
+                <a href="javascript:void(0);" ng-click="editColor(color);"
+                   class="secondary-content padding-edit-button">
+                    <i class="material-icons">send</i>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

public/sections/todo/todo.controller.js

@@ -5,6 +5,7 @@ function TodoController($scope, Todo) {
     var self = this;
 
     self.refreshList = refreshList;
+    self.openEditModal = openEditModal;
 
     refreshList();
 
@@ -13,5 +14,10 @@ function TodoController($scope, Todo) {
             self.todos =  todos;
         });
     }
+
+    function openEditModal(todo){
+        $('#editModal').openModal();
+        $scope.todoToEditColor = todo;
+    }
 }
 

public/sections/todo/todo.html

@@ -7,7 +7,7 @@ <h4><strong>TODO's List</strong></h4>
         </div>
     </li>
     <li class="collection-item" ng-repeat="todo in ctrl.todos | filter : findTodo">
-        <a href="javascript:void(0);" style="background-color : {{todo.color}}; " class="material-icons tiny btn-floating"></a>
+        <a href="javascript:void(0);" ng-click="ctrl.openEditModal(todo);" style="background-color : {{todo.color}}; " class="material-icons tiny btn-floating"></a>
         <strong> {{todo.name}}</strong>
         <a href="javascript:void(0);" class="secondary-content padding-edit-button"><i class="material-icons">edit</i></a>
     </li>
@@ -27,3 +27,4 @@ <h4><strong>TODO's List</strong></h4>
 </div>
 
 <my-todo-create-modal todo-modal-id="createModal" on-success="ctrl.refreshList()"></my-todo-create-modal>
+<my-todo-edit-color-modal edit-color-modal-id="editModal" my-todo="todoToEditColor" on-success="ctrl.refreshList()"></my-todo-edit-color-modal>

public/styles/todo.css

@@ -4,4 +4,8 @@
 
 .padding-edit-button{
     padding-top: 5px;
+}
+
+.modal-editcolor{
+    width : 300px;
 }