set account form in a popup.

This commit is contained in:
Alexis Lahouze 2016-05-22 21:47:33 +02:00
parent ffc5ede6ca
commit 68c6884fad
4 changed files with 101 additions and 48 deletions

View File

@ -156,4 +156,56 @@ angular.module('accountant.accounts', [
// Load accounts.
$scope.accounts = Account.query();
}]);
}])
.directive(
'accountFormDialog', function($ngBootbox) {
return {
restrict: 'A',
scope: {
account: '=ngModel'
},
link: function(scope, element) {
var title = 'Account';
if(scope.account && scope.account.id) {
title = title + ' #' + scope.account.id;
}
scope.form = {};
element.on('click', function() {
//angular.copy(scope.account, scope.form);
// Open dialog with form.
$ngBootbox.customDialog({
scope: scope,
title: title,
templateUrl: 'views/account.form.tmpl.html',
onEscape: true,
buttons: {
save: {
label: 'Save',
className: 'btn-success',
callback: function() {
// Validate form
console.log(scope.form);
// Save account
console.log(scope.account);
return false;
}
},
cancel: {
label: 'Cancel',
className: 'btn-default',
callback: true
}
}
});
});
}
};
});

View File

@ -0,0 +1,22 @@
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
<form class="form-horizontal" role="form" name="form">
<div class="form-group">
<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>
</div>
</div>
<div class="form-group">
<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>
</div>
</form>

View File

@ -39,12 +39,7 @@
class="form-inline" ng-class="rowClass(account)"
ng-repeat="account in accounts | orderBy:'name'" ng-init="account.getSolds()">
<td>
<span editable-text="account.name"
e-placeholder="Nom du compte"
e-style="width: 100%"
e-name="name" e-form="rowform" e-required>
<a href="#/account/{{ account.id }}/operations">{{ account.name }}</a>
</span>
<a href="#/account/{{ account.id }}/operations">{{ account.name }}</a>
</td>
<td>
@ -60,53 +55,36 @@
</td>
<td>
<span editable-number="account.authorized_overdraft"
e-max="0"
e-style="width: 100%"
e-name="authorized_overdraft" e-form="rowform">
{{ account.authorized_overdraft | currency : "€" }}
</span>
{{ account.authorized_overdraft | currency : "€" }}
</td>
<td>
<form editable-form name="rowform"
onaftersave="save(account)" shown="!account.id">
<div class="btn-group btn-group-xs">
<!-- Edit account. -->
<button type="button" class="btn btn-success"
ng-if="!rowform.$visible"
ng-click="rowform.$show()">
<span class="fa fa-pencil-square-o"></span>
</button>
<div class="btn-group btn-group-xs">
<!-- Edit account. -->
<button type="button" class="btn btn-success"
account-form-dialog ng-model="account">
<span class="fa fa-pencil-square-o"></span>
</button>
<!-- Save account. -->
<button type="submit" class="btn btn-success"
ng-if="rowform.$visible">
<span class="fa fa-floppy-o"></span>
</button>
<!-- Cancel account edition. -->
<button type="button" class="btn btn-default"
ng-click="cancelEdit(rowform, account, $index)">
<span class="fa fa-times"></span>
</button>
<!-- Cancel account edition. -->
<button type="button" class="btn btn-default"
ng-if="rowform.$visible"
ng-click="cancelEdit(rowform, account, $index)">
<span class="fa fa-times"></span>
</button>
<!-- Delete account, with confirm. -->
<button type="button" class="btn btn-default"
ng-click="delete(account, $index)">
<span class="fa fa-trash-o"></span>
</button>
<!-- Delete account, with confirm. -->
<button type="button" class="btn btn-default"
ng-if="account.id"
ng-click="delete(account, $index)">
<span class="fa fa-trash-o"></span>
</button>
<!-- Open account scheduler. -->
<a class="btn btn-default"
ng-if="account.id"
href="#/account/{{ account.id }}/scheduler">
<span class="fa fa-clock-o"></span>
</a>
</div>
</form>
<!-- Open account scheduler. -->
<a class="btn btn-default"
ng-if="account.id"
href="#/account/{{ account.id }}/scheduler">
<span class="fa fa-clock-o"></span>
</a>
</div>
</td>
</tr>
</tbody>

View File

@ -7,6 +7,7 @@
placeholder="Nom d'utilisateur">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Mot de passe</label>
<div class="col-sm-8">