Externalize operation row template.
This commit is contained in:
parent
2ea1b38454
commit
6efe5a897c
51
src/operations/operationRow.component.html
Normal file
51
src/operations/operationRow.component.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!-- vim: set tw=80 ts=2 sw=2 sts=2 : -->
|
||||||
|
<td>{{ operation.id }}</td>
|
||||||
|
|
||||||
|
<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
|
||||||
|
|
||||||
|
<td>{{ operation.label }}</td>
|
||||||
|
|
||||||
|
<td>{{ operation.value | currency:'EUR':'symbol' }}</td>
|
||||||
|
|
||||||
|
<td [class.text-warning]="operation.balance < 0"
|
||||||
|
[class.text-danger]="operation.balance < account.authorized_overdraft">
|
||||||
|
{{ operation.balance | currency:'EUR':'symbol' }}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>{{ operation.category }}</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<!-- Edit operation, for non-canceled operation. -->
|
||||||
|
<a class="btn btn-success"
|
||||||
|
*ngIf="!operation.canceled"
|
||||||
|
[routerLink]="[operation.id, 'edit']"
|
||||||
|
title="edit">
|
||||||
|
<span class="fa fa-pencil-square-o"></span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 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>
|
@ -21,58 +21,7 @@ import { OperationDeleteModalComponent } from './operationDeleteModal.component'
|
|||||||
"[class.warning]": "operation.balance < 0",
|
"[class.warning]": "operation.balance < 0",
|
||||||
"[class.danger]": "operation.balance < account.authorized_overdraft"
|
"[class.danger]": "operation.balance < account.authorized_overdraft"
|
||||||
},
|
},
|
||||||
template: `
|
templateUrl: './operationRow.component.html'
|
||||||
<td>{{ operation.id }}</td>
|
|
||||||
|
|
||||||
<td>{{ operation.operation_date | date:"yyyy-MM-dd" }}</td>
|
|
||||||
|
|
||||||
<td>{{ operation.label }}</td>
|
|
||||||
|
|
||||||
<td>{{ operation.value | currency:'EUR':'symbol' }}</td>
|
|
||||||
|
|
||||||
<td [class.text-warning]="operation.balance < 0"
|
|
||||||
[class.text-danger]="operation.balance < account.authorized_overdraft">
|
|
||||||
{{ operation.balance | currency:'EUR':'symbol' }}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>{{ operation.category }}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="btn-group btn-group-sm">
|
|
||||||
<!-- Edit operation, for non-canceled operation. -->
|
|
||||||
<a class="btn btn-success"
|
|
||||||
*ngIf="!operation.canceled"
|
|
||||||
[routerLink]="[operation.id, 'edit']"
|
|
||||||
title="edit">
|
|
||||||
<span class="fa fa-pencil-square-o"></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- 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 {
|
export class OperationRowComponent {
|
||||||
@Input('operation-row') operation: Operation = new Operation();
|
@Input('operation-row') operation: Operation = new Operation();
|
||||||
|
Loading…
Reference in New Issue
Block a user