From 1660c7a6355517dcc6eaba95fbf893199dfac6b4 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Tue, 24 May 2016 08:49:55 +0200
Subject: [PATCH] Set operation edition in form dialog.

---
 accountant-ui/js/operations.js               | 54 ++++++++++-
 accountant-ui/views/operation.form.tmpl.html | 43 +++++++++
 accountant-ui/views/operations.html          | 94 ++++++--------------
 3 files changed, 124 insertions(+), 67 deletions(-)
 create mode 100644 accountant-ui/views/operation.form.tmpl.html

diff --git a/accountant-ui/js/operations.js b/accountant-ui/js/operations.js
index 72b2f4b..5e2722d 100644
--- a/accountant-ui/js/operations.js
+++ b/accountant-ui/js/operations.js
@@ -463,4 +463,56 @@ angular.module('accountant.operations', [
   $rootScope.$on('rangeSelectedEvent', function(e, args) {
     $scope.load(args.begin, args.end);
   });
-}]);
+}])
+
+.directive(
+    'operationFormDialog', function($ngBootbox) {
+        return {
+            restrict: 'A',
+            scope: {
+                operation: '=ngModel'
+            },
+            link: function(scope, element) {
+                var title = 'Operation';
+
+                if(scope.operation && scope.operation.id) {
+                    title = title + ' #' + scope.operation.id;
+                }
+
+                scope.form = {};
+
+                element.on('click', function() {
+                    //angular.copy(scope.operation, scope.form);
+
+                    // Open dialog with form.
+                    $ngBootbox.customDialog({
+                        scope: scope,
+                        title: title,
+                        templateUrl: 'views/operation.form.tmpl.html',
+                        onEscape: true,
+                        buttons: {
+                            save: {
+                                label: 'Save',
+                                className: 'btn-success',
+                                callback: function() {
+                                    // Validate form
+                                    console.log(scope.form);
+
+                                    // Save operation
+                                    console.log(scope.operation);
+
+                                    // TODO Alexis Lahouze 2016-05-24 Save operation, handle return.
+                                    return false;
+                                }
+                            },
+                            cancel: {
+                                label: 'Cancel',
+                                className: 'btn-default',
+                                callback: true
+                            }
+                        }
+                    });
+                });
+            }
+        };
+});
diff --git a/accountant-ui/views/operation.form.tmpl.html b/accountant-ui/views/operation.form.tmpl.html
new file mode 100644
index 0000000..289362e
--- /dev/null
+++ b/accountant-ui/views/operation.form.tmpl.html
@@ -0,0 +1,43 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
+<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"
+      placeholder="Operation date">
+    </div>
+  </div>
+
+  <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>
+    </div>
+  </div>
+
+  <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>
+    </div>
+  </div>
+
+  <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>
+    </div>
+  </div>
+</form>
+
diff --git a/accountant-ui/views/operations.html b/accountant-ui/views/operations.html
index fdf1fdd..a7b8c08 100644
--- a/accountant-ui/views/operations.html
+++ b/accountant-ui/views/operations.html
@@ -55,30 +55,15 @@
           ng-class="{stroke: operation.canceled, italic: !operation.confirmed, warning: operation.sold < 0, danger: operation.sold < account.authorized_overdraft}"
           ng-repeat="operation in operations | orderBy:['-operation_date', '-value', 'label']">
           <td>
-            <span editable-text="operation.operation_date"
-              e-data-date-format="yyyy-MM-dd" e-bs-datepicker
-              e-timezone="UTC"
-              e-class="input-sm" e-style="width: 100%"
-              e-name="operation_date" e-form="rowform" e-required>
               {{ operation.operation_date | date:"yyyy-MM-dd" }}
-            </span>
           </td>
 
           <td>
-            <span editable-text="operation.label"
-              e-placeholder="Libellé de l'opération"
-              e-class="input-sm" e-style="width: 100%"
-              e-name="label" e-form="rowform" e-required>
               {{ operation.label }}
-            </span>
           </td>
 
           <td>
-            <span editable-number="operation.value"
-              e-class="input-sm" e-style="width: 100%"
-              e-name="value" e-form="rowform" e-required>
               {{ operation.value | currency:"€" }}
-            </span>
           </td>
 
           <td ng-class="{'text-warning': operation.sold < 0, 'text-danger': operation.sold < account.authorized_overdraft}">
@@ -86,64 +71,41 @@
           </td>
 
           <td>
-            <span editable-text="operation.category"
-              e-placeholder="Catégorie"
-              e-class="input-sm" e-style="width: 100%"
-              e-name="category" e-form="rowform" e-required>
               {{ operation.category }}
-            </span>
           </td>
 
           <td>
-            <form editable-form name="rowform"
-              onbeforesave="save($data, $index)"
-              shown="!operation.id">
-              <div class="btn-group btn-group-xs">
-                <!-- Save current operation, for editing and non-confirmed non-canceled operation. -->
-                <button type="submit" class="btn btn-success"
-                  ng-if="!operation.canceled && (!operation.confirmed || rowform.$visible)"
-                  title="Save">
-                  <span class="fa fa-floppy-o"></span>
-                </button>
+            <div class="btn-group btn-group-xs">
+              <!-- Edit operation, for non-canceled operation. -->
+              <button type="button" class="btn btn-default"
+                ng-if="!operation.canceled"
+                operation-form-dialog ng-model="operation" title="edit">
+                <span class="fa fa-pencil-square-o"></span>
+              </button>
 
-                <!-- Edit operation, for non-canceled and non-editing operation -->
-                <button type="button" class="btn btn-default"
-                  ng-if="!operation.canceled && !rowform.$visible"
-                  ng-click="rowform.$show()" title="edit">
-                  <span class="fa fa-pencil-square-o"></span>
-                </button>
+              <!-- Toggle pointed operation, for non-canceled operations. -->
+              <button type="button" class="btn btn-default"
+                ng-if="!operation.canceled"
+                ng-click="togglePointed(operation, rowform)"
+                ng-class="{active: operation.pointed}" title="point">
+                <span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
+              </button>
 
-                <!-- Cancel edition, for editing operation. -->
-                <button type="button" class="btn btn-default"
-                  ng-if="rowform.$visible"
-                  ng-click="cancelEdit(operation, rowform)">
-                  <span class="fa fa-times"></span>
-                </button>
+              <!-- Toggle canceled operation. -->
+              <button type="button" class="btn btn-default"
+                ng-click="toggleCanceled(operation)"
+                ng-if="operation.scheduled_operation_id && !rowform.$visible"
+                ng-class="{active: operation.canceled}" title="cancel">
+                <span class="fa fa-remove"></span>
+              </button>
 
-                <!-- Toggle pointed operation, for non-canceled operations. -->
-                <button type="button" class="btn btn-default"
-                  ng-if="!operation.canceled"
-                  ng-click="togglePointed(operation, rowform)"
-                  ng-class="{active: operation.pointed}" title="point">
-                  <span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
-                </button>
-
-                <!-- Toggle canceled operation, for non-editing operations. -->
-                <button type="button" class="btn btn-default"
-                  ng-click="toggleCanceled(operation)"
-                  ng-if="operation.scheduled_operation_id && !rowform.$visible"
-                  ng-class="{active: operation.canceled}" title="cancel">
-                  <span class="fa fa-remove"></span>
-                </button>
-
-                <!-- Delete operation, with confirm. -->
-                <button type="button" class="btn btn-default"
-                  ng-if="operation.id && !operation.scheduled_operation_id"
-                  ng-click="delete(operation, $index)">
-                  <span class="fa fa-trash-o"></span>
-                </button>
-              </div>
-            </form>
+              <!-- Delete operation, with confirm. -->
+              <button type="button" class="btn btn-default"
+                ng-if="operation.id && !operation.scheduled_operation_id"
+                ng-click="delete(operation, $index)">
+                <span class="fa fa-trash-o"></span>
+              </button>
+            </div>
           </td>
         </tr>
       </tbody>