alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Migrate to material.

Browse Source
This commit is contained in:
Alexis Lahouze 2017-09-20 21:52:34 +02:00
parent 2f5538fc08
commit 6a93eac767
5 changed files with 20 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/accounts/account.dataSource.ts
View File

@ -1,3 +1,5 @@
// vim: set tw=80 ts=2 sw=2 sts=2:
import { Injectable } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Rx';

4
src/accounts/account.module.ts
View File

@ -25,7 +25,6 @@ import { AccountDataSource } from './account.dataSource';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
import { AccountFormComponent } from './accountForm.component';
import { AccountRowComponent } from './accountRow.component';
import { DailyBalanceService } from './dailyBalance.service';
import { AccountListState } from './account.states'
@ -45,7 +44,7 @@ import { AccountListState } from './account.states'
MdTableModule,
NgLoggerModule,
ToastrModule,
NgbModule
NgbModule,
],
providers: [
AccountService,
@ -58,7 +57,6 @@ import { AccountListState } from './account.states'
AccountDeleteModalComponent,
AccountEditModalComponent,
AccountFormComponent,
AccountRowComponent
],
entryComponents: [
AccountListComponent,

51
src/accounts/accountDeleteModal.component.ts
View File

@ -1,53 +1,30 @@
// 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';
import { Component, Inject } from '@angular/core';
import { MD_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'account-delete-modal',
template: `
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
</div>
<h3 md-dialog-title>Delete account #{{ data.account.id }}</h3>
<div class="modal-body" id="modal-body">
<p>
Do you really want to delete account #{{ account.id }} with name:<br/>
{{ account.name }}
</p>
</div>
<md-dialog-content>
Do you really want to delete account #{{ data.account.id }} with name:<br/>
{{ data.account.name }}
</md-dialog-content>
<div class="modal-footer">
<button class="btn btn-danger" (click)="submit()">
<md-dialog-actions>
<button md-raised-button color="warn" [md-dialog-close]="data.account">
Yes
</button>
<button class="btn btn-default" (click)="cancel()">
<button md-raised-button md-dialog-close>
No
</button>
</div>
</md-dialog-actions>
`
})
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");
}
constructor(
@Inject(MD_DIALOG_DATA) private data: any
) {}
}

5
src/accounts/accountList.component.ts
View File

@ -164,9 +164,10 @@ export class AccountListComponent {
dialogRef.afterClosed().subscribe((account: Account) => {
if(account) {
this.logger.debug("Deleting account", account);
//this.delete(account);
this.delete(account);
}
}, reason => {
this.logger.error("Delete dialog failed", reason);
});
};

176
src/accounts/accountRow.component.ts
View File

@ -1,176 +0,0 @@
// vim: set tw=80 ts=2 sw=2 sts=2 :
import { CurrencyPipe } from '@angular/common';
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { Account } from './account';
import { AccountBalances } from './accountBalances';
import { AccountBalancesService } from './accountBalances.service';
import { AccountService } from './account.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
@Component({
selector: 'tr[account-row]',
host: {
"[id]": "account.id",
"[class.warning]": "warning",
"[class.danger]": "danger"
},
template: `
<td>
<a [routerLink]="['/account', account.id, 'operations']">{{ account.name }}</a>
</td>
<td>
<span (ngClass)="valueClass(account, accountBalances?.current)">
{{ accountBalances?.current | currency:"EUR":true }}
</span>
</td>
<td>
<span (ngClass)="valueClass(account, accountBalances?.pointed)">
{{ accountBalances?.pointed | currency:"EUR":true }}
</span>
</td>
<td>{{ account.authorized_overdraft | currency:"EUR":true }}</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 {
@Input('account-row') account: Account;
@Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
private accountBalances: AccountBalances;
constructor(
private accountService: AccountService,
private accountBalancesService: AccountBalancesService,
private toastrService: ToastrService,
private logger: Logger,
private ngbModal: NgbModal
) {
this.logger.log("AccountRowComponent constructor");
}
ngOnInit() {
this.logger.log(this.account);
this.accountBalancesService
.get(this.account.id)
.subscribe((accountBalances: AccountBalances) => {
this.accountBalances = accountBalances;
})
}
get warning() {
return this.account && this.accountBalances
&& this.account.authorized_overdraft < this.accountBalances.current
&& this.accountBalances.current < 0;
};
get error() {
return this.account && this.accountBalances
&& this.accountBalances.current < this.account.authorized_overdraft;
};
/*
* Return the class for a value compared to account authorized overdraft.
*/
valueClass(value: number) {
if (!value) {
return;
}
if (value < this.account.authorized_overdraft) {
return 'text-danger';
} else if (value < 0) {
return 'text-warning';
}
};
confirmDelete() {
const modal = this.ngbModal.open(AccountDeleteModalComponent);
modal.componentInstance.account = this.account;
modal.result.then((account: Account) => {
this.delete(account);
}, (reason) => function(reason) {
});
};
/*
* Delete an account.
*/
delete(account: Account) {
var id = account.id;
this.accountService.delete(account).subscribe(account => {
this.toastrService.success('account #' + id + ' deleted.');
this.needsReload.emit();
}, function(result) {
this.toastrService.error(
'An error occurred while trying to delete account #' +
id + ':<br />' + result
);
});
};
/*
* Open the popup to modify the account, save it on confirm.
*/
modify() {
const modal = this.ngbModal.open(AccountEditModalComponent, {
size: 'lg'
});
modal.componentInstance.account = this.account;
modal.result.then((account: Account) => {
this.logger.log("Modal closed => save account", account);
this.save(account);
}, (reason) => function(reason) {
});
};
save(account: Account) {
this.accountService.update(account).subscribe((account: Account) => {
this.toastrService.success('Account #' + account.id + ' saved.');
this.needsReload.emit();
}, result => {
this.logger.error('Error while saving account', account, result);
this.toastrService.error(
'Error while saving account: ' + result.message
);
});
};
}