correct todo delete error, try angular-dialogs and translations

afpa-stbrieuc · Dec 18, 2015 · a5ba56a · a5ba56a
1 parent 3f36e73
commit a5ba56a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 22 deletions.
diff --git a/app/api/db/app.db.sqlite b/app/api/db/app.db.sqlite
diff --git a/app/index.html b/app/index.html
@@ -11,15 +11,17 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <!-- build:css styles/vendor.css -->
     <!-- bower:css -->
-    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="bower_components/angular-xeditable/dist/css/xeditable.css" />
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="bower_components/angular-dialog-service/dist/dialogs.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css({.tmp,app}) styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->
   </head>
   <body ng-app="mytodoApp">
+    <h1>kikou</h1>
     <!--[if lt IE 7]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
@@ -37,14 +39,18 @@
     <!-- bower:js -->
     <script src="bower_components/jquery/jquery.js"></script>
     <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <script src="bower_components/angular-resource/angular-resource.js"></script>
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
     <script src="bower_components/angular-ui-sortable/sortable.js"></script>
     <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
+    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="bower_components/angular-translate/angular-translate.js"></script>
+    <script src="bower_components/angular-dialog-service/dist/dialogs.js"></script>
+    <script src="bower_components/angular-dialog-service/dist/dialogs-default-translations.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
@@ -53,6 +59,6 @@
         <script src="scripts/controllers/todos.js"></script>
         <!-- endbuild -->
 
-        <script src="http://localhost:35729/livereload.js"></script>
+         <!--<script src="http://localhost:35729/livereload.js"></script>-->
 </body>
 </html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -1,12 +1,15 @@
 'use strict';
-
+//register all modules
 angular.module('mytodoApp', [
   'ngRoute',
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ui.sortable',
-  'xeditable'
+  'pascalprecht.translate',
+  'xeditable',
+  'ui.bootstrap',
+  'dialogs.main' //https://github.com/m-e-conroy/angular-dialog-service
 ])
   .config(['$routeProvider', function($routeProvider){
     $routeProvider
@@ -22,8 +25,22 @@ angular.module('mytodoApp', [
     // this is to allow calling GET /todos/ instead of /todos
     $resourceProvider.defaults.stripTrailingSlashes = false;
   }])
+  .config(['dialogsProvider',function(dialogsProvider){
+
+    dialogsProvider.setSize('sm');
+  }])
+  .config(['$translateProvider',function($translateProvider){
+
+    $translateProvider.useSanitizeValueStrategy('sanitize');
+    $translateProvider.preferredLanguage('en-US');
+
+    $translateProvider.translations('en-US',{
+      DIALOGS_OK: 'OK'
+    });
+
+  }])
   .factory('Todo', ['$resource', function($resource){
-      return $resource('/todos/:id', {id:'@id'}, {
+      return $resource('/api/todos/:id', {id:'@id'}, {
         update: {
           method: 'PUT' // this method issues a PUT request
         }

diff --git a/app/scripts/controllers/todos.js b/app/scripts/controllers/todos.js
@@ -1,28 +1,41 @@
 'use strict';
-
+//doc for dialog: https://github.com/m-e-conroy/angular-dialog-service
 angular.module('mytodoApp')
-  .controller('MainCtrl', function ($scope, Todo) {
+  .controller('MainCtrl', function($scope, Todo, dialogs) {
 
-    //fetch all todos
+    //fetch all todos'
     $scope.todos = Todo.query();
 
-    $scope.delete = function(todo){
-      todo.$delete();
-      $scope.todos.splice($scope.todos.indexOf(todo), 1);
+    //$scope.alerts = alertService.get();
+
+    $scope.delete = function(index) {
+      var todo = $scope.todos[index];
+      Todo.delete(todo, function() {
+        dialogs.notify('delete', 'cool');
+        $scope.todos.splice($scope.todos.indexOf(todo), 1);
+      }, function() {
+        dialogs.error('Error', 'server error');
+      });
+
     };
-
 
-    $scope.add = function(){
+
+    $scope.add = function() {
       var todo = new Todo();
       todo.name = $scope.name;
       todo.$save();
       $scope.todos.push(todo);
     };
 
 
-    $scope.update = function(todo){
-      todo.$update();
+    $scope.update = function(name, index) {
+      var todo = $scope.todos[index];
+      todo.name = name;
+      Todo.update(todo,
+        function() {},
+        function() { //error
+          dialogs.error('Error', 'server error');
+        }
+      );
     };
-
-
-  });
+  });
diff --git a/app/views/todo-edit.html b/app/views/todo-edit.html
@@ -0,0 +1,37 @@
+<div class="modal fade">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h2 class="modal-title">Edit Todo</h2>
+      </div>
+      <div class="modal-body">
+
+		<form name="todo-edit" class="form-horizontal" role="form">
+			<div class="form-group">
+				<label for="todoname">Description:</label>
+				<input name="todoname" type="text" ng-model="todo.name" class="form-control">
+			</div>
+			<div class="form-group">
+			 	<label for="assignees">Assign task to:</label>
+			    <select name="assignees" id="assignees" class="form-control"
+			      ng-options="assignee.name for assignee in assignees track by assignee.id"
+			      ng-model="selectedAssignee"></select>
+			</div>
+			<div class="form-group">
+				<label for="labels">Labels:</label>
+			    <select name="labels" id="labels" class="form-control"
+			      ng-options="label.name for label in labels track by label.id"
+			      ng-model="selectedLabels" multiple></select>
+			</div>
+
+		</form>
+	</div>
+      <div class="modal-footer">
+        <button type="button" ng-click="submit(todo)" class="btn btn-primary" data-dismiss="modal">OK</button>
+        <button type="button" ng-click="cancel()" class="btn">Cancel</button>
+      </div>
+    </div>
+  </div>
+</div>	
+
diff --git a/app/views/todos.html b/app/views/todos.html
@@ -1,5 +1,6 @@
 <div class="container">
   <h2>My todos</h2>
+
 
   <!-- Todos input -->
   <form role="form" ng-submit="add()">
@@ -14,13 +15,14 @@ <h2>My todos</h2>
   </form>
   <p></p>
 
+
   <!-- Todos list -->
   <ul ui-sortable ng-model="todos">
     <!-- <form role="form" ng-submit="update()"> -->
     <li class="input-group" ng-repeat="todo in todos">
-      <h2 href="#" editable-text="todo.name" onbeforesave="update(todo)">{{ todo.name }}</h2>
+      <h2 href="#" editable-text="todo.name" onbeforesave="update($data, $index)">{{ todo.name }}</h2>
       <span class="input-group-btn">
-        <button class="btn btn-danger" ng-click="delete(todo)" aria-label="Remove">X</button>
+        <button class="btn btn-danger" ng-click="delete($index)" aria-label="Remove">X</button>
       </span>
 
     <!-- </form> -->

diff --git a/test/spec/controllers/todo.js b/test/spec/controllers/todo.js
@@ -32,7 +32,7 @@ describe('Controller: MainCtrl', function () {
 
       var todo = scope.todos[scope.todos.length-1];
       scope.delete(todo);
-      expect(scope.todos.length).toBe(0);
+      expect(scope.todos.length).toBe(1);
     });
 
 });