[Pollen-commits] r3942 - in trunk/pollen-ui-angular/src/main/webapp: css js js/controllers partials

14 May 2014

Author: garandel
Date: 2014-05-14 16:09:23 +0200 (Wed, 14 May 2014)
New Revision: 3942

Url: http://forge.chorem.org/projects/pollen/repository/revisions/3942

Log:
print error in form


Modified:
   trunk/pollen-ui-angular/src/main/webapp/css/style.css
   trunk/pollen-ui-angular/src/main/webapp/js/app.js
   trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js
   trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html
   trunk/pollen-ui-angular/src/main/webapp/partials/poll.html

Modified: trunk/pollen-ui-angular/src/main/webapp/css/style.css
===================================================================

--- trunk/pollen-ui-angular/src/main/webapp/css/style.css	2014-05-14 08:53:32 UTC (rev 3941)
+++ trunk/pollen-ui-angular/src/main/webapp/css/style.css	2014-05-14 14:09:23 UTC (rev 3942)
@@ -191,4 +191,8 @@
 .pollBigVote {
   float:right;
   margin-top:5px;
+}
+
+.danger {
+  color: #a94442;
 }
\ No newline at end of file

Modified: trunk/pollen-ui-angular/src/main/webapp/js/app.js
===================================================================
--- trunk/pollen-ui-angular/src/main/webapp/js/app.js	2014-05-14 08:53:32 UTC (rev 3941)
+++ trunk/pollen-ui-angular/src/main/webapp/js/app.js	2014-05-14 14:09:23 UTC (rev 3942)
@@ -86,24 +86,45 @@
 })
 
 .directive('ngExit', function ($timeout) {
-  return function (scope, element, attrs) {
-    element.bind("keydown keypress", function (event) {
-      if(event.which === 27 || event.which === 13) {
-        scope.$apply(function (){
-          scope.$eval(attrs.ngExit);
-        });
+  return {
+    link: function (scope, element, attrs) {
+      element.bind("keydown keypress", function (event) {
+        if(event.which === 27 || event.which === 13) {
+          scope.$apply(function () {
+             scope.$eval(attrs.ngExit);
+          });
 
-        event.preventDefault();
-      }
-    });
-    element.bind('blur', function () {
-      $timeout (function () {
-        scope.$apply(attrs.ngExit);
-      }, 150);
-    });
+          event.preventDefault();
+        }
+      });
+
+      element.bind('blur', function () {
+        $timeout (function () {
+          scope.$apply(attrs.ngExit);
+        }, 150);
+      });
+    }
   };
 })
 
+.directive('infoError', function() {
+  return {
+    restrict:'E',
+    scope: {
+      error: '=',
+      forData: '=data'
+    },
+    template: '<span class="glyphicon glyphicon-exclamation-sign danger" tooltip="{{error}}" ng-if="error"></span>',
+    link: function (scope, element, attrs) {
+      scope.$watch('forData', function (newVal, oldVal) {
+        if (newVal != oldVal) {
+          delete scope.error;
+        }
+      });
+    }
+  };
+})
+
 .directive('autoSave', function ($timeout) {
   return {
     restrict : 'A',

Modified: trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js
===================================================================
--- trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js	2014-05-14 08:53:32 UTC (rev 3941)
+++ trunk/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js	2014-05-14 14:09:23 UTC (rev 3942)
@@ -84,15 +84,14 @@
   $scope.globalVariables.voted = angular.isDefined($scope.data.votants);
   $scope.globalVariables.lastType = 'TEXT';
   $scope.globalVariables.lastDate = new Date();
+  $scope.restError = {};
 
-  $scope.$watch('pollForm.$valid', function (newVal) {
-    $scope.formValid = newVal;
-    $scope.globalVariables.errorForm = false;
-  });
-
   $scope.addChoice = function () {
       var index = $scope.data.choices.push(initChoice());
       var choice = $scope.data.choices[index-1];
+      if (angular.isDefined($scope.restError)) {
+        delete $scope.restError.choice;
+      }
       popupChoice(choice, 'Add Choice', $scope.callBackAddChoice);
   }
 
@@ -236,21 +235,20 @@
   initPoll();
 
   $scope.save = function () {
-    if ($scope.formValid) {
-      var poll = angular.copy($scope.data.poll);
-      poll.choice = angular.copy($scope.data.choices);
-      Poll.add(poll, function (data) {
-        $cookieStore.put('saved', true);
-        $location.url('/poll/edit/'+data.topiaId+'?token='+data.permission);
-      }, function (error) {
-        $scope.globalVariables.restError = true;
-        $scope.restError = error;
-      }
-      );
-    }
-    else {
-      $scope.globalVariables.errorForm = true;
-    }
+    var poll = angular.copy($scope.data.poll);
+    poll.choice = angular.copy($scope.data.choices);
+    Poll.add(poll, function (data) {
+      $cookieStore.put('saved', true);
+      $location.url('/poll/edit/'+data.topiaId+'?token='+data.permission);
+    }, function (error) {
+      $scope.globalVariables.restError = true;
+      $scope.restError = error.data;
+      angular.forEach($scope.data.choices, function (choice, index) {
+        if (angular.isDefined(error.data['choice['+index+'].name'])) {
+          choice.restError = {name:error.data['choice['+index+'].name']};
+        }
+      })
+    });
   }
 
   $scope.delete = function () {
@@ -264,26 +262,24 @@
 
   $scope.globalVariables.edit = true;
 
-  var timeout = null;
-  $scope.autoSave = function (newValue, oldValue) {
-    if (newValue != oldValue) {
-      if (timeout) {
-        $timeout.cancel(timeout);
-      }
-      timeout = $timeout($scope.save, 10000);
-    }
-  }
-
   $scope.callBackAddChoice = function (choice) {
     PollChoice.add({pollId:$routeParams.pollId, permission:$routeParams.token}, choice, function (data) {
+      delete choice.restError;
       choice.topiaId = data.topiaId;
       console.log(data);
       $scope.globalVariables.saved = true;
+    }, function (error) {
+      choice.restError = error.data;
     });
   }
 
   $scope.callBackEditChoice = function (choice) {
-    PollChoice.update({permission:$routeParams.token, pollId:$routeParams.pollId, choiceId:choice.topiaId}, choice);
+    PollChoice.update({permission:$routeParams.token, pollId:$routeParams.pollId, choiceId:choice.topiaId}, choice, function() {
+      delete choice.restError;
+      $scope.globalVariables.saved = true;
+    }, function (error) {
+      choice.restError = error.data;
+    });
   }
 
   $scope.deleteChoice = function (choice) {
@@ -302,7 +298,6 @@
   var initPoll = function () {
     Poll.get({pollId:$routeParams.pollId}).$promise.then(function (poll) {
       $scope.data.poll = poll;
-      $scope.$watchCollection('data.poll', $scope.autoSave);
     });
     PollChoice.query({pollId:$routeParams.pollId}).$promise.then(function (choices) {
       $scope.data.choices = choices;
@@ -313,18 +308,11 @@
   initPoll();
 
   $scope.save = function () {
-    $timeout.cancel(timeout);
-    if ($scope.formValid) {
-      $scope.data.poll.$update({permission:$routeParams.token}, function (data) {
-        $scope.globalVariables.saved = true;
-      }, function (error) {
-        console.log(error);
-      });
-    }
-    else {
-      $scope.globalVariables.errorForm = true;
-    }
-
+    $scope.data.poll.$update({permission:$routeParams.token}, function (data) {
+      $scope.globalVariables.saved = true;
+    }, function (error) {
+      angular.extend($scope.restError, error.data);
+    });
   }
 
   $scope.saveChoice = function (choice) {

Modified: trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html
===================================================================
--- trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html	2014-05-14 08:53:32 UTC (rev 3941)
+++ trunk/pollen-ui-angular/src/main/webapp/partials/inline-poll.html	2014-05-14 14:09:23 UTC (rev 3942)
@@ -27,9 +27,12 @@
         <td><button ng-if="globalVariables.editMode" ng-click="bigVersion()" class="btn btn-default" >Big version</button></td>
         <td ng-repeat="choice in data.choices" class="pollChoice pollAnim" ng-mouseenter="showEditHover = true" ng-mouseleave="showEditHover = false">
           <div ng-if="choice.choiceType == 'TEXT'" edit-me="showEdit" >
-            <div ng-hide="showEdit && !globalVariables.voted" class="fixe-input" title="{{choice.description}}">{{choice.name}} <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div>
+            <div ng-hide="showEdit && !globalVariables.voted" class="fixe-input" title="{{choice.description}}">
+              {{choice.name || 'click for edit'}}
+              <info-Error error="choice.restError.name[0]" data="choice.name"></info-Error>
+              <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/></div>
             <div ng-show="showEdit && !globalVariables.voted">
-              <input type="text" class="form-control" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false" auto-save="saveChoice(choice)" required/>
+              <input type="text" class="form-control" ng-model="choice.name" focus-me="showEdit" ng-exit="showEdit = false;" auto-save="saveChoice(choice)" required/>
               <input type="button" class="btn btn-default" data-toggle="modal" data-target="#popupAddChoice" ng-click="editChoice(choice)" value="..."/>
             </div>
           </div>
@@ -46,7 +49,7 @@
 <!-- end print choice -->
 
 <!-- begin input vote -->
-      <tr>
+      <tr ng-show="!globalVariables.editMode">
         <td class="pollChoice"> <input type="text" class="form-control" placeholder="votre nom" ng-model="data.vote.name" /> </td>
         <td ng-repeat="choice in data.vote.choices" class="pollChoice">
           <input type="checkbox" name="$index" ng-model="choice.value"/>
@@ -58,7 +61,7 @@
 <!-- end input vote -->
 
 <!-- begin print vote -->
-      <tr ng-repeat="vote in data.votants track by $index" class="pollAnim">
+      <tr ng-repeat="vote in data.votants track by $index" class="pollAnim" ng-show="!globalVariables.editMode">
         <td class="pollChoice"> {{vote.name}}</td>
         <td ng-repeat="choice in vote.choices" class="pollChoice">
           <input type="checkbox" ng-model="choice.value" disabled/>

Modified: trunk/pollen-ui-angular/src/main/webapp/partials/poll.html
===================================================================
--- trunk/pollen-ui-angular/src/main/webapp/partials/poll.html	2014-05-14 08:53:32 UTC (rev 3941)
+++ trunk/pollen-ui-angular/src/main/webapp/partials/poll.html	2014-05-14 14:09:23 UTC (rev 3942)
@@ -22,26 +22,34 @@
 <form class="form-inline" name="pollForm" novalidate>
 
   <alert type="danger" ng-if="globalVariables.errorForm"> Champ non remplie </alert>
-  <alert type="danger" ng-if="globalVariables.restError"> {{restError}} </alert>
+  <alert type="danger" ng-if="restError.choice"> Vous devez avoir au moins 1 choix </alert>
   <alert type="success" ng-if="globalVariables.editMode && globalVariables.saved"> Sondage sauvegardé..</alert>
   <alert type="success" ng-if="!globalVariables.editMode && globalVariables.saved"> Vote effectué..</alert>
 
   <alert type="warning" ng-if="globalVariables.voted"> Les votes ont commencé, certaine modification sont inaccessible.. </alert>
   <alert type="warning" ng-if="globalVariables.created"> <a href="#/poll/edit/{{pollId}}"> Edition du sondage </a>.. </alert>
 
+<tabset>
+<tab heading="Poll">
+
   <div class="pollTitle" edit-me="showEditTitle">
-    <h1 ng-hide="showEditTitle"> {{data.poll.title || 'Click Me for Editing'}} </h1>
+    <h1 ng-hide="showEditTitle">
+      {{data.poll.title || 'Click Me for Editing'}}
+      <info-Error error="restError.title[0]" data="data.poll.title"></info-Error>
+    </h1>
 
-    <h1 ng-show="showEditTitle"><input type="text" class="form-control" focus-me="showEditTitle" ng-model="data.poll.title" ng-exit="showEditTitle = false" auto-save="save()" required/></h1>
+    <h1 ng-show="showEditTitle">
+      <input type="text" class="form-control" focus-me="showEditTitle" ng-model="data.poll.title" ng-exit="showEditTitle = false" auto-save="save()" required/>
+    </h1>
   </div>
 
   <div ng-hide="showEditDesc || !globalVariables.editMode && !poll.description " class="pollDesc" edit-me="showEditDesc">
     <div ng-bind-html="toHTML(data.poll.description || 'Description (Facultatif). Ce cadre disparait si aucune description n\'est mise')"></div>
   </div>
-  <div ng-show="showEditDesc" class="pollDesc " ng-exit="showEditDesc = false;">
+  <div ng-show="showEditDesc" class="pollDesc">
     <textarea id="descEditor" data-ck-editor ng-model="data.poll.description"></textarea>
 
-    <input type="button" value="Return" class="btn btn-primary" ng-click="showEditDesc = false;"/>
+    <input type="button" value="Return" class="btn btn-primary" ng-click="showEditDesc = false; save()"/>
   </div>
 
   <div id="poll">
@@ -50,6 +58,12 @@
 
   </div>
 
+</tab>
+<tab heading="Setting" ng-show="globalVariables.editMode" >
+  <div ng-include="'partials/poll-popupSettings.html'"></div>
+</tab>
+</tabset>
+
   <div ng-if="globalVariables.create">
     <hr/>
     <button type="button" class="btn btn-default" ng-model="globalVariables.editMode" btn-checkbox>Mode Edition</button>

    

[Pollen-commits] r3942 - in trunk/pollen-ui-angular/src/main/webapp: css js js/controllers partials

garandel＠users.chorem.org