From 0e001cf680e583ce6d37cd52254ccf9363792d31 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <alexis@lahouze.org>
Date: Thu, 14 Jun 2018 11:22:07 +0200
Subject: [PATCH] Externalize operation edit template.

---
 src/operations/operationEdit.component.html | 79 ++++++++++++++++++++
 src/operations/operationEdit.component.ts   | 81 +--------------------
 2 files changed, 80 insertions(+), 80 deletions(-)
 create mode 100644 src/operations/operationEdit.component.html

diff --git a/src/operations/operationEdit.component.html b/src/operations/operationEdit.component.html
new file mode 100644
index 0000000..1eed38f
--- /dev/null
+++ b/src/operations/operationEdit.component.html
@@ -0,0 +1,79 @@
+<!-- vim: set tw=80 ts=2 sw=2 sts=2 :-->
+<div>
+  <div class="row">
+    <form novalidate (keyup.enter)="submit()" #form="ngForm">
+      <div class="form-group">
+        <label for="operation-date">Date</label>
+
+        <input class="form-control"
+          [class.has-danger]="operationDate.errors"
+          id="operation-date" name="operationDate"
+          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
+          [textMask]="{mask: dateMask}"
+          placeholder="Operation date" required>
+
+        <div class="help-block text-danger" *ngIf="operationDate.errors">
+          <small class="form-text" *ngIf="operationDate.errors.required">
+            The operation date is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="label">Label</label>
+
+        <input class="form-control"
+          [class.has-danger]="label.errors"
+          id="label" name="label"
+          [(ngModel)]="operation.label" #label="ngModel"
+          placeholder="Label" required>
+
+        <div class="help-block text-danger" *ngIf="label.errors">
+          <small class="form-text" *ngIf="label.errors.required">
+            The operation label is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="value">Montant</label>
+
+        <input class="form-control"
+          [class.has-errors]="value.errors"
+          id="value" name="value"
+          [(ngModel)]="operation.value" #value="ngModel"
+          type="number" placeholder="Value" required>
+
+        <div class="help-block text-danger" *ngIf="value.errors">
+          <small class="form-text" *ngIf="value.errors.required">
+            The operation value is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="category">Catégorie</label>
+
+        <input class="form-control"
+          [class.has-errors]="category.errors"
+          id="category" name="category"
+          [(ngModel)]="operation.category" #category="ngModel"
+          placeholder="Category" required>
+
+        <div class="help-block text-danger" *ngIf="category.errors">
+          <small class="form-text" *ngIf="category.errors.required">
+            The operation category is required.
+          </small>
+        </div>
+      </div>
+
+      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
+        Save
+      </button>
+
+      <button class="btn btn-default" (click)="cancel()">
+        Cancel
+      </button>
+    </form>
+  </div>
+</div>
diff --git a/src/operations/operationEdit.component.ts b/src/operations/operationEdit.component.ts
index d47413c..5e19d8a 100644
--- a/src/operations/operationEdit.component.ts
+++ b/src/operations/operationEdit.component.ts
@@ -12,86 +12,7 @@ import { OperationService } from './operation.service';
 
 @Component({
   selector: 'operation-edit',
-  template: `
-<div>
-  <div class="row">
-    <form novalidate (keyup.enter)="submit()" #form="ngForm">
-      <div class="form-group">
-        <label for="operation-date">Date</label>
-
-        <input class="form-control"
-          [class.has-danger]="operationDate.errors"
-          id="operation-date" name="operationDate"
-          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
-          [textMask]="{mask: dateMask}"
-          placeholder="Operation date" required>
-
-        <div class="help-block text-danger" *ngIf="operationDate.errors">
-          <small class="form-text" *ngIf="operationDate.errors.required">
-            The operation date is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="label">Label</label>
-
-        <input class="form-control"
-          [class.has-danger]="label.errors"
-          id="label" name="label"
-          [(ngModel)]="operation.label" #label="ngModel"
-          placeholder="Label" required>
-
-        <div class="help-block text-danger" *ngIf="label.errors">
-          <small class="form-text" *ngIf="label.errors.required">
-            The operation label is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="value">Montant</label>
-
-        <input class="form-control"
-          [class.has-errors]="value.errors"
-          id="value" name="value"
-          [(ngModel)]="operation.value" #value="ngModel"
-          type="number" placeholder="Value" required>
-
-        <div class="help-block text-danger" *ngIf="value.errors">
-          <small class="form-text" *ngIf="value.errors.required">
-            The operation value is required.
-          </small>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="category">Catégorie</label>
-
-        <input class="form-control"
-          [class.has-errors]="category.errors"
-          id="category" name="category"
-          [(ngModel)]="operation.category" #category="ngModel"
-          placeholder="Category" required>
-
-        <div class="help-block text-danger" *ngIf="category.errors">
-          <small class="form-text" *ngIf="category.errors.required">
-            The operation category is required.
-          </small>
-        </div>
-      </div>
-
-      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
-        Save
-      </button>
-
-      <button class="btn btn-default" (click)="cancel()">
-        Cancel
-      </button>
-    </form>
-  </div>
-</div>
-  `
+  templateUrl: './operationEdit.component.html'
 })
 export class OperationEditComponent {
   public operation = new Operation();