accountant-ui/src/operations/operationRow.component.ts
2017-07-30 15:36:57 +02:00

166 lines
4.7 KiB
TypeScript

// 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 { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
var operationFormTmpl = require('./operation.form.tmpl.html');
import { Account } from '../accounts/account';
import { Operation } from './operation';
import { OperationService } from './operation.service';
import { OperationDeleteModalComponent } from './operationDeleteModal.component';
@Component({
selector: 'tr[operation-row]',
host: {
"[id]": "operation.id",
"[class.stroke]": "operation.canceled",
"[class.italic]": "!operation.confirmed",
"[class.warning]": "operation.balance < 0",
"[class.danger]": "operation.balance < account.authorized_overdraft"
},
template: `
<td>{{ operation.id }}</td>
<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
<td>{{ operation.label }}</td>
<td>{{ operation.value | currency:'EUR':true }}</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"
*ngIf="!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"
*ngIf="!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)"
*ngIf="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)"
*ngIf="operation.id && !operation.scheduled_operation_id">
<span class="fa fa-trash-o"></span>
</button>
</div>
</td>
`
})
export class OperationRowComponent {
@Input('operation-row') operation: Operation;
@Input() account: Account;
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
constructor(
private operationService: OperationService,
private toastrService: ToastrService,
private modal: NgbModal,
@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) {
operation.confirmed = true;
return this.operationService.update(operation).subscribe((operation) => {
this.toastrService.success('Operation #' + operation.id + ' saved.');
this.needsReload.emit();
}, (result) => {
this.toastrService.error(
'Error while saving operation: ' + result.message
);
});
}
confirmDelete(operation) {
const modal = this.modal.open(OperationDeleteModalComponent);
modal.componentInstance.operation = this.operation;
var id = operation.id;
modal.result.then((operation: Operation) => {
this.delete(operation);
}, (reason) => {
})
};
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);
}
}
});
};
}