From 53ab313da375a0affef9f39d12be093d07a64e77 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Mon, 20 Jul 2015 00:16:56 +0200
Subject: [PATCH] Improve CSS classes, buttons and entry states handling.

---
 accountant/frontend/static/js/entries.js      | 56 +++---------------
 .../frontend/static/templates/entries.html    | 59 +++++++------------
 2 files changed, 31 insertions(+), 84 deletions(-)

diff --git a/accountant/frontend/static/js/entries.js b/accountant/frontend/static/js/entries.js
index bd1381c..038d6a9 100644
--- a/accountant/frontend/static/js/entries.js
+++ b/accountant/frontend/static/js/entries.js
@@ -333,56 +333,11 @@ accountantApp
         });
     };
 
-    // Returns the CSS class for an entry row.
-    $scope.entryRowClass = function(entry) {
-        if($scope.isSaved(entry)) {
-            cssclass="";
-        } else {
-            cssclass="italic";
-        }
-
-        if(entry.canceled) {
-            cssclass += " stroke";
-        }
-
-        if(entry.sold < $scope.account.authorized_overdraft) {
-            cssclass += " danger";
-        } else if (entry.sold < 0) {
-            cssclass += " warning";
-        }
-
-        return cssclass;
-    };
-
-    // Returns the CSS class for an entry sold.
-    $scope.entryValueClass = function(sold) {
-        if(sold && sold < $scope.account.authorized_overdraft) {
-            return 'text-danger';
-        } else if (sold && sold < 0) {
-            return 'text-warning';
-        }
-    };
-
     // Starts editing an entry
     $scope.editEntry = function(entry) {
         // Enter edit state.
         entry.confirmed=true;
-        entry.state='edit';
-    };
-
-    // Returns true if the entry is in editing state.
-    $scope.isEditing = function(entry) {
-      return entry.state === 'edit';
-    };
-
-    // Returns true if the entry is in displaying state.
-    $scope.isDisplaying = function(entry) {
-      return !entry.state || entry.state === 'display';
-    };
-
-    // Returns true if the entry is a scheduled one.
-    $scope.isSaved = function(entry) {
-        return entry.confirmed;
+        entry.editing=true;
     };
 
     // Cancel current editing entry or clears field if a new one.
@@ -394,7 +349,7 @@ accountantApp
     };
 
     // Points an entry.
-    $scope.pointEntry = function(entry) {
+    $scope.togglePointedEntry = function(entry) {
         entry.confirmed = true;
         entry.pointed = !entry.pointed;
 
@@ -408,6 +363,13 @@ accountantApp
         $scope.saveEntry(entry);
     };
 
+    // Confirm an entry.
+    $scope.toggleCanceledEntry = function(entry) {
+        entry.canceled = !entry.canceled;
+
+        $scope.saveEntry(entry);
+    };
+
     // Create an new entry.
     $scope.createEntry = function(entry) {
       entry.account_id = $scope.account.id;
diff --git a/accountant/frontend/static/templates/entries.html b/accountant/frontend/static/templates/entries.html
index 5caf851..e69f2cc 100644
--- a/accountant/frontend/static/templates/entries.html
+++ b/accountant/frontend/static/templates/entries.html
@@ -71,14 +71,14 @@
             </button>
 
             <button type="button" class="btn btn-xs btn-default"
-              ng-click="resetNewEntry()" title="Cancel">
-              <span class="fa fa-times"></span>
+              ng-click="newEntry.pointed=!newEntry.pointed"
+              ng-class="{active: newEntry.pointed}" title="point">
+              <span ng-class="{'fa fa-check-square-o': newEntry.pointed, 'fa fa-square-o': !newEntry.pointed}"></span>
             </button>
 
             <button type="button" class="btn btn-xs btn-default"
-              ng-click="newEntry.pointed=!newEntry.pointed"
-              ng-class="{active: newEntry.pointed}" title="point">
-              <span class="fa fa-check"></span>
+              ng-click="resetNewEntry()" title="Cancel">
+              <span class="fa fa-times"></span>
             </button>
           </div>
         </td>
@@ -86,8 +86,8 @@
 
       <!-- Row for an editing entry. -->
       <tr id="entry_{{entry.id}}" class="form-inline"
-        ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries"
-        ng-if="isEditing(entry)">
+        ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
+        ng-repeat-start="entry in entries" ng-if="entry.editing">
         <td class="col-md-1">
           <input type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
         </td>
@@ -100,7 +100,7 @@
           <input type="text" class="form-control input-sm" ng-model="entry.value"/>
         </td>
         
-        <td class="col-md-1" ng-class="entryValueClass(entry.sold)">
+        <td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
           <small>{{entry.sold}}</small>
         </td>
 
@@ -119,9 +119,9 @@
             </button>
 
             <button type="button" class="btn btn-xs btn-default"
-              ng-click="pointEntry(entry)"
+              ng-click="entry.pointed = !entry.pointed"
               ng-class="{active: entry.pointed}" title="point">
-              <span class="fa fa-check"></span>
+              <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
             </button>
           </div>
         </td>
@@ -129,8 +129,8 @@
 
       <!-- Row for a displayed entry. -->
       <tr id="entry_{{entry.id}}"
-        ng-class="entryRowClass(entry)" ng-repeat-end
-        ng-if="isDisplaying(entry)">
+        ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
+        ng-repeat-end ng-if="!entry.editing">
         <td class="col-md-1">
           <small><span>{{entry.operation_date | date:"yyyy-MM-dd"}}</span></small>
         </td>
@@ -143,7 +143,7 @@
           <small><span>{{entry.value}}</span></small>
         </td>
         
-        <td class="col-md-1" ng-class="entryValueClass(entry.sold)">
+        <td class="col-md-1" ng-class="{'text-warning': entry.sold < 0, 'text-danger': entry.sold < account.authorized_overdraft}">
           <small>{{entry.sold}}</small>
         </td>
 
@@ -153,36 +153,21 @@
 
         <td class="col-md-2">
           <!-- Button group for a saved entry. -->
-          <div class="btn-group" ng-if="isSaved(entry)">
-            <button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
-              <span class="fa fa-pencil-square-o"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default" ng-click="removeEntry(entry)" title="remove">
-              <span class="fa fa-trash"></span>
-            </button>
-
-            <button class="btn btn-xs btn-default"
-              ng-click="pointEntry(entry)"
-              ng-class="{active: entry.pointed}" title="point">
-              <span class="fa fa-check"></span>
-            </button>
-          </div>
-
-          <!-- Button group for an unsaved (scheduled) entry. -->
-          <div class="btn-group" ng-if="!isSaved(entry)">
-            <button class="btn btn-xs btn-success" ng-click="confirmEntry(entry)" title="Save">
+          <div class="btn-group">
+            <button class="btn btn-xs btn-success" ng-if="!entry.confirmed && !entry.canceled" ng-click="confirmEntry(entry)" title="Save">
               <span class="fa fa-plus"></span>
             </button>
 
-            <button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit">
+            <button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="editEntry(entry)" title="edit">
               <span class="fa fa-pencil-square-o"></span>
             </button>
 
-            <button class="btn btn-xs btn-default"
-              ng-click="pointEntry(entry)"
-              ng-class="{active: entry.pointed}" title="point">
-              <span class="fa fa-check"></span>
+            <button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="togglePointedEntry(entry)" ng-class="{active: entry.pointed}" title="point">
+              <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
+            </button>
+
+            <button class="btn btn-xs btn-default" ng-click="toggleCanceledEntry(entry)" ng-class="{active: entry.canceled}" title="cancel">
+              <span class="fa fa-remove"></span>
             </button>
           </div>
         </td>