From 68c6884fad8aab2b875b095b28e80cb6f2e9683e Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sun, 22 May 2016 21:47:33 +0200
Subject: [PATCH] set account form in a popup.

---
 accountant-ui/js/accounts.js               | 54 +++++++++++++++-
 accountant-ui/views/account.form.tmpl.html | 22 +++++++
 accountant-ui/views/accounts.html          | 72 ++++++++--------------
 accountant-ui/views/login.tmpl.html        |  1 +
 4 files changed, 101 insertions(+), 48 deletions(-)
 create mode 100644 accountant-ui/views/account.form.tmpl.html

diff --git a/accountant-ui/js/accounts.js b/accountant-ui/js/accounts.js
index 515211d..3a622a8 100644
--- a/accountant-ui/js/accounts.js
+++ b/accountant-ui/js/accounts.js
@@ -156,4 +156,56 @@ angular.module('accountant.accounts', [
 
     // Load accounts.
     $scope.accounts = Account.query();
-}]);
+
+}])
+
+.directive(
+    'accountFormDialog', function($ngBootbox) {
+        return {
+            restrict: 'A',
+            scope: {
+                account: '=ngModel'
+            },
+            link: function(scope, element) {
+                var title = 'Account';
+
+                if(scope.account && scope.account.id) {
+                    title = title + ' #' + scope.account.id;
+                }
+
+                scope.form = {};
+
+                element.on('click', function() {
+                    //angular.copy(scope.account, scope.form);
+
+                    // Open dialog with form.
+                    $ngBootbox.customDialog({
+                        scope: scope,
+                        title: title,
+                        templateUrl: 'views/account.form.tmpl.html',
+                        onEscape: true,
+                        buttons: {
+                            save: {
+                                label: 'Save',
+                                className: 'btn-success',
+                                callback: function() {
+                                    // Validate form
+                                    console.log(scope.form);
+
+                                    // Save account
+                                    console.log(scope.account);
+
+                                    return false;
+                                }
+                            },
+                            cancel: {
+                                label: 'Cancel',
+                                className: 'btn-default',
+                                callback: true
+                            }
+                        }
+                    });
+                });
+            }
+        };
+});
diff --git a/accountant-ui/views/account.form.tmpl.html b/accountant-ui/views/account.form.tmpl.html
new file mode 100644
index 0000000..7883047
--- /dev/null
+++ b/accountant-ui/views/account.form.tmpl.html
@@ -0,0 +1,22 @@
+<!-- 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="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>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <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>
+  </div>
+</form>
diff --git a/accountant-ui/views/accounts.html b/accountant-ui/views/accounts.html
index 9920458..6d25b74 100644
--- a/accountant-ui/views/accounts.html
+++ b/accountant-ui/views/accounts.html
@@ -39,12 +39,7 @@
         class="form-inline" ng-class="rowClass(account)"
         ng-repeat="account in accounts | orderBy:'name'" ng-init="account.getSolds()">
         <td>
-          <span editable-text="account.name"
-            e-placeholder="Nom du compte"
-            e-style="width: 100%"
-            e-name="name" e-form="rowform" e-required>
-            <a href="#/account/{{ account.id }}/operations">{{ account.name }}</a>
-          </span>
+          <a href="#/account/{{ account.id }}/operations">{{ account.name }}</a>
         </td>
 
         <td>
@@ -60,53 +55,36 @@
         </td>
 
         <td>
-          <span editable-number="account.authorized_overdraft"
-            e-max="0"
-            e-style="width: 100%"
-            e-name="authorized_overdraft" e-form="rowform">
-            {{ account.authorized_overdraft | currency : "€" }}
-          </span>
+          {{ account.authorized_overdraft | currency : "€" }}
         </td>
 
         <td>
-          <form editable-form name="rowform"
-            onaftersave="save(account)" shown="!account.id">
-            <div class="btn-group btn-group-xs">
-              <!-- Edit account. -->
-              <button type="button" class="btn btn-success"
-                ng-if="!rowform.$visible"
-                ng-click="rowform.$show()">
-                <span class="fa fa-pencil-square-o"></span>
-              </button>
+          <div class="btn-group btn-group-xs">
+            <!-- Edit account. -->
+            <button type="button" class="btn btn-success"
+              account-form-dialog ng-model="account">
+              <span class="fa fa-pencil-square-o"></span>
+            </button>
 
-              <!-- Save account. -->
-              <button type="submit" class="btn btn-success"
-                ng-if="rowform.$visible">
-                <span class="fa fa-floppy-o"></span>
-              </button>
+            <!-- Cancel account edition. -->
+            <button type="button" class="btn btn-default"
+              ng-click="cancelEdit(rowform, account, $index)">
+              <span class="fa fa-times"></span>
+            </button>
 
-              <!-- Cancel account edition. -->
-              <button type="button" class="btn btn-default"
-                ng-if="rowform.$visible"
-                ng-click="cancelEdit(rowform, account, $index)">
-                <span class="fa fa-times"></span>
-              </button>
+            <!-- Delete account, with confirm. -->
+            <button type="button" class="btn btn-default"
+              ng-click="delete(account, $index)">
+              <span class="fa fa-trash-o"></span>
+            </button>
 
-              <!-- Delete account, with confirm. -->
-              <button type="button" class="btn btn-default"
-                ng-if="account.id"
-                ng-click="delete(account, $index)">
-                <span class="fa fa-trash-o"></span>
-              </button>
-
-              <!-- Open account scheduler. -->
-              <a class="btn btn-default"
-                ng-if="account.id"
-                href="#/account/{{ account.id }}/scheduler">
-                <span class="fa fa-clock-o"></span>
-              </a>
-            </div>
-          </form>
+            <!-- Open account scheduler. -->
+            <a class="btn btn-default"
+              ng-if="account.id"
+              href="#/account/{{ account.id }}/scheduler">
+              <span class="fa fa-clock-o"></span>
+            </a>
+          </div>
         </td>
       </tr>
     </tbody>
diff --git a/accountant-ui/views/login.tmpl.html b/accountant-ui/views/login.tmpl.html
index a381d06..bab0153 100644
--- a/accountant-ui/views/login.tmpl.html
+++ b/accountant-ui/views/login.tmpl.html
@@ -7,6 +7,7 @@
         placeholder="Nom d'utilisateur">
     </div>
   </div>
+
   <div class="form-group">
     <label for="password" class="col-sm-4 control-label">Mot de passe</label>
     <div class="col-sm-8">