Use ng-bootstrap Modal.
This commit is contained in:
Alexis Lahouze
parent
3e6b1ecccc
commit
4057705e22
@ -1,17 +1,16 @@
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
|
||||
var accountFormTmpl = require('./account.form.tmpl.html'),
|
||||
accountDeleteTmpl = require('./account.delete.tmpl.html');
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
import { AccountBalances } from './accountBalances';
|
||||
import { AccountService } from './account.service';
|
||||
import { AccountBalancesService } from './accountBalances.service';
|
||||
|
||||
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
export class AccountComponent {
|
||||
static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', '$modal'];
|
||||
static $inject = ['AccountService', 'AccountBalancesService', 'Notification', 'Logger', 'NgbModal'];
|
||||
|
||||
accounts: Account[];
|
||||
|
||||
@ -20,7 +19,7 @@ export class AccountComponent {
|
||||
private AccountBalancesService: AccountBalancesService,
|
||||
private Notification,
|
||||
private Logger: Logger,
|
||||
private $modal
|
||||
private NgbModal: NgbModal
|
||||
) {
|
||||
// Load accounts.
|
||||
this.load();
|
||||
@ -107,23 +106,14 @@ export class AccountComponent {
|
||||
};
|
||||
|
||||
confirmDelete(account) {
|
||||
var title = "Delete account #" + account.id;
|
||||
const modal = this.NgbModal.open(AccountDeleteModalComponent, {
|
||||
windowClass: 'in'
|
||||
});
|
||||
|
||||
this.$modal({
|
||||
templateUrl: accountDeleteTmpl,
|
||||
controller: function($scope, title, account, $delete) {
|
||||
$scope.title = title;
|
||||
$scope.account = account;
|
||||
$scope.$delete = function() {
|
||||
$scope.$hide();
|
||||
$delete($scope.account);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
account: account,
|
||||
$delete: (account: Account) => { this.delete(account); }
|
||||
}
|
||||
modal.componentInstance.account = account;
|
||||
|
||||
modal.result.then((account: Account) => {
|
||||
this.delete(account);
|
||||
});
|
||||
};
|
||||
|
||||
@ -151,30 +141,15 @@ export class AccountComponent {
|
||||
* Open the popup to modify the account, save it on confirm.
|
||||
*/
|
||||
modify(account) {
|
||||
// FIXME Alexis Lahouze 2017-06-15 i18n
|
||||
var title = "Account";
|
||||
const modal = this.NgbModal.open(AccountEditModalComponent, {
|
||||
windowClass: 'in'
|
||||
});
|
||||
|
||||
if (account.id) {
|
||||
title = title + " #" + account.id;
|
||||
}
|
||||
modal.componentInstance.account = account;
|
||||
|
||||
this.$modal({
|
||||
templateUrl: accountFormTmpl,
|
||||
controller: function($scope, title, account, $save) {
|
||||
$scope.title = title;
|
||||
$scope.account = account;
|
||||
$scope.account.authorized_overdraft *= -1;
|
||||
$scope.$save = function() {
|
||||
$scope.$hide();
|
||||
$scope.account.authorized_overdraft *= -1;
|
||||
$save($scope.account);
|
||||
};
|
||||
},
|
||||
locals: {
|
||||
title: title,
|
||||
account: account,
|
||||
$save: (account: Account) => { this.save(account); }
|
||||
}
|
||||
modal.result.then((account: Account) => {
|
||||
this.Logger.log("Modal closed => save account", account);
|
||||
this.save(account);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="modal-body">
|
||||
<p>Voulez-vous supprimer le compte #{{ account.id }} ayant pour nom :<br/>{{ account.name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-danger" type="button" ng-click="$delete()">
|
||||
Supprimer
|
||||
</button>
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,72 +0,0 @@
|
||||
<!-- vim: set tw=80 ts=2 sw=2 sts=2: -->
|
||||
<!--
|
||||
This file is part of Accountant.
|
||||
|
||||
Accountant is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
Accountant is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with Accountant. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<div class="modal top am-fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="modal-title">{{ title }}</h3>
|
||||
</div>
|
||||
|
||||
<form name="form" class="form-horizontal simple-form" novalidate
|
||||
ng-submit="$save()">
|
||||
<div class="modal-body" id="modal-body">
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.name.$invalid && !form.name.$pristine }">
|
||||
<label class="col-sm-4 control-label" for="name">Account name</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" id="name" name="name"
|
||||
ng-model="account.name"
|
||||
type="text" placeholder="Account name"
|
||||
required />
|
||||
|
||||
<div class="help-block" ng-messages="form.name.$error" ng-if="form.name.$invalid">
|
||||
<p ng-message="required">The account name is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" ng-class="{ 'has-error' : form.authorized_overdraft.$invalid && !form.authorized_overdraft.$pristine }">
|
||||
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">-</div>
|
||||
<input class="form-control" id="authorized-overdraft"
|
||||
name="authorized_overdraft"
|
||||
ng-model="account.authorized_overdraft"
|
||||
type="number" placeholder="Authorized overdraft"
|
||||
required min="0"/>
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
|
||||
<div class="help-block" ng-messages="form.authorized_overdraft.$error" ng-if="form.authorized_overdraft.$invalid">
|
||||
<p ng-message="required">The authorized overdraft is required.</p>
|
||||
<p ng-message="min">The authorized overdraft must be equal or greater than 0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<input class="btn btn-primary" type="submit" ng-disabled="form.$invalid"/>
|
||||
<button class="btn btn-default" type="button" ng-click="$hide()">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,24 +1,40 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
|
||||
import { RestangularModule } from 'ngx-restangular';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { AccountService } from './account.service';
|
||||
import { AccountBalancesService } from './accountBalances.service';
|
||||
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
|
||||
import { AccountEditModalComponent } from './accountEditModal.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
NgLoggerModule,
|
||||
RestangularModule
|
||||
RestangularModule,
|
||||
NgbModule
|
||||
],
|
||||
providers: [
|
||||
AccountService,
|
||||
AccountBalancesService,
|
||||
],
|
||||
declarations: [
|
||||
AccountDeleteModalComponent,
|
||||
AccountEditModalComponent
|
||||
],
|
||||
entryComponents: [
|
||||
AccountDeleteModalComponent,
|
||||
AccountEditModalComponent
|
||||
]
|
||||
})
|
||||
export class AccountModule {}
|
||||
|
||||
|
||||
53
src/accounts/accountDeleteModal.component.ts
Normal file
53
src/accounts/accountDeleteModal.component.ts
Normal file
@ -0,0 +1,53 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
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>
|
||||
`
|
||||
})
|
||||
export class AccountDeleteModalComponent {
|
||||
@Input() account: Account
|
||||
|
||||
constructor(public activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
if(this.account.id) {
|
||||
return "Account #" + this.account.id;
|
||||
} else {
|
||||
return "New account";
|
||||
}
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.account);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
96
src/accounts/accountEditModal.component.ts
Normal file
96
src/accounts/accountEditModal.component.ts
Normal file
@ -0,0 +1,96 @@
|
||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { Account } from './account';
|
||||
|
||||
@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">
|
||||
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #accountForm="ngForm">
|
||||
<div class="form-group"
|
||||
[ngClass]="{ 'has-error': name.errors }">
|
||||
<label class="col-sm-4 control-label" for="name">Account name</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control"
|
||||
type="text" placeholder="Account name"
|
||||
id="name" name="name"
|
||||
[(ngModel)]="account.name" #name="ngModel"
|
||||
required>
|
||||
|
||||
<div class="help-block" *ngIf="name.errors && name.touched">
|
||||
<p [hidden]="!name.errors.required">The account name is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group"
|
||||
[ngClass]="{ 'has-error': authorizedOverdraft.errors }">
|
||||
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">-</div>
|
||||
|
||||
<input class="form-control"
|
||||
type="number" placeholder="Authorized overdraft"
|
||||
id="authorized-overdraft" name="authorized_overdraft"
|
||||
[(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
|
||||
required min="0">
|
||||
|
||||
<div class="input-group-addon">.00€</div>
|
||||
</div>
|
||||
|
||||
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
|
||||
<p [hidden]="!authorizedOverdraft.errors.required">
|
||||
The authorized overdraft is required.
|
||||
</p>
|
||||
|
||||
<p [hidden]="!authorizedOverdraft.errors.min">
|
||||
The authorized overdraft must be equal or greater than 0.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
@Input() account: Account
|
||||
|
||||
constructor(public activeModal: NgbActiveModal) {}
|
||||
|
||||
title(): string {
|
||||
if(this.account.id) {
|
||||
return "Account #" + this.account.id;
|
||||
} else {
|
||||
return "New account";
|
||||
}
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
this.activeModal.close(this.account);
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.activeModal.dismiss("closed");
|
||||
}
|
||||
}
|
||||
@ -28,6 +28,7 @@ var ngResource = require('angular-resource'),
|
||||
ngStrap = require('angular-strap');
|
||||
|
||||
import { Logger } from '@nsalaun/ng-logger';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
var accountsTmpl = require('./accounts.html');
|
||||
|
||||
@ -44,6 +45,8 @@ export default angular.module('accountant.accounts', [
|
||||
|
||||
.factory('Logger', downgradeInjectable(Logger))
|
||||
|
||||
.factory('NgbModal', downgradeInjectable(NgbModal))
|
||||
|
||||
.factory('AccountBalancesService', downgradeInjectable(AccountBalancesService))
|
||||
|
||||
.factory('AccountService', downgradeInjectable(AccountService))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user