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/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.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-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.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.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> <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>

View File

@ -19,8 +19,8 @@
angular.module('accountant.accounts', [ angular.module('accountant.accounts', [
'ngResource', 'ngResource',
'ngMessages',
'ui-notification', 'ui-notification',
'xeditable',
'ngBootbox' 'ngBootbox'
]) ])
@ -160,7 +160,7 @@ angular.module('accountant.accounts', [
}]) }])
.directive( .directive(
'accountFormDialog', function($ngBootbox) { 'accountFormDialog', function($ngBootbox, Notification) {
return { return {
restrict: 'A', restrict: 'A',
scope: { scope: {
@ -175,8 +175,48 @@ angular.module('accountant.accounts', [
scope.form = {}; 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() { 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. // Open dialog with form.
$ngBootbox.customDialog({ $ngBootbox.customDialog({
@ -188,15 +228,7 @@ angular.module('accountant.accounts', [
save: { save: {
label: 'Save', label: 'Save',
className: 'btn-success', className: 'btn-success',
callback: function() { callback: scope.submitForm
// Validate form
console.log(scope.form);
// Save account
console.log(scope.account);
return false;
}
}, },
cancel: { cancel: {
label: 'Cancel', label: 'Cancel',

View File

@ -482,7 +482,8 @@ angular.module('accountant.operations', [
scope.form = {}; scope.form = {};
element.on('click', function() { element.on('click', function() {
//angular.copy(scope.operation, scope.form); scope.data = {};
angular.copy(scope.operation, scope.data);
// Open dialog with form. // Open dialog with form.
$ngBootbox.customDialog({ $ngBootbox.customDialog({

View File

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

View File

@ -15,24 +15,39 @@
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
--> -->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<form class="form-horizontal" role="form" name="form"> <form class="form-horizontal" ng-submit="submitForm()"
<div class="form-group"> 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> <label class="col-sm-4 control-label" for="name">Account name</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="name" class="form-control" <input class="form-control" id="name" name="name"
name="name" ng-model="account.name" ng-model="data.name"
placeholder="Account name" type="text"> type="text" placeholder="Account name"
required>
</input> </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> </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> <label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="authorized-overdraft" class="form-control" type="number" <div class="input-group">
name="authorized_overdraft" ng-model="account.authorized_overdraft" <div class="input-group-addon">-</div>
placeholder="Authorized overdraft"> <input class="form-control" id="authorized-overdraft"
</input> 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>
</div> </div>
</form> </form>

View File

@ -30,8 +30,9 @@
<tbody> <tbody>
<tr> <tr>
<td colspan="5"> <td colspan="5">
<button class="btn btn-success btn-success" <button class="btn btn-success" account-form-dialog>
ng-click="add()">Ajouter</button> Ajouter
</button>
</td> </td>
</tr> </tr>

View File

@ -15,13 +15,13 @@
along with Accountant. If not, see <http://www.gnu.org/licenses/>. along with Accountant. If not, see <http://www.gnu.org/licenses/>.
--> -->
<!-- vim: set tw=80 ts=2 sw=2 sts=2: --> <!-- 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"> <form class="form-horizontal" role="form" name="form">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label" for="operation-date">Date</label> <label class="col-sm-4 control-label" for="operation-date">Date</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="operation-date" class="form-control" <input class="form-control" id="operation-date" name="operation_date" ng-model="data.operation_date"
name="operation_date" ng-model="operation.operation_date" type="text" bs-datepicker data-date-format="yyyy-MM-dd"
bs-datepicker data-date-format="yyyy-MM-dd"
placeholder="Operation date"> placeholder="Operation date">
</div> </div>
</div> </div>
@ -29,9 +29,9 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label" for="label">Label</label> <label class="col-sm-4 control-label" for="label">Label</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="label" class="form-control" <input class="form-control" id="label" name="label"
name="label" ng-model="operation.label" ng-model="data.label"
placeholder="Label" type="text"> type="text" placeholder="Label">
</input> </input>
</div> </div>
</div> </div>
@ -39,9 +39,9 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label" for="value">Montant</label> <label class="col-sm-4 control-label" for="value">Montant</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="value" class="form-control" type="number" <input class="form-control" id="value" name="value"
name="value" ng-model="operation.value" ng-model="data.value"
placeholder="Value"> type="number" placeholder="Value">
</input> </input>
</div> </div>
</div> </div>
@ -49,11 +49,10 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label" for="category">Catégorie</label> <label class="col-sm-4 control-label" for="category">Catégorie</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="category" class="form-control" type="text" <input class="form-control" id="category" name="category"
name="category" ng-model="operation.category" ng-model="data.category"
placeholder="Category"> type="text" placeholder="Category">
</input> </input>
</div> </div>
</div> </div>
</form> </form>

View File

@ -18,12 +18,13 @@
], ],
"dependencies": { "dependencies": {
"jquery": "~2.2", "jquery": "~2.2",
"moment": "~2.12", "moment": "~2.14",
"bootstrap": "~3.3.6", "bootstrap": "~3.3.6",
"bootstrap-additions": "~0.3.1", "bootstrap-additions": "~0.3.1",
"angular": "~1.5", "angular": "~1.5",
"angular-resource": "~1.5", "angular-resource": "~1.5",
"angular-route": "~1.5", "angular-route": "~1.5",
"angular-messages": "~1.5",
"angular-strap": "~2.3.6", "angular-strap": "~2.3.6",
"angular-xeditable": "~0.1", "angular-xeditable": "~0.1",
"angular-ui-notification": "~0.2", "angular-ui-notification": "~0.2",