Improve forms.

This commit is contained in:
Alexis Lahouze 2016-07-15 16:40:39 +02:00
parent f4df257548
commit a045fd77d7
8 changed files with 90 additions and 39 deletions

View File

@ -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>

View File

@ -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',

View File

@ -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({

View File

@ -21,6 +21,7 @@ angular.module('accountant.scheduler', [
'ngRoute',
'ngBootbox',
'ui-notification',
'xeditable',
'mgcrea.ngStrap'
])

View File

@ -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">
<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>

View File

@ -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>

View File

@ -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>

View File

@ -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",