Externalize HTML templates in separate files.
This commit is contained in:
parent
11d73abae4
commit
408a1e71b7
20
src/accounts/accountDeleteModal.component.html
Normal file
20
src/accounts/accountDeleteModal.component.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body" id="modal-body">
|
||||||
|
<p>
|
||||||
|
Do you really want to delete account #{{ account.id }} with name:<br/>
|
||||||
|
{{ account.name }}
|
||||||
|
</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>
|
||||||
@ -7,28 +7,7 @@ import { Account } from './account';
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'account-delete-modal',
|
selector: 'account-delete-modal',
|
||||||
template: `
|
templateUrl: './accountDeleteModal.component.html'
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body" id="modal-body">
|
|
||||||
<p>
|
|
||||||
Do you really want to delete account #{{ account.id }} with name:<br/>
|
|
||||||
{{ account.name }}
|
|
||||||
</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 AccountDeleteModalComponent {
|
export class AccountDeleteModalComponent {
|
||||||
@Input() account: Account
|
@Input() account: Account
|
||||||
|
|||||||
17
src/accounts/accountEditModal.component.html
Normal file
17
src/accounts/accountEditModal.component.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<div class="modal-header">
|
||||||
|
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body" id="modal-body">
|
||||||
|
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-default" (click)="cancel()">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@ -8,25 +8,7 @@ import { AccountFormComponent } from './accountForm.component';
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'account-edit-modal',
|
selector: 'account-edit-modal',
|
||||||
template: `
|
templateUrl: './accountEditModal.component.html'
|
||||||
<div class="modal-header">
|
|
||||||
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-body" id="modal-body">
|
|
||||||
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="btn btn-default" (click)="cancel()">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
})
|
})
|
||||||
export class AccountEditModalComponent {
|
export class AccountEditModalComponent {
|
||||||
@Input() account: Account;
|
@Input() account: Account;
|
||||||
|
|||||||
47
src/accounts/accountForm.component.html
Normal file
47
src/accounts/accountForm.component.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<form novalidate
|
||||||
|
(keyup.enter)="submit()" [formGroup]="form">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-4 control-label" for="name">
|
||||||
|
Account name
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="col-sm-8"
|
||||||
|
[class.has-danger]="name.errors">
|
||||||
|
<input class="form-control"
|
||||||
|
id="name" formControlName="name"
|
||||||
|
placeholder="Account name">
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="name.errors">
|
||||||
|
<p *ngIf="name.errors.required">The account name is required.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-sm-4 control-label" for="authorized-overdraft">
|
||||||
|
Authorized overdraft
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="col-sm-8"
|
||||||
|
[class.has-danger]="authorizedOverdraft.errors">
|
||||||
|
<div class="input-group">
|
||||||
|
<input class="form-control"
|
||||||
|
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
||||||
|
placeholder="Authorized overdraft">
|
||||||
|
|
||||||
|
<div class="input-group-addon">.00€</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
||||||
|
<p *ngIf="authorizedOverdraft.errors.required">
|
||||||
|
The authorized overdraft is required.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p *ngIf="authorizedOverdraft.errors.max">
|
||||||
|
The authorized overdraft must be less than or equal to 0.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
@ -7,54 +7,7 @@ import { Account } from './account';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'account-form',
|
selector: 'account-form',
|
||||||
exportAs: 'accountForm',
|
exportAs: 'accountForm',
|
||||||
template: `
|
templateUrl: './accountForm.component.html'
|
||||||
<form novalidate
|
|
||||||
(keyup.enter)="submit()" [formGroup]="form">
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-sm-4 control-label" for="name">
|
|
||||||
Account name
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="col-sm-8"
|
|
||||||
[class.has-danger]="name.errors">
|
|
||||||
<input class="form-control"
|
|
||||||
id="name" formControlName="name"
|
|
||||||
placeholder="Account name">
|
|
||||||
|
|
||||||
<div class="help-block text-danger" *ngIf="name.errors">
|
|
||||||
<p *ngIf="name.errors.required">The account name is required.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-sm-4 control-label" for="authorized-overdraft">
|
|
||||||
Authorized overdraft
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="col-sm-8"
|
|
||||||
[class.has-danger]="authorizedOverdraft.errors">
|
|
||||||
<div class="input-group">
|
|
||||||
<input class="form-control"
|
|
||||||
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
|
||||||
placeholder="Authorized overdraft">
|
|
||||||
|
|
||||||
<div class="input-group-addon">.00€</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
|
||||||
<p *ngIf="authorizedOverdraft.errors.required">
|
|
||||||
The authorized overdraft is required.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p *ngIf="authorizedOverdraft.errors.max">
|
|
||||||
The authorized overdraft must be less than or equal to 0.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`
|
|
||||||
})
|
})
|
||||||
export class AccountFormComponent implements OnInit {
|
export class AccountFormComponent implements OnInit {
|
||||||
public form: FormGroup;
|
public form: FormGroup;
|
||||||
|
|||||||
27
src/accounts/accountList.component.html
Normal file
27
src/accounts/accountList.component.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<div class="row">
|
||||||
|
<table class="table table-sm table-striped table-condensed table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Nom du compte</th>
|
||||||
|
<th>Solde courant</th>
|
||||||
|
<th>Solde pointé</th>
|
||||||
|
<th>Découvert autorisé</th>
|
||||||
|
<th>Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">
|
||||||
|
<button class="btn btn-success" (click)="add()">
|
||||||
|
Ajouter
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr *ngFor="let account of accounts"
|
||||||
|
[account-row]="account" (needsReload)="load()">
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
@ -13,35 +13,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'account-list',
|
selector: 'account-list',
|
||||||
template: `
|
templateUrl: './accountList.component.html',
|
||||||
<div class="row">
|
|
||||||
<table class="table table-sm table-striped table-condensed table-hover">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Nom du compte</th>
|
|
||||||
<th>Solde courant</th>
|
|
||||||
<th>Solde pointé</th>
|
|
||||||
<th>Découvert autorisé</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td colspan="5">
|
|
||||||
<button class="btn btn-success" (click)="add()">
|
|
||||||
Ajouter
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr *ngFor="let account of accounts"
|
|
||||||
[account-row]="account" (needsReload)="load()">
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
})
|
})
|
||||||
export class AccountListComponent implements OnInit {
|
export class AccountListComponent implements OnInit {
|
||||||
accounts: Account[];
|
accounts: Account[];
|
||||||
|
|||||||
41
src/accounts/accountRow.component.html
Normal file
41
src/accounts/accountRow.component.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<td>
|
||||||
|
<a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<span (ngClass)="valueClass(accountBalances?.current)">
|
||||||
|
{{ accountBalances?.current | currency:'EUR':'symbol' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<span (ngClass)="valueClass(accountBalances?.pointed)">
|
||||||
|
{{ accountBalances?.pointed | currency:'EUR':'symbol' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>{{ account.authorized_overdraft | currency:'EUR':'symbol' }}</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<!-- Edit account. -->
|
||||||
|
<button type="button" class="btn btn-success"
|
||||||
|
(click)="modify()">
|
||||||
|
<span class="fa fa-pencil-square-o"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Delete account, with confirm. -->
|
||||||
|
<button type="button" class="btn btn-danger"
|
||||||
|
(click)="confirmDelete()">
|
||||||
|
<span class="fa fa-trash-o"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Open account scheduler. -->
|
||||||
|
<a class="btn btn-secondary"
|
||||||
|
[hidden]="!account.id"
|
||||||
|
[routerLink]="['/account', account.id, 'scheduler']">
|
||||||
|
<span class="fa fa-clock-o"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
@ -20,48 +20,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
|
|||||||
"[class.warning]": "warning",
|
"[class.warning]": "warning",
|
||||||
"[class.danger]": "danger"
|
"[class.danger]": "danger"
|
||||||
},
|
},
|
||||||
template: `
|
templateUrl: './accountRow.component.html'
|
||||||
<td>
|
|
||||||
<a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span (ngClass)="valueClass(accountBalances?.current)">
|
|
||||||
{{ accountBalances?.current | currency:'EUR':'symbol' }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<span (ngClass)="valueClass(accountBalances?.pointed)">
|
|
||||||
{{ accountBalances?.pointed | currency:'EUR':'symbol' }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>{{ account.authorized_overdraft | currency:'EUR':'symbol' }}</td>
|
|
||||||
|
|
||||||
<td>
|
|
||||||
<div class="btn-group btn-group-sm">
|
|
||||||
<!-- Edit account. -->
|
|
||||||
<button type="button" class="btn btn-success"
|
|
||||||
(click)="modify()">
|
|
||||||
<span class="fa fa-pencil-square-o"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Delete account, with confirm. -->
|
|
||||||
<button type="button" class="btn btn-secondary"
|
|
||||||
(click)="confirmDelete()">
|
|
||||||
<span class="fa fa-trash-o"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Open account scheduler. -->
|
|
||||||
<a class="btn btn-secondary"
|
|
||||||
[hidden]="!account.id"
|
|
||||||
[routerLink]="['/account', account.id, 'scheduler']">
|
|
||||||
<span class="fa fa-clock-o"></span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
`
|
|
||||||
})
|
})
|
||||||
export class AccountRowComponent implements OnInit {
|
export class AccountRowComponent implements OnInit {
|
||||||
@Input('account-row') account: Account;
|
@Input('account-row') account: Account;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user