Upgrade Operation controller.
This commit is contained in:
parent
b7c2d94c62
commit
129c9f9ee3
@ -44,18 +44,8 @@ export default angular.module('accountant.operations', [
|
|||||||
accountModule,
|
accountModule,
|
||||||
])
|
])
|
||||||
|
|
||||||
.factory('toastrService', downgradeInjectable(ToastrService))
|
.directive('operationListComponent', downgradeComponent({
|
||||||
|
component: OperationController
|
||||||
.factory('operationService', downgradeInjectable(OperationService))
|
}))
|
||||||
|
|
||||||
.controller('OperationController', OperationController)
|
|
||||||
|
|
||||||
.directive('balanceChart', downgradeComponent({
|
|
||||||
component: BalanceChartComponent
|
|
||||||
}) as angular.IDirectiveFactory)
|
|
||||||
|
|
||||||
.directive('categoryChart', downgradeComponent({
|
|
||||||
component: CategoryChartComponent
|
|
||||||
}) as angular.IDirectiveFactory)
|
|
||||||
|
|
||||||
.name;
|
.name;
|
||||||
|
@ -11,20 +11,72 @@ import { AccountService } from '../accounts/account.service';
|
|||||||
import { Operation } from './operation';
|
import { Operation } from './operation';
|
||||||
import { OperationService } from './operation.service';
|
import { OperationService } from './operation.service';
|
||||||
|
|
||||||
export class OperationController {
|
@Component({
|
||||||
|
selector: 'operation-list',
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-9">
|
||||||
|
<balance-chart (onUpdate)="onUpdate($event)"
|
||||||
|
[account]="account"></balance-chart>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<category-chart
|
||||||
|
[minDate]="minDate"
|
||||||
|
[maxDate]="maxDate"
|
||||||
|
[account]="account"></category-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<table class="table table-striped table-condensed table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Date d'op.</th>
|
||||||
|
<th>Libellé de l'opération</th>
|
||||||
|
<th>Montant</th>
|
||||||
|
<th>Solde</th>
|
||||||
|
<th>Catégorie</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colspan="6">
|
||||||
|
<button class="btn btn-success" (click)="add()">
|
||||||
|
Ajouter
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr [operation-row]="operation"
|
||||||
|
[account]="account"
|
||||||
|
(needsReload)="load(minDate, maxDate)"
|
||||||
|
*ngFor="let operation of operations">
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class OperationController implements OnInit {
|
||||||
private account: Account;
|
private account: Account;
|
||||||
private minDate: Date;
|
private minDate: Date;
|
||||||
private maxDate: Date;
|
private maxDate: Date;
|
||||||
private operations: Operation[];
|
private operations: Operation[];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private $modal,
|
@Inject("$modal") private $modal,
|
||||||
private accountIdService,
|
@Inject("accountIdService") private accountIdService,
|
||||||
private toastrService: ToastrService,
|
private toastrService: ToastrService,
|
||||||
private operationService: OperationService,
|
private operationService: OperationService,
|
||||||
private AccountService: AccountService
|
private accountService: AccountService
|
||||||
){
|
) {}
|
||||||
AccountService.get(this.accountIdService.get()).subscribe(account => {
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.accountService.get(this.accountIdService.get()).subscribe(account => {
|
||||||
this.account = account
|
this.account = account
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -51,28 +103,10 @@ export class OperationController {
|
|||||||
minDate,
|
minDate,
|
||||||
maxDate
|
maxDate
|
||||||
).subscribe((operations: Operation[]) => {
|
).subscribe((operations: Operation[]) => {
|
||||||
this.operations = operations;
|
this.operations = operations.reverse();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Toggle pointed indicator for an operation.
|
|
||||||
*/
|
|
||||||
togglePointed(operation, rowform) {
|
|
||||||
operation.pointed = !operation.pointed;
|
|
||||||
|
|
||||||
this.save(operation);
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Toggle cancel indicator for an operation.
|
|
||||||
*/
|
|
||||||
toggleCanceled(operation) {
|
|
||||||
operation.canceled = !operation.canceled;
|
|
||||||
|
|
||||||
this.save(operation);
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Save an operation and return a promise.
|
* Save an operation and return a promise.
|
||||||
*/
|
*/
|
||||||
@ -100,60 +134,9 @@ export class OperationController {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Delete an operation and return a promise.
|
|
||||||
*/
|
|
||||||
confirmDelete(operation) {
|
|
||||||
var title = "Delete operation #" + operation.id;
|
|
||||||
|
|
||||||
this.$modal({
|
|
||||||
templateUrl: operationDeleteTmpl,
|
|
||||||
controller: function($scope, title, operation, $delete) {
|
|
||||||
$scope.title = title;
|
|
||||||
$scope.operation = operation;
|
|
||||||
$scope.$delete = () => {
|
|
||||||
$scope.$hide();
|
|
||||||
$delete($scope.operation);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
locals: {
|
|
||||||
title: title,
|
|
||||||
operation: operation,
|
|
||||||
$delete: (operation: Operation) => {
|
|
||||||
this.delete(operation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
delete(operation) {
|
|
||||||
var id = operation.id;
|
|
||||||
|
|
||||||
return this.operationService.delete(operation).subscribe(() => {
|
|
||||||
this.toastrService.success('Operation #' + id + ' deleted.');
|
|
||||||
|
|
||||||
this.load(this.minDate, this.maxDate);
|
|
||||||
|
|
||||||
return operation;
|
|
||||||
}, (result) => {
|
|
||||||
this.toastrService.error(
|
|
||||||
'An error occurred while trying to delete operation #' +
|
|
||||||
id + ':<br />' + result
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Open the popup to modify the operation, save it on confirm.
|
|
||||||
* @returns a promise.
|
|
||||||
*/
|
|
||||||
modify(operation) {
|
modify(operation) {
|
||||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||||
var title = "Operation";
|
var title = "New operation";
|
||||||
|
|
||||||
if (operation.id) {
|
|
||||||
title = title + " #" + operation.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$modal({
|
this.$modal({
|
||||||
templateUrl: operationFormTmpl,
|
templateUrl: operationFormTmpl,
|
||||||
|
@ -13,6 +13,7 @@ import { CategoryChartComponent } from './categoryChart.component';
|
|||||||
import { OperationRowComponent } from './operationRow.component';
|
import { OperationRowComponent } from './operationRow.component';
|
||||||
import { CategoryService } from './category.service';
|
import { CategoryService } from './category.service';
|
||||||
import { OperationService } from './operation.service';
|
import { OperationService } from './operation.service';
|
||||||
|
import { OperationController } from './operation.controller';
|
||||||
|
|
||||||
export function $modalServiceFactory(i: any) {
|
export function $modalServiceFactory(i: any) {
|
||||||
return i.get('$modal');
|
return i.get('$modal');
|
||||||
@ -47,11 +48,13 @@ export function accountIdServiceFactory(i: any) {
|
|||||||
BalanceChartComponent,
|
BalanceChartComponent,
|
||||||
CategoryChartComponent,
|
CategoryChartComponent,
|
||||||
OperationRowComponent,
|
OperationRowComponent,
|
||||||
|
OperationController,
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
BalanceChartComponent,
|
BalanceChartComponent,
|
||||||
CategoryChartComponent,
|
CategoryChartComponent,
|
||||||
OperationRowComponent,
|
OperationRowComponent,
|
||||||
|
OperationController,
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class OperationModule {}
|
export class OperationModule {}
|
||||||
|
@ -1,11 +1,7 @@
|
|||||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||||
|
|
||||||
var operationsTmpl = require('./operations.html');
|
|
||||||
|
|
||||||
export const OperationListState = {
|
export const OperationListState = {
|
||||||
name: 'operations',
|
name: 'operations',
|
||||||
url: '/account/:accountId/operations',
|
url: '/account/:accountId/operations',
|
||||||
templateUrl: operationsTmpl,
|
component: 'operationListComponent'
|
||||||
controller: 'OperationController',
|
|
||||||
controllerAs: 'operationsCtrl'
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user