Add Operation Row component.
This commit is contained in:
parent
2fdce22698
commit
558988a57a
@ -10,6 +10,7 @@ import { RestangularModule } from 'ngx-restangular';
|
||||
|
||||
import { BalanceChartComponent } from './balanceChart.component';
|
||||
import { CategoryChartComponent } from './categoryChart.component';
|
||||
import { OperationRowComponent } from './operationRow.component';
|
||||
import { CategoryService } from './category.service';
|
||||
import { OperationService } from './operation.service';
|
||||
|
||||
@ -45,10 +46,12 @@ export function accountIdServiceFactory(i: any) {
|
||||
declarations: [
|
||||
BalanceChartComponent,
|
||||
CategoryChartComponent,
|
||||
OperationRowComponent,
|
||||
],
|
||||
entryComponents: [
|
||||
BalanceChartComponent,
|
||||
CategoryChartComponent,
|
||||
OperationRowComponent,
|
||||
]
|
||||
})
|
||||
export class OperationModule {}
|
||||
|
169
src/operations/operationRow.component.ts
Normal file
169
src/operations/operationRow.component.ts
Normal file
@ -0,0 +1,169 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
import { CurrencyPipe } from '@angular/common';
|
||||
import { Component, Inject, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
var operationFormTmpl = require('./operation.form.tmpl.html'),
|
||||
operationDeleteTmpl = require('./operation.delete.tmpl.html');
|
||||
|
||||
import { Account } from '../accounts/account';
|
||||
import { Operation } from './operation';
|
||||
import { OperationService } from './operation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'tr[operation-row]',
|
||||
host: {
|
||||
"[id]": "operation.id",
|
||||
"[class.stroke]": "operation.canceled",
|
||||
"[class.italic]": "!operation.confirmed",
|
||||
"[class.warning]": "operation.balance < 0, danger: operation.balance < operationsCtrl.account.authorized_overdraft"
|
||||
},
|
||||
template: `
|
||||
<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
|
||||
|
||||
<td>{{ operation.label }}</td>
|
||||
|
||||
<td>{{ operation.value | currency:'EUR':yes }}</td>
|
||||
|
||||
<td [class.text-warning]="operation.balance < 0"
|
||||
[class.text-danger]="operation.balance < account.authorized_overdraft">
|
||||
{{ operation.balance | currency:'EUR':true }}
|
||||
</td>
|
||||
|
||||
<td>{{ operation.category }}</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<!-- Edit operation, for non-canceled operation. -->
|
||||
<button type="button" class="btn btn-success"
|
||||
[hidden]="operation.canceled"
|
||||
(click)="modify(operation)" title="edit">
|
||||
<span class="fa fa-pencil-square-o"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle pointed operation, for non-canceled operations. -->
|
||||
<button type="button" class="btn btn-secondary"
|
||||
[hidden]="operation.canceled"
|
||||
(click)="togglePointed(operation)"
|
||||
[class.active]="operation.pointed" title="point">
|
||||
<span class="fa" [class.fa-check-square-o]="operation.pointed"
|
||||
[class.fa-square-o]="!operation.pointed"></span>
|
||||
</button>
|
||||
|
||||
<!-- Toggle canceled operation. -->
|
||||
<button type="button" class="btn btn-warning"
|
||||
(click)="toggleCanceled(operation)"
|
||||
[hidden]="!operation.scheduled_operation_id"
|
||||
[class.active]="operation.canceled" title="cancel">
|
||||
<span class="fa fa-remove"></span>
|
||||
</button>
|
||||
|
||||
<!-- Delete operation, with confirm. -->
|
||||
<button type="button" class="btn btn-danger"
|
||||
(click)="confirmDelete(operation)">
|
||||
[hidden]="!operation.id || operation.scheduled_operation_id"
|
||||
<span class="fa fa-trash-o"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
`
|
||||
})
|
||||
export class OperationRowComponent {
|
||||
@Input() operation: Operation;
|
||||
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
|
||||
|
||||
constructor(
|
||||
private operationService: OperationService,
|
||||
private toastrService: ToastrService,
|
||||
@Inject('$modal') private $modal,
|
||||
) {}
|
||||
|
||||
togglePointed(operation, rowform) {
|
||||
operation.pointed = !operation.pointed;
|
||||
|
||||
this.save(operation);
|
||||
};
|
||||
|
||||
toggleCanceled(operation) {
|
||||
operation.canceled = !operation.canceled;
|
||||
|
||||
this.save(operation);
|
||||
};
|
||||
|
||||
save(operation) {
|
||||
return this.operationService.update(operation).subscribe((operation) => {
|
||||
operation.confirmed = true;
|
||||
|
||||
this.toastrService.success('Operation #' + operation.id + ' saved.');
|
||||
|
||||
this.needsReload.emit();
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'Error while saving operation: ' + result.message
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
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.needsReload.emit();
|
||||
}, (result) => {
|
||||
this.toastrService.error(
|
||||
'An error occurred while trying to delete operation #' +
|
||||
id + ':<br />' + result
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
modify(operation) {
|
||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||
var title = "Modify operation #" + operation.id;
|
||||
|
||||
this.$modal({
|
||||
templateUrl: operationFormTmpl,
|
||||
controller: function($scope, title, operation, $save) {
|
||||
$scope.title = title;
|
||||
$scope.operation = operation;
|
||||
$scope.$save = () => {
|
||||
$scope.$hide();
|
||||
$save($scope.operation);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
operation: operation,
|
||||
$save: (operation: Operation) => {
|
||||
this.save(operation);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue
Block a user