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({
|
||||
selector: 'account-delete-modal',
|
||||
template: `
|
||||
<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>
|
||||
`
|
||||
templateUrl: './accountDeleteModal.component.html'
|
||||
})
|
||||
export class AccountDeleteModalComponent {
|
||||
@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({
|
||||
selector: 'account-edit-modal',
|
||||
template: `
|
||||
<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>
|
||||
`
|
||||
templateUrl: './accountEditModal.component.html'
|
||||
})
|
||||
export class AccountEditModalComponent {
|
||||
@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({
|
||||
selector: 'account-form',
|
||||
exportAs: 'accountForm',
|
||||
template: `
|
||||
<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>
|
||||
`
|
||||
templateUrl: './accountForm.component.html'
|
||||
})
|
||||
export class AccountFormComponent implements OnInit {
|
||||
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({
|
||||
selector: 'account-list',
|
||||
template: `
|
||||
<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>
|
||||
`,
|
||||
templateUrl: './accountList.component.html',
|
||||
})
|
||||
export class AccountListComponent implements OnInit {
|
||||
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.danger]": "danger"
|
||||
},
|
||||
template: `
|
||||
<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>
|
||||
`
|
||||
templateUrl: './accountRow.component.html'
|
||||
})
|
||||
export class AccountRowComponent implements OnInit {
|
||||
@Input('account-row') account: Account;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user