Improve CSS classes, buttons and entry states handling.
This commit is contained in:
Alexis Lahouze
parent
28ab2fd7f3
commit
53ab313da3
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user