From b5e4b1cd087244775d6e93cbffe484782ee9de9b Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sun, 30 Jul 2017 15:22:25 +0200
Subject: [PATCH] Add Operation Delete Modal component.

---
 src/operations/operation.module.ts            |  3 ++
 .../operationDeleteModal.component.ts         | 45 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/operations/operationDeleteModal.component.ts

diff --git a/src/operations/operation.module.ts b/src/operations/operation.module.ts
index 2aa005c..834f3f1 100644
--- a/src/operations/operation.module.ts
+++ b/src/operations/operation.module.ts
@@ -14,6 +14,7 @@ import { OperationRowComponent } from './operationRow.component';
 import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
 import { OperationListComponent } from './operationList.component';
+import { OperationDeleteModalComponent } from './operationDeleteModal.component';
 
 export function $modalServiceFactory(i: any) {
   return i.get('$modal');
@@ -49,12 +50,14 @@ export function accountIdServiceFactory(i: any) {
     CategoryChartComponent,
     OperationRowComponent,
     OperationListComponent,
+    OperationDeleteModalComponent,
   ],
   entryComponents: [
     BalanceChartComponent,
     CategoryChartComponent,
     OperationRowComponent,
     OperationListComponent,
+    OperationDeleteModalComponent,
   ]
 })
 export class OperationModule {}
diff --git a/src/operations/operationDeleteModal.component.ts b/src/operations/operationDeleteModal.component.ts
new file mode 100644
index 0000000..f3f9570
--- /dev/null
+++ b/src/operations/operationDeleteModal.component.ts
@@ -0,0 +1,45 @@
+// vim: set tw=80 ts=2 sw=2 sts=2:
+import { Component, Input } from '@angular/core';
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Operation } from './operation';
+
+@Component({
+  selector: 'operation-delete-modal',
+  template: `
+    <div class="modal-header">
+      <h3 class="modal-title" id="modal-title">Delete Operation #{{ operation.id }}</h3>
+    </div>
+
+    <div class="modal-body" id="modal-body">
+      <p>
+      Do you really want to delete operation #{{ operation.id }} with label:<br/>
+      {{ operation.label }}
+      </p>
+    </div>
+
+    <div class="modal-footer">
+      <button class="btn btn-danger" (click)="submit()">
+        Yes
+      </button>
+
+      <button class="btn btn-default" (click)="cancel()">
+        No
+      </button>
+    </div>
+  `
+})
+export class OperationDeleteModalComponent {
+  @Input() operation: Operation
+
+  constructor(private activeModal: NgbActiveModal) {}
+
+  submit(): void {
+    this.activeModal.close(this.operation);
+  }
+
+  cancel(): void {
+    this.activeModal.dismiss("closed");
+  }
+}