alahouze/accountant
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve CSS classes, buttons and entry states handling.

Browse Source
This commit is contained in:
Alexis Lahouze 2015-07-20 00:16:56 +02:00
parent 28ab2fd7f3
commit 53ab313da3
2 changed files with 31 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
accountant/frontend/static/js/entries.js
View File

@ -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 // Starts editing an entry
$scope.editEntry = function(entry) { $scope.editEntry = function(entry) {
// Enter edit state. // Enter edit state.
entry.confirmed=true; entry.confirmed=true;
entry.state='edit'; entry.editing=true;
};
// 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;
}; };
// Cancel current editing entry or clears field if a new one. // Cancel current editing entry or clears field if a new one.
@ -394,7 +349,7 @@ accountantApp
}; };
// Points an entry. // Points an entry.
$scope.pointEntry = function(entry) { $scope.togglePointedEntry = function(entry) {
entry.confirmed = true; entry.confirmed = true;
entry.pointed = !entry.pointed; entry.pointed = !entry.pointed;
@ -408,6 +363,13 @@ accountantApp
$scope.saveEntry(entry); $scope.saveEntry(entry);
}; };
// Confirm an entry.
$scope.toggleCanceledEntry = function(entry) {
entry.canceled = !entry.canceled;
$scope.saveEntry(entry);
};
// Create an new entry. // Create an new entry.
$scope.createEntry = function(entry) { $scope.createEntry = function(entry) {
entry.account_id = $scope.account.id; entry.account_id = $scope.account.id;

59
accountant/frontend/static/templates/entries.html
View File

@ -71,14 +71,14 @@
</button> </button>
<button type="button" class="btn btn-xs btn-default" <button type="button" class="btn btn-xs btn-default"
ng-click="resetNewEntry()" title="Cancel"> ng-click="newEntry.pointed=!newEntry.pointed"
<span class="fa fa-times"></span> 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>
<button type="button" class="btn btn-xs btn-default" <button type="button" class="btn btn-xs btn-default"
ng-click="newEntry.pointed=!newEntry.pointed" ng-click="resetNewEntry()" title="Cancel">
ng-class="{active: newEntry.pointed}" title="point"> <span class="fa fa-times"></span>
<span class="fa fa-check"></span>
</button> </button>
</div> </div>
</td> </td>
@ -86,8 +86,8 @@
<!-- Row for an editing entry. --> <!-- Row for an editing entry. -->
<tr id="entry_{{entry.id}}" class="form-inline" <tr id="entry_{{entry.id}}" class="form-inline"
ng-class="entryRowClass(entry)" ng-repeat-start="entry in entries" ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
ng-if="isEditing(entry)"> ng-repeat-start="entry in entries" ng-if="entry.editing">
<td class="col-md-1"> <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/> <input type="text" class="form-control input-sm" ng-model="entry.operation_date" data-date-format="yyyy-mm-dd" bs-datepicker/>
</td> </td>
@ -100,7 +100,7 @@
<input type="text" class="form-control input-sm" ng-model="entry.value"/> <input type="text" class="form-control input-sm" ng-model="entry.value"/>
</td> </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> <small>{{entry.sold}}</small>
</td> </td>
@ -119,9 +119,9 @@
</button> </button>
<button type="button" class="btn btn-xs btn-default" <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"> 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> </button>
</div> </div>
</td> </td>
@ -129,8 +129,8 @@
<!-- Row for a displayed entry. --> <!-- Row for a displayed entry. -->
<tr id="entry_{{entry.id}}" <tr id="entry_{{entry.id}}"
ng-class="entryRowClass(entry)" ng-repeat-end ng-class="{stroke: entry.canceled, italic: !entry.confirmed, warning: entry.sold < 0, danger: entry.sold < account.authorized_overdraft}"
ng-if="isDisplaying(entry)"> ng-repeat-end ng-if="!entry.editing">
<td class="col-md-1"> <td class="col-md-1">
<small><span>{{entry.operation_date | date:"yyyy-MM-dd"}}</span></small> <small><span>{{entry.operation_date | date:"yyyy-MM-dd"}}</span></small>
</td> </td>
@ -143,7 +143,7 @@
<small><span>{{entry.value}}</span></small> <small><span>{{entry.value}}</span></small>
</td> </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> <small>{{entry.sold}}</small>
</td> </td>
@ -153,36 +153,21 @@
<td class="col-md-2"> <td class="col-md-2">
<!-- Button group for a saved entry. --> <!-- Button group for a saved entry. -->
<div class="btn-group" ng-if="isSaved(entry)"> <div class="btn-group">
<button class="btn btn-xs btn-default" ng-click="editEntry(entry)" title="edit"> <button class="btn btn-xs btn-success" ng-if="!entry.confirmed && !entry.canceled" ng-click="confirmEntry(entry)" title="Save">
<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">
<span class="fa fa-plus"></span> <span class="fa fa-plus"></span>
</button> </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> <span class="fa fa-pencil-square-o"></span>
</button> </button>
<button class="btn btn-xs btn-default" <button class="btn btn-xs btn-default" ng-if="!entry.canceled" ng-click="togglePointedEntry(entry)" ng-class="{active: entry.pointed}" title="point">
ng-click="pointEntry(entry)" <span ng-class="{'fa fa-check-square-o': entry.pointed, 'fa fa-square-o': !entry.pointed}"></span>
ng-class="{active: entry.pointed}" title="point"> </button>
<span class="fa fa-check"></span>
<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> </button>
</div> </div>
</td> </td>