Set operation edition in form dialog.
This commit is contained in:
Alexis Lahouze
parent
0816467b00
commit
1660c7a635
@ -463,4 +463,56 @@ angular.module('accountant.operations', [
|
||||
$rootScope.$on('rangeSelectedEvent', function(e, args) {
|
||||
$scope.load(args.begin, args.end);
|
||||
});
|
||||
}]);
|
||||
}])
|
||||
|
||||
.directive(
|
||||
'operationFormDialog', function($ngBootbox) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {
|
||||
operation: '=ngModel'
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var title = 'Operation';
|
||||
|
||||
if(scope.operation && scope.operation.id) {
|
||||
title = title + ' #' + scope.operation.id;
|
||||
}
|
||||
|
||||
scope.form = {};
|
||||
|
||||
element.on('click', function() {
|
||||
//angular.copy(scope.operation, scope.form);
|
||||
|
||||
// Open dialog with form.
|
||||
$ngBootbox.customDialog({
|
||||
scope: scope,
|
||||
title: title,
|
||||
templateUrl: 'views/operation.form.tmpl.html',
|
||||
onEscape: true,
|
||||
buttons: {
|
||||
save: {
|
||||
label: 'Save',
|
||||
className: 'btn-success',
|
||||
callback: function() {
|
||||
// Validate form
|
||||
console.log(scope.form);
|
||||
|
||||
// Save operation
|
||||
console.log(scope.operation);
|
||||
|
||||
// TODO Alexis Lahouze 2016-05-24 Save operation, handle return.
|
||||
return false;
|
||||
}
|
||||
},
|
||||
cancel: {
|
||||
label: 'Cancel',
|
||||
className: 'btn-default',
|
||||
callback: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
43
accountant-ui/views/operation.form.tmpl.html
Normal file
43
accountant-ui/views/operation.form.tmpl.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!-- 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="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"
|
||||
placeholder="Operation date">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -55,30 +55,15 @@
|
||||
ng-class="{stroke: operation.canceled, italic: !operation.confirmed, warning: operation.sold < 0, danger: operation.sold < account.authorized_overdraft}"
|
||||
ng-repeat="operation in operations | orderBy:['-operation_date', '-value', 'label']">
|
||||
<td>
|
||||
<span editable-text="operation.operation_date"
|
||||
e-data-date-format="yyyy-MM-dd" e-bs-datepicker
|
||||
e-timezone="UTC"
|
||||
e-class="input-sm" e-style="width: 100%"
|
||||
e-name="operation_date" e-form="rowform" e-required>
|
||||
{{ operation.operation_date | date:"yyyy-MM-dd" }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span editable-text="operation.label"
|
||||
e-placeholder="Libellé de l'opération"
|
||||
e-class="input-sm" e-style="width: 100%"
|
||||
e-name="label" e-form="rowform" e-required>
|
||||
{{ operation.label }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span editable-number="operation.value"
|
||||
e-class="input-sm" e-style="width: 100%"
|
||||
e-name="value" e-form="rowform" e-required>
|
||||
{{ operation.value | currency:"€" }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td ng-class="{'text-warning': operation.sold < 0, 'text-danger': operation.sold < account.authorized_overdraft}">
|
||||
@ -86,64 +71,41 @@
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span editable-text="operation.category"
|
||||
e-placeholder="Catégorie"
|
||||
e-class="input-sm" e-style="width: 100%"
|
||||
e-name="category" e-form="rowform" e-required>
|
||||
{{ operation.category }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<form editable-form name="rowform"
|
||||
onbeforesave="save($data, $index)"
|
||||
shown="!operation.id">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<!-- Save current operation, for editing and non-confirmed non-canceled operation. -->
|
||||
<button type="submit" class="btn btn-success"
|
||||
ng-if="!operation.canceled && (!operation.confirmed || rowform.$visible)"
|
||||
title="Save">
|
||||
<span class="fa fa-floppy-o"></span>
|
||||
</button>
|
||||
<div class="btn-group btn-group-xs">
|
||||
<!-- Edit operation, for non-canceled operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
operation-form-dialog ng-model="operation" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Edit operation, for non-canceled and non-editing operation -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled && !rowform.$visible"
|
||||
ng-click="rowform.$show()" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
<!-- Toggle pointed operation, for non-canceled operations. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
ng-click="togglePointed(operation, rowform)"
|
||||
ng-class="{active: operation.pointed}" title="point">
|
||||
<span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
|
||||
</button>
|
||||
|
||||
<!-- Cancel edition, for editing operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="rowform.$visible"
|
||||
ng-click="cancelEdit(operation, rowform)">
|
||||
<span class="fa fa-times"></span>
|
||||
</button>
|
||||
<!-- Toggle canceled operation. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-click="toggleCanceled(operation)"
|
||||
ng-if="operation.scheduled_operation_id && !rowform.$visible"
|
||||
ng-class="{active: operation.canceled}" title="cancel">
|
||||
<span class="fa fa-remove"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle pointed operation, for non-canceled operations. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="!operation.canceled"
|
||||
ng-click="togglePointed(operation, rowform)"
|
||||
ng-class="{active: operation.pointed}" title="point">
|
||||
<span ng-class="{'fa fa-check-square-o': operation.pointed, 'fa fa-square-o': !operation.pointed}"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle canceled operation, for non-editing operations. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-click="toggleCanceled(operation)"
|
||||
ng-if="operation.scheduled_operation_id && !rowform.$visible"
|
||||
ng-class="{active: operation.canceled}" title="cancel">
|
||||
<span class="fa fa-remove"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete operation, with confirm. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="operation.id && !operation.scheduled_operation_id"
|
||||
ng-click="delete(operation, $index)">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Delete operation, with confirm. -->
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-if="operation.id && !operation.scheduled_operation_id"
|
||||
ng-click="delete(operation, $index)">
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user