Improve forms.

accountant-ui/index.html

@@ -66,6 +66,7 @@
     <script src="bower_components/angular/angular.js"></script>
     <script src="bower_components/angular-resource/angular-resource.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
+    <script src="bower_components/angular-messages/angular-messages.js"></script>
     <script src="bower_components/angular-strap/dist/angular-strap.js"></script>
     <script src="bower_components/angular-strap/dist/angular-strap.tpl.js"></script>
     <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>

accountant-ui/js/accounts.js

@@ -19,8 +19,8 @@
 
 angular.module('accountant.accounts', [
     'ngResource',
+    'ngMessages',
     'ui-notification',
-    'xeditable',
     'ngBootbox'
 ])
 
@@ -160,7 +160,7 @@ angular.module('accountant.accounts', [
 }])
 
 .directive(
-    'accountFormDialog', function($ngBootbox) {
+    'accountFormDialog', function($ngBootbox, Notification) {
         return {
             restrict: 'A',
             scope: {
@@ -175,8 +175,48 @@ angular.module('accountant.accounts', [
 
                 scope.form = {};
 
+                scope.submitForm = function() {
+                  // check to make sure the form is completely valid
+                  if (!scope.form.$valid) {
+                    return false;
+                  }
+
+                  // Authorized overdraft is a positive integer but data is a negative integer.
+                  scope.data.authorized_overdraft = -scope.data.authorized_overdraft
+
+                  angular.copy(scope.data, scope.account);
+
+                  // Save account
+                  console.log(scope.account);
+                  return scope.account.$save().then(
+                    function(data) {
+                        Notification.success('Account #' + data.id + ' saved.');
+
+                        scope.account.getSolds();
+
+                        return data;
+                    }, function(data) {
+                        Notification.error('Error while saving account #' + data.id);
+                        scope.account.getSolds();
+                        console.log(data);
+                        return false;
+                    }
+                  );
+                };
+
                 element.on('click', function() {
-                    //angular.copy(scope.account, scope.form);
+                    // Create new account if not passed in ng-model.
+                    if(!scope.account) {
+                        scope.account = new Account({
+                            authorized_overdraft: 0
+                        });
+                    }
+
+                    scope.data = {};
+                    angular.copy(scope.account, scope.data);
+
+                    // Authorized overdraft must be positive in form.
+                    scope.data.authorized_overdraft = -scope.data.authorized_overdraft
 
                     // Open dialog with form.
                     $ngBootbox.customDialog({
@@ -188,15 +228,7 @@ angular.module('accountant.accounts', [
                             save: {
                                 label: 'Save',
                                 className: 'btn-success',
-                                callback: function() {
-                                    // Validate form
-                                    console.log(scope.form);
-
-                                    // Save account
-                                    console.log(scope.account);
-
-                                    return false;
-                                }
+                                callback: scope.submitForm
                             },
                             cancel: {
                                 label: 'Cancel',

accountant-ui/js/operations.js

@@ -482,7 +482,8 @@ angular.module('accountant.operations', [
                 scope.form = {};
 
                 element.on('click', function() {
-                    //angular.copy(scope.operation, scope.form);
+                    scope.data = {};
+                    angular.copy(scope.operation, scope.data);
 
                     // Open dialog with form.
                     $ngBootbox.customDialog({

accountant-ui/js/scheduler.js

@@ -21,6 +21,7 @@ angular.module('accountant.scheduler', [
     'ngRoute',
     'ngBootbox',
     'ui-notification',
+    'xeditable',
     'mgcrea.ngStrap'
 ])
 

accountant-ui/views/account.form.tmpl.html

@@ -15,24 +15,39 @@
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
-<form class="form-horizontal" role="form" name="form">
-  <div class="form-group">
+<form class="form-horizontal" ng-submit="submitForm()"
+role="form" name="form" novalidate>
+  <div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
     <label class="col-sm-4 control-label" for="name">Account name</label>
     <div class="col-sm-8">
-      <input id="name" class="form-control"
-      name="name" ng-model="account.name"
-      placeholder="Account name" type="text">
+      <input class="form-control" id="name" name="name"
+      ng-model="data.name"
+      type="text" placeholder="Account name"
+      required>
       </input>
+      <div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
+        <p ng-message="required">The account name is required.</p>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
     <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
     <div class="col-sm-8">
-      <input id="authorized-overdraft" class="form-control" type="number"
-      name="authorized_overdraft" ng-model="account.authorized_overdraft"
-      placeholder="Authorized overdraft">
-      </input>
+      <div class="input-group">
+        <div class="input-group-addon">-</div>
+        <input class="form-control" id="authorized-overdraft"
+        name="authorized_overdraft"
+        ng-model="data.authorized_overdraft"
+        type="number" placeholder="Authorized   overdraft"
+        required min="0">
+        </input>
+        <div class="input-group-addon">.00€</div>
+      </div>
+      <div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
+        <p ng-message="required">The authorized overdraft is required.</p>
+        <p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
+      </div>
     </div>
   </div>
 </form>

accountant-ui/views/accounts.html

@@ -30,8 +30,9 @@
     <tbody>
       <tr>
         <td colspan="5">
-          <button class="btn btn-success btn-success"
-            ng-click="add()">Ajouter</button>
+          <button class="btn btn-success" account-form-dialog>
+            Ajouter
+          </button>
         </td>
       </tr>
 

accountant-ui/views/operation.form.tmpl.html

@@ -15,13 +15,13 @@
     along with Accountant.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
 <form class="form-horizontal" role="form" name="form">
   <div class="form-group">
     <label class="col-sm-4 control-label" for="operation-date">Date</label>
     <div class="col-sm-8">
-      <input id="operation-date" class="form-control"
-      name="operation_date" ng-model="operation.operation_date"
-      bs-datepicker data-date-format="yyyy-MM-dd"
+      <input class="form-control" id="operation-date" name="operation_date" ng-model="data.operation_date"
+      type="text" bs-datepicker data-date-format="yyyy-MM-dd"
       placeholder="Operation date">
     </div>
   </div>
@@ -29,9 +29,9 @@
   <div class="form-group">
     <label class="col-sm-4 control-label" for="label">Label</label>
     <div class="col-sm-8">
-      <input id="label" class="form-control"
-      name="label" ng-model="operation.label"
-      placeholder="Label" type="text">
+      <input class="form-control" id="label" name="label"
+      ng-model="data.label"
+      type="text" placeholder="Label">
       </input>
     </div>
   </div>
@@ -39,9 +39,9 @@
   <div class="form-group">
     <label class="col-sm-4 control-label" for="value">Montant</label>
     <div class="col-sm-8">
-      <input id="value" class="form-control" type="number"
-      name="value" ng-model="operation.value"
-      placeholder="Value">
+      <input class="form-control" id="value" name="value"
+      ng-model="data.value"
+      type="number" placeholder="Value">
       </input>
     </div>
   </div>
@@ -49,11 +49,10 @@
   <div class="form-group">
     <label class="col-sm-4 control-label" for="category">Catégorie</label>
     <div class="col-sm-8">
-      <input id="category" class="form-control" type="text"
-      name="category" ng-model="operation.category"
-      placeholder="Category">
+      <input class="form-control" id="category" name="category"
+      ng-model="data.category"
+      type="text" placeholder="Category">
       </input>
     </div>
   </div>
 </form>
-

bower.json

@@ -18,12 +18,13 @@
   ],
   "dependencies": {
     "jquery": "~2.2",
-    "moment": "~2.12",
+    "moment": "~2.14",
     "bootstrap": "~3.3.6",
     "bootstrap-additions": "~0.3.1",
     "angular": "~1.5",
     "angular-resource": "~1.5",
     "angular-route": "~1.5",
+    "angular-messages": "~1.5",
     "angular-strap": "~2.3.6",
     "angular-xeditable": "~0.1",
     "angular-ui-notification": "~0.2",