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