Improve forms.
This commit is contained in:
parent
f4df257548
commit
a045fd77d7
@ -66,6 +66,7 @@
|
||||
<script src="bower_components/angular/angular.js"></script>
|
||||
<script src="bower_components/angular-resource/angular-resource.js"></script>
|
||||
<script src="bower_components/angular-route/angular-route.js"></script>
|
||||
<script src="bower_components/angular-messages/angular-messages.js"></script>
|
||||
<script src="bower_components/angular-strap/dist/angular-strap.js"></script>
|
||||
<script src="bower_components/angular-strap/dist/angular-strap.tpl.js"></script>
|
||||
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
|
||||
|
@ -19,8 +19,8 @@
|
||||
|
||||
angular.module('accountant.accounts', [
|
||||
'ngResource',
|
||||
'ngMessages',
|
||||
'ui-notification',
|
||||
'xeditable',
|
||||
'ngBootbox'
|
||||
])
|
||||
|
||||
@ -160,7 +160,7 @@ angular.module('accountant.accounts', [
|
||||
}])
|
||||
|
||||
.directive(
|
||||
'accountFormDialog', function($ngBootbox) {
|
||||
'accountFormDialog', function($ngBootbox, Notification) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
@ -175,8 +175,48 @@ angular.module('accountant.accounts', [
|
||||
|
||||
scope.form = {};
|
||||
|
||||
scope.submitForm = function() {
|
||||
// check to make sure the form is completely valid
|
||||
if (!scope.form.$valid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Authorized overdraft is a positive integer but data is a negative integer.
|
||||
scope.data.authorized_overdraft = -scope.data.authorized_overdraft
|
||||
|
||||
angular.copy(scope.data, scope.account);
|
||||
|
||||
// Save account
|
||||
console.log(scope.account);
|
||||
return scope.account.$save().then(
|
||||
function(data) {
|
||||
Notification.success('Account #' + data.id + ' saved.');
|
||||
|
||||
scope.account.getSolds();
|
||||
|
||||
return data;
|
||||
}, function(data) {
|
||||
Notification.error('Error while saving account #' + data.id);
|
||||
scope.account.getSolds();
|
||||
console.log(data);
|
||||
return false;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
element.on('click', function() {
|
||||
//angular.copy(scope.account, scope.form);
|
||||
// Create new account if not passed in ng-model.
|
||||
if(!scope.account) {
|
||||
scope.account = new Account({
|
||||
authorized_overdraft: 0
|
||||
});
|
||||
}
|
||||
|
||||
scope.data = {};
|
||||
angular.copy(scope.account, scope.data);
|
||||
|
||||
// Authorized overdraft must be positive in form.
|
||||
scope.data.authorized_overdraft = -scope.data.authorized_overdraft
|
||||
|
||||
// Open dialog with form.
|
||||
$ngBootbox.customDialog({
|
||||
@ -188,15 +228,7 @@ angular.module('accountant.accounts', [
|
||||
save: {
|
||||
label: 'Save',
|
||||
className: 'btn-success',
|
||||
callback: function() {
|
||||
// Validate form
|
||||
console.log(scope.form);
|
||||
|
||||
// Save account
|
||||
console.log(scope.account);
|
||||
|
||||
return false;
|
||||
}
|
||||
callback: scope.submitForm
|
||||
},
|
||||
cancel: {
|
||||
label: 'Cancel',
|
||||
|
@ -482,7 +482,8 @@ angular.module('accountant.operations', [
|
||||
scope.form = {};
|
||||
|
||||
element.on('click', function() {
|
||||
//angular.copy(scope.operation, scope.form);
|
||||
scope.data = {};
|
||||
angular.copy(scope.operation, scope.data);
|
||||
|
||||
// Open dialog with form.
|
||||
$ngBootbox.customDialog({
|
||||
|
@ -21,6 +21,7 @@ angular.module('accountant.scheduler', [
|
||||
'ngRoute',
|
||||
'ngBootbox',
|
||||
'ui-notification',
|
||||
'xeditable',
|
||||
'mgcrea.ngStrap'
|
||||
])
|
||||
|
||||
|
@ -15,24 +15,39 @@
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<form class="form-horizontal" role="form" name="form">
|
||||
<div class="form-group">
|
||||
<form class="form-horizontal" ng-submit="submitForm()"
|
||||
role="form" name="form" novalidate>
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
|
||||
<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 class="form-control" id="name" name="name"
|
||||
ng-model="data.name"
|
||||
type="text" placeholder="Account name"
|
||||
required>
|
||||
</input>
|
||||
<div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
|
||||
<p ng-message="required">The account name is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
|
||||
<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 class="input-group">
|
||||
<div class="input-group-addon">-</div>
|
||||
<input class="form-control" id="authorized-overdraft"
|
||||
name="authorized_overdraft"
|
||||
ng-model="data.authorized_overdraft"
|
||||
type="number" placeholder="Authorized overdraft"
|
||||
required min="0">
|
||||
</input>
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
<div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
|
||||
<p ng-message="required">The authorized overdraft is required.</p>
|
||||
<p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -30,8 +30,9 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<button class="btn btn-success btn-success"
|
||||
ng-click="add()">Ajouter</button>
|
||||
<button class="btn btn-success" account-form-dialog>
|
||||
Ajouter
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
@ -15,13 +15,13 @@
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!-- kate: space-indent on; indent-width 2; mixedindent off; -->
|
||||
<form class="form-horizontal" role="form" name="form">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="operation-date" class="form-control"
|
||||
name="operation_date" ng-model="operation.operation_date"
|
||||
bs-datepicker data-date-format="yyyy-MM-dd"
|
||||
<input class="form-control" id="operation-date" name="operation_date" ng-model="data.operation_date"
|
||||
type="text" bs-datepicker data-date-format="yyyy-MM-dd"
|
||||
placeholder="Operation date">
|
||||
</div>
|
||||
</div>
|
||||
@ -29,9 +29,9 @@
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="label">Label</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="label" class="form-control"
|
||||
name="label" ng-model="operation.label"
|
||||
placeholder="Label" type="text">
|
||||
<input class="form-control" id="label" name="label"
|
||||
ng-model="data.label"
|
||||
type="text" placeholder="Label">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,9 +39,9 @@
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="value">Montant</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="value" class="form-control" type="number"
|
||||
name="value" ng-model="operation.value"
|
||||
placeholder="Value">
|
||||
<input class="form-control" id="value" name="value"
|
||||
ng-model="data.value"
|
||||
type="number" placeholder="Value">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
@ -49,11 +49,10 @@
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="category" class="form-control" type="text"
|
||||
name="category" ng-model="operation.category"
|
||||
placeholder="Category">
|
||||
<input class="form-control" id="category" name="category"
|
||||
ng-model="data.category"
|
||||
type="text" placeholder="Category">
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
@ -18,12 +18,13 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "~2.2",
|
||||
"moment": "~2.12",
|
||||
"moment": "~2.14",
|
||||
"bootstrap": "~3.3.6",
|
||||
"bootstrap-additions": "~0.3.1",
|
||||
"angular": "~1.5",
|
||||
"angular-resource": "~1.5",
|
||||
"angular-route": "~1.5",
|
||||
"angular-messages": "~1.5",
|
||||
"angular-strap": "~2.3.6",
|
||||
"angular-xeditable": "~0.1",
|
||||
"angular-ui-notification": "~0.2",
|
||||
|
Loading…
Reference in New Issue
Block a user