From 408a1e71b7bef1b40cbc12973f367a5b1f196b21 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sun, 10 Jun 2018 00:13:32 +0200 Subject: [PATCH] Externalize HTML templates in separate files. --- .../accountDeleteModal.component.html | 20 ++++++++ src/accounts/accountDeleteModal.component.ts | 23 +-------- src/accounts/accountEditModal.component.html | 17 +++++++ src/accounts/accountEditModal.component.ts | 20 +------- src/accounts/accountForm.component.html | 47 ++++++++++++++++++ src/accounts/accountForm.component.ts | 49 +------------------ src/accounts/accountList.component.html | 27 ++++++++++ src/accounts/accountList.component.ts | 30 +----------- src/accounts/accountRow.component.html | 41 ++++++++++++++++ src/accounts/accountRow.component.ts | 43 +--------------- 10 files changed, 157 insertions(+), 160 deletions(-) create mode 100644 src/accounts/accountDeleteModal.component.html create mode 100644 src/accounts/accountEditModal.component.html create mode 100644 src/accounts/accountForm.component.html create mode 100644 src/accounts/accountList.component.html create mode 100644 src/accounts/accountRow.component.html diff --git a/src/accounts/accountDeleteModal.component.html b/src/accounts/accountDeleteModal.component.html new file mode 100644 index 0000000..1eb958f --- /dev/null +++ b/src/accounts/accountDeleteModal.component.html @@ -0,0 +1,20 @@ +
+ +
+ +
+

+ Do you really want to delete account #{{ account.id }} with name:
+ {{ account.name }} +

+
+ +
+ + + +
diff --git a/src/accounts/accountDeleteModal.component.ts b/src/accounts/accountDeleteModal.component.ts index 0f375fa..5aa5e1d 100644 --- a/src/accounts/accountDeleteModal.component.ts +++ b/src/accounts/accountDeleteModal.component.ts @@ -7,28 +7,7 @@ import { Account } from './account'; @Component({ selector: 'account-delete-modal', - template: ` -
- -
- -
-

- Do you really want to delete account #{{ account.id }} with name:
- {{ account.name }} -

-
- -
- - - -
- ` + templateUrl: './accountDeleteModal.component.html' }) export class AccountDeleteModalComponent { @Input() account: Account diff --git a/src/accounts/accountEditModal.component.html b/src/accounts/accountEditModal.component.html new file mode 100644 index 0000000..2f427be --- /dev/null +++ b/src/accounts/accountEditModal.component.html @@ -0,0 +1,17 @@ +
+ +
+ +
+ +
+ +
+ + + +
diff --git a/src/accounts/accountEditModal.component.ts b/src/accounts/accountEditModal.component.ts index ae859bd..6d9dbed 100644 --- a/src/accounts/accountEditModal.component.ts +++ b/src/accounts/accountEditModal.component.ts @@ -8,25 +8,7 @@ import { AccountFormComponent } from './accountForm.component'; @Component({ selector: 'account-edit-modal', - template: ` -
- -
- -
- -
- -
- - - -
- ` + templateUrl: './accountEditModal.component.html' }) export class AccountEditModalComponent { @Input() account: Account; diff --git a/src/accounts/accountForm.component.html b/src/accounts/accountForm.component.html new file mode 100644 index 0000000..fef5647 --- /dev/null +++ b/src/accounts/accountForm.component.html @@ -0,0 +1,47 @@ +
+
+ + +
+ + +
+

The account name is required.

+
+
+
+ +
+ + +
+
+ + +
.00€
+
+ +
+

+ The authorized overdraft is required. +

+ +

+ The authorized overdraft must be less than or equal to 0. +

+
+
+
+
+ diff --git a/src/accounts/accountForm.component.ts b/src/accounts/accountForm.component.ts index c0b6e5a..1770827 100644 --- a/src/accounts/accountForm.component.ts +++ b/src/accounts/accountForm.component.ts @@ -7,54 +7,7 @@ import { Account } from './account'; @Component({ selector: 'account-form', exportAs: 'accountForm', - template: ` -
-
- - -
- - -
-

The account name is required.

-
-
-
- -
- - -
-
- - -
.00€
-
- -
-

- The authorized overdraft is required. -

- -

- The authorized overdraft must be less than or equal to 0. -

-
-
-
-
- ` + templateUrl: './accountForm.component.html' }) export class AccountFormComponent implements OnInit { public form: FormGroup; diff --git a/src/accounts/accountList.component.html b/src/accounts/accountList.component.html new file mode 100644 index 0000000..285f34c --- /dev/null +++ b/src/accounts/accountList.component.html @@ -0,0 +1,27 @@ +
+ + + + + + + + + + + + + + + + + + + +
Nom du compteSolde courantSolde pointéDécouvert autoriséActions
+ +
+
diff --git a/src/accounts/accountList.component.ts b/src/accounts/accountList.component.ts index a9d48c8..c66c43a 100644 --- a/src/accounts/accountList.component.ts +++ b/src/accounts/accountList.component.ts @@ -13,35 +13,7 @@ import { AccountEditModalComponent } from './accountEditModal.component'; @Component({ selector: 'account-list', - template: ` -
- - - - - - - - - - - - - - - - - - - -
Nom du compteSolde courantSolde pointéDécouvert autoriséActions
- -
-
- `, + templateUrl: './accountList.component.html', }) export class AccountListComponent implements OnInit { accounts: Account[]; diff --git a/src/accounts/accountRow.component.html b/src/accounts/accountRow.component.html new file mode 100644 index 0000000..05053ef --- /dev/null +++ b/src/accounts/accountRow.component.html @@ -0,0 +1,41 @@ + + {{ account.name }} + + + + + {{ accountBalances?.current | currency:'EUR':'symbol' }} + + + + + + {{ accountBalances?.pointed | currency:'EUR':'symbol' }} + + + +{{ account.authorized_overdraft | currency:'EUR':'symbol' }} + + +
+ + + + + + + + + + +
+ + diff --git a/src/accounts/accountRow.component.ts b/src/accounts/accountRow.component.ts index 5303841..d60da25 100644 --- a/src/accounts/accountRow.component.ts +++ b/src/accounts/accountRow.component.ts @@ -20,48 +20,7 @@ import { AccountEditModalComponent } from './accountEditModal.component'; "[class.warning]": "warning", "[class.danger]": "danger" }, - template: ` - - {{ account.name }} - - - - - {{ accountBalances?.current | currency:'EUR':'symbol' }} - - - - - - {{ accountBalances?.pointed | currency:'EUR':'symbol' }} - - - -{{ account.authorized_overdraft | currency:'EUR':'symbol' }} - - -
- - - - - - - - - - -
- - ` + templateUrl: './accountRow.component.html' }) export class AccountRowComponent implements OnInit { @Input('account-row') account: Account;